下载文档原格式
一、jQuery 教程jQuery 是一个JavaScript 库。
jQuery 极大地简化了JavaScript 编程。
jQuery 很容易学习。
每一章中用到的实例<html><head><script type="text/javascript" src="jquery.js"></script> <script type="text/javascript">$(document).ready(function(){$("p").click(function(){$(this).hide();});});</script></head><body><p>If you click on me, I will disappear.</p></body></html>亲自试一试代码：<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){$("p").click(function(){$(this).hide();});});</script></head><body><p>如果您点击我，我会消失。
</p><p>点击我，我会消失。
</p><p>也要点击我哦。
</p></body></html>通过点击"TIY" 按钮来看看它是如何运行的。
Jquery 学习文档 学习文档 什么是 Jquery？ ？Jquery 是继 prototype 之后又一个优秀的 Javascrīpt 框架。
它是轻量级的 js 库(压缩后只有 21k) ，它兼 容 CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。
jQuery 使用户能更方便 地处理 HTML documents、events、实现动画效果，并且方便地为网站提供 AJAX 交互。
jQuery 还有一个比 较大的优势是， 它的文档说明很全， 而且各种应用也说得很详细， 同时还有许多成熟的插件可供选择。
jQuery 能够使用户的 html 页保持代码和 html 内容分离，也就是说，不用再在 html 里面插入一堆 js 来调用命令 了，只需定义 id 即可。
需要什么基础知识？ 有人要问学习 Jquery 需要什么基础知识？HTML+CSS+JAVASCRIPT，只要熟悉这些，学习 Jquery 就没有什么问题。
是什么了？ 还有人要问这 Jquery Ui 是什么了？jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。
包含底层用户交互、 动画、 特效和可更换主题的可视控件。
我们可以直接用它来构建具有很好交互性的 web 应用程序。
所有插件测试能兼容 IE 6.0+, Firefox 3+, Safari 3.1+, Opera 9.6+, 和 Google Chrome。
jQuery UI 主要分为 3 个部分：交互、微件和效果库。
jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。
包含底层用户交 互、动画、特效和可更换主题的可视控件。
我们可以直接用它来构建具有很好交互性的 web 应用 程序。
所有插件测试能兼容 IE 6.0+, Firefox 3+, Safari 3.1+, Opera 9.6+, 和 Google Chrome。
初学jquery之自学笔记(3)文章分类:Web前端63.为所有匹配的元素设置一个计算的属性值$(img).attr("title",function(){return this.src});64.为所有匹配的元素设置一个属性值$("img").attr("src","test.jpg");65.取得第一个匹配元素的属性值。
通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。
如果元素没有相应属性，则返回undefined$("img").attr("src");66.将一个"名/值"形式的对象设置为所有匹配元素的属性$("img").attr({src:"test.jpg",alt:"testImage"});67.从每一个匹配的元素中删除一个属性$("img").removeAttr("src");68.为每个匹配的元素添加指定的类名$("div").addClass("selected");69.从所有匹配的元素中删除全部或者指定的类删除匹配元素的所有类：$("div").removeClass();删除指定的类:$("div").removeClass("selected");70.如果存在(不存在)就删除(添加)一个类$("div").toggleClass("selected");71.取得第一个匹配元素的html内容。
这个函数不能用于XML文档。
但可以用于XHTML文档。
$("div").html();72.设置每一个匹配元素的html内容。
锋利的jQuery学习笔记一、认识JQuery页面加载事件（可以写多个ready()）$(document).ready(function(){alert(“hello world”);})链式操作：JQuery允许你在一句代码中操做任何与其相关联的元素，包括其子元素、父元素等$(“#myDiv”).addClass(“css1″).children(“a”).removeClass(“css2″);//选择名称为myDiv的元素，为其自身添加css1的样式，然后再选择其所有子元素a，为其移除css2样式JQuery中获得一个对象的所有子元素内容$(“#myDiv”).html()JQuery中的变量与 DOM中的变量var $myVar = “”;var myVar = “”;DOM对象转换成 JQuery对象var obj = documnet.getElementById(“myDiv”);var $obj = $(obj);JQuery对象转换成 DOM对象var $obj = $(“#myDiv”);var obj = $obj.get(0); //或者var obj = $obj[0];释放JQuery对$符号的控制权JQuery.noConflict();二、JQuery选择器JQuery完善的处理机制ocument.getElementById(“test”).style.color = “red”; //如果test不存在，则页面出现异常$(“#test”).css(“color”,”red”); //哪怕页面没有名称为test的元素，也不会报错。
它是一个JQuery对象判断页面是否选择的对象if( $(“.class”).length > 0 ){// todo something}基本选择器$(“#myDiv”)//根据给定的ID选择匹配的元素，返回：单个元素$(“.myClass”) //根据给定的样式名称选择匹配的元素，返回：集合元素$(“div”) //根据给定的元素名称选择匹配的元素，返回：集合元素$(“#myDiv,div.myClass,span”) //根据给定的规则选择匹配的元素，返回：集合元素$(“*”) //选择页面所有元素，返回：集合元素层次选择器$(“div span”) //选择所有DIV元素下的所有SPAN元素（所有后代元素），返回：集合元素$(“div>span”) //选择所有DIV元素下的SPAN子元素（仅子元素），返回：集合元素$(“.myClass+div”) //选择样式名称为myClass的下一个DIV元素，返回：集合元素$(“.myClass+div”) //等价于$(“.myClass”).next(“div”);$(“.myClass~div”) //选择样式名称为myClass之后的所有DIV元素，返回：集合元素$(“.myClass~div”) //等价于$(“.myClass”).nextAll();$(“.myClass”).siblings(“div”)//选择样式名称为myClass的元素的所有同辈DIV元素（无论前后），返回集合元素过滤选择器（index从0开始）$(“div:first”) //选择所有DIV元素下的第一个DIV元素，返回：单个元素$(“div:last”)//选择所有DIV元素下的最后一个DIV元素，返回：单个元素$(“div:not(.myClass)”) //选择所有样式不包括myClass的DIV元素，返回：集合元素$(“div:even”) //选择所有索引是偶数的DIV元素，返回：集合元素$(“div:odd”) //选择所有索引是奇数的DIV元素，返回：集合元素$(“div:eq(index)”) //选择所有索引等于index的DIV元素，返回：集合元素$(“div:gt(index)”) //选择所有索引大于index的DIV元素，返回：集合元素$(“div:lt(index)”) //选择所有索引小于index的DIV元素，返回：集合元素$(“:header”) //选择所有标题元素（h1,h2,h3），返回：集合元素$(“div:animated”) //选择所有正在执行去画的DIV元素，返回：集合元素子元素过滤选择器（index从1开始）$(“:nth-child(index/even/odd)”) //选择每个父元素下的第index/偶数/奇数个子元素，返回：集合元素$(“:first-child”) //选择每个父元素下的第一个子元素，返回：集合元素$(“:last-child”) //选择每个父元素下的最后一个子元素，返回：集合元素$(“ul li:only-child”) //在UL元素中选择只有一个LI元素的子元素，返回：集合元素内容过滤选择器$(“:contains(text)”) //选择所有内容包含text的元素，返回：集合元素$(“div:empty”) //选择所有内容为空的DIV元素，返回：集合元素$(“div:has(span)”)//选择所有含有SPAN子元素的DIV元素，返回：集合元素$(“div:parent”) //选择所有含有子元素的DIV元素，返回：集合元素可见性选择器$(“:hidden”) //选择所有不可见的元素（type=”hidden”style=”display:none” style=”visibility:none”），返回：集合元素$(“:visible”) //选择所有可见的元素，返回：集合元素属性过滤选择器$(“[id]“) //选择所有含有id属性的元素，返回：集合元素$(“[class=myClass]”) //选择所有class属性值是myClass的元素，返回：集合元素$(“[class!=myClass]”) //选择所有class属性值不是myClass的元素，返回：集合元素$(“[alt^=begin]”) //选择所有alt属性值以begin开始的元素，返回：集合元素$(“[alt^=end]”) //选择所有alt属性值以end结束的元素，返回：集合元素$(“[alt*=some]”)//选择所有alt属性值含有some的元素，返回：集合元素$(“div[id][class=myClass]”) //选择所有含有id属性的并且class属性值是myClass的元素，返回：集合元素表单对象属性选择器$(“#myForm:enabled”) //选择ID属性为myForm的表单的所有可用元素，返回：集合元素$(“#myForm:disabled”) //选择ID属性为myForm的表单的所有不可用元素，返回：集合元素$(“#myForm:checked”) //选择ID属性为myForm的表单的所有所有被选中的元素，返回：集合元素$(“#myForm:selected”) //选择ID属性为myForm的表单的所有所有被选中的元素，返回：集合元素表单选择器$(“:input”) //选择所有<input> <select> <button> <textarea>元素，返回：集合元素$(“:text”) //选择所有单行文本框元素，返回：集合元素$(“:password”) //选择所有密码框元素，返回：集合元素$(“:radio”) //选择所有单选框元素，返回：集合元素$(“:checkbox”) //选择所有复选框元素，返回：集合元素$(“:submit”) //选择所有提交按钮元素，返回：集合元素$(“:image”) //选择所有图片按钮元素，返回：集合元素$(“:reset”) //选择所有重置按钮元素，返回：集合元素$(“:button”) //选择所有按钮元素，返回：集合元素$(“:file”) //选择所有上传域元素，返回：集合元素$(“:hidden”) //选择所有不可见域元素，返回：集合元素$(“:text”) //选择所有单选文本框元素，返回：集合元素三、JQuery中的DOM操作查找元素节点var str = $(“#myDiv”).text(); //<div id=”myDiv”title=”hello”>123</div>alert(str); //结果：123查找属性节点var str = $(“#myDiv”).attr(“title”); //<div id=”myDiv”title=”hello”>123</div>alert(str); //结果：hello创建元素节点var $li1 = $(“<span></span>”); //传入元素标记，自动包装并创建第一个li元素对象va r $li2 = $(“<span></span>”); //第二个,创建时需要遵循XHTML规则（闭合、小写）$(“#myDiv”).append($li1); //往id为myDiv的元素中添加一个元素$(“#myDiv”).append($li2); //结果：<divid=”myDiv”><span></span><span></span>< ;/div>$(“#myDIv”).append($li1).append($li2); //客串：传说中的链式写法，省一行代码 ^_^创建文本节点var $li1 = $(“<span>first</span>”);var $li2 = $(“<span>second</span>”);$(“#myDIv”).append($li1).append($li2);//结果：<divid=”myDiv”><span>first</span><span>sec ond</ span></div>创建属性节点var $li1 = $(“<span title=”111″>first</span>”);var $li2 = $(“<span title=”222″>second</span>”); $(“#myDIv”).append($li1).append($li2);//结果：<div id=”myDiv”><spantitle=”111″>first</span><spantitle=”222″>second</span></div>插入节点$(“#myDiv”).append(“<span></span>”); //往id为myDiv 的元素插入span元素$(“<span></span>”).appendTo(“#myDiv”); //倒过来，将span元素插入到id为myDiv的元素$(“#myDiv”).prepend(“<span></span>”); //往id为myDiv 的元素内最前面插入span元素$(“<span></span>”).prependTo(“#myDiv”); //倒过来，将span元素插入到id为myDiv的元素内的最前面$(“#myDiv”).after(“<span></span>”); //往id为myDiv的元素后面插入span元素（同级，不是子元素）$(“<span></span>”).insertAfter(“#myDiv”); //倒过来，将span元素插入到id为myDiv的元素后面（同级，不是子元素）$(“#myDiv”).before(“<span></span>”); //往id为myDiv 的元素前面插入span元素（同级，不是子元素）$(“<span></span>”).insertBefore(“#myDiv”); //倒过来，将span元素插入到id为myDiv的元素前面（同级，不是子元素）删除节点$(“#myDiv”).remove();//将id为myDiv的元素移除清空节点$(“#myDiv”).remove(“span”); //将id为myDiv的元素内的所有span元素移除复制节点$(“#myDiv span”).click( function(){//点击id为myDiv的元素内的span 元素，触发click事件$(this).clone().appendTo(“#myDiv”); //将span元素克隆，然后再添加到id为myDiv的元素内$(this).clone(true).appendTo(“#myDiv”); //如果clone传入true参数，表示同时复制事件})替换节点$(“p”).replaceWith(“<strong>您好</strong>”); //将所有p元素替换成后者 <p>您好</p> –> <strong>您好</strong>$(“<strong>您好</strong>”).replaceAll(“p”); //倒过来写，同上包裹节点$(“strong”).wrap(“<b></b>”); //用b元素把所有strong 元素单独包裹起来 <b><strong>您好</strong></b><b><strong>您好</strong></b>$(“strong”).wrapAll(“<b></b>”); //用b元素把所有strong元素全部包裹起来 <b><strong>您好</strong><strong>您好</strong></b> $(“strong”).wrapInner(“<b></b>”); //把b元素包裹在strong元素内 <strong><b>您好</b></strong>属性操作var txt = $(“#myDiv”).arrt(“title”); //获取id为myDiv的元素的title 属性$(“#myDiv”).attr(“title”,”我是标题内容”); //设置id为myDiv的元素的title属性的值$(“#myDiv”).attr({“title”:”我是标题内容”, “alt”:”我还是标题”); //一次性设置多个属性的值$(“#myDiv”).removeArrt(“alt”); //移除id为myDiv的元素的title属性样式操作var txt = $(“#myDiv”).arrt(“class”); //获取id为myDiv的元素的样式$(“#myDiv”).attr(“class”,”myClass”); //设置id为myDiv的元素的样式$(“#myDiv”).addClass(“other”); //在id为myDiv的元素中追加样式$(“#myDiv”).removeClass(“other”); //在id为myDiv的元素中移除other 样式$(“#myDiv”).removeClass(“myClass other”); //在id为myDiv的元素中移除myClass和other多个样式$(“#myDiv”).removeClass(); //在id为myDiv的元素中移除所有样式$(“#myDiv”).toggleClass(“other”); //切换样式，在有other样式和没other样式之间切换$(“#myDiv”).hasClass(“other”); //判断是否有other样式设置和获取HTML、文本和值alert( $(“#myDiv”).html() ); //获取id为myDiv的元素的HTML代码（相当于innerHTML）$(“#myDiv”).html(“<span>hello</span>”); //设置id为myDiv的元素的HTML代码alert( $(“#myDiv”).text() ); //获取id为myDiv的元素的HTML代码（相当于innerText）$(“#myDiv”).text(“hello”); //设置id为myDiv的元素的HTML代码alert( $(“#myInput”).val() ); //获取id为myDiv的元素的value值（支持文本框、下拉框、单选框、复选框等）$(“#myInput”).val(“hello”); //设置id为myDiv的元素的value值（下拉框、单选框、复选框带有选中效果）遍历节点var $cList = $(“#myDiv”).children(); //获取id为myDiv的元素的子元素（只考虑子元素，不考虑后代元素）var $sNext = $(“#myDiv”).next(); //获取id为myDiv的元素的下一个同辈元素var $sPrev = $(“#myDiv”).prev(); //获取id为myDiv的元素的上一个同辈元素var $sSibl = $(“#myDiv”).siblings(); //获取id为myDiv的元素的所有同辈元素var $pClos = $(“#myDiv”).closest(“span”); //获取id为myDiv的元素本身开始，最接近的span元素（向上查找）CSS-DOM操作$(“#myDiv”).css(“color”); //获取id为myDiv的元素的color样式的值$(“#myDiv”).css(“color”, “blue”); //设置id为myDiv的元素的color 样式的值$(“#myDiv”).css({“color”:”blue”, “fontSize”:”12px”}); //设置id为myDiv的元素的color样式的值（多个）$(“#myDiv”).css(“opacity”, “0.5″); //设置id为myDiv的元素的透明度（兼容浏览器）$(“#myDiv”).css(“height”); //获取id为myDiv的元素的高度（单位：px，兼容浏览器）$(“#myDiv”).height(); //同上（实际高度）$(“#myDiv”).css(“width”); //获取id为myDiv的元素的宽度（单位：px，兼容浏览器）$(“#myDiv”).width(); //同上（实际宽度）var offset = $(“#myDiv”).offset(); //获取id为myDiv的元素在当前窗口的相对偏移量alert( offset.top + “|” + offset.left );var offset = $(“#myDiv”).position(); //获取id为myDiv的元素相对于最近一个position设置为relative或absolute的父元素的相对偏移量alert( offset.top + “|” + off set.left );$(“#txtArea”).scrollTop();//获取id为txtArea的元素滚动条距离顶端的距离$(“#txtArea”).scrollLeft(); //获取id为txtArea的元素滚动条距离左侧的距离$(“#txtArea”).scrollTop(100); //设置id为txtArea的元素滚动条距离顶端的距离$(“#txtArea”).scrollLeft(100); //设置id为txtArea的元素滚动条距离左侧的距离四、JQuery中的事件和动画加载DOM$(window).load() 等价于 window.onload 事件$(document).ready() 相当于window.onload事件，但有些区别：(1)执行时机：window.onload 是在网页中所有元素（包括元素的所有关联文件）完全加载后才执行$(document).ready() 是在DOM完全就绪时就可以被调用，此时，并不意味着这些元素关系的文件都已经下载完毕(2)多次使用：可以在同一个页面注册多个$(document).ready()事件(3)简写方式：可以缩写成 $(function(){ }) 或 $().ready()事件绑定当文档装载完成后，可以通过bind()方法，为特定的元素进行事件的绑定，可重复多次使用bind( type, [data, ] fn );type：指事件的类型:blur（失去焦点）、focus（获得焦点）load（加载完成）、unload（销毁完成）resize（调整元素大小）、scroll（滚动元素）click（单击元素事件）、dbclick（双击元素事件）mousedown（按下鼠标）、mouseup（松开鼠标）mousemove（鼠标移过）、mouseover（鼠标移入）、mouseout（鼠标移出）mouseenter（鼠标进入）、mouseleave（鼠标离开）change（值改变）、select（下拉框索引改变）、submit（提交按钮）keydown（键盘按下）、keyup（键盘松开）、keypress（键盘单击）error（异常）data：指事件传递的属性值，event.data 额外传递给对象事件的值fn：指绑定的处理函数，在此函数体内，$(this)指携带相应行为的DOM元素合并事件hover(enter,leave)：鼠标移入执行enter、移出事件执行leave$(“#myDiv”).hover( function(){$(this).css(“border”, “1px solid black”);0}, function(){$(this).css(“border”, “none”);});toggle(fn1,fn2,…fnN)：鼠标每点击一次，执行一个函数，直到最后一个后重复$(“#myDiv”).toggle( function(){$(this).css(“border”, “1px solid black”);0}, function(){$(this).css(“border”, “none”);});事件冒泡下面的例子，BODY元素下有DIV元素，DIV元素下有SPAN元素，分别将三种元素都注册click事件。
第一章一、$(document).ready(function(){//do something});和window.onload的区别1.前者同一页面可以使用多次，后者出现多次只有最后一次能正确显示2.前者在DOM模型加载完成后就开始执行，后台在所有元素（包括图片）加载完成后执行3.前者可以简化为$(function(){//do something});后者没有简写形式。
二、jQuery比较常使用的是链式操作，比如一个书目导航条：$(function(){$(“ul”).click(function(){$(this).addClass(“current”).children(“li”).slideDown().end().sublings().removeClass(“current”).children(“li”).slideUp();})})对于同一元素不超过3个操作的，一般写同一行，如果操作过多，可以将类似的操纵写成一行，便于阅读。
三、jQuery对象和DOM对象的转换1.jQuery转化为DOM对象Var $variable = $(“tr”); //jQuery objectVar variable = $variable[0]; //DOM objectThe transpartent method.DomObject = jQueryObject[index] or = jQueryObject.get(index).2.DOM Object To jQuery ObjectVar variable = getElementsByTagName(“tr”); //DOM objectVar $variable = $(variable) // jQuery object;The transpartent method.jQueryObject = $(DomObject)四、jQuery开发工具1.Dreamweaver 可以安装插件提示jQuery 插件名称：jQuery_API.mxp2.Aptana 功能非常强大的、开源、专注javascript和Ajax开发IDE;3.Visual Studio 2008。
JQuery等价于$$(document).ready(function(){});简写==$(function(){});返回值都为[object Object]容错，jQ发生错误不报错1，jq选择器1>基本选择器$（“#idName”）------通过id找元素$(“.className” )------通过class找元素$(“tagName”)-------通过标签找元素$(“*”)---------匹配所有的元素$(“li *”)----li下的全部一般用于局部环境内$(“selector1,selector2”)---群组匹配元素$(“box.div”)-----限定必须是box元素的div2，层级选择器$(“a b”)-----匹配a的后代中所有b元素$(“a>b”)----匹配a中子代b元素（只找儿子，不找孙子）$(“a+b”)----匹配紧邻的一个兄弟b元素（紧邻，一个）$(“a~b”)----匹配a之后的所有兄弟b元素（之后所有）3，过滤选择器1>基本选择器a>特定位置的过滤$(“li:first”)--- --匹配第一个li元素$(“li:last”) ---匹配找到的li中最后一个li元素$(“li:eq(index)”)---匹配找到的li中索引为index的li。
（index从零开始）b>指定范围的过滤$(“li:lt(index)”) --匹配index之前的所有li（不包含index位置的li）；$(“li:gt(index)”)---匹配index之后的所有li（不包含index位置的li）$(“li:not(selector)”)---匹配除了not的li内元素$(“li:odd”)----匹配偶数行（索引为奇数）的li$(“li:even”)----匹配奇数行（索引为偶数）的li2>属性过滤$(“[标签属性]”)-----匹配有该属性的俄元素$(“[标签属性=值]”)---匹配属性=指定的元素$(“[标签属性^=value]”)$(“[标签属性$=value]”)$(“[标签属性!=value]”)3>子元素选择器$(“li:first”)------将所有匹配到的元素中只选第一个（返回第一个元素）$(“li:first-child”)----匹配每个li的父元素的第一个孩子（可返回多个元素）$(“li:last”)和(“li:last-child”)用法与以上类似$(“li:only-child”)------匹配li的父级只有一个孩子的li元素val=$(“#id”).val（）---获取#id 的文本内容$("#btn").click(function(){var val=$("#txt").val();$("a:contains('"+val+"')").css("background","red");})4>内容过滤$(“li:contexts(text)”)--匹配内容中包含了text的文本的li$(“li:has(selector)”)---匹配内容中包含了selector元素的li$(“li:empty”)-----匹配内容为空的li元素$(“li:parent”)----匹配以li为父元素的DOM节点5>可见和隐藏选择器$(“div:hidden”)----匹配div中设置了display为none的元素，通过其他方式不可见的元素匹配不到；$(“div:visible”)---匹配div中没有设置display为none的元素，只认display设置不为none的元素备注：此选择器只以display设置的结果为准4，表单选择器$(“:input”) ------所有的表单中的控件：input button select$(“:text”)-------文本输入框---所有的input标签type属性值之前加冒号--表示相应的input元素$(“:disable”)---所有表单控件中设置了disable属性的元素$(“:enable”)----所有的表单控件中没有设置disable属性的元素$(“:checked”)---匹配被选中的单选按钮或者复选框$(“:selected”)---匹配被选中的option元素2，获取文本text( )------只获取到文本内容html( )-----获取包含标签在内的所有内容val( ) -----获取表单控件的文本设置内容text(“内容”)------设置内容，不解析标签html( “内容”)-----获取包含标签在内的所有内容val( “内容”) -----获取表单控件的文本.val([“check”,”radio”])----通过数组传递设置选定状态3，获取和设置元素的特性attr(“标签属性”)------获取该属性attr(“标签属性“，”属性值）-----设置该属性设置多个属性：attr({ 属性：属性值，属性：属性值}）；备注：多个属性设置之间用逗号分隔，最后一个无任何符号删除属性：removeAttr(“标签属性”)4，获取和设置DOM对象的属性property获取：prop( “属性”）设置：Prop(“属性””属性值”)备注：互补与attr( ),, 更适应结果为boolth的类型，5，attrbute和property区别1，区别：表示的意思不一样attrbute特性--所有设置的标签属性都存在attrbute类关联数组中获取：attrbute[ i ] 或者attrbute[“特性名”]property 属性标签有的特性，并已经设置了，可以通过property的方式获取获取：对象.属性名设置：如果对象没有该属性，可以通过对象.属性名=属性值jq：通过prop（）方式设置的属性，通过attr（）的方式获取不到对象没有的，通过attr（）方式设置的，通过prop（）的方式获取不到；联系：DOM元素有该特性，并且已经设置了，两种方式度可以获取到补充：通过attr( )获取不到的或设置不了的特殊属性，我们可以通过prop( )获取和设置例如：表单控件的checked属性；6，each( )----遍历每一个匹配到的元素使用语法：each（function(i,ele){ 执行内容}）;i-----表示每一个元素的索引Ele-----表示匹配到的每一个元素$(Ele)---将获取到的DOM元素转换成jq对象----用jq的API数组与遍历结合使用var arr=["#000","#0f0","#00f","#0ff","#f0f"];$(".warp").each(function(i){$(".warp").eq(i).css("backgroundColor",arr[i]);}); 这里不能使用this7，修改css属性的方法：attr(“class”,”类名”）addClass(“类名”)--------追加样式removeClass(“类名”)-----删除指定的类名removeclass( )------删除所有的类名toggleClass(“类名”）-------切换类名（在有和没有该类名之间切换）hasClasscss(“css属性”)--------获取一个css属性的值css(“css属性”,”属性值”）---设置一个csss属性css({属性：“属性值”，属性：“属性值”}）；8，获取索引：index( )-----在同辈中找索引index（“selector”）---在指定的同类(同辈)中找索引9，js对象和jq对象相互转换js-----jq 适用$( )工厂函数------$( js对象)jq----js $(“”)[index] 或者$(“”).get( index )转换之后的对象可以用彼此的API10，节点的遍历children( )/children( selector )----子代/子代中某个find( selector )-------在子孙后代中查找指定元素next( )/next( selector )------之后紧跟的一个兄弟元素/筛选某个紧邻的元素nextALL( )/nextAll( selector )----之后所有的兄弟元素prev( )/prev( selector )prevALL/prevALL( selector )siblings( )-----所有兄弟元素不包含自身parent( )------父元素输出---遍历到的内容console.log--只能输出一个，，用each( )11，创建元素$() 工厂函数创建var tr=$("<tr></tr>");$("#oDiv table").append(tr);添加元素父.append(子)----------子元素插入在父元素内容的后面父.preppend(子)--------子元素插入在父元素的内容的前面父.before(子)-----------子元素插入在父元素容器的前面父.after(子)--------------子元素插入在父元素容器的后面补充：反方向操作子.apppendTo(父)preppendTo(父)insertBefore(父)insertAfter(父)12, 替换被替换元素.replaceWith(替换的内容)；替换的内容.replaceAll(被替换元素);13,删除要删除的元素.remove();-----------------将匹配到的元素全部删除要删除的元素.remove(“selector”)-----匹配到的元素筛选后再删除14，复制jq对象.clone()------------------将匹配到的jq对象复制如果：jq对象使用嵌入的绑定事件，连同事件一起被复制如果：jq对象使用的分离式绑定事件，绑定的事件不会被复制如果想将分离式绑定的事件一起被复制：jq对象.clone(true);备注：clone（）紧紧是复制，并没有挂在DOM树上15，页面加载事件全写：jQuery(document).ready(function(){js语句})简写：$(function(){js语句})16，js的load事件和jq的ready事件的区别js中多个load事件只执行最后一个，jq的多个ready事件都会执行执行时机不同：js的load事件是在页面解析完毕之后执行jq的ready事件在DOM树生成的时候执行ready先于load执行17，$符号与其他框架发生冲突交出$的使用权：$.noConflict()交权的同时可以使用其他符号代替,例如：var Q=$.noConflict(); 收回$的使用权：jQuery（function($){此处可以使用$}）18,鼠标经过事件总结mouseovermouseout以上两个事件绑定给father：鼠标经过father 到son也会触发mouseenter可解决mouseleave以上两个事件绑定给father，经过son时不会触发hover将mousenter和mouseleave两个事件封装成一个事件执行jq对象.hover(function(){ 鼠标移入时执行},function(){ 鼠标移出时执行});$("#warp").hover(function(){$("#inner").stop().animate({bottom:0},1000)},function(){$("#inner").stop().animate({bottom:"-200px"},1000)});jq对象.hover(function(){鼠标移入移出都执行此函数---套路：此方法中实现的切换功能})19，事件的绑定方式：1, jq对象.事件名称(fn);eg：$(“#btn”).click(function(){})2, 用on绑定jq对象.on(“事件名称”，执行任务)写法有多种：$(“#btn”).on(“click mouseover”,fn);$(“#btn”).on({click:fn,moueover:fn});20,解除事件绑定：jq对象.off(“事件名称”，fn)------解绑事件名称执行的fn任务jq对象.off(“事件名称”)---------解绑事件名称执行的所有任务jq对象off()----------------解绑该对象的所有事件的所有任务星星评价二级出现增加21，on绑定事件实现的事件代理---------给未来的元素添加事件父.on(“type”,“子元素”，fn)以上父元素将事件类型代理给子元素（未来的），执行fn任务22，jq的事件对象：注意：jq事件对象中阻止事件冒泡和事件的默认行为只需使用事件对象的方法，兼容性已经处理（2.0）trigger 事件自动只执行（冒泡）triggerHander阻止冒泡23，事件的自动执行jq对象.事件名称（）------$(“#btn”).clickjq对象.trigger(“type”)------$(“btn”).trigger(“click”)备注：trgger会执行对象的默认行为，也会发生冒泡jq对象.triggerHandler(“type”)定时轮播备注：不会执行事件的默认行为，会阻止事件冒泡24，动画效果show( )hide( )toggle( )---切换执行show( ) hide( )可以传的速度参数：nomal slow fast 数字slideDown----向下滑开slideUp--------向上收齐animition-delay:数字----------延迟动画执行时间stop 当事件中断时，停止动画继续执行多事件合并执行---------节点1 . 方法1 . 节点2 . 方法2节点2 由节点1确定方法从前到后依次执行$(".banner .bg").fadeTo("fast",.6).attr("src",arr[idx]).fadeTo("fast",1);函数的调用方法：function fun(){}var mytime=setInterval(function(){$("#btn").click()},1000); var mytime=setInterval("$('#btn').click()",1000);var mytime=setInterval(fun,1000);var mytime=setInterval("fun()",1000);25，.offset ( ) 获取元素的当前坐标，坐标相对于文档25，获取窗口的相关尺寸js方法:clientHeight || document.documentElement.clientHeight-------获取页面内容所占的高度document.body.scrollHeight || document.documentElement.scrollHeight ------获取页面滚动的高度jq方法：var h=$(window).outHeight( )=$(window).innerHeight( )-----获取的是窗口的可见高度总结：js无法正常获取，只能通过jq获取窗口的可见高度jq无法获取，只能js获取页面的滚动高度outerHeight(）获取窗口可见的边框以内的尺寸offsetHeight$(document).ready(function(){alert($(window).height()); //浏览器当前窗口可视区域高度alert($(document).height()); //浏览器当前窗口文档的高度alert($(document.body).height());//浏览器当前窗口文档body的高度alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度包括border padding margin alert($(window).width()); //浏览器当前窗口可视区域宽度alert($(document).width());//浏览器当前窗口文档对象宽度alert($(document.body).width());//浏览器当前窗口文档body的宽度alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度包括border padding margin})事件放在引号内购物车--全选解除a标签的自身方法模态框视频1，视频标签<video></video>两种链接资源的方式：1，<video src=”视频资源”>2，<video><source src=”视频资源.mp4”><source src=””视频资源.avi></video>2，可通过标签属性来设置的属性control 控制视屏的控件muted 设置静音autoplay设置视频自动播放以上三个属性直接设置属性表示属性为true 不设置表示false poster 设置视屏暂停是的封面缺点：无法正常设置图片的尺寸解决：不使用该属性，而用定位的方式解决3，视屏中是通过js获取或者设置的属性currentTime视频当前播放时间，可以设置和获取paused获取当前是否处于暂停状态true--暂停false---播放ended 获取视屏是否播放到结尾true----播放完duration 获取视频的整个播放时长只能获取不能设置4，视频播放与暂停的方法play( )------播放pause( )-------暂停var w=$("v1").offsetWidth; 获取内容宽度var h=$("v1").offsetHeight; 获取内容高度补充：.get( index ) 根据索引获取html内容返回值：Element、Array.get() 方法允许我们直接访问jQuery对象中相关的DOM节点。
基础jquery知识点基础jQuery知识点jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画效果等操作。
在网页开发中，jQuery非常常用，是前端开发的基础知识之一。
下面将介绍一些基础的jQuery 知识点。
一、选择器（Selectors）选择器是使用jQuery的关键，它允许我们通过各种方式选择HTML元素，并对其进行操作。
常见的选择器包括元素选择器、类选择器、ID选择器等。
1. 元素选择器元素选择器使用元素的标签名作为选择器，可以选择所有匹配的元素。
例如，使用$("p")可以选择页面中的所有段落元素。
2. 类选择器类选择器使用元素的class属性作为选择器，可以选择具有相同类名的所有元素。
例如，使用$(".class")可以选择页面中所有具有class为class的元素。
3. ID选择器ID选择器使用元素的id属性作为选择器，可以选择具有相同id的元素。
例如，使用$("#id")可以选择具有id为id的元素。
二、事件处理（Event Handling）事件处理是jQuery的另一个重要功能，它允许我们对HTML元素进行事件绑定，并在事件发生时执行相应的操作。
1. click事件click事件在元素被点击时触发，我们可以使用click()函数来绑定click事件，并定义事件处理函数。
例如，使用$("button").click(function(){})可以在点击按钮时执行相应的操作。
2. hover事件hover事件在鼠标悬停在元素上时触发，我们可以使用hover()函数来绑定hover事件，并定义事件处理函数。
例如，使用$("div").hover(function(){}, function(){})可以在鼠标悬停在div元素上时执行第一个函数，鼠标移出时执行第二个函数。
jQuery学习笔记1.第二章1.1.控制上下文当前只传给jQuery的$()函数一个参数，但这仅仅是为了在开始的时候尽量保持简单。
事实上，这个函数在接受选择器或者HTML代码作为第一个参数时，还可以接受第二参数。
如果有两个参数，那么第一个参数是选择器，第二参数是指示第一参数的操作上下文（匹配或搜索的范围）。
我们在许多jQuery方法中看到，当第二个可选的参数被忽略时，就会被一个默认的参数所替代。
上下文参数context也就是同样的道理。
默认把DOM树的所有元素作为该选择器上下文。
上下文可以是DOM元素引用，也可以是jQuery选择器的字符串，还可以是DOM元素包装集示例1：$(selector)选择器selector会在整个DOM树上搜索匹配。
示例2：$(selector,"div#sampleDemo")选择器selector会在拥有ID值为sampleDemo的标签div范围内搜索。
示例3：$(selector,$("div#sampleDemo"))效果与示例2相同。
使用$("div#sampleDemo")返回一个DOM元素包装集。
示例3：$(selector,document)使用DOM元素document的引用。
1.2.合并选择元素jQuery允许我们使用逗号操作符将多个选择器合并成一个选择器。
例如，要选择所有<div>和所有<span>元素，可以这么做：$("div,span")1.3.jQuery支持的基础CSS选择器选择器描述示例1.4.通过位置选择元素（CSS支持）有时，需要根据元素在页面上的位置，或者相对于其他元素的位置来选择元素。
可能要选择页面中的第一个链接、隔行段落，或者每个列表中最后一个列表项。
CSS规范将这种类型的选择器称为伪类（pseudo-classes），下表是CSS支持的，但jQuery赋予了它新的名字——过滤器。
JQuery开发工具——GVIM。
锋利的jQuery目录第1章认识jQuery (1)第2章jQuery选择器 (2)第3章jQuery的DOM操作 (5)第4章jQuery中的事件和动画 (8)第5章jQuery对表单、表格的操作及更多应用 (11)第6章jQuery与Ajax的应用 (13)第1章认识jQuery1．jQuery的优势：轻量级；强大的选择器；出色的DOM操作的封装；可靠的事件处理机制；完整的Ajax；不污染顶级变量；出色的浏览器兼容性；链式操作方式；隐式迭代；行为层与结构层的分离；丰富的插件支持；完善的文档；开源。
2．使用jQuery之前，要先导入jQuery库。
<script src=”../scripts/jquery-1.3.1.js” type=”text/javascript” />\在jQuery库中，$就是jQuery的一个简写形式，例如$(“#foo”)和jQuery(“#foo”)和document.getElementById(“foo”)是等价的。
Window.onload和$(document).ready()的区别：执行时机：前者必须等待网页中所有的内容加载完毕(包括图片)才能执行；后者在网页中所有DOM结构绘制完毕后就执行，可能DOM元素关联的东西并没有加载完。
编写个数：前者只能编写一个function()块，后者能同时编写多个(多个会依次执行)。
简化写法：前者无；后者$(document).ready(function(){//…})可以简写成：$(function(){//…})3. jQuery代码风格。
链式操作风格：$(".has_children").click( function(){$(this).addClass("highlight") //为当前元素增加highlight类.children("a").show().end() //将子节点的<a>元素显示出来并重新定位到上次操作的元素.siblings().removeClass("highlight")//获取元素的兄弟元素，并去掉它们的highlight类.children("a").hide(); //将兄弟元素下的<a>元素隐藏});代码规范：1)对于同一个对象不超过3个操作的，可以直接写成一行。
translate() 方法通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）位置参数：rotate() 方法通过 rotate() 方法，元素顺时针旋转给定的角度。
允许负值，元素将逆时针旋转。
scale() 方法通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：skew() 方法通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：matrix() 方法matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
transform: translate(50px,100px);transform:matrix(0.866,0.5,-0.5,0.866,0,0);CSS3 创建多列column-count 属性规定元素应该被分隔的列数：CSS3 规定列之间的间隔column-gap 属性规定列之间的间隔：CSS3 列规则column-rule 属性设置列之间的宽度、样式和颜色规则。
jQuery $(this).hide()演示 jQuery hide() 函数，隐藏当前的 HTML 元素。
$("#test").hide()演示 jQuery hide() 函数，隐藏 id="test" 的元素。
$("p").hide()演示 jQuery hide() 函数，隐藏所有 <p> 元素。
$(".test").hide()演示 jQuery hide() 函数，隐藏所有 class="test" 的元素。
基础语法是：$(selector).action()∙美元符号定义 jQuery∙ 选择符（selector ）“查询”和“查找” HTML 元素∙ jQuery 的 action() 执行对元素的操作我们的实例中的所有 jQuery 函数位于一个 document ready 函数中： $(document).ready(function(){--- jQuery functions go here ----});$(this) 当前 HTML 元素$("p")所有 <p> 元素 $("p.intro")所有 class="intro" 的 <p> 元素 $(".intro")所有 class="intro" 的元素 $("#intro")id="intro" 的元素 $("ul li:first") 每个 <ul> 的第一个 <li> 元素$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素jQuery 名称冲突jQuery 使用 $ 符号作为 jQuery 的简介方式。
1.jQuery基础1.1如果你了解JavaScript语言，那将对你掌握jQuery如虎添翼，因为jQuery本身就是JavaScript，只不过是把JavaScript代码包装成拿过来就能实现特定功能的代码库！例如，我们想改变页面中所有段落标签中的文本内容：javaScript代码：jQuery代码：以上两段代码完成的功能是一样的。
由此可以看出，jQuery更加的简洁方便，我们在处理DOM时不必关心功能的实现细节。
$()就是jQuery中的函数，它的功能是获得（）中指定的标签元素。
如示例中$(“p”)会得到一组P标签元素,其中“p”表示CSS中的标签选择器。
$()中的()不一定是指定元素，也可能是函数。
在jQuery中 $()方法等价于jQuery()方法,前者比较常用，是后者的简写。
一般只有在$()与其它语言冲突时才会使用jQuery()方法。
2.jQuery基础选择器2.1 #id 选择器(使用身份证号来找人)jquery能使用CSS选择器来操作网页中的标签元素。
如果你想要通过一个id号去查找一个元素，就可以使用如下格式的选择器：$("#my_id")其中#my_id表示根据id选择器获取页面中指定的标签元素，且返回唯一一个元素。
例如：在浏览器中显示的效果：从图中可以看出，通过#id选择器的方式获取元素，并在元素中调用html()方法为id="divtest"的<div>元素设置了文字显示在页面中。
此外，html()方法的功能是设置或获取元素中显示的内容，针对该方法我们在后面的章节中会有详细介绍。
2.2 element 选择器(寻找铅笔)在文具盒中，有铅笔、钢笔和水彩笔，类似于页面中的<div>、<span>各个元素，虽然同属于一个容器，但有各自的功能，jQuery中可以根据元素名查找元素，格式如下：$(“element”)其中element就是元素的名称，也就是工具盒中的笔的名称，找到水彩笔，我们就可画画了，通过元素名找到元素就可以对它进行操作了。
如下图所示：在页面中，根据元素名找到了一个元素，并将它显示的字体加粗。
在浏览器中显示的效果：从上面图中可以看出，根据元素的名称可以查找到该元素，并调用css()方法将设置该元素内容中文字显示的样式。
此外，css()方法的功能是设置或获取元素的某项样式属性，它的更多功能我们将在后续的章节中有详细的介绍。
$("button").attr("disabled","true"); attr()方法的功能是设置或获取元素的某项属性值。
2.3 class 选择器(寻找红色铅笔)我们在上一小节介绍了通过使用元素名称查询元素的方法，其实，还可以通过元素的类别属性查找元素，就好比在文具盒中要找一个“红色”铅笔一样，根据元素的某个特征进行查找，它的调用格式如下：$(“.class”)其中.class参数表示元素的CSS类别(类选择器)名称。
例如，在页面中，通过class选择器获取某个元素，并显示该元素的class类别名称，如下图所示：在浏览器中显示的效果：从图中可以看出，通过class选择器的方式获取元素，并调用元素的attr()方法获取元素的类别名称，并将名称显示在页面中。
2.4 * 选择器(取走全部铅笔)有一个非常“牛”的选择器，“*”号选择器，它的功能是获取页面中的全部元素，“全部”啊!包括<head>、<body>、<script>这些元素，相当于可以取走你文具盒中的所有铅笔,格式为：$(“*”)选择器中的参数就一个“*”，既没有“#”号，也没有“.”号。
由于该选择器的特殊性，它常与其他元素组合使用，表示获取其他元素中的全部子元素。
如下图所示：使用*选择器，获取div中的所有子元素并设置三个子元素显示相同的内容。
在浏览器中显示的效果：由于三个元素都包含在<div>元素中，因此，它们都是<div>元素的子元素，那么，就可以使用$(“div *”)的方式获取<div>元素中的这三个子元素，并使用html()方法来设置它们显示的内容。
实践证明，由于使用*选择器获取的是全部元素，因此，有些浏览器将会比较缓慢，这个选择器也需要谨慎使用。
2.5 sele1,sele2,seleN选择器有时需要精确的选择任意多个指定的元素，类似于从文具盒中挑选出多根自已喜欢的笔，就需要调用sele1,sele2,seleN选择器，它的调用格式如下：$(“sele1,sele2,seleN”)其中参数sele1、sele2到seleN为有效选择器，每个选择器之间用“，”号隔开，它们可以是之前提及的各种类型选择器，如$(“#id”)、$(“.class”)、$(“selector”)选择器等。
例如，通过选择器获取其中的任意两个元素，并将它们显示的内容设为相同，如图所示：在浏览器中显示的效果：虽然页面中添加了三个元素，但是通过使用$(“div,p”)选择器方式获取了其中的<div>和<p>元素，并设置它们显示的内容。
2.6 ance desc选择器本节开始，我们将介绍层次性选择器。
在实际应用开发中，常常是多个元素嵌套在一起，形成复杂的层次关系，通过层次选择器，可以快速定位某一层次的一个或多个元素，ance desc选择器就是其中之一，它的调用格式如下：$("ance desc")其中ance desc是使用空格隔开的两个参数。
ance参数（ancestor祖先的简写）表示父元素；desc参数（descendant后代的简写）表示后代元素，即包括子元素、孙元素等等。
两个参数都可以通过选择器来获取。
比如家族姓氏“div”，家族几代人里，都有名字里带“span”的，就可以用这个 ance desc选择器把这几个人给定位出来。
例如，使用层次选择器，获取<div>元素中的全部<span>元素，并设置它们显示的内容，在如下图所示：在浏览器中显示的效果：从图中可以看出，使用层次选择器$("div span")获取了在<div>元素中的两个元素，一个是<p>元素中的子元素，另一个是<p>元素外的同级元素，但它们都是在一个<div>元素下，也就是说在一个“家族”下。
2.7 parent > child选择器与上一节介绍的ance desc选择器相比，parent > child选择器的范围要小些，它所选择的目标是子集元素，相当于一个家庭中的子辈们，但不包括孙辈，它的调用格式如下：$(“parent > child”)child参数获取的元素都是parent选择器的子元素，它们之间通过“>”符号来表示一种层次关系。
如图所示：在浏览器中显示的效果：从图中可以看出，使用$("div>span")选择器代码，获取的是<div>“家庭中”全部“子辈”<span>元素，不包括“孙辈”<span>元素和“家庭外”的<span>元素。
2.8 prev + next选择器俗话说“远亲不如近邻”，而通过prev + next选择器就可以查找与“prev”元素紧邻的下一个“next”元素，格式如下：$(“prev + next”)其中参数prev为任何有效的选择器，参数“next”为另外一个有效选择器，它们之间的“+”表示一种上下的层次关系，也就是说，“prev”元素最紧邻的下一个元素由“next”选择器返回的并且只返回唯的一个元素。
例如，使用prev + next选择器，获取<p>元素最近邻的下一个元素，如下图所示：在浏览器中显示的效果：2.9 prev ~ siblings选择器与上一节中介绍的prev + next层次选择器相同，prev ~ siblings选择器也是查找prev 元素之后的相邻元素，但前者只获取第一个相邻的元素，而后者则获取prev 元素后面全部相邻的元素，它的调用格式如下：$(“prev ~ siblings”)其中参数prev与siblings两者之间通过“~”符号形成一种层次相邻的关系，表明siblings选择器获取的元素都是prev元素之后的同辈元素。
例如，使用prev ~ next选择器，获取<p>元素后面相邻的全部元素，并设置它们在页面中显示的内容，如下图所示：在浏览器中显示的效果：可以看出，调用$("p~span")选择器代码，获取了<p>元素下面两个(全部)的<span>元素，该元素不包含<p>元素上面的元素和不属于同辈范围的元素。
3.jQuery过滤性选择器3.1 :first过滤选择器本章我们介绍过滤选择器，该类型的选择器是根据某过滤规则进行元素的匹配，书写时以“：”号开头,通常用于查找集合元素中的某一位置的单个元素。
在jQuery中，如果想得到一组相同标签元素中的第1个元素该怎样做呢？在下面的示例代码中你可能注意到我们会使用$(“li:first”)注意：书写时以“：”号开头。
运行结果：使用li:first过滤选择器可以很方便地获取ul列表中的第一个li元素.:first过滤选择器的功能是获取第一个元素，常常与其它选择器一起使用，获取指定的一组元素中的第一个元素。
：last3.2 :eq(index)过滤选择器如果想从一组标签元素数组中，灵活选择任意的一个标签元素，我们可以使用:eq(index)其中参数index表示索引号（即：一个整数），它从0开始，如果index的值为3，表示选择的是第4个元素。
例如：在浏览器中显示的效果：从图中可以看出，通过调用$("li:eq(3)")过滤选择器代码，获取了第4个<li>元素，并使用css()方法设置了该元素在页面中显示的文字样式。
3.3 :contains(text)过滤选择器与上一节介绍的:eq(index)选择器按索引查找元素相比，有时候我们可能希望按照文本内容来查找一个或多个元素，那么使用:contains(text)选择器会更加方便，它的功能是选择包含指定字符串的全部元素，它通常与其他元素结合使用，获取包含“text”字符串内容的全部元素对象。
其中参数text表示页面中的文字。
例如:在浏览器中显示的效果：从图中可以看出，调用li:contains('土豪')代码，可以很方便地获取<li>中包含‘土豪’字符内容的全部元素，并且只要与选择的元素中或子元素中包含该字符内容，就可以被选中。
