文章目录
- 一文搞懂jQuery
- 什么是jQuery？
- jQuery怎么使用？
- 一：基础选择器：
- 总结
- 二：层次选择器：
- 三：筛选选择器：
- 四：筛选方法
- 五：内容过滤选择器
- 六 ：jQuery 里面的排他思想
- 七：jQuery对象与DOM对象的区别与相互转换：
一文搞懂jQuery
什么是jQuery？
jQuery：javascript + query。
使用前期，jQuery侧重于快速找到页面上的各种节点。
使用后期，jQuer丰富了事件操作，ajax操作，动画效果，DOM操作等等。jQuery是对javascript封装的一个框架包，它简化了javacript的操作。
javascript代码：获得页面节点对象，ajax元素节点对象实现，事件操作，事件对象。
jQuery代码：无需考虑浏览器兼容问题，代码量少。
重点：（操作元素）
- jquery方式操作属性(attribute)：
- $().attr(属性名称); //获得属性信息值
- $().attr(属性名称，值); //设置属性的信息
- $().removeAttr(属性名称); //删除属性
- JS方式操作属性(attribute):
- itnode.属性名称
- itnode.属性名称= 值;
- itnode.getAttribute(属性名称);
- itnode.setAttribute(属性名称，值);
jQuery 中 attr() 和 prop() 方法的区别：具有 true 和 false 两个值的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
css样式操作
- $().css(name，value); //设置
- $().css(name); //获取
css()样式操作特点：
① 样式获取，jquery可以获取 行内、内部、外部的样式。dom方式只能获得行内样式② 复合属性样式需要拆分为"具体样式"才可以操作例如：
background 需要拆分为 background-color ， background-image 等进行操作 border：
border-left-style ，border-left-width ，border-left-color 等
jQuery怎么使用？
一：基础选择器：
原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。
举个栗子：
- $(‘#id’)----->document.getElementById(‘id’);
- jQuery: $(‘#callen’)；
- javascrip：document.getElementById(“callen”);
- $(‘tag’)----->document.getElementsByTagName(‘tag’);
- jQuery：$(‘a’)；
- javascrip：document.getElementsByTagName(‘a’)；
- $(‘.class’) class属性选择器：
- $(‘.type1’)
- $(‘*’) 通配符选择器
- $(‘s1,s2,s3’) 联合选择器
- $(‘.type1,#callen’);
总结
名称 | 用法 | 描述 |
ID选择器 | $(‘#id’) | 获取指定ID元素 |
全选选择器 | $(‘*’) | 匹配所有的元素 |
类选择器 | $(‘.class’) | 获取同一类class的元素 |
标签选择器 | $(‘div’) | 获取同类标签的所有元素 |
并集选择器 | $(‘div,#id,li’) | 选取多个元素 |
交集选择器 | $(‘li.type1’) | 交集元素 |
属性选择器 | $(‘input[name=“username”]’) | 获取标签下属性名匹配的元素 |
二：层次选择器：
- ①后代选择器：$(s1 s2) 写法区别于并集选择器，规则：在S1内获取全部的S2节点
- ②子代选择器：$(S1 > S2) 规则：找S1的名字叫S2的儿子（孙子不算）
- ③直接兄弟选择器：$(S1 + S2) 规则：在s1后边获得紧紧挨着的第一个兄弟关系的s2节点
- ④所有兄弟选择器：$(S1 ~ S2) 获取S1后面全部名字为S2的兄弟
三：筛选选择器：
语法 | 用法 | 描述 |
:first | $(‘tr:first’) | 匹配找到的第一个tr元素 |
:last | $(‘tr:last’) | 匹配找到的最后一个tr元素 |
:not(selector) | $(‘tr:not(’#id’)') | 去除所有与给定选择器匹配的元素 |
:eq(index) | $(‘tr:eq(2)’) | 匹配一个给定索引值的元素，从0开始计数 |
:gt(index) | $(‘tr:gt(2)’) | 匹配所有大于给定索引值的元素，从0开始计数 |
:lt(index) | $(‘tr:li(2)’) | 匹配所有小于给定索引值的元素，从0开始计数 |
:even | $(‘li:even’) | 匹配所有索引值为偶数的元素，从0开始计数 |
:odd | $(‘li:odd’) | 匹配所有索引值为奇数的元素，从0开始计数 |
四：筛选方法
语法 | 用法 | 说明 |
parent() | $(“li”) . parent(); | 查找li的父级 |
children(selector) | $(“ul”) . children(“li”); | 相当于$(“ul > li”) , 找最近一级（找亲儿子） |
find(selector) | $(“ul”) .f ind(“li”); | 相当于$(“ul li”),后代选择器 |
siblings(selector) | $(“.first”).siblings(“li”); | 查找兄弟节点，不包括自己本身 |
nextAll([expr]) | $(“.first”) . nextAll(); | 查找当前元素之后所有的同辈元素 |
prevAll([expr]) | $(“.last”) . prevAll(); | 查找当前元素之前所有的同辈元素 |
eq(index) | $(“li”) . eq(2); | 相当于$(‘li:eq(2)’) |
hasClass(class) | $(‘div’) . hasClass(“protected”) | 检查当前的元素是否含有某个特定的类，如果有，则返回true |
五：内容过滤选择器
语法 | 使用 | 说明 |
:contains | $(“div:contains(beijing)”) | 包含内容选择器，获得节点内部必须通过标签包含指定的内容 |
:empty | $(“div:empty”) | 获得空元素(内部没有任何元素/文本(空) )节点对象 |
:has | $(“div:has(#apple)”) | 内部包含指定元素的选择器 |
:parent | $(“div:parent”) | 寻找的节点必须作为父元素节点存在(必须是别人的父亲) |
六 ：jQuery 里面的排他思想
想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。
- $(this).css(“color”,”red”);
- $(this).siblings(). css(“color”,””);
案例：淘宝服饰精品案例分析
核心原理：鼠标经过左侧盒子某个小li，就让内容区盒子相对应图片显示，其余的图片隐藏。
需要得到当前小li 的索引号，就可以显示对应索引号的图片
jQuery 得到当前元素索引号 $(this).index()
中间对应的图片，可以通过 eq(index) 方法去选择
显示元素 show() 隐藏元素 hide()
七：jQuery对象与DOM对象的区别与相互转换：
- jQuery对象：包装DOM对象后产生的对象，是jQuery独有的，可以使用jQuery中的方法。
就取得value值的方式而言来看看jQuery对象与DOM对象的区别：
虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理，DOM对象也不能使用jQuery中的方法。
但是这两种对象之间是可以相互转换的：
- jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。
- var list = $(“input”); //jQuery对象。
- var list2 = list[0]; //DOM对象。
- jQuery本身提供，通过.get(index)方法，得到相应的DOM对象。
- var list=$(“input”); //jQuery对象。
- var list2=list.get(0); //DOM对象。
- 对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。
- var list = document.getElementById(“name”); //DOM对象。
- var list2 = $(list); //jQuery对象。
