jQuery实战读书笔记（备忘录）

选择器备忘：

| :even 

匹配所有索引值为偶数的元素，从 0 开始计数

:odd

匹配所有索引值为奇数的元素，从 0 开始计数

实例——设置table交替行变色：

<script type="text/javascript">

        $(function(){

            $('#main_table tr').filter(':even').css({'background':'#0ff'}).filter(':odd').css({'background':'#f00'});
            //注1

        });

</script>

        <tr>

            <td width="100">a1</td>

            <td width="100">b1</td>

        </tr>

        <tr>

            <td width="100">a2</td>

            <td width="100">b2</td>

        </tr>

        <tr>

            <td width="100">a3</td>

            <td width="100">b3</td>

        </tr>

        <tr>

            <td width="100">a4</td>

            <td width="100">b4</td>

        </tr>

        <tr>

            <td width="100">a5</td>

            <td width="100">b6</td>

        </tr>

        <tr>

            <td width="100">a6</td>

            <td width="100">b6</td>

        </tr>

		<tr>

            <td width="100">a7</td>

            <td width="100">b7</td>

        </tr>

    </table>

当然也可以这么做：

$(function () {

    $("table#main_table tr").each(function (i) {

        var _this = $(this);

        if (i % 2 == 0)  //从0开始

        {

            _this.css("background", "#0ff"); //odd

        } else {

            _this.css("background", "#f00"); //even

        }

    });

});

View Code

 另外

:nth-child()

匹配其父元素下的第N个子或奇偶元素

$("table#main_table tr:nth-child(3n)").css({ 'background': '#f00' });

其中n可以使具体的正数，也可以是3n、2n这种形式的。

注1：形如table#main_table（当然这里如果是class更恰当）它和table #main_table不一样。后者是一个undefined。

 

|:contains(text)

匹配包含给定文本的元素

 <div>John Resig</div>

 <div>George Martin</div>

 <div>Malcom John Sinclair</div>

 <div>J. Ohn</div>

$('div:contains("John")').size() //注意引号的打法是：外双里单 vs 外单里双 vs text不加引号

结果为：2

另外：$('div').contains("John").size() 在jQuery1.2已被废弃。它的等同形式为：

$.fn.contains = function (text) {

    return $(this).filter(':contains(' + text + ')');

}  //注意标志部分要么都用单引号，要么都用双引号

 

 

对象访问：

| each(function)

以每一个匹配的元素作为上下文来执行一个函数(即遍历对象)

这里主要是区别$(obj).each(function)和$.each(obj,function());

var obj = { name: "John", lang: "JS" };

$.each(obj,function (index,domEle) {

    alert("Name: " + index + ", Value: " + domEle);

}); //index标示key domEle标示value

或者

$(obj).each(function (index,domEle) {

    alert("Name:"+domEle.name+",Value:"+domEle.lang);

});//index标示下标，domEle标示obj的每个对象

 

效果：

| fadeOut

使原本显示的元素淡出

$('div').css('display','block');

$(':button').click(function(){

	 $('div').fadeOut('slow',function(){

		alert('end');

	 });

});

<input type="button" value="测试" >

<div style="width:100px;height:100px;border:1px solid red;">

	hello world

</div>

| fadeIn

使原本隐藏的元素淡入

demo同上

| fadeTo

调整（隐藏元素）元素的不透明度

$('div').css('display','none');

$(':button').click(function(){

	 $('div').fadeTo('slow',0.6,function(){

		alert('end');

	 });

});

| slideDown

使原本隐藏的元素向下滑动出现

$('div').css('display','none');

$(':button').click(function(){

	 $('div').slideDown('slow',function(){

		alert('end');

	 });

});

　　

| slideUp

使原本显示的元素向上滑动出现

demo同上

 

| slideToggle

如果元素显示则执行slideUp()；如果元素隐藏则执行slideDown()

$(':button').click(function(){

	 $('div').slideToggle('slow',function(){

		alert('end');

	 });

});

相当于

$(':button').click(function(){

	if($('div').is(':hidden'))

	{

		 $('div').slideDown('slow',function(){

			alert('end');

		 });

	}else

	{

		 $('div').slideUp('slow',function(){

			alert('end');

		 });

	}

});