（2）认识JQuery
（一）JQuery是非常优秀的JS库。（wirte less do more）。首先我们要区分JS对象和JQuery对象的区别和他们之间的相互转化。
（1）JQuery对象是通过JQuery包装DOM对象后产生的对象，如 $('html').html()。
（2）Jquery对象是无法使用DOM对象的任何方法，即JS和JQuery之间的对象方法不可以相互拼接使用。
JS对象和JQuery对象可以相互转化
（1）JQuery转化成DOM对象：
var $cr = $("#cr");//JQuery对象 var cr = $cr[0]; //DOM对象
var $cr = $("#cr");//JQuery对象 var cr = $cr.get(0); //DOM对象
（2）DOM对象转化成JQuery 对象
var cr = document.getElementById("cr")； var $cr = $(cr)； //JQuery对象
（二）jQuery库是对JavaScript的封装，也就是咱们调用jQuery的一句函数，jQuery内部这句函数帮我们调用JavaScript中的代码几十句，因为jQuery就是JavaScript语法写的一些函数类，内部仍然是调用JavaScript实现的，所以并不是代替JavaScript的。使用jQuery的代码、编写jQuery的扩展插件等仍然需要JavaScript的技术，jQuery本身就是一堆JavaScript函数。Jquery区别于JS，有非常丰富的选择器，可以对DOM结构进行非常方便的增删查改操作。Jquery能在最大的层度上减轻JS开发复杂度，隐式迭代（自动对多个元素进行迭代方法的调用）、屏蔽浏览器差异跨浏览器兼容性好、插件丰富、开源、免费。
2.1基本选择器
2.2层次选择器
通过DOM元素之间 的层级结构来获取特定的元素，例如后代元素、子元素、相邻元素和同辈元素灯，可以使用层次选择器。
| 选择器 | 描述 | 返回 | 实例 |
|---|---|---|---|
| $("ancestor descendant") | 选取ancestor元素里面的所有descendant后代元素 | 集合元素 | $("div span")选取<div>里面的所有的<span>元素 |
| $("parent > child") | 选取parent下的(子)child元素，与$("parent > child")有区别，$("parent > child")选择的是后代元素 | 集合元素 | $("div span")选取<div>元素下元素名为<span>的子元素 |
| $("prev + next") | 选取紧接在prev元素后的next元素 | 集合元素 | $(".one + div")选取的是class为one的下一个div的同辈元素 |
| $("prev ~ sibling") | 选取紧接在prev元素之后的所有siblings元素 | 集合元素 | $(".one ~ div")选取的是class为one的后面的所有div同辈元素 |
2.3过滤选择器
2.3.1基本过滤选择器
| 选择器 | 描述 | 返回 | 实例 |
|---|---|---|---|
| :first | 选取第一个元素 | 单个元素 | $("div:first")选取所有的div元素中，第一个div元素 |
| :last | 选取最后一个元素 | 单个元素 | $("div:last")选取所有的div元素中，最后一个div元素 |
| :not(selector) | 去除所有的与给定选择器匹配的元素 | 集合元素 | $("input:not(.myName)")选取class不是myName的所有的input元素 |
| :even | 选取索引是偶数的所有元素，索引从0开始 | 集合元素 | $("input:even")选取索引是偶数的input元素 |
| :odd | 选取索引是奇数的所有元素，索引从0开始 | 集合元素 | $("input:odd")选取索引是奇数的input元素 |
| :eq(index) | 选取索引是index的元素(索引从0开始) | 单个元素 | $("input:eq(1)")选取索引是1的input元素 |
| :gt(index) | 选取索引大于index的元素 | 集合元素 | $("input:gt(1)")选取索引大于1的所有的input标签 |
| :lt(index) | 选取索引小于index的元素 | 集合元素 | $("input:lt(1)")选取索引小于1的所有的input标签 |
| :header | 选取所有的标题元素 | 集合元素 | $(":header")获取h1,h2,h3... |
| :animated | 选取所有的当前正在执行动画的所有元素 | 集合元素 | $("div:animated")选区正在执行动画的div元素 |
| :focus | 获取当前获取焦点的元素 | 集合元素 | $(":focus")选取当前获得焦点的元素 |
2.3.2内容过滤选择器
| 选择器 | 描述 | 返回 | 实例 |
|---|---|---|---|
| :contains(text) | 选取所有文本包含text的元素 | 集合元素 | $("div:contains('我')")选取所包含的文本中有'我'的div元素 |
| :empyt | 选取所有不包含子元素或者文本为空的元素 | 集合元素 | $("div:empty")选取不包含子元素（包括文本元素）的div元素 |
| :has(selector) | 选取所有包含选择器所匹配的元素的元素 | 集合元素 | $("div:has(p)")选取含有p标签的divy元素 |
| :parent | 选取含有子元素或者文本的元素 | 集合元素 | $("div:parent")选取拥有子元素(包含文本元素)的div元素 |
2.3.3可见性过滤选择器
| 选择器 | 描述 | 返回 | 实例 |
|---|---|---|---|
| :hidden | 选取所有不可见的元素 | 集合元素 | $(":hidden")选取所有的不可见元素。包含的元素为<input type="hidden">和<div style="display:none"><div>和<div style='style="visibility:hidden'></div>等元素。如果只想选取标签，可以使用$("input:hidden") |
| :visible | 选取所有可见的元素 | 集合元素 | $("div:visible")选取所有可见的div标签 |
2.3.4属性过滤选择器
| 选择器 | 描述 | 返回 | 实例 |
|---|---|---|---|
| [attribute] | 拥有此属性的元素 | 集合元素 | $("div[id]")选取所有拥有id属性的元素 |
| [attribute = value] | 选取属性值等于value的元素 | 集合元素 | $("div[title='test']")选取属性title等于test的div元素 |
| [attribute != value] | 选取属性值不等于value的元素 | 集合元素 | $("div[title!='test']")选取属性title不等于test的div元素 |
| [attribute ^= value] | 选取属性值以value开头的元素 | 集合元素 | $("div[title^='test']")选取属性title以test开头的div元素 |
| [attribute $= value] | 选取属性值以value结束的元素 | 集合元素 | $("div[title $='test']")选取属性title以test结尾的div元素 |
| [attribute *= value] | 选取属性值含有value的元素 | 集合元素 | $("div[title *='test']")选取属性title包含test的div元素 |
| [attribute |= value] | 选取属性值等于给定的字符串或者以该字符串为前缀(该字符串后跟一个连接字符-)的元素 | 集合元素 | $("div[title |='en']")选取属性title等于en或者以en为前缀（该字符串后跟一个连接字符"-"）的元素 |
| [attribute ~= value] | 选取属性值用空格分隔的值中包含一个给定值的元素 | 集合元素 | $("div[title ~='uk']")选取属性title用空格分隔的值中包含字符uk的元素 |
| [attribute1][attribute2][attribute3] | 用属性选择器合并成一个复合选择器，满足多个条件。每选择一次，缩小一次的范围 | 集合元素 | $("div[id][title $='test']")选取属性拥有id属性，并且title以test结尾的div元素 |
2.3.5子元素过滤选择器
| 选择器 | 描述 | 返回 | 实例 |
|---|---|---|---|
|
:nth-child (index/even/odd/equation) |
选取父元素下第index个子元素或者奇偶(index从1开始) | 集合元素 | :eq(index)只匹配一个元素，而:nth-child将为每一个父元素匹配子元素，并且:nth-child(index)中的索引是从1开始的，:eq(index)的索引从0开始 |
| :first-child | 选取每个父元素的第一个子元素 | 集合元素 | :first只返回单个的元素，而:first-child选择器为每一个父元素匹配第一个子元素。$("ul li:first-child")返回的是每一个ul中的第一个li元素 |
| :last-child | 选区每个父元素的最后一个子元素 | 集合元素 | 同样的，:last只返回单个元素，而:last-child则为每一个父元素返回最后一个子元素$("ul li:last-child")返回的是每一个ul中的最后一个li元素 |
| :only-child | 如果某个元素是它父元素中的唯一一个元素，那他将会被选择，如果父元素包含其他元素，不会被匹配。 | 集合元素 | $("ul li:only-child")在ul中选取是唯一一个子元素的li元素。 |
其中
:nth-child(even)
:nth-child(odd)
:nth-child(2)
:nth-child(2n)
:nth-child(3n+1)
2.3.6表单对象属性过滤选择器
| 选择器 | 描述 | 返回 | 实例 |
|---|---|---|---|
| :enabled | 选取所有可用元素 | 集合元素 | $("#form1:enabled")选取id为form1表单中所有不可用元素 |
| :disabled | 选取所有不可用元素 | 集合元素 | $("#form2:disabled")选取id为form2表单中所有可用元素 |
| :checked | 选取所有被选中的元素(单选框、复选框) | 集合元素 | $("input:checked")选取所有被选中的input元素 |
| :selected | 选取所有被选中的选项元素下拉列表 | 集合元素 | $("select option:selected")选取所有被选中的选项元素 |
2.4表单选择器
（三）在日常的带过中常用的JQuery函数
（1）现实和隐藏show() 、hide()
（2）增加、删除类名 addClass(className) 、removeClass(classNmae)
（3）CSS样式设置 JQueryDOM.css({color:red, background-color:green})多个样式设置时可以使用JSON数据格式
（4）元素中的文本内容： html()、text()、val()。三个简单实用的用于 DOM 操作的 jQuery的方法。text():设置或返回所选元素的文本内容.html():设置或返回所选元素的内容（包括 HTML 标记）.val():设置或返回表单字段的值。
（5）index() 方法返回指定元素相对于其他指定元素的 index 位置。
（6）children() 方法返回被选元素的所有直接子元素。
（7）childNodes()返回的是所有子元素的节点。
（8）find()函数。
示例1：品牌多少的切换
<!DOCTYPE html> <html> <head> <title>品牌切换</title> <script type="text/javascript" src="../jquery/jquery-3.4.1.min.js"></script> <style type="text/css"> .wrap{width:1000px; border:1px solid red; margin:0 auto;} .subCategoryBox li{width:33%; height: 30px; display: inline-block; padding:10px 0; text-align: center;} .subCategoryBox li a{color:#333; text-decoration: none;} .promoted{background-color: orange;} .showMore{width:200px; height: 50px; background-color: #ddd; line-height: 50px; text-align: center; margin-left:400px;} </style> </head> <body> <div class="wrap"> <div class="subCategoryBox"> <ul> <li><a href="#">佳能<i>(30440)</i></a></li> <li><a href="#">索尼<i>(27220)</i></a></li> <li><a href="#">三星<i>(20808)</i></a></li> <li><a href="#">尼康<i>(17821)</i></a></li> <li><a href="#">松下<i>(12289)</i></a></li> <li><a href="#">卡西欧<i>(8242)</i></a></li> <li><a href="#">富士<i>(14894)</i></a></li> <li><a href="#">柯达<i>(9520)</i></a></li> <li><a href="#">宾得<i>(2195)</i></a></li> <li><a href="#">理光<i>(4114)</i></a></li> <li><a href="#">奥林巴斯<i>(12205)</i></a></li> <li><a href="#">明基<i>(1466)</i></a></li> <li><a href="#">爱国者<i>(3091)</i></a></li> <li><a href="#">其他品牌相机<i>(7275)</i></a></li> </ul> <div class="showMore"> <a href="more.html"><span>+显示更多品牌</span></a> </div> </div> </div> <script type="text/javascript"> $(function(){ var $category = $("ul li:gt(5):not(:last)"); $category.hide(); var $toggleBthn = $("div.showMore >a"); $toggleBthn.click(function(){ if($category.is(":visible")){ $category.hide(); $(this).find('span').text("+显示全部品牌"); $("ul li").removeClass("promoted"); }else{ $category.show(); $(this).find("span").text("-精简显示品牌"); $("ul li").filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')").addClass("promoted").css({"font-size":"20px", "font-weight":'bold'}); } return false; }); }); </script> </body> </html>
浙公网安备 33010602011771号