2017-04-07 jQuery 學(xué)習(xí)筆記

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');
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末海诲,一起剝皮案震驚了整個(gè)濱河市繁莹,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌特幔,老刑警劉巖咨演,帶你破解...
    沈念sama閱讀 216,843評(píng)論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異蚯斯,居然都是意外死亡薄风,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,538評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門溉跃,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)村刨,“玉大人,你說(shuō)我怎么就攤上這事撰茎∏段” “怎么了?”我有些...
    開封第一講書人閱讀 163,187評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵龄糊,是天一觀的道長(zhǎng)逆粹。 經(jīng)常有香客問(wèn)我,道長(zhǎng)炫惩,這世上最難降的妖魔是什么僻弹? 我笑而不...
    開封第一講書人閱讀 58,264評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮他嚷,結(jié)果婚禮上蹋绽,老公的妹妹穿的比我還像新娘。我一直安慰自己筋蓖,他們只是感情好卸耘,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,289評(píng)論 6 390
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著粘咖,像睡著了一般蚣抗。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上瓮下,一...
    開封第一講書人閱讀 51,231評(píng)論 1 299
  • 那天翰铡,我揣著相機(jī)與錄音钝域,去河邊找鬼。 笑死锭魔,一個(gè)胖子當(dāng)著我的面吹牛例证,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播赂毯,決...
    沈念sama閱讀 40,116評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼战虏,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了党涕?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,945評(píng)論 0 275
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤巡社,失蹤者是張志新(化名)和其女友劉穎膛堤,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體晌该,經(jīng)...
    沈念sama閱讀 45,367評(píng)論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡肥荔,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,581評(píng)論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了朝群。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片燕耿。...
    茶點(diǎn)故事閱讀 39,754評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖姜胖,靈堂內(nèi)的尸體忽然破棺而出誉帅,到底是詐尸還是另有隱情,我是刑警寧澤右莱,帶...
    沈念sama閱讀 35,458評(píng)論 5 344
  • 正文 年R本政府宣布蚜锨,位于F島的核電站,受9級(jí)特大地震影響慢蜓,放射性物質(zhì)發(fā)生泄漏亚再。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,068評(píng)論 3 327
  • 文/蒙蒙 一晨抡、第九天 我趴在偏房一處隱蔽的房頂上張望氛悬。 院中可真熱鬧,春花似錦耘柱、人聲如沸如捅。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,692評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)伪朽。三九已至,卻和暖如春汛蝙,著一層夾襖步出監(jiān)牢的瞬間烈涮,已是汗流浹背朴肺。 一陣腳步聲響...
    開封第一講書人閱讀 32,842評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留坚洽,地道東北人戈稿。 一個(gè)月前我還...
    沈念sama閱讀 47,797評(píng)論 2 369
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像讶舰,于是被迫代替她去往敵國(guó)和親鞍盗。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,654評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • 工廠模式類似于現(xiàn)實(shí)生活中的工廠可以產(chǎn)生大量相似的商品跳昼,去做同樣的事情般甲,實(shí)現(xiàn)同樣的效果;這時(shí)候需要使用工廠模式。簡(jiǎn)單...
    舟漁行舟閱讀 7,752評(píng)論 2 17
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式鹅颊。設(shè)計(jì)者無(wú)需花費(fèi)時(shí)間糾纏JS復(fù)雜的高級(jí)特性敷存。 1....
    LaBaby_閱讀 1,335評(píng)論 0 2
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計(jì)者無(wú)需花費(fèi)時(shí)間糾纏JS復(fù)雜的高級(jí)特性堪伍。 1....
    LaBaby_閱讀 1,171評(píng)論 0 1
  • 原文鏈接 http://blog.poetries.top/2016/10/20/review-jQuery 關(guān)注...
    程序員poetry閱讀 16,643評(píng)論 18 503
  • 選擇器選擇器是jQuery的核心锚烦。 事件 動(dòng)畫 擴(kuò)展
    wyude閱讀 474評(píng)論 0 1