《jQuery Cookbook》 学习笔记（一）
1.jQuery基础
1.1 在HTML页面中包含jQuery程序库代码
从jQuery.com上下载jq版本文件，用<script>标签引入。
<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
1.2 用选择器和jq函数选择DOM元素
$('xx');//xx可以是标签，可以是类名，可以是id值等选择器。
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<script type="text/javascript">
alert('page contains ' + $('a').length + ' <a>elements!');
</script>
Paste_Image.png
1.3 在指定上下文中选择DOM元素
<form>
<input type="checkbox" name="" />
<input type="radio" name="" />
<input type="text" name="" />
<input type="button" name="" />
</form>
<form>
<input type="checkbox" name="" />
<input type="radio" name="" />
<input type="text" name="" />
<input type="button" name="" />
</form>
<input type="checkbox" name="" />
<input type="radio" name="" />
<input type="text" name="" />
<input type="button" name="" />
<script type="text/javascript">
alert('selected ' + $('input',$('form')).length+ ' inputs');//8
alert('selected ' + $('input',document.forms[0]).length + ' inputs');//4
alert('selected ' + $('input','body').length + ' inputs');//12
</script>
$('input',xxx):选择input标签中满足xxx的。
eg：
$('input',$('form'))：i选择nput标签包含在form标签中的
$('input',document.forms[0])：选择包含在第一个form标签中的input标签
$('input','body')：选择整个body的input标签
$(xxx).length ：返回包含的元素的数目。
1.4 过滤DOM元素包装器集
$('xx').filter('yyy'):滤出含有yyy的xx
<a href="#" class="external">link</a>
<a href="#">link</a>
<a href="#" class="external">link</a>
<a href="#">link</a>
<a href="#">link</a>
<script type="text/javascript">
alert($('a').filter('.external').length + ' external links');//选择出a标签中含有external类的，元素个数为2
</script>
filter()方法也可以传递一个用于过滤包装器集的函数:
alert(
$('a')
.filter(function(index){ return $(this).hasClass('external');})
.length + ' external links'
)
现在传递给filter（）方法的是一个匿名函数。调用这个函数的上下文与当前元素相同，也就是说当在函数中使用$(this)时，实际应用的是包装器集中的每个DOM元素。在函数中，检查包装器集中每个< a>元素的类值(hasClass())是否为external。如果是，返回逻辑真值，该元素保留在集合中；否则从集合中删除元素。即：如果函数返回假值，则删除元素，如果返回其他值，该元素就会留在包装器集中。
1.5 查找当前选择包装器集中的后代元素
$(‘xxx’).find(‘yyy’)：查找xxx内部包含有yyy的
<p>a paragraph a paragraph a paragraph</p>
<p>a paragraph <em>a paragraph</em> a paragraph</p>
<p>a paragraph <em>a paragraph</em> a paragraph</p>
<p>a paragraph a paragraph a paragraph</p>
<script type="text/javascript">
alert($('p').find('em').length);//查找到所有的p元素，然后找到包含<em>标签的p元素，返回它的个数。即返回内部包含<em>标签的<p>元素的个数
</script>
也可以：
alert($('em',$('p')).length);//将上下文引用作为jq函数的第二个参数
alert($('p em').length);
tip:fliter()和find()的区别：
.find()将操作/选择当前集合的子元素，而.filter()只操作当前元素集。
1.6 返回破坏性修改之前的选择
end()方法返回使用破坏性方法之前选择的一组DOM元素。
alert($('p').filter('.middle').length);//1
alert($('p').filter('.middle').end().length);//3
alert($('p').filter('.middle').find('span').end().end().length);//3
- $('p'):找到所有的< p>
- $('p').filter('.middle'):找到所有带有‘middle’类的< p>
- $('p').filter('.middle').find('span'):找到所有带有‘middle’类的< p>内部的<span>
- $('p').filter('.middle').end():返回前一个破坏性方法前的包装器集，即返回filter()方法前的包装器集，即所有的< p >
- $('p').filter('.middle').find('span').end():返回前一个破坏性方法前的包装器，即返回find()方法前的包装器集，即所有带有‘middle’类的< p>
- $('p').filter('.middle').find('span').end().end()：撤销filter()方法和find()方法，即返回所有的< p >
tip:如果使用end()方法之前没有执行破坏性操作，将会返回一个空集。破坏性操作指的是任何改变匹配jQuery元素集合的操作，也就是返回jQuery对象的任何遍历或者操作方法，包括add(),andSelf(),children(),closes(),filter(),find(),map(),next(),nextAll(),not(),parent(),parents(),prev(),prevAll(),siblings(),slice(),clone(),appendTo(),prependTo(),insertBefore(),insertAfter()和replaceAll()。
1.7 将前一个选择集包含到当前选择集
andSelf()方法合并前一个DOM元素选择集和当前选择集。
<div>
<p>text</p>
<p>text</p>
</div>
<script type="text/javascript">
$('div').find('p').andSelf().css('border','1px solid #993300');//把div和div中的p都加上边框
</script>
tip:当使用andSelf()方法时，它只向当前操作集合中添加前一个集合，而不是以前选择的所有集合。
1.8 根据当前上下文遍历DOM获得新的DOM元素集
<div>
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</div>
<script type="text/javascript">
$('li:eq(1)');//用eq()索引自定义选择器选择第二个<li>元素，索引从0开始
$('li:eq(1)').next();//选择第三个<li>
$('li:eq(1)').prev();//选择第一个<li>
$('li:eq(1)').parent();//选择<ul>
$('li:eq(1)').parent().children();//选择所有的<li>
$('li:eq(1)').nextAll();//选择第二个<li>之后的所有<li>
$('li:eq(1)').prevAll();//选择第二个<li>之前的所有<li>
$('li:eq(1)').parent().children(':last')
</script>
1.9 创建、操作和插入DOM元素
1.9.1 创建
$('<p><a>jQuery</a></p>');
1.9.2 操作
$('<p><a>jQuery</a></p>').find('a').attr('href','http://www.jquery.com').end()
1.9.3 插入
$('<p><a>jQuery</a></p>').find('a').attr('href','http://www.jquery.com').end().appendTo('body')
1.10 删除DOM元素
<div>
<a href="#" class="remove">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">last</a>
</div>
<script type="text/javascript">
$('a').remove();//移除所有的<a>
$('a').remove('.remove');//移除所有带有“remove”类的<a>
</script>
1.javascript执行之前，元素将一直留在页面中。
2.在使用remove（）从DOM中删除选择的元素时，它们并没有从jQuery包装器集中删除，可以在必要的时候将它们重新添加到DOM中。
3.这种方法不仅从DOM中删除元素，而且删除被删除元素包含的所有事件处理程序和内部缓存数据。
1.11 替换DOM元素
<ul>
<li class="remove">name</li>
<li>name</li>
<li class="remove">name</li>
<li>name</li>
<li class="remove">name</li>
<li>name</li>
</ul>
<script type="text/javascript">
$('li.remove').replaceWith('<li>removed</li>');//把带有remove类的<li>替换成<li>removed</li>
</script>
也可以用replaceAll():
$('<li>removed</li>').replaceAll('li.remove');
1.12 克隆DOM元素
clone()方法复制DOM元素，结果是返回用于链接的DOM结构的一个副本，而不是原来选中的DOM元素。
<ul>
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
</ul>
<script type="text/javascript">
$('ul').clone().appendTo('body');//克隆整个<ul>然后将复制的<ul>添加到<body>
</script>
克隆方法不仅可以移动DOM元素，而且可以包括附加到克隆的DOM元素中的事件。
<ul id="a">
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
</ul>
<ul id="b"></ul>
<script type="text/javascript">
$('ul#a li').click(function() {alert('list item clicked')})为id为"a"的ul下的li添加点击事件
.parent()//选择它们的父元素即<ul>
.clone(true)//克隆<ul>元素和所有子元素，包括点击事件，通过传递给clone()方法一个布尔值true完成。
.find('li')//选择克隆的<ul>中的<li>
.appendTo('#b')//将这些<li>添加到id为"b"的<ul>中
.end()//返回前一个元素选择集，即克隆的<ul>元素
.remove();//移除这个克隆的<ul>
</script>
1.13 获取、设置和删除DOM元素属性
1.13.1 设置属性：
$('xx').attr('属性名','属性值')
也可以设置多个属性：
$('xxx').attr({'href':'http://www.jquery.com','title':'jquery.com'})
1.13.2 获取属性：
$('xx').attr('属性名')
1.13.3 删除属性：
$('xx').removeAttr('属性名')
tip:
addClass():用新的类/值更新class属性值，包括任何已经设置的类。
hasClass():检查特定类的class属性值。
removeClass():从class属性中删除特定的类，同时保持已经设置的任何值。
toggleClass():如果特定类不存在则添加，如果存在则删除该类。
1.14 获取和设置HTML内容
1.14.1 设置HTML内容
$('p').html('<strong>hello</strong>');
1.14.2 获取HTML内容
$('p').html();
tip:html()方法在XML文档中不可用，但是可用于XHTML文档。
1.15 获取和设置文本内容
1.15.1 设置文本内容
$('p').text('hello')
1.15.2 获取文本内容
$('p').text()
1.16 在不造成全局冲突的情况下使用$别名
创建一个匿名的自调用函数，将jQuery代码写到这个函数里面。
(function($){
//code;
})(jQuery);
2. 用jQuery选择元素
在文档中选择一个特定的元素或者一组元素的最简方法是在jQuery包装器函数中使用CSS选择器：
$('#content p a'):选择#content中的<p>l里的所有<a>
选择了所需元素后，就可以对元素进行操作了：
$('#content p a').addClass('selected');
tip:选择器越复杂，jQuery处理字符串的时间就越长。
$('body div#wrapper div#content')没有必要，$('#content')即可，且快。
2.1仅选择子元素
2.1.1 直接后代组合符（>）
<a href="#"></a>
<ul id="nav">
<li><a href="#">1</a></li>//<a>是<li>的直接后代（子元素）
<li><a href="#">2</a></li>//<a>是<li>的直接后代（子元素）
<li><span><a href="#">3</a></span></li>//<a>是<li>的后代，不是直接后代（子元素）
</ul>
<script type="text/javascript">
$('#nav li > a').css('color','red');//选中#nav下的<li>的直接后代<a>，数目2
</script>
tip:后代是存在于另一个元素中的任何元素，而子元素是直接后代。
tip:$('>p','#content')和$('#content > p')本质上是一样的。
2.1.2 children():选择所有子元素
$('#content').children();//获取#content的所有子元素
$('#content').children('p');//获取#content的所有<p>子元素
var anchors = $('a');
anchors.children();//获取所有<a>的子元素
$('> *', anchors);//获取所有<a>的子元素
anchors.find('> *');//获取所有<a>的子元素
2.2 选择特定的兄弟元素
2.2.1 相邻兄弟元素组合符（+）
<div>
<h1>1</h1>
<h2>2</h2>
<p>3</p>
<h2>4</h2>
<p>5</p>
</div>
<script type="text/javascript">
$('h1 + h2');//选择与h1元素紧邻的所有h2元素，本例仅选择第一个h2，因为其他h2是<h1>的兄弟元素但不是相邻的兄弟元素。
</script>
2.2.2 siblings():选择所有兄弟元素
$('h1').siblings('h2,h3,p');//选择作为h1元素兄弟的所有h2,h3,p
2.2.3 nextAll():根据相对位置选择兄弟元素
<ul>
<li>first</li>
<li class="selected">second</li>
<li>third</li>
<li>fourth</li>
<li>fifth</li>
</ul>
<script type="text/javascript">
$('li.selected').nextAll('li');//选择在li.selected后的所有li
</script>
2.2.4 普通兄弟元素组合符（~）
$('li.selected~li');//效果同上，选择在li.selected后的所有li
2.3 按照索引顺序选择元素
2.3.1 过滤器
:first //匹配选中的第一个元素
:last //匹配选中的最后一个元素
:even //匹配索引为偶数的元素（索引从0开始）
:odd //匹配索引为奇数的元素（索引从0开始）
:eq(n) //按照索引（n）匹配单个元素
:lt(n) //匹配索引小于n的所有元素
:gt(n) //匹配索引大于n的所有元素
<ol>
<li>first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
</ol>
<script type="text/javascript">
$('ol li:first'); //选中第一个<li>
$('ol li:eq(0)');//选中第一个<li>
$('ol li:lt(1)');//选中第一个<li>
</script>
用例：表格行中交替样式是常见的需求：
<style type="text/css">
table tr.even {
background-color: #ccc;
}
td {
border:1px solid black;
width: 50px;
height: 30px;
}
table {
border-collapse:collapse;
}
</style>
</head>
<body>
<table>
<tr><td>0</td><td>even</td></tr>
<tr><td>1</td><td>odd</td></tr>
<tr><td>2</td><td>even</td></tr>
<tr><td>3</td><td>odd</td></tr>
<tr><td>4</td><td>even</td></tr>
</table>
<script type="text/javascript">
$('tr:even').addClass('even');
</script>
Paste_Image.png
tip:过滤器左边需要一个初始集合，这个集合可以在已经实例化的jQuery对象中，例如：$('ul li').filter(':first');//这个过滤方法将运行在< li >上，选出第一个< li >
2.4 选择当前动画元素
:animated过滤器将只匹配正在连续变化的元素：
$('div:animated');//选择当前正在连续变化的所有<div>元素
2.5 根据包含的内容选择元素
2.5.1 contains():
$('span:contains("Bob")');//选择包含“Bob”的所有span元素
tip:这个选择器区分大小写，即如果没有bob，而选择器里面写了bob，就会什么都找不到。另外，contains的括号里面可以不加引号，但是加引号是一个好习惯。
2.5.2 :has()
$('div:has(p a)');//匹配在<p>元素中封装<a>元素的所有<div>元素
2.6 选择不匹配的元素
2.6.1 :not过滤器
$('div:not(#content)');//选择#content之外的所有div元素
:not()里面可以很复杂：
$('a:not(div.important a,a.nav)');//选择不在“div.important"中的a元素和类不为"nav"的<a>元素
tip:向:not过滤器传递复杂的选择器只在jQuery版本1.3以及更高的版本中才可行。在较低版本中，只能接受简单的选择器表达式。
2.6.2 .not()方法
var anchors = $('a');
anchors.click(function() {
anchors.not(this).addClass('not-clicked');//除了被点击的这个<a>元素不被添加'not-clicked'类，其他<a>元素都被加上'not-clicked'类；this指代单击的元素；.not()中也可以是选择器
});
2.7 根据元素可见性选择元素
$('div:hidden');
if($('#elem').is(':hidden')) {
//code here;
}
$('p:visible').hide();
2.8 根据属性选择元素
属性选择器：
[attr] //匹配具有指定属性attr的元素
[attr=val] //匹配指定属性attr为某个值val的元素
[attr!=val] //匹配没有指定属性attr或者属性值不为某个值val的元素
[attr^=val] //匹配指定属性attr为以某个值val开始的元素
[attr$=val] //匹配指定属性attr为以某个值val结束的元素
[attr~=val] //匹配包含指定值和两侧包含空格的元素
多个属性选择器：
$('*[title][href]');
2.9 按照类型选择表单元素
Paste_Image.png
$(':text');//选择所有文本输入控件；
$(':input');//选择所有的input,textarea,button,select元素
2.10 选择有具体特性的元素
2.10.1 给filter()传递一个函数
函数的返回值将定义某个元素是否被选择。传递的函数将对当前选择集中的每个元素运行，每当函数返回假值时，对应的元素就从选择集中删除，每当返回真值时，对应的元素不受影响（即留在集合中）。
$('*').filter(function(){
return !! $(this).css('backgroundImage');
//!!是JavaScript中将任何数据类型值转换为布尔表达式的快速方法。
//如果元素不存在'backgroundImage'，就返回假值，然后将选择器中的这个元素删除；
//如果元素存在'backgroundImage'，就返回真值，元素不受影响。
//所以这个代码选择所有具有背景图片的元素。
});
选择所有宽度在100-200像素之间的div元素：
$('div').filter(function(){
var width = $(this.width();
return width >100 $$ width <200;
}):
tip:越长和越复杂的选择器返回结果想、所需的时间也越长。
2.11 创建一个自定义过滤器选择器
jQuery.expr[':'].inline = function (elem) {
return jQuery(elem).css('display')==='inline';//创建了一个自定义选择器“inline”，选择display属性为inline的元素；
};
$('div a:inline').css('color','red');//使用inline选择器，选择了div元素下的display属性为inline的<a>元素，
//为其添加CSS样式：颜色：红色。
3.超越基础
3.1 循环读取选择结果集合
3.1.1 $().each()方法
var urls = [];//创建一个空数组
$('div#post a[href]').each(function(i) {//对于每一个#post下的具有href属性的<a>元素
urls[i] = $(this).attr('href');//数组元素为<a>元素的href属性
});
alert(urls.join(','));//用“，”连接数组元素
tip:$().each()就是jQuery的for循环，它将在集合中循环，并为集合中的每个元素提供一个单独的函数作用域。
3.2 将选择集缩减为某个特定项
使用jQuery选择元素之后，可以链接.eq()方法并传入想要处理的选择集索引。索引值从0开始，如果参数是个无效的索引，方法将返回一个空的元素集合，而不是null。
<body>
<ol id="east">
<li>haha</li>
<li>haha</li>
<li>haha</li>
<li>haha</li>
</ol>
<ol id="west">
<li>haha</li>
<li>haha</li>
<li>haha</li>
<li>haha</li>
</ol>
<script type="text/javascript">
$("ol#east > li").eq(3).css("border-bottom","1px solid #000000");
//选择id为“east”的ol列表中的第四个<li>为其添加底部边框。
</script>
3.3 将选中的jQuery对象转换为原始的DOM对象
3.3.1 .get()和$()[]
用jQuery在一个页面上选择元素返回的集合是一个jQuery对象而不是一个原始的DOM对象。因为它是jQuery对象，所以只能对选择集运行jQuery方法，要在选择集上运行DOM方法和属性，该集合必须转换为一个原始的DOM对象。
<div>
<p>haha</p>
</div>
<script type="text/javascript">
var inner = $('div')[0].innerHTML;//获取第一个div并转为DOM对象，并使用innerHTML属性；
//也可以：$('div').get(0).innerHTML;
alert(inner);
</script>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
<script type="text/javascript">
var lis = $("ol li").get().reverse();//获取ol中的li并逆序排列存储到lis中
$("ol").empty();//清空ol
$.each(lis,function(i) {
$("ol").append("<li>"+lis[i].innerHTML+ "</li>");//将lis中每一个li元素内容添加到ol中，实现逆序显示
})
</script>
3.4获得选择集中某个元素的索引
3.4.1 index()方法
<div class="test">
<p>haha</p>
</div>
<div>
<p>haha</p>
</div>
<div class="test">
<p>haha</p>
</div>
<div>
<p>haha</p>
</div>
<div>
<p>haha</p>
</div>
<script type="text/javascript">
$("div").click(function() {//为每个div添加点击事件
alert("you clicked on div with an index of "+ $("div").index(this));
//点击的元素在全部div中的索引值
})
</script>
3.5 从现有数组中建立独特的数组
3.6 在选择集合的子集上执行某项操作
<p>this is a paragraph.</p>
<p>this is a paragraph.</p>
<p>this is a paragraph.</p>
<p>this is a paragraph.</p>
<script type="text/javascript">
$("p").slice(1,3).wrap("<i></i>");//从索引值为1的<p>元素开始到索引值为3的<p>元素为止，为元素的外层包装上<i></i>形成斜体。
</script>
tip:jQuery方法slice()有两个选项：第一个是起始索引位置，第二个参数是可选的结束索引位置。假定想要选择除了第一个之外的<p>标记，可以使用$("p".slice(1)，它将从jQuery选择集的第二个元素开始，选择余下的所有元素。
slice()的参数也可以是负数。如果参数是负数，将从选择集的结束位置开始计数。所以，$("p").slice(-1)选择的是选择集中的最后一个元素。此外，$("p").slice(1,-2)将从第二个位置开始选择，直到倒数第二个元素。
