jQuery学习笔记

【新增】jquery.tmpl.js笔记：

http://www.365mini.com/   [jQuery方法讲解很详细]

https://www.cnblogs.com/zhuzhiyuan/p/3510175.html

https://www.cnblogs.com/think8848/archive/2011/07/17/2108570.html

1： $ = jQuery    $() = jQuery()

【新增】

1、多条件选择器

用途：使用多个条件同时选择多个标签

用法：$(“条件1，条件2，条件3，……，条件n “);

特征：多个条件在“”内用逗号隔开；

用例：$(“div#id,span.tip,p”); //同时选择id为“id”的div标签,class为“tip”的span标签和p标签；

2、相对选择器

用途：使用第二个参数选出相对元素，从而不影响其他具有相同条件的元素

用法：$(“条件1”,条件2)；

特征：两个参数

相对选择器 

只要在$()指定第二个参数，第二个参数为相对的元素。比如html代码如下

代码如下:

<table id="table1">
<tr><td>dsds</td><td>dsfdef</td></tr>
<tr><td>dsds</td><td>dsfdef</td></tr>
<tr><td>dsds</td><td>dsfdef</td></tr>
<tr><td>dsds</td><td>dsfdef</td></tr>
<tr><td>dsds</td><td>dsfdef</td></tr>
</table> 

那么可以用如下的js代码操作td的背景色 
$("td", $(this)).css("background", "red"),//这里也可以是$("td", this).css('background','red');

这句代码用的就是相对选择器，选择出的td是以当前的tr为相对的元素。选择的td元素是当前的tr元素下的所有td元素，没有涉及到其他行的td元素 

代码如下:

<script type="text/javascript">
$(function () {
$("#table1 tr").click(function () {
$("td", $(this)).css("background", "red");
});
});
</script> 

3、层次选择器

用途：选择后代节点

用法：$(“条件1 条件2 条件3”);

特征：双引号之内，条件之间用空格隔开；

用例：$(“#com ul li”);

//选择Id为com的元素中的UL里面的所有li节点；

jQuery 选择同时包含两个class的元素的实现方法

[javascript] view plain copy

<element class="a b">

1. 交集选择： $(".a.b")   --选择同时包含a和b的元素。

2. 并集选择：$(".a, .b")  --选择包含a或者包含b的元素。

根据多个属性选择E[attr=val][attr=val] 

[javascript] view plain copy

$("div[title='ttt'][class='aaaa']").click()

所有div元素下所有属性title值是等于ttt并且属性class等于aaaa的元素

二： 选择元素

0：访问DOM元素。即由jquery对象得到DOM元素，使用.get(n)方法,从0开始。简写方式为$()[n],类似数组用法

1：CSS选择符（多个选择器组合用”,"隔开）

　　①，属性选择符 $('a[href^="mailto:"]')表示href以“mailto:”开头的a元素。同样$表示结尾，*表示通配符。属性可以写多个，如$('a[href$=".pdf"][href*="strive"]')表示href以.pdf结束且含有strive的a元素

　　②，层次选择器

　　　　1，祖先后代选择器（空格）。$(“ancestor descendant”). 返回符合条件的所有的后代元素。

　　　　2，父子选择器（ > ）。$(“parent > child”)。返回所有符合条件的子元素。（子元素只有一辈，后代元素有很多辈）。

　　　　3，隔壁选择器 （+）（后向）。$(“prev + next”)。返回同辈中 紧邻在prev元素之后的next元素。注意：只返回一个next,且要求prev和next同辈。 【效果类似next()方法】

　　　　4，邻居选择器（~）(后向)。$(“prev ~ siblings”)。返回在prev元素之后所有同辈元素。 【效果类似nextAll()方法】

　　　　

2： 在1中CSS选择符基础上进一步过滤

　　用在CSS选择器后面，进一步筛选，语法类似CSS中的伪类，以冒号（:）开头。
　　   ①, :eq(n) 第n个，从0开始计数

           ②, :even/:odd 偶/奇

　　　③, :nth-child(),参数可为数字或者odd/even，这是jQuery中唯一从1开始计数的选择器。（注意：浏览器选择时是从右向左的）

　　　 ④, :contains() 参数为字符串，可以不加引号，也可以加引号，区分大小写

　　    ⑤, :not() 否定式伪类选择符. 参数为选择符，可以不加引号，也可以加引号。如:not(.classname)。

　　    ⑥, :has()。参数为选择符，可以不加引号，也可以加引号。匹配含有选择器所匹配的元素的元素。如

　　　　　　　　　　 $("div:has('p')").返回包含p标签的div标签
　　 ⑦,:hidden 这个选择器可以单独使用,$(':hidden')，也可以在css选择符之后之后,$('p:hidden')。

　　　　　　　　:hidden 选择器选取隐藏的元素。

　　　　　　 以下几种情况的元素是隐藏元素：

• • • 　　　　设置为 display:none
    • 　　　　带有 type="hidden" 的表单元素
    • 　　　　width 和 height 设置为 0
    • 　　　　隐藏的父元素（这也会隐藏子元素）

　　　　　　注释：该选择器对 visibility:hidden 和 opacity: 0 的元素不起作用。

　　⑧，:input 获取表单，不只是input表单，还包括<select><textarea><button>。而input标签选择器只获取input表单。
　　⑨，:text,:password,:checkbox,:radio,:submit,:file,:image,:reset,:button,等等，获取input标签中的特定类型的表单　　 
　　⑩, :checked; :selected.匹配所有选中的被选中元素(复选框、单选框，select中的option)，对于select元素来说，获取选中推荐使用:selected

3: DOM遍历方法(筛选)

　　①  filter()方法。筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式(同多个CSS选择器).参数可接受函数

　　②  next()方法。返回下一个紧邻的同辈元素，(效果类似于CSS选择符中的隔壁选择器)

　　     nextAll()方法。返回后面所有的同辈元素，(效果类似于CSS选择符中的邻居选择器)

　　　  prev()方法。返回前一个紧邻的同辈元素，

　　     prevAll()方法。返回前面所有的同辈元素，

　　     siblings()方法。返回所有的同辈元素。

　　　  parent()方法。返回唯一的父元素，

　　     parents()方法。返回所有的直系祖先元素，（父元素只有一个，祖先元素可有很多）。沿 DOM 树向上遍历，直到文档的根元素为止，将每个祖先元素添加到一个临时的集合；如果应用了选择器，则会基于该选择器对这个集合进行筛选。

　　　 closest(‘selector’)方法。获得匹配选择器的第一个直系祖先元素。

　　　 closest和parents的主要区别是：1，前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；2，前者逐级向上查找，直到发现匹配的元素后就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤；3，前者返回0或1个元素，后者可能包含0个，1个，或者多个元素。

　　     children()方法。返回所有的子元素。（注意：只返回子元素，子元素之后的后代元素不选择【可用CSS选择符中的后代选择器】）

         .find() 和 .children() 方法类似，不过后者只沿着 DOM 树向下遍历单一层级。

　　　

　　③  addBack()方法。jQuery对象维护一个堆栈内部来跟踪匹配的元素集合的变化。当一个DOM遍历方法被调用时，新的元素集合推入到堆栈中。

 　　如果还需要包含先前的元素集合，.addBack() 可以提供帮助。考虑一个页面，一个简单的列表就可以了：

　　　　　　　　　　　　　　　　<ul>

　　　　　　　　　　　　　　　　　　<li>list item 1</li>

　　　　　　　　　　　　　　　　　　<li>list item 2</li>

　　　　　　　　　　　　　　　　　　<li class="third-item">list item 3</li>

　　　　　　　　　　　　　　　　　　<li>list item 4</li>

　　　　　　　　　　　　　　　　　　<li>list item 5</li>

　　　　　　　　　　　　　　　　</ul>

　　　　　　　　　　　　　　　　下面的代码的返回结果是后面3，4和5项是一个红色的背景：

　　　　　　　　　　　　　　　　$('li.third-item').nextAll().addBack().css('background-color', 'red');

　　首先，初始选择位于第3项，初始化堆栈集合只包含这项。调用.nextAll() 后将第4和第5项推入堆栈。

　　最后，调用.addBack() 合并这两个组元素在一起，创建一个jQuery对象，指向所有三个项元素（按照

　　文档中的顺序）：{[<li.third-item>,<li>,<li> ]}

　　④：end()方法。回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。

　　如果之前没有破坏性操作，则返回一个空集。所谓的"破坏性"就是指任何改变所匹配的jQuery元素的操作。

　　这包括在 Traversing 中任何返回一个jQuery对象的函数--'add', 'andSelf','children', 'filter', 'find', 'map', 'next', 'nextAll', 'not', 'parent','parents', 'prev', 'prevAll', 'siblings' and 'slice'--再加上 Manipulation 中的 'clone'。

　　　　　　　　　　例子： 

　　　　　　　　　　　　$('td:contains(Henry)') //取得包含Henry的所有单元格
　　　　　　　　　　　　.parent() //取得它的父元素
　　　　　　　　　　　　.find('td:eq(1)') //在父元素中查找第2个单元格
　　　　　　　　　　　　.addClass('highlight') //为该单元格添加hightlight类
　　　　　　　　　　　　.end() //恢复到包含Henry的单元格的父元素
　　　　　　　　　　　　.find('td:eq(2)') //在父元素中查找第3个单元格
　　　　　　　　　　　　.addClass('highlight'); //为该单元格添加hightlight类

　　⑤：find()方法。搜索所有与指定表达式匹配的元素,返回后代元素。这个函数是找出正在处理的元素的后代元素的好方法。.find() 和 .children() 方法类似，不过后者只沿着 DOM 树向下遍历单一层级。

　　⑥：hasClass()方法。

　　　　参数为类名，必须加引号。检查选择的元素集合中是否含有某个特定的类，如果有(至少有一个就可以)，则返回

　　　　true，否则返回false.  注意如果查找到的元素是父元素,那么只在父元素中查找是否含有类，不涉及它的子元素。

　　⑦：is()方法。这个也可以代替hasClass()方法，它比hasClass()方法更灵活，可以接受任何选择符表达式。

　　　　根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就

　　　　返回true,否则返回false。【单个元素就是 是不是，元素集合就是 包不包含】。

　　　　注意（同上）：如果查找到的元素是父元素,那么只在父元素中查找是否含有参数表达式，不涉及它的子元素。

　　　　经验：要加引号。多个选择器可以用逗号隔开。

三：事件,

1，为了保证JavaScript代码执行以前页面已经应用了样式,最好是在 <head>元素中把 <link rel="stylesheet"> 标签

　　和 <style> 标签放在 <script> 标签前面。 

2，每次调用$(document).ready()都会向内部的行为队列中添加一个新函数,当页面加载完成后,所有函数都会被执行。

　　而且,这些函数会按照注册它们的顺序依次执行。通过window.onload虽然也可以注册多个函数,但却不能保证按顺序执行。

3，向.ready()回调函数中传入参数

　　在某些情况下,可能有必要在同一个页面中使用多个JavaScript库。由于很多库都使用$标识
　　符(因为它简短方便)
　　,因此就需要一种方式来避免名称冲突。
　　为解决这个问题,jQuery提供了一个jQuery.noConflict()方法,调用该方法可以把对$
　　标识符的控制权让渡还给其他库。使用jQuery.noConflict()方法的一般模式如下:
　　<script src="prototype.js"></script>
　　<script src="jquery.js"></script>
　　<script>
　　jQuery.noConflict();
　　</script>
　　<script src="myscript.js"></script>
　　首先,包含jQuery之外的库(这里是Prototype)
　　。然后,包含jQuery库,取得对$的使用权。
　　接着,调用.noConflict()方法让出$,以便将控制权交还给最先包含的库(Prototype)
　　。这样
　　就可以在自定义脚本中使用两个库了——但是,
　　在需要使用jQuery方法时,
　　必须记住要用jQuery
　　而不是$来调用。
　　在这种情况下,
　　还有一个在.ready()方法中使用$的技巧。
　　我们传递给它的回调函数可以接
　　收一个参数——jQuery对象本身。利用这个参数,可以重新命名jQuery为$,而不必担心造成冲
　　突,如下面的代码所示:
　　jQuery(document).ready(function($) {
　　//在这里,可以正常使用!
　　});
　　或者,也可以使用刚刚介绍的简写语法:
　　jQuery(function($) {
　　//使用$的代码
　　});

4，toggleClass(class|fn [,switch])方法。

　　　　如果存在（不存在）就删除（添加）一个类。

　　　　有两个参数，第一个参数是类名（必须加引号），同时也可以一个返回类名的回调函数。第二个参数是可选的，其返回值是true 或者 false。

　　　　如果是true，则为选中的元素添加指定的类；如果是false，则为选中的元素去除指定的类。

　　　　一个例子：此例当count的值为3的倍数时，第二个参数返回true，将会添加参数一中返回的类；不是3的倍数时，移除参数一中的类　　　　　　　

　　　　　　　　　　　　　　　　var count = 0;
　　　　　　　　　　　　　　　　$('div.foo').toggleClass(function() {
 　　　　　　　　　　　　　　　　 if ($(this).parent().is('.bar') {
  　　　　　　　　　　　　　　　　　　  return 'happy';
  　　　　　　　　　　　　　　　　　　} else {
   　　　　　　　　　　　　　　　　 return 'sad';
  　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　},count++ % 3 == 0);

5，事件目标。

　　事件处理程序中的变量event保存着事件对象。而event.target属性保存着发生事件的目标元素（属于DOM元素）。通俗理解就是实际被点击的具体元素。

　　关于this：当触发任何事件处理程序时,关键字this引用的都是处理事件的DOM元素，也就是代码中事件前的DOM元素，而且有两点要说明：①如果事件前的
　　元素是一个父元素，那么this具体就只指代这个元素，它的子元素是不包含在this里的。②如果事件前的是元素集合，那么this实际指代的是其中真正执行事
　　件的那一个元素

6，阻止事件传播；阻止默认行为。event.stopPropagation();event.preventDefault();

　　如果想要同时停止事件传播和默认操作,可以在事件处理程序中返回false,这是对在事件对象(event)上同时调用 .stopPropagation() 和 .preventDefault()的一种简写方式。

7，事件委托

　　原理；在DOM中的一个祖先元素上指定一个单击处理程序。由于事件会冒泡，未遭拦截的单击事件最终会

　　　　　到达这个祖先元素，而我们可以在此时再作出相应处理（通过条件语句

　　　　　　【如$(event.target).is('button')=>返回真或假】过滤出需要进行行为的子元素）。

　　jquery内置事件委托方法：on()方法。详细请点击此链接            off()方法详情点击此链接

　　　　　　　　　　　　　　on()简单介绍：（总共可以传四个参数）

　　　　　　　　　　　　　　　　　　　　　　如果给.on()方法传入的第二个参数是一个选择符表达式,jQuery会把click事件处理程序
　　　　　　　　　　　　　　　　    绑定到#switcher对象,同时比较event.target和选择符表达式(这里的'button')。如果匹
　　　　　　　　　　　　　　　　    配,jQuery会把this关键字映射到匹配的元素,否则不会执行事件处理程序。

　　　　　　　　　　　　　　　　　　 off()简单介绍：（总共可以传三个参数）,理解为on()方法的反方法，解除(符合条件的)事件绑定

　　事件绑定一点说明： 当在jQuery中把处理程序绑定到事件时,之前绑定的处理程序仍然有效，事件会有个累加效果。注意区分

　　　　　　　　　　　　事件个数的累加和 每个事件次数的累加。 one()方法表示事件触发一次，随后立即解除绑定。

 8，模拟用户操作：

　　trigger()方法：$().trigger('click')触发click事件，简写方式为$().click(),不加参数表示触发事件而不是绑定行为

9，响应键盘事件： 1   对按键响应keyup keydown（keyCode），按了哪个键

　　　　　　　　　     对文本输入响应keypress(charCode), 输入了什么内容

　　　　　　　　　 2    event.which(which属性对DOM原生的event.keyCode和event.charCode进行了标准化。)

　　　　　　　　　 3 　which:     http://www.365mini.com/page/jquery-event-which.htm

　　　　　　　　　 4  String.fromCharCode()；参数为Unicode字符值，返回字符串。没有传入参数则返回空字符串

　　　　　　　　　　此函数属于静态函数，而且只能够通过全局String对象进行调用，不能通过String对象的实例进行调用。

　　　　　　　　　 5：鼠标位置：event.pageX   event.clientX  event.offsetX  event.originalEvent.x 

　　　　　　　　　　　　详情参见：   http://www.cnblogs.com/everest33Tong/p/5951200.html

　　　　　　　　　6：mousedown、mouseup、click 执行顺序是从左到右的，更重要的是一旦mousedown事件激活，

　　　　　　　　　　正常情况下后面两个事件也肯定会被激活。mousemove 事件在是一直在元素上运行的。

　　　　　　　　　　　　一个例子：使用.mousedown()和.mouseup()跟踪页面中的鼠标事件。如果鼠标按键在按下 它的地方被释放,

　　　　　　　　　　　　　　　　　则为所有段落添加hidden类。如果是在按下它的地方之下被释放的, 删除所有段落的hidden类。

                                   var u_Y, d_Y;
                                   $(document).mousedown(function (e) {
                                     d_Y = e.pageY;
                                            })
                                        .mouseup(function (e) {
                                          u_Y = e.pageY;
                                           if (u_Y < d_Y) {
                                             $("p").removeClass('hidden');
                                                }; //按下后在下面释放
                                           if (u_Y == d_Y) {
                                           $('p').addClass('hidden');
                                     }
                                });

10，获取元素绑定了那些事件 

在1.8.0版本之前，我们要想获取某个DOM绑定的事件处理程序可以这样： 
$.data(domObj,'events');//或者$('selector').data('events')

而从1.8.0版本开始，jQuery突然不支持这样使用了，而是改到了一个叫'_data'的函数功能上了，即，1.8.0及以后的版本你可以这么用：

$._data(domObj,'events');//注意，这里不能像$('selector')._data('events')这样用了。

 要想写出兼容兼容各个jQuery版本的方式，这样获取即可：

 var eventsData = $.data(domObj,'events') || $._data(domObj,'events');//这个改变在easyui 1.3.1的源码中也有体 

 ps：

1.接受的domObj节点必须为dom节点对象，不能为jquery对象，如果是获取的jquery对象，要用get(0)或者[0]转为dom对象

2.只能获取到使用jquery方法绑定的参数 on ,live 等。如果是直接写到元素上的事件是不能获取的，使用其他非jquery设置的事件也是无法获取的

四：样式与动画

1，以下方法都是通过设置display属性实现的。

　 前者,display: none； 后者,display: 上一个display属性值。

                     

          这些函数的参数可以很复杂，具体详细用法参见此链接

　　　 对于jQuery提供的任何效果,都可以指定两种预设的速度参数: 'slow' 和 'fast' 。使
　　　　用.show('slow')会在600毫秒(0.6秒)内完成效果,而.show('fast')则是200毫秒(0.2秒)。
　　　　如果传入的是其他字符串( 一般是normal ),jQuery就会在默认的400毫秒内完成效果。
　　　　要指定更精确的速度,可以使用毫秒数值,例如.show(850)。注意,与字符串表示的速度
　　　　参数名称不同,数值不需要使用引号。

　hide(),show()     ==========    jQuery复合效果方法 toggle()

　　　　    例如.hide('duration')【duration可以为 slow 或 fast 或 normal】方法,会同时减少元素的
　　　　　高度、宽度和不透明度,直至这3个属性的值都达到0,与此同时会为该元素应用CSS规则display:none。
　　　　    而.show(' duration ')方法则会从上到下增大元素的高度,从左到右增大元素的宽度,
　　　　    同时从0到1增加元素的不透明度,直至其内容完全可见。

   fadeOut(),fadeIn()        =========== jQuery复合效果方法  fadeToggle()

             逐渐地增大其不透明度。会在一开始就设置元素尺寸

　slideUp(),slideDown()     ===========  jQuery复合效果方法 slideToggle()

                      这两个动画方法仅改变元素的高度 , 实现垂直滑入的效果

2，fadeTo()方法：   $(selector).fadeTo( speed,opacity[,easing,callback] )，

　　　　　　　　　　　　经测试，speed和opacity参数是必须的。　　       

　　　　把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。

　　　　这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

 3，创建自定义动画

　　①.animate()方法（测试浏览器 chromium）：点此查看.animate()更详细的用法

　　　　①除非你为属性值指定了单位(例如：px、em、%)，否则默认的数值单位为像素(px)。

　　　　②对于border等一些属性，只有原来设置了初始值，动画才能生效 。

　　　　③对于left top等属性，和在css中一样，要设置pisition属性为 非static(即默认的position值)  的时候动画才生效
　　　　          所有块级元素默认的CSS定位属性都是static,这个值精确地表明:在改变元素的定位属性之前试图移动它们,它们只会保持静止不动。

　　　　④color,background-color等属性无法用于动画(除非使用jQuery.Color()插件)

　　　　⑤fontSize 或者 font-size都可以。

　　　　⑥还可以将css属性值设为一些特定的字符串，例如："show"、"hide"、"toggle"，则jQuery会调用该属性默认的动画形式。

　　　　⑦css属性值也可以是相对的，你可以为属性值加上前缀"+="或"-="，以便于在原来的属性值上增加或减少指定的数值。
　　　　　例如：{ "height": "+=100" }【省略了单位，默认为px】，表示在原有高度的基础上增加100px。
　　　　    因为涉及特殊字符问题,所以必须以字符串形式指定相对值,也就是说必须把值放到一对括号内

　   　②  并发效果：效果同时发生，把所有属性都放在animate()的第一个对象参数里即可实现并发效果

　　       排队效果：即让效果一个接一个地发生

　　　　　　　　(1) 一组元素上的效果:

　　　　　　　　　　 当在一个.animate()方法中以多个属性的方式应用时,是同时发生的;

　　　　　　　　　　 当以方法连缀的形式应用时,是按顺序发生的(排队效果)——除非queue选项值为false。
　　　　　　　　　　　但是排队不能自动应用到其他的非效果方法,如.css()。可使用queue()方法加入排队，例如：　　　　　　　　　　　　　　　　 

　　　　　　　　　　　　　　　　　　　　　　.queue(function(next) {
　　　　　　　　　　　　　　　　　　　　　　　　$switcher.css({backgroundColor: '#f00'});
　　　　　　　　　　　　　　　　　　　　　　　　next();
                                         　　　　　　　　         　})

　　　　　　　　　　　 其中的next参数可以为任何其他参数，如aaaa，保持一致即可，如aaaa()。如果不加这个参数　　　　　　　　　　　　　
　　　　　　　　　　　　　　动画到这里就会中断，queue()方法后面连缀的方法都将无法实现。

　　　　　　     (2) 多组元素上的效果:

　　　　　　　　　　 默认情况下是同时发生的;
　　　　　　　　　　 当在另一个效果方法或者在.queue()方法的回调函数中应用时,是按顺序发生的(排队效果)。

五：操作DOM

1，attr(),removeAttr()  获取、设置、移除 HTML文档属性.例 attr('placeholder','xxx')注意placeholder时val()要为空

2，prop(),removeProp() 获取、设置、移除 DOM属性

3，val()  获取、设置表单控件的值。 三者用法区别与联系，点此链接 

4，创建元素

　　$()除了可以选择DOM，还可以创建DOM,如$('<a href="#top">back to top</a>')将会创建一个dom元素

5，插入新元素。

　　insertBefore(),insertAfter(),prependTo(),appendTo() ///

　　\ before(),after(),prepend(),append()

$(A).insertBefore(B) 在B元素外部、之前添加$(A)；

　　如果$(A)是当前页面中的某些元素，那么这些元素将从原位置上消失。简而言之，这相当于一个移动操作，而不是复制操作,以下都一样。
$(A) .prependTo(B)  在B元素内部、之前添加$(A)；
$(A) .appendTo(B)   在B元素内部、之后添加$(A)；
$(A) .insertAfter(B)   在B元素外部、之后添加$(A)。

$(A).before(B)    在$(A)外部、前面添加B; 

$(A).after(B)        在$(A)外部、后面添加B；

$(A).prepend(B)   在$(A)内部、前面添加B;

$(A).append(B)　在$(B)内部、后面添加B;

6，包装元素 

　　wrap(),wrapAll(),unwrap().在匹配元素外层添加指定的DOM。详细用法点此链接

7，显示迭代

　　.each()。----> 详细用法点此链接   <----注意与另一个全局$.each()函数区分

8, 复制元素 

　　.clone()。返回当前jQuery对象的一个克隆副本点此查看详细用法

9, 要用新元素或文本替换每个匹配的元素，使用：

 .html()
 .text()  
 .replaceAll()
 .replaceWith() 

• jQuery.text() 函数详解   【注】text()设置后 只有文字内容，其他所有的html标签都没有了
• jQuery.html() 函数详解

　　　　　　设置操作返回当前jquery对象，读取操作返回读取的字符串

• jQuery.replaceAll() 函数详解
• jQuery.replaceWith() 函数详解

10，要移除每个匹配的元素中的元素，使用：
 .empty()   jQuery.empty() 函数详解

　　$().empty() 等价于 $().html('')

11，要从文档中移除每个匹配的元素及其后代元素，但不实际删除它们，使用：
 .remove()    jQuery.remove() 函数详解

 .detach()　   jQuery.detach() 函数详解