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

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

3.层次选择器

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

4.基本过滤器Basic Filters

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

5.内容过滤器Content Filters

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

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

6.可见性过滤器 Visibility Filters

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

7.属性过滤器 Attribute Filters

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

8.子元素过滤器 Child Filters

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

9.表单选择器Forms

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

10.表单过滤器Form Filters

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

四、参考文章

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

五、备注

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