jQuery 函數(shù)整理

• show(參數(shù))

//顯示，添加參數(shù)表示動畫時間，動畫同時控制寬高
$("div").show(1000).html('哈哈哈')

• hide(參數(shù))

//隱藏，添加參數(shù)表示動畫時間，動畫同時控制寬高
$('div').hide(1000)

• html('參數(shù)')
  沒有參數(shù)為獲取值

//html 添加文本，括號內(nèi)是字符串，無法輸入標(biāo)簽
$("div").show(1000).html('哈哈哈')

• text('參數(shù)') 與 html('類似')
  當(dāng)該方法用于返回一個值時，它會返回所有匹配元素的組合的文本內(nèi)容（會刪除 HTML 標(biāo)記）。
  沒有參數(shù)為獲取值，有參數(shù)為設(shè)置值，此時會覆蓋原有內(nèi)容

• ready()

$(document).ready(function(){})
//功能類似 
window.onload = function(){}
//前者可以多次執(zhí)行，function(){}是作為參數(shù)傳遞進(jìn)去，所以并不會覆蓋；后者只能執(zhí)行一次，function(){} 作為值，是賦值操作
//前者加載不包括外部資源圖片，只是 DOM 樹加載完成之后就執(zhí)行，比后者執(zhí)行快

• noConflict()
  解除綁定 $ 符號

$.noConflict();
//解除之后要使用 jQuery 對象就使用jQuery前綴
jquery.('div').hide(1000)

• addClass()
  添加類名

 $('div').addClass('current');

• removeClass()
  刪除類名

 $('div').removeClass('current');

• taggleClass()
  切換類名，如果存在類名那么刪除，如果不存在類名那么添加

$('div').taggleClass('current');

• css()
  所有關(guān)于樣式 .style 的操作都在此方法內(nèi)進(jìn)行

//鍵值對的形式
 $div.css({
                            'width': '500px',
                            'height': '500px',
                            'background': 'red'
                        })
$div.css('width','500px');

• val()
  主要用于 input標(biāo)簽自帶屬性如：src\href\value 等屬性控制，帶參數(shù)代表設(shè)置，不帶參數(shù)代表獲取

$('input').val('1233');
$('input').val();

• 尺寸函數(shù)

var w = $("#small").width()
                var h = $("#small").height()
                var iw = $("#small").innerWidth()
                var ih = $("#small").innerHeight()
                var ow = $("#small").outerWidth()
                var oh = $("#small").outerHeight()
                var owm = $("#small").outerWidth(true)
                var ohm = $("#small").outerHeight(true)

• attr()
  獲取或設(shè)置屬性值

//帶參數(shù)為設(shè)置
$(selector).attr(attribute,value)
$('a').attr('target','_self')
//獲取規(guī)定參數(shù)的屬性的值
$(selector).attr(attribute)
//使用函數(shù)來設(shè)置屬性和值
$(selector).attr(attribute,function(index,oldvalue))
//鍵值對的方式設(shè)置多個屬性和值
$(selector).attr({attribute:value, attribute:value ...})
$('a').attr({
         'href': 'http://www.baidu.com',
         'target': '_blank'
 })

• parent()
  獲得父元素

$("#filter").parent().css("background-color", "blue")

• parents()
  獲得父元素及所有祖先元素

$("#filter").parents().css("background-color", "blue")

• child()
  獲得子元素標(biāo)簽

$('div').child()

• children()
  獲得所有子元素標(biāo)簽

$('div').children()

• siblings()
  獲得兄弟元素標(biāo)簽

$(this).css('background', 'red').siblings().css('background', 'green');

• next()
  next() 獲得匹配元素集合中每個元素緊鄰的同胞元素。如果提供選擇器，則取回匹配該選擇器的下一個同胞元素。

//.next(selector)
$("#ul1").next("div").css("background-color", "red")

• eq()
  eq() 選擇器選取帶有指定 index 值的元素。返回的是一個 jQuery 對象可以直接使用 jQuery 方法

$(":eq(index)")
$(".class").eq(0).css("background-color", "green")

• mouseenter()
  鼠標(biāo)進(jìn)入事件，從子元素進(jìn)入不會再次觸發(fā)事件

• mouseover()
  鼠標(biāo)滑過事件，從子元素進(jìn)入會再次觸發(fā)事件

• mouseleave()
  鼠標(biāo)離開事件，進(jìn)入子元素不會再次觸發(fā)事件

• mouseout()
  鼠標(biāo)劃出事件，進(jìn)入子元素會再次觸發(fā)事件

