jquery 选择器

1、文档就绪函数  

$('window').ready(function(){});

2、JQuery的ready函数与JS的onload的区别

 1).执行时间
    * window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
    * $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

 2).编写个数不同
    * window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
    * $(document).ready()可以同时编写多个，并且都可以得到执行

 3).简化写法
    * window.onload没有简化写法

    $(document).ready(function(){})可以简写成$(function(){});

3、 jquery选择器。

1).基本选择器

（1）#id     根据给定的id匹配一个元素 、返回单个元素。
    示例：$(“#test”)选取id为test的元素。

（2）.class    根据给定的类名匹配元素、返回集合元素。

    示例： $(“.test”)选取所有class为test的元素。

 
（3）element 根据给定的元素名称匹配、返回集合元素。
    示例： $(“p”)选取所有的<p>元素。

（4） * 匹配所有元素、返回集合元素。
    示例： $(“*”)选取所有的元素。

（5）Selector1,selector2,…，selectorN    将每一个选择器匹配到的元素合并后一起返回返回集合元素。
  示例：

  $(“div,span,p.myClass”)选取所有div，span和拥有class为myClass的p标签的一级组元素

2).层次选择器

（1）$("ancestor  desendant")

        选取ancestor元素里的所有descendant(后代)元素、返回集合元素。

        示例：$(“div  span”)选取<div>里的所有的<span>元素。

（2）$(“parent>child”)   选取parent元素下的子元素、返回集合元素。

    示例：$(“div>span”)选取<div>元素下元素名是<span>的子元素。


（3）$(“prev+next”) 选取紧接在prev元素后的next元素、返回集合元素。
    示例：$(“.one+div”)选取class为one的下一个<div>同辈元素


（4）$(“prev~siblings”) 选取prev元素之后的所有siblings元素、返回集合元素。

    $('#wrap3~li').addClass('red');//选取后边所有同辈选择器

    示例：$(“#two~div”)选取id为two的元素后面的所有<div>同辈元素

3).基本过滤选择器

（1）：first 选取第一个元素、返回单个元素。

    示例：$(“div :first”)选取所有<div>元素中第1个<div>元素

（2）：last    选取最后一个元素、返回单个元素。

    示例：$(“div:last”)选取所有<div>元素中最后一个<div>元素

（3）：not(selector) 去除所有与给定选择器匹配的元素、返回集合元素。

    示例：$(“input:not(.myClass)”)选取class不是myClass的<input>元素

（4）：even    选取索引是偶数的所有元素，索引从0开始、返回集合元素。

    示例：$(“input:even”)选取索引是偶数的<input>元素

（5）：odd    选取索引是奇数的所有元素，索引从0开始、返回集合元素。

    示例：$(“input:odd”)选取索引是奇数的<input>元素

（6）：eq(index)    选取索引等于index的元素(index从0开始)、返回单个元素。

    示例：$(“input:eq(1)”)选取索引等于1的<input>元素

（7）：gt(index)    选取索引大于index的元素(index从0开始)、返回集合元素。

    示例：$(“input:gt(1)”)选取索引大于1的<input>元素

（8）：lt(index)    选取索引小于index的元素(index从0开始)、返回集合元素。

    示例：示例：$(“input:lt(1)”)选取索引小于1的<input>元素

4).内容过滤选择器

（1）：contains(text) 选取含有文本内容为“text”的元素、返回集合元素。

    示例：$(‘div:contains(“测试”)’)选取包含文本“测试”的<div>元素

（2）：empty 选取不包含子元素或者文本的空元素、返回集合元素。

    示例：$(‘div:empty’)选取不包含子元素和文本的<div>空元素

（3）：has(selector) 选取含有选择器所匹配的元素的元素、返回集合元素。

    示例：$(‘div:has(p)’)选取含有<p>元素的<div>元素

（4）：parent 选取含有子元素或者文本的元素、返回集合元素。

    示例：$(“div:parent”)选取拥有子元素或文本元素的<div>元素

5).属性过滤选择器

（1）[attr] 选取拥有此属性的元素、返回集合元素。

    示例：$(“div[id]”)选取拥有属性id的元素

（2）[attr=value]    选取属性的值为value的元素、返回集合元素。

    示例：$(“div[title=test]”)选取属性title为”test”的<div>元素

（3）[attr!=value]    选取属性的值不等于value的元素。

    示例：$(“div[title!=test]”)选取属性title不等于 ”test”的<div>元素

（4）[attr^=value] 选取属性的值以value开始的元素、返回集合元素。

    示例：$(“div[title^=test]”)选取属性title以”test”开始的<div>元素

（5）[attr*=value] 选取属性的值含有value的元素、返回单个元素。

    示例：$(“div[title*=test]”)选取属性title含有”test”的<div>元素

（6）[attr1][attr2][attrN] 选择满足所有属性选择器的元素、返回集合元素。

    示例：$(“div[id][title$=‘test’]”)选取拥有属性id,并且属性title以”test”结束的<div>元素

6).子元素过滤选择器

  （1）:nth-child(index/even/odd) 选取每个父元素下的第index个或者奇偶元素。index从1开始、返回集合元素。
        示例：$(‘div:nth-child(1)’) 选取所有div中的，是其父标签的第一个子标签的div；
             $(‘div:eq(0)’);选取第一个div；


  （2）:first-child 选取每个父元素的第一个子元素、返回集合元素。
    示例： $(“ul li: first-child”)选取每个<ul>中第一个<li>元素
          $(‘div:first’)选择所有div标签中的第一个


  （3）:last-child     选取每个父元素的最后一个子元素、返回集合元素。
    示例：$(“ul li: last-child”)选取每个<ul>中最后一个<li>元素
         $(‘div:last选择所有div标签中的最后一个


  （4）:only-child 如果某个元素是它父元素中唯一的子元素，那么将会被匹配。返回集合元素。

    示例： $(“ul li:only-child”)在<ul>中选取是惟一子元素的<li>元素

7).表单选择器

（1）:enabled 选取所有可用元素、返回集合元素。

    示例：$(‘input:enabled’)选取所有可用的input元素

（2）:disabled 选取所有不可用元素、返回集合元素。

    示例：$(‘input:disabled’);选取所有不可用的input元素

（3）:checked 选中所有被选中的元素（单选框、多选框）、返回集合元素。

    示例：$(‘input:checked’);选取所有被选中的input元素

（4）:selected 选中所有被选中的元素（下拉列表）、返回集合元素。

    示例：$(‘select option:selected’);选取所有被选中的option元素

8、jquery常用方法。

1).click    当点击$()选中的所有标签时，执行click中的函数。


语法：

    $('#div1').click(function(){
alert('hello world!');
    });

2).hover    当鼠标滑入$()选中的所有标签时，执行hover中的第一个函数，当鼠标滑出时，执行第二个函数。
语法：

    $(function(){
        $('div').hover(function() {
    $('div').addClass('hover');
}, function() {
            $('div').addClass('red');

        });

    });

3).jquery链式操作

    ******//传统写法:

var div = document.getElementById('test');
div.style.color = 'red';
div.style.width = '20px';


    ******//JQ链式写法

$('#test').css('color','red').css('width','20px');