jquery 技巧积累

1.checkbox相关操作

（1）判断复选框是否选中

if ($('#checkBox').is(":checked")) {...}

（2）checkbox选中、取消

$('#checkBox').prop("checked", true);
$('#checkBox').prop("checked", false);

（3）判断多个checkbox是否全选中

if ($('.checkItem:checked').length == 0) {
      $('#checkAll').prop("checked", false);
 }

2.禁启用按钮

$("#somebutton").attr("disabled", true);//禁用
$("#submit-button").removeAttr("disabled");//启用

注：.attr(‘disabled’,false);这样写是不对的

3.is()方法

判断选择器、元素或 jQuery 对象来检测匹配元素集合，如果这些元素中至少有一个元素匹配给定的参数，则返回 true

$("ul").click(function(event) {
  var $target = $(event.target);
  if ( $target.is("li") ) {
    $target.css("background-color", "red");
  }
});

// 是不是一个div
elem.is('div') && console.log("it's a div");

// 是不是有包含(也可以有其他类名)bigbox的类名的元素?
elem.is('.bigbox') && console.log("it has the bigbox class!");

// 是不是隐藏的?
elem.is(':not(:visible)') && console.log("it is hidden!");

//是否在动画
elem.animate({'width':200},1000);
elem.is(':animated') && console.log("it is animated!");

4.jquery中的end()方法,可以让链式语法写起来更加高效,快捷.

定义：end() 方法结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态。

<ul id="meals"> <li> <ul class="breakfast"> <li class="eggs">No</li> <li class="toast">No</li> <li class="juice">No</li> </ul> </li> </ul>

breakfast.find('.eggs').text('Yes').end() // back to breakfast
.find('.toast').text('Yes').end().find('.juice').toggleClass('juice coffee').text('Yes');

5.contextmenu事件 右键点击

也许希望web 应用感觉更像原生的，那么可以阻止contextmenu默认事件。

$(function(){
    $(document).on("contextmenu",function(e){
        e.preventDefault();
    });
});    

当然,应用此事件,也可以自定义,右键出来的操作菜单,类似于

6.empty(),remove()和detach()的区别

<div id="box" style="height: 50px;background: red">
    <p id="p1" style="height: 40px;line-height: 40px;background: #f5f5f5">111111</p>
</div>

empty()：清空子节点，和子节点绑定的事件，自身不会被删除

$('#box').click(function () {
      console.log('box')
    })
    $('#p1').click(function () {
      console.log('p1')
    })

    apple = $("#p1");
    $("#box").empty();
    $('#box').append(apple);

remove():移除被选元素，包括所有文本和子节点，不会把匹配的元素从 jQuery 对象中删除，但是绑定的事件、附加的数据等都会被移除

$('#box').click(function () {
      console.log('box')
    })
    $('#p1').click(function () {
      console.log('p1')
    })
    $('#box').data('id','11');
    apple = $("#box");
    $("#box").remove();
    console.log($("#box"));//jQuery对象中还存在
    console.log($("#box").data('id'));//null，data被清空
    $('body').append(apple);//apple中的事件和data都是undefined
    console.log($("#box").data('id'));//undefined

detach():法移除被选元素，包括所有文本和子节点，会保留所有绑定的事件、附加的数据

$('#box').click(function () {
      console.log('box')
    })
    $('#p1').click(function () {
      console.log('p1')
    })
    $('#box').data('id','11');
    apple = $("#box");
    $("#box").detach();
    console.log($("#box"));//jQuery对象中还存在
    console.log($("#box").data('id'));//null，data被清空
    $('body').append(apple);//apple中的data和事件都被保留
    console.log($("#box").data('id'));//11

注：其实remove()和detach()执行后，其实$('#box')所代表的DOM 对象都是已经被清空的，但是副本（apple）保存了它的DOM对象信息，真正的区别在于remove()会把其副本（apple）的绑定的事件、附加的数据移除，而detach()没有。当appen之后$(‘#box’)所代表的DOM 对象又被appen所替换

$('#box').click(function () {
      console.log('box')
    })
    $('#p1').click(function () {
      console.log('p1')
    })
    console.log($("#box"));
    $('#box').data('id','11');

    $("#box").detach();
    $("#box").remove();
    console.log($("#box"));//jQuery对象中还存在，但是dom对象没有了
    console.log($("#box").data('id'));//null，data被清空
    $('body').append($("#box"));//页面上没有节点内容
    console.log($("#box").data('id'));//null
    console.log($("#box"))

7.判断一个dom节点是否存在

$(selector) 不论什么情况都会返回JQuery 对象， 所以不能按照以下的方式 判断节点是否存在

if($('#aa')){} //不可以这么写

正确方法1：

if($('#aa').lenght>0){}

正确方法2：

if($('#aa')[0]){}

8.实现checkbox的状态切换（Toggle）

var checkbox = $(this).find(':checkbox');
checkbox.prop('checked', !checkbox.prop('checked'));

9.表格排序

//tr排序
    var rows = $tbody.find('tr');
    rows.sort(function (row1, row2) {
      var val1 = $(row1).data('rank');
      var val2 = $(row2).data('rank');
      if (val1 < val2) {
        return -1;
      } else if (val1 > val2) {
        return 1;
      } else {
        return 0;
      }
    });
    $tbody.append(rows);

10.有时候不希望网页的某一部分内容被选择比如复制粘贴这种事情，我们可以这么做：

$('p.descr').attr('unselectable', 'on').css('user-select', 'none').on('selectstart', false);

11.trigger 模拟触发事件

trigger模拟触发一个click事件

var press = $('#press');
press.on('click',function(e, how){
    how = how || '';
    alert('The buton was clicked ' + how + '!');
});

press.trigger('click');
press.trigger('click',['fast']);

使用on()方法创建自己喜欢的事件名称，然后通过trigger来触发

<button id="button1">Jump</button> <button id="button2">Punch</button> <button id="button3">Click</button> <button id="clear" style="float: right;">Clear</button> <div id="eventDiv"></div>

var button1 = $('#button1'),
    button2 = $('#button2'),
    button3 = $('#button3'),
    clear = $('#clear'),
    div = $('#eventDiv');

div.on({
    jump : function(){
        alert('Jumped!');
    },

    punch : function(e,data){
        alert('Punched '+data+'!');
    },

    click : function(){
        alert('Simulated click!');
    }

});

button1.click(function(){
    div.trigger('jump');
});

button2.click(function(){
    // Pass data along with the event
    div.trigger('punch',['hard']);
});

button3.click(function(){
    div.trigger('click');
});

clear.click(function(){
    //some clear code
});

12.平行的运行多个Ajax请求

$.when($.get('assets/misc/1.json'), $.get('assets/misc/2.json')).then(function(r1, r2){
    console.log(r1[0].message + " " + r2[0].message);
})

13.使用匿名函数来产生一个独立的代码块

(function($){
    var c = 1;
    $.fn.count = function(){
        log(c++);
        return this;
    };  
})(jQuery); 

$(document).count();
$('body').count().count();

14.data获取

建议这么写：

$.data('#id',key,value);

15.$(this)在下边的情况下用this比较方便

$('#someAnchor').click(function() {  alert( this.id );  });
$('#someAnchor').click(function() {alert($(this).attr('id'));});