一文搞懂jQuery

一文搞懂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对象。

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