1. jQuery 介绍：JavaScript 和 Query，辅助 JavaScript 开发的 js 类库；
2. js 使用方式
① 在 script标签中，先导入 js 文件
② 使用 $(function(){....}); 表示页面加载之后，相当于 windows.onload=function(){...};
注：var $btnObj = $("#btnId")；// $("#btnId")：表示按 id 查询标签对象，是 jQuery 对象；
$btnObj.click(function(){......})；// 表示 jQuery的单击事件
$(function(){....}); 全写为 $(document).ready(function(){......})；
3. 常见问题
使用 jQuery 一定要引入 jQuery库；
jQuery 中的 $ 是一个函数；
添加各种事件的响应：（1）使用 jQuery 查询到标签对象；（2）使用 标签对象.事件(function(){.....})；
4. $ 是 jQuery 的核心函数，能完成很多功能，$() 就是调用 $ 这个函数；
① 传入参数为【函数】时：在文档加载完成后执行这个函数；
② 传入参数为【HTML 字符串】时，根据这个字符串创建元素节点对象；
③ 传入参数为 【选择器字符串】时：
-
- $("#id属性值"); // id选择器，根据 id 查询标签对象；
- $("标签名"); // 标签名选择器，根据指定的标签名查询标签对象；
- $(".class属性值"); // 类型选择器，根据 class 属性查询标签对象；
④ 传入参数为【DOM对象】时：将 DOM 对象包装为 jQuery 对象返回；
5. jQuery 对象和 DOM 对象区别
Dom 对象
-
- 通过 getElementById() 查询出来的标签对象是dom对象；
- 通过 getElementByName() 查询出来的标签对象是dom对象；
- 通过 getElementBytagName() 查询出来的标签对象是dom对象；
- 通过 createElement() 方法创建出来的对象，是dom对象；
jQuery 对象
-
- 通过 jQuery 提供的 API 创建的对象，是 jQuery 对象；
- 通过 jQuery 包装的 Dom 对象，也是 jQuery 对象；
- 通过 jQuery 提供的 API 查询到的对象，是 jQuery 对象；
5. jQuery 对象的本质是 DOM 对象的数组 + jQuery 提供的一系列功能函数；
6. Dom 对象和 jQuery 对象互转
① dom 对象转化为 jQuery 对象
-
- 先有 Dom 对象；
- $(Dom对象) 就可以转化成 jQuery 对象；
② jQuery 对象转换为 dom 对象
-
- 先有 jQuery 对象；
- jQuery 对象[下标] 去除相应的 Dom 对象；
7. jQuery 选择器
7.1 基本选择器
-
- #ID 选择器：根据 id 查找标签对象；
- .class 选择器：根据 class 查找标签对象；
- element 选择器：根据标签名查找标签对象；
- * 选择器：表示任意的、所有的元素；
- selector1，selector2 组合选择器：合并1、2的结果并返回 ；
p.myclass：标签名是p，class类型是myclass
css()：方法可以设置和获取样式（css("background-color", "red");）
7.2 层级选择器
-
- ancestor descendant：在给定的祖先元素下匹配所有的后代元素；
- parent > child：给定父元素下匹配所有的子元素
- prev + next：匹配所有紧接在 prev 元素后的 next 元素；
- prev ~ siblings：匹配 prev 元素之后的所有 soblings 元素；
7.3 过滤选择器（查看手册）
基本过滤选择器
内容过滤选择器
属性过滤选择器
表单过滤选择器
-
-
- val()方法可以操作表单的属性值
- each()方法是jQuery对象提供遍历元素的方法
- 在遍历的function函数中，this对象就是当前遍历到的dom对象；
-
7.4 元素的筛选（查看手册）
8. jQuery 的属性操作
html()：设置和获取起始标签和结束标签中的内容，和 dom 属性的 innerHTML 一样；
text()：设置和获取起始标签和结束标签中的文本，和 dom 属性的 innerText 一样；
val()：设置和获取表单项的 value 属性值，和 dom 属性的 value 一样；
同时设置多个表单项的选中状态；
attr()：设置和获取属性的值（遇到undefined建议使用下面的，不推荐操作checked、readOnly、selected、disabled等等）；
attr() 还可以操作自定义属性；
prop()：设置和获取属性的值（与上面互补，只推荐操作checked、readOnly、selected、disabled等等）；
9. DOM 的增删改
内部插入：
appendTo()：a.appendTo(b) 把a插入到b子元素末尾，成为最后一个子元素；
prependTo()：把a插入到b所有子元素前面，成为首个子元素；
外部插入：
insertAfter()：a.insertAfter(b) 得到 ba，平级；
insertBefore()：得到 ab
替换：
replaceWith()：a.replaceWith(b) 用 b 替换 a；
replaceAll()：用 a 替换所有的 b；
删除：
remove()：a.remove() 删除 a 标签；
empty()：清空 a 标签内的内容；
10. CSS样式操作
addClass()：添加样式
removeClass()：删除样式
toggleClass()：有就删除，没有就添加样式
offset()：获取和设置元素的坐标
11. jQuery 动画
基本动画：
show()：将隐藏的元素显示
hide()：可见的元素隐藏
toggle()：可见就隐藏，不可见就显示
以上方法都可以添加参数：
第一个参数是动画执行的时常，毫秒为单位；
第二个参数是动画的回调函数（动画完成后自动调用的函数）
淡入淡出动画：
fadeIn()：淡入（慢慢可见）
fadeOut()：淡出（慢慢消失）
fadeTo()：在指定时常内慢慢的将透明度改到指定值（0透明，1可见，0.5半透明）
fadeToggle()：切换
12. jQuery 事件操作
$(function(){}); 和 windows.onload=function(){}; 的区别
① 触发顺序：jQuery 页面加载完成后先执行；——>原生 js 页面加载完成之后；
② jQuery 的页面加载完成之后是浏览器内核解析完页面的标签创建好DOM对象之后就会马上执行；
③ 原生 js 页面加载完成后，要等浏览器内核解析完标签创建好DOM对象，还要等标签显示时需要的内容加载完成；
④ 原生 js 的页面加载完成之后，只会执行最后一次的赋值函数；
⑤ jQuery 的页面加载完成之后时全部把注册的 function 函数，依次顺序全部执行；
13. jQuery 其他常用事件处理方法
click()：绑定单击事件，以及触发单击事件
mouseover()：鼠标移入
mouseout()：鼠标移出
bind()：给元素一次性绑定一个或多个事件
one()：使用和 bind()一样，但是绑定的事件只会响应一次
unbind()：和 bind() 方法相反的操作，解除事件的绑定
live()：也是用来绑定事件，可以绑定选择器匹配的所有元素的事件，哪怕这个元素是后面动态创建出来的也有效；
14. 事件的冒泡
父子元素同时监听同一个事件，当触发子元素的事件时，同一个事件也被传递到父元素的事件里去响应；
可以使用 return false 阻止事件的冒泡响应；
15. 事件对象
事件对象：是封装有触发的时间信息的一个 javaScript 对象；
获取事件对象：在给元素绑定事件的时候，在事件的 function(event) 参数列表中添加一个参数，这个参数名习惯取为 event，
这个 event 就是 js 传递参事件处理函数的事件对象；
标签：jQuery,function,JavaWeb,对象,标签,元素,Day3,选择器 From： https://www.cnblogs.com/LinxhzZ/p/16769388.html