jQuery 函數(shù)整理

• show(參數(shù))

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

• hide(參數(shù))

//隱藏粱侣，添加參數(shù)表示動(dòng)畫時(shí)間驮配，動(dòng)畫同時(shí)控制寬高
$('div').hide(1000)

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

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

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

• ready()

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

• noConflict()
  解除綁定 $ 符號(hào)

$.noConflict();
//解除之后要使用 jQuery 對(duì)象就使用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)行

//鍵值對(duì)的形式
 $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ù)來(lái)設(shè)置屬性和值
$(selector).attr(attribute,function(index,oldvalue))
//鍵值對(duì)的方式設(shè)置多個(gè)屬性和值
$(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() 獲得匹配元素集合中每個(gè)元素緊鄰的同胞元素。如果提供選擇器棘街，則取回匹配該選擇器的下一個(gè)同胞元素蟆盐。

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

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

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

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

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

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

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

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

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

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

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

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

• toggle()
  切換動(dòng)畫狀態(tài)榛鼎，如果可見(jiàn)那么切換成不可見(jiàn)咳榜，如果不可見(jiàn)那么切換成可見(jiàn)

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

• slideToggle();
  通過(guò)使用滑動(dòng)效果（高度變化）來(lái)切換元素的可見(jiàn)狀態(tài)酥诽。
  如果被選元素是可見(jiàn)的淮逻，則隱藏這些元素狼电，如果被選元素是隱藏的蜒灰，則顯示這些元素弦蹂。

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

• slideUp()
  隱藏動(dòng)畫肩碟，向上滑動(dòng)卷起

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

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

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

• stop();
  結(jié)束動(dòng)畫,兩個(gè)參數(shù)，前面是是否結(jié)束全部動(dòng)畫脑漫，后面是否直接跳到動(dòng)畫結(jié)尾(沒(méi)有動(dòng)畫)髓抑，是布爾類型

$(selector).stop(stopAll,goToEnd)

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

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

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

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

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

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

• fadeToggle();
  切換羹饰，原來(lái)是淡入切換成淡出，原來(lái)是淡出切換成淡入

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

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

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

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

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

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

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

• jQuery 動(dòng)態(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);
  這對(duì)方法是將節(jié)點(diǎn)添加到父節(jié)點(diǎn)中的最后位置

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

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

$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 淺賦值奈搜，僅僅賦值這個(gè)節(jié)點(diǎn)，不賦值事件盯荤；clone(true);時(shí)為深賦值,會(huì)賦值這個(gè)事件

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

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

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

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

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í)傳入的參數(shù)

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

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

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

• on()
• 事件綁定

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

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

//綁定多個(gè)事件，多個(gè)回調(diào)函數(shù)秋秤，用鍵值對(duì)的方式
$('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)行為
  一些事件會(huì)有默認(rèn)行為，比如a 標(biāo)簽點(diǎn)擊會(huì)跳轉(zhuǎn)绍哎、form中 Input 標(biāo)簽會(huì)提交
  event.preventDefault

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

• trigger();
  手動(dòng)觸發(fā)事件来农，會(huì)觸發(fā)默認(rèn)事件，會(huì)觸發(fā)冒泡事件(a標(biāo)簽存疑崇堰，老師示例時(shí)候出現(xiàn)問(wèn)題)

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

• triggerHandle();
  手動(dòng)觸發(fā)事件沃于，不會(huì)觸發(fā)默認(rèn)事件，不會(huì)觸發(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');