• hover(fn,fn)
  監(jiān)控鼠標(biāo)移入移出，功能等于 mouseenter() 和 mouserleave,帶兩個參數(shù)前一個表示移入，后一個表示移出；如果只有一個參數(shù)則表示移入移出做相同方法

 $('li').hover(function () {
                        $(this).children('.filmContent').addClass('current').parent().siblings().children('.filmContent').removeClass('current');
                    })

• index()
  返回指定元素相對于其他指定元素的 index 位置。返回的是相對其父元素的位置

 $('li').hover(function () {
                        console.log($(this).index());
                    })

• event.stopPropagation()
  阻止冒泡，因?yàn)槭鞘录ο?，所以要穿?event 做參數(shù)

• toggle()
  切換動畫狀態(tài)，如果可見那么切換成不可見，如果不可見那么切換成可見

$(selector).toggle(speed,callback,switch);
 $('.ad').toggle(1000);

• slideToggle();
  通過使用滑動效果（高度變化）來切換元素的可見狀態(tài)。
  如果被選元素是可見的，則隱藏這些元素，如果被選元素是隱藏的，則顯示這些元素。

$(selector).slideToggle(speed,callback);
$(this).children('.secondMenue').stop().slideToggle(200);

• slideUp()
  隱藏動畫，向上滑動卷起

$(this).siblings().children('.secondMenue').stop().slideUp(200);

• slideDown(參數(shù)1,fn)
  展示動畫，向下滑動；參數(shù)1是執(zhí)行動畫時間，fn 是回調(diào)

$(this).siblings().children('.secondMenue').stop().slideDown(200);

• stop();
  結(jié)束動畫,兩個參數(shù)，前面是是否結(jié)束全部動畫，后面是否直接跳到動畫結(jié)尾(沒有動畫)，是布爾類型

$(selector).stop(stopAll,goToEnd)

• addBack();
  當(dāng)前jQuery對象可能是通過調(diào)用其它jQuery對象的特定方法創(chuàng)建的，使用該函數(shù)將返回一個新的jQuery對象，該對象包含了當(dāng)前jQuery對象和之前創(chuàng)建它的jQuery對象的所有匹配元素。

$('.box2').parent().addBack().css('background', 'cyan');

• fadeIn(參數(shù)1，參數(shù)2); fadeOut()
  淡入淡出動畫,參數(shù)1是動畫時間單位毫秒，參數(shù)2是透明度范圍0~

$('.ad').delay(1000).fadeIn(1000).delay(5000).fadeOut(1000);

• delay();
  延遲動畫,參數(shù)是時間單位毫秒

$('.ad').delay(1000).fadeIn(1000).delay(5000).fadeOut(1000);

• fadeToggle();
  切換，原來是淡入切換成淡出，原來是淡出切換成淡入

  $('.ad').fadeToggle(1000);

• animate(prop,speed,easing,callback);
  自定義動畫,prop 是屬性， speed 是速度（可以填時間），easing 是動畫方式（漸快、漸慢、先慢后快等等，一些特殊的動畫方式需要引入插件使用）；動畫是隊列形式執(zhí)行，先進(jìn)先出

 $('div').animate({
                   'width': '1000px'
               }, 1000, function () {
                   console.log('動畫結(jié)束');
               });

• each();
  each() 方法規(guī)定為每個匹配元素規(guī)定運(yùn)行的函數(shù)

$(selector).each(function(index,element));
  $('li').each(function () {

//               this  == DOM對象
               $(this).slideUp(2000);

//               console.log(index + value);
           })

• jQuery 動態(tài)創(chuàng)建標(biāo)簽節(jié)點(diǎn)

var $newTag = $('<li>新增的節(jié)點(diǎn)</li>');

• a.append(b);
  把 b 添加到 a里， a 是 b 的父標(biāo)簽節(jié)點(diǎn)
• b.appendTo(a);
  這對方法是將節(jié)點(diǎn)添加到父節(jié)點(diǎn)中的最后位置

$('.red').append($newTag);
$newTag.appendTo($('.red'))

• a.prepend(b);
• b.prependTo(a);
  這對標(biāo)簽是將 b 添加到 a 標(biāo)簽的第一個位置

$newTag.prependTo($('.red'));
$('.red').prepend($newTag);

• a.before(b);
• b.innerBefore(a);
  兄弟關(guān)系添加，將 b 添加到 a 前面

$('.red').before($newTag);
$newTag.innerBefore($('.red'));

