jQuery学习笔记(2)-选择器的使用

一、选择器是什么

有了jQuery的选择器，我们几乎可以获取页面上任意一个或一组对象

二、Dom对象和jQuery包装集

1.Dom对象

JavaScript中获取Dom对象的方式

<div id="divMsg">Hello World</div>
<script>
    var div = document.getElementById("divMsg");
    console.log(div);
    var divs = document.getElementsByTagName("div");
    console.log(divs);
</script>

输出的结果

2.jQuery包装集

可以理解为是Dom对象的扩展，在jQuery的世界中所有的对象，都被封装成一个jQuery包装集，包装集是一个集合

<div id="divMsg">Hello World</div>
<script>
    $(function () {
        var div = $("#divMsg");
        console.log(div);
        var divs = $("div");
        console.log(divs);
    })
</script>

输出的结果

3.Dom对象与jQuery对象的转换

(1)Dom转jQuery包装集

<div id="divMsg">Hello World</div>
<script>
    //第一步：获取Dom元素对象
    var div = document.getElementById("divMsg");
    //第二步：使用$()来转换
    var $div = $(div);
    console.log($div);
</script>

(2)jQuery包装集转Dom对象

注：通过索引器返回的不再是jQuery包装集，而是一个Dom对象

<div id="divMsg">Hello World</div>
<script>
    //第一步：通过索引器从包装集获取一个元素
    var div = $("#divMsg")[0];
    console.log(div);
</script>

三、选择器的分类

1.jQuery选择器按照功能主要分为“选择”和“过滤”。并且可以配合使用，可以同时使用组合成一个选择器字符串。主要的区别是：“过滤”作用的选择器是指定条件从前面匹配的内容中筛选，“过滤”选择器也可以单独使用，表示从全部“*”中帅选。比如

$(":[title]") 等同于 $("*:[title]")

而“选择”功能的选择器则不会有默认的范围，因为作用是“选择”而不是“过滤”；

2.基础选择器Basics

$("#divId") 		         选取ID为divId的元素
$("a") 			选取所有<a>元素
$(".bgRed") 			选取class为bgRed的元素
$("*")			选取所有元素
$("#divId, a.bgRed")		选取ID为divId的元素，和class为.bgRed的<a>元素

3.层次选择器

$(".bgRed div") 		选取class为bgRed的元素中的所有<div>元素
$(".myList>li") 		选取class为myList元素中的直接子节点<li>对象
$("#hibiscus+img")		选取在id为hibiscus元素后面的img对象
$("#someDiv~[title]")		选取id为someDiv的对象后面所有带有title属性的元素

4.基本过滤器Basic Filters

$("tr:first")		         选取第一个<tr>元素
$("tr:last")			选取最后一个<tr>元素
$("input:not(:checked)")         选取未选中的 <input> 元素
$("tr:odd")			选取偶数位置的<tr>元素
$("tr:eq(1)")			选取第2个<tr>元素(索引从0开始)
$("tr:gt(0)")			选取索引大于等于1的<tr>元素
$("tr:lt(2)")			选取索引小于2的<tr>元素
$(":header")                     选取页面所有的标题

5.内容过滤器Content Filters

$("div:contains('Kimisme')")     选取包含 "Kimisme" 的 <div>元素
$("td:empty")			选取不包含子元素或者文本的<td>元素

$("div:has(p)")		选取含有<p>元素的<div>元素
$("td:parent")			选取含有子元素或者文本的 <td> 元素

6.可见性过滤器 Visibility Filters

$("tr:hidden")			选取不可见的 <tr> 元素:
$("tr:visible")		选取可见的 <tr> 元素:

7.属性过滤器 Attribute Filters

$("div[id]")			选取含有 id 属性的 <div> 元素
$("input[name='newsletter']")	选取 name 属性是 newsletter 的 <input> 元素
$("input[name!='newsletter']")	选取 name 属性不是 newsletter 的 <input> 元素
$("input[name^='news']")	选取 name 属性以news开头的 <input> 元素
$("input[name$='letter']")	选取 name 以 letter 结尾的 <input> 元素: 
$("input[name*='man']")		选取 name 包含 man 的 <input> 元素
$("input[id][name$='man']")	选取含有 id 属性，并且它的 name 属性是以 man 结尾的<input>元素

8.子元素过滤器 Child Filters

$("ul li:nth-child(2)")		在 <ul> 元素中查找第2个 <li> 元素
$("ul li:first-child")		在 <ul> 元素中查找第1个 <li> 元素 
$("ul li:last-child")		在 <ul> 元素中查找最后一个 <li> 元素 
$("ul li:only-child")		在 <ul> 元素中查找是唯一子元素的 <li> 元素

9.表单选择器Forms

$(":input")			选取所有的<input>元素
$(":text")			选取所有type=”text”的文本框
$(":password")		         选取所有密码框
$(":radio")			选取所有单选按钮
$(":checkbox")		         选取所有复选框 
$(":submit")		         选取所有提交按钮
$(":image")			选取所有图像域
$(":reset")			选取所有重置按钮
$(":button")		         选取所有按钮
$(":file")			选取所有文件域

10.表单过滤器Form Filters

$("input:enabled")		选取所有可用的input元素: 
$("input:disabled")		选取所有不可用的input元素: 
$("input:checked")		选取所有选中的复选框元素:
$("select option:selected")	选取所有选中的<select>元素:

四、参考文章

http://www.cnblogs.com/zhangziqiu/archive/2009/05/03/jQuery-Learn-2.html

五、备注

样式发不出来还是不行，还是要用table，有空再改