jQuery知识概括

• jQuery介绍
• jQuery 核心函数
• jQuery 对象和 dom 对象区分
• Dom 对象和 jQuery 对象互转

• 基本选择器
• 层级选择器
• 过滤选择器
• 基本过滤器
• 内容过滤器
• 属性过滤器
• 表单过滤器
• 表单对象属性过滤器

• $( function(){} ); 和window.onload = function(){} 的区别
• jQuery 中其他的事件处理方法
• 事件的冒泡
• javaScript 事件对象

jQuery介绍

jQuery，顾名思义，也就是 JavaScript 和查询（Query），它就是辅助 JavaScript 开发的 js 类库。

• 使用 jQuery 一定要引入 jQuery 库。
• jQuery 中的$是一个函数
• 为按钮添加点击响应函数的步骤：1、使用 jQuery 查询到标签对象 2、使用标签对象.click( function(){} );

jQuery 核心函数

$ 是 jQuery 的核心函数，能完成 jQuery 的很多功能。$ ()就是调用$这个函数
1、传入参数为 [ 函数 ] 时： 表示页面加载完成之后。相当于 window.onload = function(){}
2、传入参数为 [ HTML 字符串 ] 时： 会对我们创建这个 html 标签对象
3、传入参数为 [ 选择器字符串 ] 时：

• $(“#id 属性值”); id 选择器，根据 id 查询标签对象

• $(“标签名”); 标签名选择器，根据指定的标签名查询标签对象

• $(“.class 属性值”); 类型选择器，可以根据 class 属性查询标签对象

4、传入参数为 [ DOM 对象 ] 时： 会把这个 dom 对象转换为 jQuery 对象

jQuery 对象和 dom 对象区分

Dom 对象 :

• 通过 getElementById()查询出来的标签对象是 Dom 对象

• 通过 getElementsByName()查询出来的标签对象是 Dom 对象

• 通过 getElementsByTagName()查询出来的标签对象是 Dom 对象

• 通过 createElement() 方法创建的对象，是 Dom 对象

• DOM 对象 Alert 出来的效果是：[object HTML 标签名 Element]

jQuery 对象:

• 通过 JQuery 提供的 API 创建的对象，是 JQuery 对象
• 通过 JQuery 包装的 Dom 对象，也是 JQuery 对象
• 通过 JQuery 提供的 API 查询到的对象，是 JQuery 对象
• jQuery 对象 Alert 出来的效果是：[object Object]

注意：

• jQuery 对象的本质是 dom 对象的数组 + jQuery 提供的一系列功能函数。
• jQuery 对象不能使用 DOM 对象的属性和方法
• DOM 对象也不能使用 jQuery 对象的属性和方法

Dom 对象和 jQuery 对象互转

1、dom 对象转化为 jQuery 对象

• 先有 DOM 对象
• $( DOM 对象 ) 就可以转换成为 jQuery 对象

2、jQuery 对象转为 dom 对象

• 先有 jQuery 对象
• jQuery 对象[下标]取出相应的 DOM 对象

jQuery 选择器

基本选择器

层级选择器

过滤选择器

基本过滤器

内容过滤器

属性过滤器

表单过滤器

表单对象属性过滤器

jQuery 元素筛选

jQuery 属性操作

jQuery 文档增删改

CSS样式操作

jQuery 动画

jQuery 事件操作

$( function(){} ); 和window.onload = function(){} 的区别

他们分别是在什么时候触发？
1、jQuery 的页面加载完成之后是浏览器的内核解析完页面的标签创建好 DOM 对象之后就会马上执行。
2、原生 js 的页面加载完成之后，除了要等浏览器内核解析完标签创建好 DOM 对象，还要等标签显示时需要的内容加载 完成。
他们触发的顺序？
1、jQuery 页面加载完成之后先执行
2、原生 js 的页面加载完成之后
他们执行的次数？
1、原生 js 的页面加载完成之后，只会执行最后一次的赋值函数。
2、jQuery 的页面加载完成之后是全部把注册的 function 函数，依次顺序全部执行。

jQuery 中其他的事件处理方法

事件的冒泡

事件的冒泡是指，父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去 响应。

那么如何阻止事件冒泡呢？
在子元素事件函数体内，return false; 可以阻止事件的冒泡传递。

javaScript 事件对象

事件对象，是封装有触发的事件信息的一个 javascript 对象。
我们重点关心的是怎么拿到这个 javascript 的事件对象。以及使用。

如何获取呢 javascript 事件对象呢？
在给元素绑定事件的时候，在事件的 function( event ) 参数列表中添加一个参数，这个参数名，我们习惯取名为 event。 这个 event 就是 javascript 传递参事件处理函数的事件对象。