Jquery初识及选择器
1.jQuery的初步认识
(1) jQuery的定义
jQuery是一个优秀的js库，jQuery凭借简洁的语法和跨平台的兼容性，极大的简化了javascript开发人员遍历html文档、操作DOM、处理事件、执行动画和开发ajax的操作。
(2) jQuery的优势
① 1、轻量级
② 2、强大的选择器
③ 3、出色的DOM操作的封装
④ 4、可靠的事件处理机制
⑤ 5、完善的ajax
⑥ 6、不污染顶级变量 jQuery的入口函数
⑦ 7、出色的浏览器兼容 jQuery中将所有的兼容都做好了，因此不需要开发者手动兼容（只有1.x版本的jQuery能完美兼容）
⑧ 8、链式操作方式(链式编程)
⑨ 9、隐式迭代
⑩ 10、行为层和结构层的分离
⑪ 11、丰富的插件支持 jquery有很多的官方插件和民间插件 还可以自己开发插件
⑫ 12、完善的文档
⑬ 13、开源
(3) jQuery的引入
① 本地引入
1) 将jQuery的js文件 下载到本地 在使用的时候 直接script引入即可
2) 
② 网络引入
1) 直接从远程服务器引入jQuery文件
2) 
(4) jQuery入口函数
① 写法：
② 
③ jQuery入口函数的特点1：写在jQuery入口函数中的代码 会在页面上结构和样式加载完之后 执行
④ jQuery入口函数特点2：一个script标签中可以写任意多个jQuery入口函数，不会覆盖
⑤ 简写形式：$(function(){ jQuery代码 })
(5) jQuery对象和DOM对象
① jQuery对象：$(‘选择器’)
1) jQuery对象是一个伪数组 伪数组中的数组项 是所有满足选择器条件的DOM元素
② jQuery对象和DOM对象之间的方法不能互相使用。
1) Jquery的代码 和 原生js的代码 可以随意包含 因此有的时候，我们使用原生方法更简洁 有时使用jQuery方法更简洁
③ Jquery对象和DOM对象之间的互转
1) Jquery--->DOM：jQuery对象[索引]
2) DOM--->jquery：$(DOM元素)
(6) Jquery多库共存问题
① jQuery自身有一个方法 jQuery.noConflict() 这个方法一调用 就会将jQuery中的$给让出来，让给别的库使用
2.jQuery的选择器
(1) 基础选择器：
标签 类名 id
(2) 层级选择器：子代 后代
① $(‘a元素+b元素’) 获取紧跟在a元素后面的b元素 只能获取紧跟在后的元素
② $(‘a元素~b元素’) 获取a元素后面的所有b元素 可以获取间接跟在后面的元素
(3) 基本过滤选择器
① $('li:first')：获取第一个li元素
② $('li:last')：获取最后一个li元素
③ $('li:not(.box)')：获取所有的li，除了class名为box的
④ $('li:even')：获取索引为偶数的li元素
⑤ $('li:odd')：获取索引为奇数的li元素
⑥ $('li:eq(2)')：获取索引值为2的li元素
⑦ $('li:gt(2)')：获取索引大于2的li元素
⑧ $('li:lt(2)')：索引小于2的li元素
(4) 内容过滤选择器
① $(“li:contains(指定文本内容)”) 获取包含指定文本内容的li
② $(“li:has(指定标签名)”) 获取包含指定标签的li
③ $(“li:empty”) 获取内容为空的li
(5) 可见性过滤选择器
① $(“li:hidden”) 获取隐藏的元素 获取的元素不仅限于display：none 其他各种隐藏手段 隐藏起来的元素都可以获取到
② $(“li:visible”) 获取显示的元素
(6) 属性过滤选择器
① $(“li[指定的属性名]”) 选中拥有指定属性的li
② $(“li[指定的属性名=指定值]”) 选中拥有指定属性 且值为指定值的li
③ $(“li[指定的属性名^=指定值]”) 选中拥有指定属性 且值以指定值开头的li
④ $(“li[指定的属性名$=指定值]”) 选中拥有指定属性 且值以指定值结尾的li
⑤ $(“li[指定的属性名*=指定值]”) 选中拥有指定属性 且值包含指定值的li
⑥ $(“li[指定的属性名!=指定值]”) 选中拥有指定属性 且值不为指定值的li
(7) 子元素选择器
① $(“li:nth-child(序号)”) 获取指定序号的li
② $(“li:nth-child(even/odd)”) 获取索引为偶数或奇数的li
③ $(“li:nth-child(2n+1)”) 获取的是第2n+1个li 按照序号进行查找
④ $(“li:first-child”) 获取第一个li
⑤ $(“li:last-child”) 获取最后一个li
(8) 表单对象过滤选择器
① $(“表单元素:disabled”) 获取被禁用的表单元素
② $(“表单元素:checked”) 获取被选中的表单元素
③ $(“下拉列表项:selected”) 获取被选中的列表项元素
(9) 表单选择器
① 
3.jQuery基础操作
(1) jQuery操作dom节点
① jQuery获取子元素：jQuery元素.children() 注意：只能获取到直接的子元素。至于后代元素则获取不到
② $('.title').next().css('background', 'red'); // 当前元素的下一个兄弟节点
③ $('.title').nextAll().css('background', 'red'); // 当前元素的下面所有的兄弟节点
④ $('.title').prev().css('background', 'red'); // 当前元素的上一个兄弟节点
⑤ $('.title').prevAll().css('background', 'red'); // 当前元素的上面所有的兄弟节点
⑥ $('.title').siblings().css('background', 'red'); // 当前元素的兄弟节点
⑦ jQuery元素.parent() 获取直接父元素
⑧ jQuery元素.parents() 获取所有父元素（找到html为止）
1) 这个方法中可以传入一个参数 是一个选择器
⑨ jQuery父元素.find(选择器) 获取父元素中满足选择器条件的子元素
⑩ jQuery元素.filter(“选择器”) 获取jQuery元素中满足选择器条件的元素
⑪ jQuery元素.not(“选择器”) 获取jQuery元素中 不满足选择器条件的元素
(2) jQuery操作属性
① Attr方法可以操作元素属性
1) 获取属性值：jQuery元素.attr(“属性名”)
2) 设置属性：jQuery元素.attr(“属性名”,”属性值”)
3) 移除属性：jQuery元素.removeAttr(“属性名”)
② Prop方法也可以操作元素属性
1) 获取属性：jQuery元素.prop(“属性名”)
2) 设置属性：jQuery元素.prop(“属性名”,”属性值”)
③ Prop的使用环境
1) 1、只添加属性名称该属性就会生效，应该使用prop操作
2) 2、只存在true/false属性，应该使用prop操作
(3) jQuery操作类名
① addClass：jQuery元素.addClass(“要添加的类名”)
② removeClass：jQuery元素.removeClass(“要移除的类名”)
③ toggleClass：jQuery元素.toggleClass(“要切换的类名”)
④ hasClass：jQuery元素.hasClass(“指定的类名”) 判断当前元素中是否有指定类名 有返回值为true 没有返回值为false
(4) jQuery操作样式
① 获取样式：jQuery元素.css(“属性名”) 任意属性都可以获取和操作
② 设置样式：jQuery元素.css(“属性名”，”属性值”) 设置样式会统一设置为行内样式
③ 批量设置样式：jQuery元素.css({属性名：属性值，属性名：属性值....})
④ 批量获取：jQuery元素.css([属性名1，属性名2....])
1) 得到的结果如下
(5) jQuery操作内容
① Html：
1) jQuery元素.html()获取元素的html内容
2) jQuery元素.html(“指定内容”) 设置html内容
② Text
1) jQuery元素.text()获取元素的文本内容
2) jQuery元素.text(“指定内容”) 设置文本内容
③ Val
1) jQuery元素.val()获取表单元素的文本内容
2) jQuery元素.val(“指定内容”) 设置表单元素文本内容
