入门jQuery

321 阅读2分钟

一、什么是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_的博客

十四、DOM的增删改

DOM的增删改_ZZZWWWFFF_的博客-

十五、 CSS样式操作

CSS样式操作_ZZZWWWFFF_的博客-

十六、动画操作

jQuery动画操作_ZZZWWWFFF_的博客

十七、事件操作

jQuery事件操作_ZZZWWWFFF_的博客