jQuery之基础选择器
这一系列是我系统学习jQuery的笔记，有助于当前学习理解和日后回忆。内容来自慕课网陶老师的jQuery基础教程，先谢过。
1.基础选择器
- id选择器：$("#elementId")
- 元素选择器：$("elementTag")
- 类选择器：$(".className")
- 通配选择器：$("*") 页面所有元素，包括<head> <body> <script>这些
- 或选择器：$("selector1,selector2,selectorN") 逗号隔开几个参数，取它们的并
<body> <div class="red">会被选上</div> <div class="green">会被选上</div> <div class="blue">我被落下</div> <script type="text/javascript"> $(".red,.green").html("hi,我们的样子很美哦!"); </script> </body>
- 父子孙选择器：$("ance desc") 空格隔开参数，取父元素中的子孙元素
如$("div span")表示取div中所有的span元素。
- 父子选择器：$(parent > child) >隔开参数，取父元素中的子元素
如$("div > span")表示取div（下图黑色框）中子一级（下图红色框）span元素，孙辈（下图蓝色框）之后的就不取了。
- 邻居选择器：$("elementTag + ") +表示同级下一个元素，两个+自然就指下下个元素（如果有的话）。邻居选择器后还可以继续过滤选择。
如下图灰色框表示div，$("div +")指红色框，$("div + +")指褐色框。如果红色框是一个label，则$("div+label")指红色框，否则无所指。
- 邻居选择器2：$("elementTag ~") ~表示同级后面的所有元素，同样后面还可以继续过滤选择。
如下图灰色框代表div，则$("div~")表示两个红色框，$("div~label")表示这些红色框中的label。
2.过滤选择器
- :first $("li:first") 获取第一个li
- :first-child $("li:first-child") 获取每组li中的第一个，得到集合
- :last $("li:last") 获取最后一个li
- :last-child $("li:last-child") 获取每组li中的最后一个，得到集合
- :eq(index) $(li:eq(2))取li的第三个，索引从0开始
- :lt(index) $(li:lt(2))取li的前2个
- :gt(index) $(li:gt(2))从第3个li取到最后
- :contains(text) $(li:contains('jQuery'))获取页面文本中包含'jQuery'的li
- :has(elementTag) $(li:has('p'))获取含有p标签的li
- :hidden $(input:hidden)获取隐藏的input元素
- :visible $(li:visible) 获取可见的li元素
- [attribute=value] $("li[title='like']") 获取title等于like的li元素
- [attribute！=value] $("li[title='like']") 获取title不等于like的li元素
- [attribute*=value] $("li[title*='果']")获取title属性值包含'果'的所有li元素
3.表单选择器
:input 获取<input>、<textarea>、<select>、<button>全部表单元素
:text 获取单行输入元素
:password 获取密码输入元素
:radio 获取单选按钮
:checkbox 获取多选按钮
:image 当input的type=image时，元素显示为图像，但此时$("img")获取不到，需用:image
:button 获取button按钮
:checked 获取选中元素
:selected 获取的下拉菜单中的项
