一、什么是jQuery
- jQuery是JavaScript与Query(查询)的缩写,它是辅助JavaScript开发的js类库
- 它的核心思想是“写的更少,做的更多”,并且它解决了很多浏览器的兼容问题
- jQuery十分流行
- jQuery是免费开源的,jQuery的语法设计可以使得开发更加便捷,例如操作文档对象、选择DOM元素、制作动画效果、事件处理以及其他功能
这里我们通过一个小案例先演示一下(分别通过原生js与jQuery实现一个按钮的单击事件)
-
通过这个案例我们得到
-
使用jQuery必须先引入jQuery库
-
jQuery的$实际上是一个函数(有需要的同学可以看源码)
-
使用jQuery为按钮添加单击事件的步骤如下:
-
使用jQuery得到标签对象
-
使用 标签对象.click(function(){})
二、核心函数 $()
核心函数的四个作用:
- 传入参数为【函数】时,在文档加载完成后执行这个函数
- 传入参数为【HTML字符串】时,根据这个字符串创建元素节点对象
- 传入参数为【选择器字符串】时,根据这个字符串查找元素节点对象
- 传入参数为【DOM对象】时,将DOM对象包装为jQuery对象返回
三、如何区分DOM对象与jQuery对象
jQuery与DOM对象在使用时注意:
- jQuery对象不能使用DOM对象的属性和方法
- DOM对象也不能使用jQuery对象的属性和方法
四、jQuery对象本质是什么
对上面这段代码我们通过调试得到实际上**$(btns)对象 即jQuery对象 = dom对象的数组 + jQuery提供的一系列功能函数**
五、jQuery对象与DOM对象的相互转换
六、jQuery基础选择器
id选择器
2.class选择器
值得注意的是这里的查找结果顺序是与HTML代码标签出现顺序有关
3.标签名选择器
4. * 选择器
5.组合选择器
上图所出现的“p.myClass”意思是找到标签名是“p”的并且class属性是“myClass”的标签
七、层级选择器
1.ancestor descendant
这个实例是找到所有form标签下的input子元素(子子孙孙)
2.parent > child
这个实例是找到所有form标签的input子元素(只包括儿子)
3.prev + next
4.prev ~ siblings
八、基本过滤选择器
1、 :first
2、 :last
3、 :not(selector)
4、:even
注意:这里的索引都是从0开始
5、 :odd
6、:eq (index)
7、 :gt(index)
8、 :lt(index)
9、 :header
10、 :animated
九、内容过滤选择器
1、 :contains(text)
2、 :empty
3、 :parent
该选择器与empty选择器刚好相反
4、 :has(selector)
十、属性过滤选择器
1.[attribute]
2.[attribute=value]
3.[attribute!=value]
这里要强调的是,标签不包含所写属性时也会被查找到
4.[attribute^=value]
5.[attribute$=value]
6.[attribute*=value]
7.[selector1][selector2][selectorN]
十一、表单过滤选择器
1. :input
该选择器会匹配所有的input、textarea、select和button元素
2. :text
3. :password
4. :radio
5. :checkbox
6. :submit
7. :image
8. :reset
9. :button
10. :file
11. :hidden
匹配所有不可见元素,或者type为hidden的元素
12. :enabled
13. :disabled
14. :checked
15. :selected
十二、jQuery元素的筛选
(1条消息) jQuery元素的筛选_ZZZWWWFFF_的博客
十三、jQuery属性操作
(1条消息) jQuery属性操作_ZZZWWWFFF_的博客