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("不存在");

获取div内容：

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

文本框赋值：

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

判断checkbox是否选择：

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

//或
if($("#ID").is(":checked"))

checkbox绑定change事件

$("input[name='applyItem']").change(function(){
        if(this.checked){
            $("#tb" + this.value).show();            
        }else{
            $("#tb" + this.value).hide();
        }
    });    

checkbox绑定change事件2

$(document).ready(function(){
        $("input[name='ckb']").change(function(){
            calSelTotal();
        });        
      });
      function calSelTotal(){
        var r = 0;
        $("input[name='ckb']:checkbox:checked").each(function(){
            r += parseFloat($(this).val());
        });
        alert(r);
      }

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 len=$("#tb tr").length;
for(var i = 1;i<len;i++){
    $('#tb tr:eq('+i+') td:first').html(i);
}

选项卡效果：

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>

获取outerHTML：

jQuery.fn.outerHTML = function () {
    return $($('<div></div>').html(this.clone())).html();
}

input输入框回车事件：

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

根据label的文本内容，隐藏指定label

<label>label-1</label>
<label>label-2</label>

$(function(){
   $("label:contains('label-1')").hide();
});

 获取包含特定文本内容的表格行的其他单元格内容

var v1 = getTableText("test2", 1);
var v2 = getTableText("test2", 2);
$("#div1").text("v1:"+v1 + ",v2:" + v2);

function getTableText(searchText, index){
    return $("#tb tr td").filter(function(){
        return $(this).text() == searchText;
    }).closest('tr').children('td:eq(' + index + ')').text();
}

<table id="tb">
 <tr><td>test1</td><td>1</td><td>2</td></tr>
 <tr><td>test2</td><td>3</td><td>4</td></tr>
</table>
<div id="div1"></div>