jQuery 学习(2)——jQuery选择器

1.jQuery为元素添加CSS样式如下：

<div id="tt1">单个样式：css（）内"属性名称","value"</div>
<div id="tt2">多个样式：css（）内加{}并用"属性名称1":"value","属性名称2":"value"</div>
<script type="text/javascript">
$('#tt1').css("color","red");
$('#tt2').css({"color":"red","font-size":"20px"});
</script>

2.回顾javascript案例

（1）页面所有元素加载完毕，找到所有P元素，点击P元素，弹出提示信息，如下：

<script type="text/javascript">
window.onload=function(){//页面所有元素加载完毕
    var items=document.getElementsByTagName("p");//获取页面中的所有p元素
    for(var i=0;i<items.length;i++){//循环也可以是遍历
        items[i].onclick=function(){//给每一个p添加onclick事件
            alert("提示信息!");
        }
    }
}
</script>

<p>测试1</p>
<p>测试2</p>

（2）表格隔行变色

<script type="text/javascript">
window.onload = function(){ //页面所有元素加载完毕
    var item  =  document.getElementById("tb");            //获取id为tb的元素(table)
    var tbody =  item.getElementsByTagName("tbody")[0];    //获取表格的第一个tbody元素
    var trs =   tbody.getElementsByTagName("tr");            //获取tbody元素下的所有tr元素
    for(var i=0;i < trs.length;i++){//循环tr元素
        if(i%2==0){        //取模. (取余数.比如 0%2=0 , 1%2=1 , 2%2=0 , 3%2=1)
            trs[i].style.backgroundColor = "#888"; // 改变 符合条件的tr元素 的背景色.
        }
    }
}
</script>

<table id="tb">
    <tbody>
        <tr><td>第一行</td><td>第一行</td></tr>
        <tr><td>第二行</td><td>第二行</td></tr>
        <tr><td>第三行</td><td>第三行</td></tr>
        <tr><td>第四行</td><td>第四行</td></tr>
        <tr><td>第五行</td><td>第五行</td></tr>
        <tr><td>第六行</td><td>第六行</td></tr>
    </tbody>
</table>

（3）对多选框进行操作，统计选种个数

<script type="text/javascript">
window.onload = function(){//页面所有元素加载完毕
    var btn = document.getElementById("btn");  //获取id为btn的元素(button)
    btn.onclick = function(){                   //给元素添加onclick事件
        var arrays = new Array();              //创建一个数组对象
        var items = document.getElementsByName("check");  //获取name为check的一组元素(checkbox)
        for(i=0; i < items.length; i++){  //循环这组数据
            if(items[i].checked){      //判断是否选中
                arrays.push(items[i].value);  //把符合条件的 添加到数组中. push()是javascript数组中的方法.
            }
        }
        alert( "选中的个数为："+arrays.length  );
    }
}
</script>

<form method="post" action="#">
    <input type="checkbox" value="1" name="check" checked="checked"/>
    <input type="checkbox" value="2" name="check" />
    <input type="checkbox" value="3" name="check" checked="checked"/>
    <input type="button" value="你选中的个数" id="btn"/>
</form>

3.使用jQuery选种元素

步骤一：需要使用的HTML代码如下：

<div class="one" id="one" >
    id为one,class为one的div
    <div class="mini">class为mini</div>
</div>
 
<div class="one"  id="two" title="test" >
    id为two,class为one,title为test的div.
    <div class="mini"  title="other">class为mini,title为other</div>
    <div class="mini"  title="test">class为mini,title为test</div>
</div>
 
<div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini"></div>
</div>
 
<div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini"  title="tesst">class为mini,title为tesst</div>
</div>
 
<div style="display:none;"  class="none">
    style的display为"none"的div
</div>
 
<div class="hide">class为"hide"的div</div>
 
<div>
    包含input的type为"hidden"的div<input type="hidden" size="8"/>
</div>
 
<span id="mover">正在执行动画的span元素.</span>

步骤二：需要使用的CSS样式如下：

div,span,p {
    width:140px;
    height:140px;
    margin:5px;
    background:#aaa;
    border:#000 1px solid;
    float:left;
    font-size:17px;
    font-family:Verdana;
}
div.mini {
    width:55px;
    height:55px;
    background-color: #aaa;
    font-size:12px;
}
div.hide {
    display:none;
}

以上效果如下：

步骤三：使用jQuery编写效果如下：

（1）基本选择器

选择 id为 one 的元素：

 $('#one').css("background","#bfa");

选择 class 为 mini 的所有元素

$('.mini').css("background","#bfa");

选择 元素名是 div 的所有元素

$('div').css("background","#bfa");

选择 所有的元素

$('*').css("background","#bfa");

选择 所有的span元素和id为two的div元素

$('span,#two').css("background","#bfa");

（2）层次选择器

选择 body内的所有div元素.

$('body div').css("background","#bbffaa");

在body内的选择 元素名是div 的子元素.

$('body > div').css("background","#bbffaa");

选择 所有class为one 的下一个div元素.

 $('.one + div').css("background","#bbffaa");

选择 id为two的元素后面的所有div兄弟元素.

$('#two ~ div').css("background","#bbffaa");

（3）过滤选择器

3.1）基本过滤选择器

选择第一个div元素

 $('div:first').css("background","#bfa");

选择最后一个div元素.

$('div:last').css("background","#bfa");

选择class不为one的 所有div元素.

$('div:not(.one)').css("background","#bfa");

选择 索引值为偶数 的div元素。

$('div:even').css("background","#bfa");

选择 索引值为奇数 的div元素。

$('div:odd').css("background","#bfa");

选择 索引等于 3 的元素

$('div:eq(3)').css("background","#bfa")

选择 索引大于 3 的元素

$('div:gt(3)').css("background","#bfa");

选择 索引小于 3 的元素

$('div:lt(3)').css("background","#bfa");

选择 所有的标题元素.比如h1, h2, h3等等...

$(':header').css("background","#bfa");

当前正在执行动画的所有元素.

$(':animated').css("background","#bfa");

选择 当前获取焦点的所有元素.

$(':focus').css("background","#bfa");

3.2）内容过滤选择器

选取含有文本"文本"的div元素.

$('div:contains(文本)').css("background","#bbffaa");

选取不包含子元素(或者文本元素)的div空元素.

$('div:empty').css("background","#bbffaa");

选取含有class为mini元素 的div元素.

$("div:has('.mini')").css("background","#bbffaa");

选取含有子元素(或者文本元素)的div元素.

$('div:parent').css("background","#bbffaa");