《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').filter('.middle'):找到所有带有‘middle’类的
$('p').filter('.middle').find('span'):找到所有带有‘middle’类的内部的
$('p').filter('.middle').end():返回前一个破坏性方法前的包装器集，即返回filter()方法前的包装器集，即所有的
$('p').filter('.middle').find('span').end():返回前一个破坏性方法前的包装器，即返回find()方法前的包装器集，即所有带有‘middle’类的
$('p').filter('.middle').find('span').end().end()：撤销filter()方法和find()方法，即返回所有的

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".slice(1)，它将从jQuery选择集的第二个元素开始，选择余下的所有元素。
slice()的参数也可以是负数。如果参数是负数，将从选择集的结束位置开始计数。所以，$("p").slice(-1)选择的是选择集中的最后一个元素。此外，$("p").slice(1,-2)将从第二个位置开始选择，直到倒数第二个元素。

3.7 配置jQuery，避免与其他程序库冲突

最后编辑于：2017.12.04 05:37:04

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 217,734评论 6赞 505
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,931评论 3赞 394
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 164,133评论 0赞 354
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,532评论 1赞 293
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,585评论 6赞 392
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,462评论 1赞 302
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,262评论 3赞 418
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 39,153评论 0赞 276
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,587评论 1赞 314
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,792评论 3赞 336
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,919评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,635评论 5赞 345
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,237评论 3赞 329
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,855评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,983评论 1赞 269
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 48,048评论 3赞 370
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,864评论 2赞 354

《jQuery Cookbook》 学习笔记（一）

1.jQuery基础

1.1 在HTML页面中包含jQuery程序库代码

1.2 用选择器和jq函数选择DOM元素

1.3 在指定上下文中选择DOM元素

1.4 过滤DOM元素包装器集

1.5 查找当前选择包装器集中的后代元素

tip:fliter()和find()的区别：

1.6 返回破坏性修改之前的选择

1.7 将前一个选择集包含到当前选择集

1.8 根据当前上下文遍历DOM获得新的DOM元素集

1.9 创建、操作和插入DOM元素

1.9.1 创建

1.9.2 操作

1.9.3 插入

1.10 删除DOM元素

1.11 替换DOM元素

1.12 克隆DOM元素

1.13 获取、设置和删除DOM元素属性

1.13.1 设置属性：

1.13.2 获取属性：

1.13.3 删除属性：

1.14 获取和设置HTML内容

1.14.1 设置HTML内容

1.14.2 获取HTML内容

1.15 获取和设置文本内容

1.15.1 设置文本内容

1.15.2 获取文本内容

1.16 在不造成全局冲突的情况下使用$别名

2. 用jQuery选择元素

2.1仅选择子元素

2.1.1 直接后代组合符（>）

2.1.2 children():选择所有子元素

2.2 选择特定的兄弟元素

2.2.1 相邻兄弟元素组合符（+）

2.2.2 siblings():选择所有兄弟元素

2.2.3 nextAll():根据相对位置选择兄弟元素

2.2.4 普通兄弟元素组合符（~）

2.3 按照索引顺序选择元素

2.3.1 过滤器

2.4 选择当前动画元素

2.5 根据包含的内容选择元素

2.5.1 contains():

2.5.2 :has()

2.6 选择不匹配的元素

2.6.1 :not过滤器

2.6.2 .not()方法

2.7 根据元素可见性选择元素

2.8 根据属性选择元素

2.9 按照类型选择表单元素

2.10 选择有具体特性的元素

2.10.1 给filter()传递一个函数

2.11 创建一个自定义过滤器选择器

3.超越基础

3.1 循环读取选择结果集合

3.1.1 $().each()方法

3.2 将选择集缩减为某个特定项

3.3 将选中的jQuery对象转换为原始的DOM对象

3.3.1 .get()和$()[]

3.4获得选择集中某个元素的索引

3.4.1 index()方法

3.5 从现有数组中建立独特的数组

3.6 在选择集合的子集上执行某项操作

3.7 配置jQuery，避免与其他程序库冲突

推荐阅读更多精彩内容

《jQuery Cookbook》学习笔记（一）