Day 11/15/2017 前端基础之jQuery（一）
jQuery选择
- 1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
- 2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
- 3.x：不兼容IE678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。
维护IE678是一件让人头疼的事情，一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少，PC端用户已经逐步被移动端用户所取代，如果没有特殊要求的话，一般都会选择放弃对678的支持。
jQuery对象时通过包装DOM对象产生的，但jQuery对象不能使用DOM对象的方法，DOM对象也不能使用JQuery对象的方法
一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：
两者之间的转换：
var $ele=$('#d1') //用jQ在标签对象中寻找一个id属性为#d1的标签，并创建一个JQ变量
var ele=document.getElementById('d1') //用DOM寻找一个id属性为#d1的标签
//把JQ对象转换成DOM对象
$("#i1")[索引值]
//把DOM对象转换成jq对象
$(DOM对象)
前端：找到标签，让他做什么
选择器
id选择器 $("#d1")
标签选择器 $("p")
class选择器 $(".c1")
所有元素选择器 $("*")
组合选择器 $("#d1,.c1,p") 注：有只要有条件内的都会找到
层级选择器 x,y为任意条件
$("x y") 后代选择器
$("x>y") 子代选择器
$("x+y") 毗邻选择器 若y与x不是紧挨着，则寻找不到y
$("x~y") 兄弟选择器 x后面的所用y都能找到
基本筛选器
:first $("p:first") 第一个 <p> 元素
:last $("p:last") 最后一个 <p> 元素
:even $("tr:even") 所有偶数 <tr> 元素
:odd $("tr:odd") 所有奇数 <tr> 元素
:eq(index) $("ul li:eq(3)") 列表中的第四个元素（index 从 0 开始）
:gt(no) $("ul li:gt(3)") 列出 index 大于 3 的元素
:lt(no) $("ul li:lt(3)") 列出 index 小于 3 的元素
属性选择器
[属性] [属性=属性值] //属性等于
[属性!=属性值] //属性不等于
<input type="text"> <input type="password"> <input type="checkbox"> $("input[type='checkbox']"); // 取到checkbox类型的input标签 $("input[type!='text']"); // 取到类型不是text的input标签
表单
:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
表单对象属性:
:enabled $(":enabled") 所有激活的 input 元素
:disabled $(":disabled") 所有禁用的 input 元素
:selected $(":selected") 所有被选取的 input 元素
:checked $(":checked") 所有被选中的 input 元素
筛选器
下一个元素：
$("#id").next() //匹配元素后面紧挨着一个兄弟元素
$("#id").nextAll() //匹配元素后面所有的兄弟元素
$("#id").nextUntil("#i2") //匹配元素后面的兄弟元素，直到遇到匹配选择器的元素为止
上一个元素
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
父亲元素：
$("#id").parent()
$("#id").parents()
$("#id").parentsUntil()
儿子和兄弟元素：
$("#id").children(); // 儿子们
$("#id").siblings(); // 兄弟们
查找元素：
$("id").find() // 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
补充：
.first() // 获取匹配的第一个元素 .last() // 获取匹配的最后一个元素 .not() // 从匹配元素的集合中删除与指定表达式匹配的元素 .has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
样式操作
样式类
addClass(); // 添加指定的CSS类名。 removeClass(); // 移除指定的CSS类名。 hasClass(); // 判断样式存不存在 toggleClass(); // 切换CSS类名，如果有就移除，如果没有就添加。