• a.after(b);
• b.innerAfter(a);
  兄弟關(guān)系添加節(jié)點(diǎn)，將 b 添加到 a 節(jié)點(diǎn)后面

$('.red').after($newTag);
$newTag.innerAfter($('.red'));

• remove();
  刪除節(jié)點(diǎn)，參數(shù)是指向節(jié)點(diǎn)的 className id tag 等等

$('.red>li:first').remove();

• empty();
  清空節(jié)點(diǎn)中的內(nèi)容，也可以用 html('');

$('.red>li:first').empty();
$('.red>li:first').html('');

注意要清空自帶屬性要使用 val('')

• trim()
  去除空格、tab

$.trim(content).length <= 0

• focus();
  獲得焦點(diǎn)

$('.content').focus();

• blur();
  失去焦點(diǎn)

$('.content').blur();

• clone(參數(shù))；
  復(fù)制節(jié)點(diǎn)，參數(shù)是布爾類型，默認(rèn)是 false 淺賦值，僅僅賦值這個節(jié)點(diǎn)，不賦值事件；clone(true);時為深賦值,會賦值這個事件

var $cloneTag = $pTag.clone(true);

• a.replaceWith(b)
  用 b 節(jié)點(diǎn)來替換 a 節(jié)點(diǎn)

var $pTag = $('p');
var $newTag = $('<h1>0000</h1>');
$pTag.replaceWith($newTag)

• 事件對象的一些屬性方法
• event.target
  獲得調(diào)用此方法的具體對象

function test(event){
        console.log(event.target);
}

• event.type
  獲得調(diào)用此方法的事件行為（onclick\mouseover）

function test(event){
        console.log(event.type)
}

• event.data
  獲得調(diào)用此方法同時傳入的參數(shù)

        function 事件data() {
            $('ul').click({'name': 'sz'}, exec);
            function exec(event) {
                console.log(event.data);
            }
        }

• event.result
  獲得項鏈函數(shù)的返回值

var num = 0;
function test(){
        $('p').click(function(event){
                return num++;
        })
        $('p').click(function(event){
                alert(event.result);
        })
}

• on()
• 事件綁定

//綁定單個事件
$('p').on('click',function(){
        console.log('xxxx');
})

//綁定多個事件，同一個回調(diào)函數(shù),中間用空格隔開
$('p').on('click mouseenter',function(event){
        console.log('xxx' + event.type)
})

//綁定多個事件，多個回調(diào)函數(shù)，用鍵值對的方式
$('p').on({
        'click':cE,
        'mouseenter':function(){
                console.log('鼠標(biāo)移入');
        }
})
function cE(){
        console.log('單擊事件')
}

• 事件委托
  on(type,selector,data,fn)

//body被點(diǎn)擊，小king執(zhí)行 function
$('body').on('click','.king', function () {
             console.log('我是小king, 處理事件');
         })

• off();
  解除事件綁定

$('p').off('click', cE);

• one();
  一次性事件，只執(zhí)行一次

$('p').one({
        'click':function(){
                console.log('xxxx');
        }
})

//內(nèi)部實(shí)現(xiàn)原理就是結(jié)尾解除綁定
$('p').click(function(){
        console.log('xxxx');
})

• 阻止事件默認(rèn)行為
  一些事件會有默認(rèn)行為，比如a 標(biāo)簽點(diǎn)擊會跳轉(zhuǎn)、form中 Input 標(biāo)簽會提交
  event.preventDefault

$(':submit').click(function (event) {
               console.log('xxxx');
               event.preventDefault();
           })

• trigger();
  手動觸發(fā)事件，會觸發(fā)默認(rèn)事件，會觸發(fā)冒泡事件(a標(biāo)簽存疑，老師示例時候出現(xiàn)問題)

$(':submit').trigger('click');

• triggerHandle();
  手動觸發(fā)事件，不會觸發(fā)默認(rèn)事件，不會觸發(fā)冒泡事件

$('.box3').triggerHandler('click');

• 命名空間

       $('.box').on('click.xx', function () {
            console.log('click.xx');
      })
       $('.box').on('mouseenter.xx', function () {
          console.log('mouseenter.xx');
      })

      $('.box').on('click.lisi', function () {
          console.log('click.lisi');
      })


         function haha() {
             console.log('1');
         }

         $('.box').click(haha)
         $('.box').click(function () {
             console.log('2');
         })



         $('.box').on('click.one', function () {
             console.log('1');
         })
         $('.box').on('click.two', function () {
             console.log('2');
         })


         $('.box').off('.one');



 $('.box').trigger('click.lisi');