一些jquery语句欣赏~

（1）

$("ul li:gt(5):not(:last)")

选择第6个li到倒数第2个li

（2）

一般看到return false，如果是在<a>标签的click事件中，则说明要消除默认跳转。

（3）

$("ul li").remove("li[title!='苹果']")，将title不等于苹果的li删除掉。注意删除的节点还可以继续引用，重新添加回去。如：

var $a=$("ul li").remove("li[title!='苹果']")，然后$("ul li").append($a);

（4）

var b=$("ul li:eq(2)").clone(  ); 
$("ul li").append(b); // 错误的写法

        复制第3个节点，然后添加到ul中，注意如果是上面的写法，则是给每个li的底下都加了一个3号节点，要改成$("ul").append(b);，这才是正确的。

（5）

经常看到点击后，展开折叠效果，再点击又收起。

代码：

$("#f").toggle(
function( ){

$(this).addClass("highlight");         // 还可以趁此机会加个高亮样式

$(this).next( ).hide(1000);

    }，

function(  ){
$(this).next(  ).show(1000);
$(this).removeClass("highlight");    

    }

 )             //  这里next(  )用得太赞啦，指向直接兄弟的子节点。

（6）

 这个方法在“随手解救那里见过”，做一个div，然后mousemove第一个div的时候，将其显示在鼠标的旁边。

  $("#f").mousemove( function(e){
    $(this).css("left":e.pageX + 10+"px"，"top":e.pageY +20+ "px" )       // 最好横坐标，纵坐标都多加一点，避免和鼠标的位置相重合。

});

要注意，最好给#f的节点设置position为absolute，然后left和top才有意义。

e.pageX和e.pageY都是数字，没有像素单位，要注意如果要多加上20px跟鼠标的距离区分开，则：

"left":e.pageX +20+ "px"，"top":e.pageY +20+ "px"

别写成：

"left":e.pageX + "20px"，"top":e.pageY + "20px"      // 这样的话会出现问题，会出现拼字符串的想象，比如前面是100，则结果是1020px，而不是我们要的120px，因为js的字符串遇到数字就是拼接，而php里是转换为数字计算。

（7）我们常看到凡客这样的，鼠标移动上去后就有大图。。。实现原理是：

<a href="大图地址"><img src="小图"></a>

把事件注册到<a>上面，然后创建一个新的div，这个div里头有<img>，而大div的img的src正是小<a>标签的href值。然后给大div设置position:absolute，left和top都是鼠标实时的坐标值，便会随着鼠标移动。

（8）

  $("#start").click(function(){
    $("#box").animate({height:300},"slow");
    $("#box").animate({width:300},"slow");
    $("#box").animate({height:100},"slow");
    $("#box").animate({width:100},"slow");
  });

实现简单的动画。

（9）

 var a=$("#fs").css("padding-top")获取padding-top后，想改变它的值。

不可以$("#fs").css("padding-top")="100px"，因为前面是个返回值的式子，所以不能赋值。

只能$("#fs").css("padding-top"，"100px"），如果是要原有基础上加100px，而不是设置为100px，则可以：

 var a=$("#fs").css("padding-top");
 var b=parseInt(a)+100;              // 把单位去掉
$("#fs").css("padding-top",b);     // 把值放进去，而不要用等号赋值的形式

（10）

注册提交完后立马显示信息的程序： 

输入姓名:<input type="text" name="" value="输入姓名" id="f"><br/>
  性别:<input type="radio" name="sex" value="男生" id="s">
            <input type="radio" name="sex" value="女生" id="t">
    婚否:<input type="checkbox" name="marry" id="ff">
  <div id="fff"></div>
   提交按纽:<input type="button" id="sub">

$("#sub").click(function(  ){                                        //  id=sub是提交按纽，点完后会触发事件
var a=$("#f").val(  );                                     //   如果用户什么也没输，val(  )的值是默认给出的值 
var sex=$("#s").is(":checked")?"男生":"女生";                      // 如果选择了就是男生，没选择就是女生
  var m=$("#ff").is(":checked")?"已婚":"未婚";
$("#fff").html("您的名字是:"+a+"性别是:"+sex+"婚否:"+m);          // 触发了id=sub元素上的事件，同时可以改变id=fff上的事件，将其写在事件函数里就可以。
})

（11）

 $("#z").click(
function(  ){
$(this).toggleClass("new,new1,new2,...").html("点击之后的样式").html("点击之后的样式");
}
   )

toggleClass（  ）会切换样式，而且没规定就一定是2个，可以给无穷多个，依次切换过去。

（12）

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>

如果是$("ul li:eq(2)").css("color","red")，只会对第一个ul的第3个li起作用，要换成：$("ul li:nth-child(3)").css("color","red")。

注意：只要不具体到某个li，即某个子项，无论是$("ul“)还是$("ul li")两种方式都是等价的。

$("ul li：even")这里选择的是偶数索引值，所以实际是奇数位置上的数，$("ul li:nth-child(even)")这里直接选择偶数位置上的数，两者完全相反。

（13）

点击完后，按钮变成不可点，$(this).attr("disabled","disabled")，不要写成$(this).disabled="disabled"，后者是原生js的写法。

（14）

$("form :password")，form去操作表单的时候中间要有空格，因为form与input之间还有上下级关系。

（15）

 $("ul li:gt(1):lt(4)").css("color","red")，选择了第3到第4个li。所以lt和gt可以组合使用。

（16）

$("#f").attr({src:"22.jpg",title:"dsa"})，给img标签加src属性，还加title属性，凡是加2个以上的时候，就要用{  }，里头的数据格式就好象json，不过属性值加不加引号无所谓，但值一定要加引号。

（17） 

 <select name="" id="f" multiple="multiple">
<option value="1" >1
<option value="2">2
<option value="3">3
<option value="4">4
 </select>

$("#f").val(3)这样可以初始选择第3个option。

$("#f").val([2，3])，里头用数组的形式，则可以初始选择两个选项。

注意select的事件，用onchange。

（18）

这个方式蛮有趣的。

$(function(){
function htm(  ){
var str="<p>我们都是好孩子</p>";
return str;
}
$("body").append(htm(  ));
}
)

（19）

<p id="f">我们都是好孩子 </p>

$("#f").click(
function(  ){
alert(1);
}
)
$("#f").clone(true).appendTo("body")，用clone而且带参数true，不仅把节点克隆过来，还把注册的事件带过来。

（20）

<p id="f">我们都是好孩子 </p>
<p id="g">你们都是好孩子 </p>
<p id="s">他们都是好孩子 </p>
<script type="text/javascript" src="jquery-1.5.1.js"> </script>
<script type="text/javascript">
$("p").each(
function(index){
alert(index); // 结果是0，1，2

alert(this.id); // 结果是f,g,s，注意this.id是原生js取属性的方式，等价于$(this).attr("id")

});

each( )可以传一个形参index，index是从0开始计算的，是每一项的序列号。

（21）

点击“显示”则显示更多内容，点击“隐藏”则将有关内容隐藏。

第一种方法：

$("#f").toggle( 
function(  ){
$("#s").show(  );
$(this).html("隐藏"); // 记得把按纽的提示文字改变下，交互体验会更好
},
function(  ){
$("#s").hide(  );
$(this).html("显示");
}
)

第二种方法：

$("#f").click(

function( ){

if($("#f").html( )=="隐藏"){ // 点击完后做个判断，如果提示“隐藏”，则说明要将有关内容隐藏

$("#s").hide(  );
$(this).html("显示"); //隐藏后，再把按纽改成显示，为下步操作做准备

}else{

$("#s").show(  );
$(this).html("隐藏");

}

})