一文搞懂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’);

总结

二：层次选择器：

• ①后代选择器：$(s1 s2) 写法区别于并集选择器，规则：在S1内获取全部的S2节点

---

• ②子代选择器：$(S1 > S2) 规则：找S1的名字叫S2的儿子（孙子不算）
  

---

• ③直接兄弟选择器：$(S1 + S2) 规则：在s1后边获得紧紧挨着的第一个兄弟关系的s2节点
  

---

• ④所有兄弟选择器：$(S1 ~ S2) 获取S1后面全部名字为S2的兄弟
  

三：筛选选择器：

四：筛选方法

五：内容过滤选择器

六 ：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对象。

最后附上jQuery 在线速查手册传送门