《jQuery Cookbook》学习笔记（一）

作者: 恰皮 | 来源:发表于2016-10-18 22:36 被阅读228次

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)将从第二个位置开始选择，直到倒数第二个元素。

《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》学习笔记（一）