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
        }
    });
});

 另外

: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="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');
		 });
	}
});