你的位置:首页 > Java教程

[Java教程]锋利的jQuery第2版学习笔记1~3章


第1章,认识jQuery

目前流行的JavaScript库

Prototype(http://www.prototypejs.org),成型早,面向对象的思想把握不到位,导致结构松散
Dojo(http://dojotoolkit.org),学习曲线陡,文档不全,最严重的是API不稳定
YUI(http://developer.yahoo.com/yui/)
Ext JS(http://www.extjs.com),侧重界面,比较臃肿,用于商业用途需要付费
MooTools(http://mootools.net/)
jQuery(http://jquery.com)

jQuery优势

1、轻量级
2、强大的选择器
3、出色的DOM操作
4、可靠的事件处理机制
5、完善的Ajax
6、不污染顶级变量
7、出色的浏览器兼容性,支持IE6.0+、Firefox3.6+、Safari5.0+、Opera、Chrome
8、链式操作方式
9、隐式迭代
10、行为层与结构层的分离
11、丰富的插件支持
12、完善的文档
13、开源

jQuery代码的编写

在jQuery库中,$就是就jQuery的一个简写形式,$("#foo")和jQuery("#foo")是等价的
规范:
1、对于同一个对象不超过3个操作的,可以直接写在一行
2、对于同一个对象的较多操作,建议每行写一个操作
3、对于多个对象的少量操作,可以每个对象写一行,涉及子元素的,可以考虑缩进
建议:jQuery对象使用$开头,例:var $variable = jQuery对象,var variable= DOM对象

jQuery对象和DOM对象的相互转换

1、jQuery对象转成DOM对象
jQuery对象不能使用DOM中的方法,jQuery提供了两种方法将jQuery对象转成DOM对象,即使用[index]和get(index)
(1)jQuery对象是一个类似数组的对象,可以通过[index]得到相应DOM对象
var $cr = $("#cr");   //jQuery对象var cr = $cr[0];     //DOM对象


(2)通过get(index)得到
var $cr = $("#cr");   //jQuery对象var cr = $cr.get(0);   //DOM对象


2、DOM对象转成jQuery对象
只需要使用$()将DOM对象包装起来即可得到jQuery对象
var cr = document.getElementById("cr");     //DOM对象var $cr = $(cr);                 //jQuery对象


注:DOM对象只能使用DOM方法,jQuery对象只能使用jQuery的方法
注:平时用到的jQuery对象都是通过$()函数制造出来的,$()就是一个jQuery对象制造工厂,也可以使用jQuery()函数,因为$和加jQuery等价

解决jQuery和其它库的冲突

注:默认情况下,jQuery用$作为自身的快捷方式
1、jQuery库在其他库之后导入
(1)在其他库和jQuery库加载完毕之后,可以在任何时候调用jQuery.noConflict()函数将变量$的控制权移交其他的JavaScript库
例:
<!-- 引入prototype库 --><script type="text/javascript" src="lib/prototype.js"></script><!-- 引入jQuery库 --><script type="text/javascript" src="lib/jQuery.js"></script><script type="text/javascript">  jQuery.noConflict();  //将变量$的控制权移交给prototype.js  jQuery(function(){   //使用jQuery    jQuery("p").click(function(){      alert(jQuery(this).text());    });  });  $('pp').style.display = 'none'; //使用prototype.js隐藏元素</script>

(2)想确保jQuery不与其他库冲突,又想自定义快捷方式:

<script type="text/javascript">  var $j = jQuery.noConflict();  //自定义快捷方式  $j(function(){         //使用jQuery,利用自定义快捷方式 $j    $j("p").click(function(){      alert.($j(this).text());    });  });  $('pp').style.display = 'none'; //使用prototype.js隐藏元素</script>

(3)若不想自定义备用名称,又想使用$,还希望不冲突
<1>
<script type="text/javascript">  jQuery.noConflict();         //将变量$的控制权移交给prototype.js  jQuery(function($){         //使用jQuery设定页面加载时执行的函数    $("p").click(function(){     //函数内部继续使用$()      alert.($(this).text());    });  });  $('pp').style.display = 'none';   //使用prototype.js隐藏元素</script>

<2>

<script type="text/javascript">  jQuery.noConflict();         //将变量$的控制权移交给prototype.js  (function($){            //定义匿名函数    $(function(){          //匿名函数内部的$均为jQuery      $("p").click(function(){        alert.($(this).text());      });    });  })(jQuery);             //执行匿名函数且传递实参jQuery  $('pp').style.display = 'none';   //使用prototype.js隐藏元素</script>

2、jQuery在其他库之前导入
直接使用jQuery而非$来做jQuery的工作,$()方法作为其他库的快捷方式,无需调用jQuery.noConflict()方法

第2章,jQuery选择器

jQuery选择器的优势

1、简洁的写法
使用$("#ID")代替document.getElementById(),使用$("tagName")代替document.getElementsByTagName()函数
2、支持CSS1到CSS3选择器
3、完善的处理机制,即,使用jQuery获取不存在的元素也不会报错
注:$("#tt")获取的永远是对象,即使网页上没有元素,因此当要使用jQuery检查某个元素在网页上是否存在,不能使用如下代码:
if($("#tt")){  /* do something */  }

应根据获取的元素长度来判断:

if($("#tt").length > 0){  /* do something */  }

或转换成DOM对象:

if($("#tt")[0]){  /* do something */  }

基本选择器
选择器描述返回示例
#id根据给定id匹配一个元素单个元素$("#test")选取id为test的元素
.class根据给定类名匹配元素集合元素$(".test")选取所有class为test的元素
element根据给定元素名匹配元素集合元素$("p")
*匹配所有元素集合元素$("*")
selector1,selector2...将每个选择器匹配到的元素合并后一起返回集合元素$("div,span,p.myClass")
 
层次选择器

选择器描述返回示例
$("ancestor descendant")选取ancestor元素里所有descendant(后代)元素集合元素$("div span")选取div里所有span元素
$("parent>child")与CSS的子选择器一样集合元素$("div>span")
$("prev+next")与CSS的相邻同胞选择器一样集合元素$(".one+div")
$("prev~sibling")与CSS的通用的同胞组合选择器一样集合元素$("#two~div")

可以使用next()方法代替$('prev+next')
$(".one+div");  ==> $(".one").next("div");
使用nextAll()代替$('#prev~sibling")
$("#prev~div"); ==> $("#prev").nextAll("div");
基本过滤选择器
选择器描述返回示例
:first选取第一个元素单个元素$("div:first")选取所有<div>元素中第1个<div>元素
:last选取最后一个元素单个元素$("div:last")解释类似:first
:not(selector)去除所有与给定选择器匹配的元素集合元素$("input:not(.myClass)")
:even选取索引是偶数的元素,索引从0开始集合元素$("input:even")
:odd选取索引是奇数的元素,索引从0开始集合元素$("input:odd")
:eq(index)选取索引是index的元素,index从0开始单个元素$("input:eq(1)")
:gt(index)选取索引大于index的元素,index从0开始集合元素$("input:gt(1)")
:lt(index)选取索引小于index的元素,index从0开始集合元素$("input:lt(1)")
:header选取所有标题元素,例h1,h2集合元素$(":header")
:animated选取正在执行动画的元素集合元素$("div:animated")
:focus选取获得焦点的元素集合元素$(":focus")
 
内容过滤选择器

选择器描述返回示例
:contains(text)选取含有文本内容为“text”的元素集合元素$("div:contains('me')")选取所有含有文本"me"的div元素
:empty选取不包含子元素或文本的空元素集合元素$("div:empty")
:has(selector)选取含有选择器所匹配的元素的元素集合元素$("div:has(p)")选取含有p元素的div元素
:parent选取含有子元素或文本元素的元素集合元素$("div:parent")
 

可见性过滤选择器
选择器描述返回示例
:hidden选取所有不可见元素集合元素$(":hidden")选取所有不可见元素
:visible选取所有可见元素集合元素$("div:visible")选取可见的div元素

 
属性过滤选择器
选择器描述返回示例
[attribute]选择拥有此属性的元素集合元素$("div[id]")选取拥有id属性的div元素
[attribute=value]选择拥有属性值为value的元素集合元素$("div[title=test]")
[attribute!=value]选择属性值不等于value的元素集合元素$("div[title!=test]"),没有属性title的元素也会被选取
[attribute^=value]选择属性值以value开始的元素集合元素$("div[title^=test]")
[attribute$=value]选择属性值以value结束的元素集合元素$("div[title$=test]")
[attribute*=value]选择属性值含有value的元素集合元素$("div[title*=test]")
[attribute|=value]选择属性等于给定字符串或以该字符串为前缀(该字符串后
跟一个连字符‘-’)的元素
集合元素$("div[title|="en"]")选取title属性等于en
或以en为前缀的元素
[attribute~=value]选取属性用空格分隔的值中包含一个给定值的元素集合元素$("div[title~="uk"]")
[attribute1]
[attribute2]
...
用属性选择器合并成复合选择器,满足多个条件,缩小范围集合元素$("div[id][title$="test"]")选取拥有属性
id并且属性title以"test"结束的div元素

 
子元素过滤选择器
选择器描述返回示例
:nth-child(index/even
/odd/equatioin)
选取每个父元素下第index个子元素或奇偶元素,
index从1开始
集合元素将为每一个父元素匹配子元素
:first-child选取每个父元素的第一个子元素集合元素将为每一个父元素匹配子元素
:last-child选取每个父元素的最后一个子元素集合元素将为每一个父元素匹配子元素
:only-child若某个元素是其父元素唯一的子元素,则被匹配集合元素$("ul li:only-child")在<ul>中选取是唯一
子元素的<li>元素


:nth-child()选择器功能如下:
1、:nth-child(even)选择索引是偶数的元素
2、:nth-child(2)选择索引是2的元素
3、:nth-child(3n+1)选择索引是(3n+1)的元素,n从1开始

表单对象属性过滤选择器
选择器描述返回示例
:enabled选取所有可用元素集合元素$("#form1 :enabled")
:disabled选取所有不可用元素集合元素$("#form1 :disabled")
:checked选取所有被选中元素,单选,复选集合元素$("input:checked")
:selected选取所有被选中选项元素,下来列表集合元素$("select option:selected")




:input选取所有<input><textarea><select><button>集合元素$(":input")
:text选取所有单行文本框集合元素$(":text")
:password选取所有密码框集合元素$(":password")
:radio选取所有单选框集合元素$(":radio")
:checkbox选取所有复选框集合元素$(":checkbox")
:submit选取所有提交按钮集合元素$(":submit")
:image选取所有图像按钮集合元素$(":image")
:reset选取重置按钮集合元素$(":reset")
:button选取所有按钮集合元素$(":button")
:file选取所有上传域集合元素$(":file")
:hidden选取所有不可见元素集合元素$(":hidden")


选择器中的注意事项

1、选择器中含有".","#","(","]"等特殊符号,需要转义,例:$("#id\\#b")
2、属性选择器中的@符号需要去掉

第3章,jQuery中的DOM操作

DOM操作分类

1、DOM Core(核心)
2、HTML-DOM
3、CSS-DOM

jQuery中的DOM操作

1、查找节点
(1)查找元素节点,使用选择器
(2)查找属性节点,再找到元素之后,可以使用attr()方法获取元素属性
2、创建节点
(1)创建元素节点
使用工厂函数$()来完成,$(html),根据传入的HTML标记字符串,创建一个DOM对象,并转成jQuery对象返回
例:$("<li></li>")
(2)创建文本节点,与(1)类似,将文本内容一起包含在HTML标记字符串中
(3)创建属性节点,与(1)类似,将节点属性一起包含在HTML标记字符串中

3、插入节点
方法描述示例
append()向每个匹配的元素内部追加内容<p>我想说:</p>
$("p").append("<b>你好</b>");
<p>我想说:<b>你好</b></p>
appendTo()将所有匹配元素追加到指定元素中,与append方法颠倒<p>我想说:</p>
$("<b>你好</b>").appendTo("p");
<p>我想说:<b>你好</b></p>
prepend()向每个元素内部前置内容<p>我想说:</p>
$("p").prepend("<b>你好</b>");
<p><b>你好</b>我想说:</p>
prependTo()将所有匹配元素前置到指定元素中,与prependTo方法颠倒<p>我想说:</p>
$("p").prependTo("<b>你好</b>");
<p><b>你好</b>我想说:</p>
after()在每个匹配元素之后插入内容<p>我想说:</p>
$("p").after("<b>你好</b>");
<p>我想说:</p><b>你好</b>
insertAfter()将所有匹配元素插入到指定元素之后<p>我想说:</p>
$("<b>你好</b>  ").insertAfter("p");
<p>我想说:</p><b>你好</b>
before()在每个匹配的元素之前插入内容<p>我想说:</p>
$("p").before("<b>你好</b>");
<b>你好</b> <p>我想说:</p>
insertBefore()将所有匹配元素插入到指定元素之前<p>我想说:</p>
$("<b>你好</b>  ").insertBefore("p");
<b>你好</b> <p>我想说:</p>
这些方法不只能将新建节点插入到文档中,也能移动原有节点
4、删除节点

(1)remove方法
删除节点,及所有后代节点,并清除绑定的事件、附加的数据,返回被删除节点的引用,在之后可以继续使用
$("ul li:eq(1)").remove();


也可以通过传递参数来选择性删除:
$("ul li").remove("li[title!=test]");


(2)datach方法
与remove一样,但不会清除绑定的事件、附加的数据
(3)empty方法
并不能算是删除节点,而是清空节点,清空指定元素的所有后代节点
5、复制节点
使用clone方法,使用参数true可以同时复制元素所绑定事件
6、替换节点
replaceWith()和replaceAll()
$("p").replaceWith("<strong>hello</strong>");$("<strong>hello</strong>").replaceAll("p");


以上两句是一样的效果
注:元素绑定事件一样会被清掉
7、包裹节点
使用wrap()方法
<strong>hello</strong>


$("strong").wrap("<b></b>");   //用b标签把strong元素包裹起来


<b><strong>hello</strong></b>


wrapAll()和wrapInner()
(1)wrapAll
将所有匹配元素用一个元素来包裹,与wrap不同,wrap是将所有匹配元素单独包裹:
<strong>hello</strong><strong>hello</strong>


$("strong").wrap("<b></b>");


<b><strong>hello</strong></b><b><strong>hello</strong></b>


而使用wrapAll之后:
<b><strong>hello</strong><strong>hello</strong></b>


注:若被包裹元素之间有其他元素,则其他元素会被放到包裹元素之后
(2)wrapInner方法
该方法将每一个匹配的元素的子内容用其他结构化标记包裹起来:
<strong>hello</strong>

$("strong").wrapInner("<b></b>");

<strong><b>hello</b></strong>


8、属性操作
(1)获取和设置属性
使用attr()方法
获取属性
var $p = $("p");var p_txt = $p.attr("title");


设置属性
$("p").attr("title","value");   //用于设置单个属性$("p").attr({"title":"you title","name":"you name"});   //用于设置多个属性,使用对象传递


(2)删除属性
使用removeAttr()方法
$("p").removeAttr("title");


9、样式操作
(1)获取和设置样式
使用attr()方法
(2)追加样式
使用addClass()方法
$("p").addClass("another");


(3)移除样式
使用removeClass
参数为要移除的class名,不带参数则把所有class移除
(4)切换样式
toggle()方法
$toggleBtn.toggle(function(){   //代码1},function(){   //代码2});


toggle的作用是,交替执行代码1和代码2,主要是用于控制行为上的重复切换
toggleClass()方法
用于控制样式上的切换,类名存在则删除,不存在则添加
$("p").toggleClass("another");


(5)判断是否含有某个样式
hasClass()方法用于判断是否含有某个class,有返回true,没有返回false
10、设置和获取HTML、文本和值
(1)html()方法,可用于XHTML,不可用于类似于JavaScript的innerHTML属性,可以用于获取和设置元素(传递参数)的HTML内容
(2)text()方法
类似于JavaScript的innerText属性,用于获取和设置元素(传递参数)的文本内容
(3)val()方法
类似于JavaScript的value属性,用于设置和获取元素的值,无论元素是文本框,下来列表还是单选框,都可以返回元素值,若为多选,返回一个包含所有选择的值的数组
11、遍历节点
(1)children()方法
取得匹配元素的子元素集合,只考虑子元素,不考虑后代元素,$("p").children();
(2)next()方法
用于取得匹配元素后面紧邻的同辈元素,$("p").next();
(3)prev()方法
用于取得匹配元素前面紧邻的同辈元素,$("p").prev();
(4)siblings()方法
用于取得匹配元素前后所有同辈元素,$("p").siblings();
(5)closest()方法
该方法用于取得最近的匹配元素。首先检查元素本身,接着逐级向上往祖先元素查找,没找到则返回空jQuery对象
(6)parent(),parents(),closest()区别
parent(),获取集合中每个匹配元素的父元素
parents(),获取集合中每个匹配元素的祖先元素
closese(),从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素
12、CSS-DOM操作
可以直接利用css()方法获取元素的样式属性:$("p").css("color");
无论是外部CSS导入,还是直接拼接在HTML元素中,都可以通过css()方法获得
设置样式与attr()方法类似
$("p").css("color","red");   //设置单个$("p").css({"color":"red","fontSize":"30px");   //设置多个


注:如果值是数字,则自动转化为像素值
获取元素高度,可以直接使用height属性
$("p").height();


注:1、jQuery1.2之后height可用于获取window和document的高度
        2、css方法获取的高度值与样式设置有关,而height获取的是元素在页面实际高度,与样式设置无关,且不带单位
与height对应的还有width()方法
其他几个经常使用的方法:
(1)offset()方法
用于获取元素在当前视窗的相对偏移,返回对象包含两个属性,top,left,只对可见元素有效
(2)position()方法
用于获取元素相对于最近一个position样式属性设置为relative或absolute的祖先节点的相对偏移,返回对象也包含连个属性top,left
(3)scrollTop()方法和scrollLeft()方法
分别用于获取元素的滚动条距顶端和距左侧的距离,还可以接受一个参数,指定滚动条滚动到指定位置