jQuery笔记(更新中...)

简写：

$(document).ready(function(){
    alert("Hello");
});
可简写为
$(function(){
    alert("Hello");
});

解决jQuery和其它库的冲突方法之一：

var $j = jQuery.noConflict();
  $j(function(){
    alert("Hello");
  });

更改样式：

<div id="div1">id为div1</div>
$("#div1").css("background","#bbffaa");

判断某个元素是否存在：

if($("#cr").length > 0)  //$("#cr")获取的是对象，不能用if($("#cr"))
     alert("存在");
else
     alert("不存在");

判断checkbox是否选择：

if($("#ID").attr("checked")==true)
或
if($("#ID").is(":checked"))

获取div内容：

$('#divID').html();

文本框赋值：

$('#ID').val(1);    

checkbox全选和全不选：

1、当分别有全选和全不选时

<input name="friendIds" type="checkbox" value="1" />
<input name="friendIds" type="checkbox" value="2" />
<input name="friendIds" type="checkbox" value="3" />

<span id="selectall" style="cursor:pointer">全选</span> |
<span id="deselectall" style="cursor:pointer">全不选</span>


 $("#selectall").click(function() {
         $("input[type=checkbox][name=friendIds]").attr("checked", true);

        //或： $("[name=friendIds]:checkbox").attr("checked", true);
 });
  $("#deselectall").click(function() {
         $("input[type=checkbox][name=friendIds]").attr("checked", false);

        //或： $("[name=friendIds]:checkbox").attr("checked", false);
 });

2、当只有一个复选框时

<input id="allSel" type="checkbox" />全选/全不选 

 $("#allSel").click(function() {
        $("input[type=checkbox][name=friendIds]").attr("checked", this.checked);

       //或： $("[name=friendIds]:checkbox").attr("checked", this.checked);
 }); 

获取checkbox选中的值：

 $("#test").click(function() {
    var selectVal = "";
    $("[name='friendIds']:checked").each(function(){
       selectVal += $(this).val() +",";       
    });
    selectVal = selectVal.slice(0,-1);
    alert(selectVal);
});

表单序列化：

$("#save").click(function(){                 
        jQuery.get("Save.page", jQuery("#form1").serialize(),
                   function (data, textStatus){ alert("服务器端返回的数据：" + data);}
  ); 
})   

post提交：

 $("#CommentSave").click(function(){
           jQuery.post("Save.page", {activityId:$("#Id").val(), body:$("#body").val()},
              function (data, textStatus){
                 if(data == "1") {                   
                    alert("留言成功！");                   
                 }
                 else
                    alert("留言失败！");    
              }
           ); 
   })

选中下拉框：

$(document).ready(function(){
   $("#btn1").click(function(){
       $("#sex").val("1");
   });
   $("#btn2").click(function(){
       $("#sex option").each(function(){
          if($(this).text()=="女"){
          $(this).attr("selected",true);
           }
      })
   });
});

<select id="sex" >   
    <option value="0">不限</option>
    <option value="1">男</option>
    <option value="2">女</option>
</select>
<br />
<input type="button" id="btn1" value="根据value选中"/>
<br />
<input type="button" id="btn2" value="根据text选中"/>

切换状态：

  $("#panel h5.head").toggle(function(){
     $(this).next("div.content").show();
  },function(){
     $(this).next("div.content").hide();
  })

<div id="panel">
  <h5 class="head">标题1</h5>
   <div class="content">
      内容1
   </div>
</div>

表格变色：

.even{background:#fff38f}  /*偶数行*/
.odd{background:#ffffee}  /*奇数行*/

$("tbody>tr:odd").addClass("odd");
$("tbody>tr:even").addClass("even");

表格当前行点击高亮，并将当前行的单选框设为选中：

$("tbody>tr").click(function(){
     $(this)
         .addClass("selected")
         .siblings().removeClass("selected")
         .end()                              //返回到当前$(this)对象
         .find(":radio").attr("checked",true); //将当前行的单选框设为选中
});

此外，当初始化表格时如果默认有单选框被选中，则

$("table :radio:checked").parent().parent().addClass("selected");

复选框控制表格行高亮：

 
$("tbody>tr").click(function(){
   if($(this).hasClass("selected")) {
        $(this)
            .removeClass("selected")
            .find(":checkbox").attr("checked",false);
   }else{
        $(this)
            .addClass("selected")
            .find(":checkbox").attr("checked",true);
   }
});

也可简化成：

$("tbody>tr").click(function(){
    var hasSelected = $(this).hasClass("selected");
    $(this)[hasSelected?"removeClass":"addClass"]("selected");
    .find(":checkbox").attr("checked",!hasSelected );
});

选项卡效果：

var $div_li = $("div.tab_menu ul li");
$div_li.click(function(){
     $(this).addClass("selected")                    //当前<li>元素高亮
           .siblings().removeClass("selected");  //去掉其它同辈<li>元素的高亮

      var index = $div_li.index(this);              //获取当前单击的<li>元素在全部<li>元素中的索引
      $("div.tab_box > div")                          //选取子节点
           .eq(index).show()                           //显示<li>元素对应的<div>元素
           .siblings().hide();                            //隐藏其它同辈的<div>元素
}).hover(function(){                                  //添加光标滑过效果
      $(this).addClass("hover");
},function(){
      $(this).removeClass("hover");
});

 <div class="tab">
   <div class="tab_menu">
        <ul>
            <li class="selected">时事</li>
            <li>体育</li>
            <li>娱乐</li>
        <ul>
   </div>
   <div class="tab_box">
        <div>时事</div>
        <div class="hide">体育</div>
        <div class="hide">娱乐</div>
   </div>
</div>



获取outerHTML：
jQuery.fn.outerHTML = function () {
    return $($('<div></div>').html(this.clone())).html();
}
input输入框回车事件：

$("#txtPassword").bind('keyup', function(event){
        if(event.keyCode == "13"){
            Login();
        }
      });