jQuery 筆記

初識

console.log($ == jQuery);// true jQuery就是$  等價的

 

頁面加載

$(document).ready(function(){});//至關於原生window.onload（DOMContentLoaded）

比onload先執行

$(function(){})//簡寫

只須要文檔結構加載完畢後執行,onload是文檔和資源媒體加載完成。

DOM節點對象轉換

jq的DOM節點與原生DOM節點互轉

// jq轉原生

console.log($(this));// 返回jq對象

// init數組對象  經過下標獲取到的就是原生的DOM

console.log($('#box')[0]);

console.log($('#box').get(0));

$('#box').get(0).innerHTML = '哈哈';

讓出$的使用權限

jQuery.noConflict();

console.log($); // undefind

// 閉包  將jQuery傳到閉包中的$ 在閉包函數中又可使用$來進行jq的操做

;(function($){

    $(function(){

        console.log($('#box'));

    })

})(jQuery)

// 給$起個名字

var jq = jQuery.noConflict(true);

console.log(jq('#box'));

選擇器

基本選擇器

$('#box')//id選擇

$('.aa')//類名選擇

$('li')//標籤選擇

層級選擇器

$('ul li') //後代li

$('ul>li') // 子代的li

$('#li1+li')//#li1的下一個兄弟li

$('#li1~li')//#li1的全部的弟弟li

基本過濾選擇器

$('li:first')// 獲取第一個元素

$('li:last')// 獲取最後一個元素 

$('li:not(#li1)')// 排除

$('li:odd')// 選擇索引奇數---顯示的偶數行

$('li:even')// 選擇索引偶數---顯示奇數行

$('li:eq(3)')//等於索引

$('li:gt(3)')//大於索引

$('li:lt(3)')//小於索引

// 選取索引爲n的li

// $('li:eq(' + n + ')')

$('li').eq(n)

屬性過濾選擇器

$('li[name]')// 帶有name屬性的li

$('li[name=lucy]')// name屬性值爲lucy的li

$('li[name!=joy]')// name屬性不爲joy的li

$('li[name*=o]')// name屬性值包含o的li

$('li[name^=j]')// name屬性的值以j開頭的

$('li[name$=y]')// name屬性的值以y結尾的

表單選擇器

$('input')//標籤input

$(':input')//不論標籤名 只要是表單元素 都選取

$(':text')

$(':password')

$(':radio')

$(':checkbox')

$(':file')

$(':submit')

$(':button')

DOM

DOM節點遍歷

遍歷節點

$('ul').children()// ul下的全部子節點

$('ul').children('p')// ul下的p子節點

$('ul').find('p')// ul下的全部後代p

$('#box').next()// box的下一個兄弟

$('#box').nextAll()// box的下邊的全部兄弟

$('#box').prev()// box 上一個

$('#box').prevAll()//上邊全部的兄弟

// box的全部的兄弟節點（以前的和以後的全算）

$('#box').siblings()

$('#box').siblings('p')

遍歷父節點

$('#box').parent()//真正的父節點

$('#box').parents()//全部的祖先節點

$('#box').parents('div')//全部祖先中的div

遍歷節點 - 過濾

$('#box').find('li')// find  獲取後代元素

$('li').filter('.aa')// filter 過濾找到知足條件的元素

$('li').not('.aa')// not 排除知足條件的元素 選擇其餘元素

屬性操做

$('#box').attr('title')//獲取

$('#box').attr('title','xixi');// 設置

// 批量設置

$('#box').attr({

    title: 'heihei',

    sex : 'female'

})

$('#box').removeAttr('sex');// 刪除屬性

 

屬性值爲true和false的屬性操做

$(':checkbox').attr('checked');// 獲取 --> checked

$(':checkbox').prop('checked');// 獲取 --> true

$(':checkbox').prop('checked', true);// 設置

class操做

$('#box').addClass('red');//添加類red

$('#box').removeClass('red');// 刪除red

判斷該元素box上是否有red

$('#box').hasClass('red') // Boolean

$('#box').is('.red')// Boolean

切換類名  toggleClass

$('#box').toggleClass('red');

css操做

// 獲取樣式

$('#box').css('width')

// 設置

$('#box').css('background','red');

// 批量設置

$('#div1').css({

    width:'200px',

    fontSize:'18px'//font-size  去-變駝峯

})

html 文本與值的操做

innerHTML  --->  html()

innerText  --->  text()

表單value  --->  val()

$('#s1').html() // 獲取 識別標籤

$('#s1').text() // 獲取 只識別文本

// 設置

$('#box').html('<i>過年好！</i>');// 會識別標籤

$('#box').text('<i>過年好！</i>');// 不會識別

// 表單的value

$(':text').val()

$(':text').val('ddddd');

Node操做

建立元素

  $('<li></li>')

添加節點

  在元素尾部添加

    新元素.appendTo(目標元素)

    $('<li>國慶節</li>').appendTo($('#list'));

    目標.append(新元素)

  在元素頭部添加

    新元素.prependTo(目標元素)

    目標.prepend(新元素)

    $('#list').prepend($('<li>元旦節</li>'))

  在目標元素以前插入

    新元素.insertBrfore(目標元素)

    $('<li>情人節</li>').insertBefore($('#list li').eq(2));

    目標元素.before(新元素)

  在目標元素以後插入

    新元素.insertAfter(目標元素)

    目標元素.after(新元素)

    $('#list li').eq(3).after($('<li>婦女節</li>'));

刪除節點

remove():   將節點刪除，返回被刪除的節點，不會保留節點上的事件

detach():   將節點刪除，返回被刪除的節點，會保留節點上的事件

empty():    所有清空

克隆節點

clone（）    複製節點及內容，但不保留節點上的事件

clone（true）複製節點及內容，保留節點上的事件

替換節點

新節點.replaceAll(要被替換的節點)

要被替換的節點.replaceWith(新節點)

$('#list li').eq(2).replaceWith($('<li>女神節</li>'));

數據串聯

serialize()

<input type="text" name = 'a' value = '1'/>

<input type="text" name = 'b' value = '2'/>

<input type="text" name = 'c' value = '3'/>

$("input").serialize()// a=1&b=2&c=3

$("input").serializeArray()// [{{name: "a", value: "1"}}, {…}, {…}]

add 和 slice

$("div").add("span").add("ul li").css("backgroundColor", 'red')

// 等同於

$("div,span,ul li").css("backgroundColor", 'red')// 與add同樣

 

$("ul li").slice(1, 4).css("backgroundColor", 'red');// 獲取從1到4的 li元素

 

BOM 

元素的寬高

原生的元素的寬高分別那幾種如何獲取

    內容寬高----width  height

    可視寬高--- clientWidth/clientHeight

佔位寬高---offsetWidth/offsetHeight

$("#div1").css("width")//"100px" 字符串

jq的元素寬高操做

    內容寬高  width()  height()  方法

    可視寬高  innerWidth（）  innerHeight（）

    佔位寬高  outerWidth()  outerHeight()

    整個寬高 outerWidth（true）  outerHeight（true）

jq獲取可視區及文檔的寬高

    可視區寬高  $(window).width()/.height()

文檔的寬高  $(document).width()/height()

元素的位置

$('#sub').offset() 返回一個對象   到文檔的 left和top值

$('#sub').position() 返回一個對象  到有定位屬性的父級元素的 left和top值

滾動條捲走的寬高操做

$(document).scrollTop() // 不傳參獲取，傳參設置

 

事件

event對象

jq中的事件對象  不須要兼容了  直接傳參ev就能夠了

ev.clientX/ev.clientY  事件觸發的位置到瀏覽器可視區的上左邊的距離

ev.currentTarget：當前事件觸發的元素

ev.delgateTarget：當前事件綁定的元素

ev.offsetX/ev.offsetY: 事件觸發的位置到元素的上左邊的距離

ev.originalEvent: 元素事件對象

ev.pageX/ev.pageY:事件觸發的位置到文檔的上左邊的距離

ev.screenX/ev.screenY:事件觸發的位置到屏幕的上左邊的距離

ev.which  相似於  keyCode  能夠獲取鼠標的鍵值  左鍵是1  右鍵是3  滾輪是2

阻止默認事件  ev.preventDefault()

阻止冒泡 ev.stopPropagation()

阻止默認事件+冒泡  return false

事件綁定 on()

// 基本事件

$('#box').on('click',function(){})

// 一次綁定多個事件對應一個處理函數

$('#box').on('click mouseenter mouseleave',function(){})

 

// 綁定多個事件對應多個處理函數  對象形式

$('#box').on({

    'click': function(){},

    'dblclick':function(){}

})

 

// 自定義事件

$('#box').on('hahaha',function(){})

// trigger  觸發事件

$('#box').trigger('hahaha');

 

// 事件委託

$('#list').on('click','li',function(ev){

    console.log($(ev.target).html());

})

 

// 事件的取消綁定

$('button:eq(0)').on('click', function(){

    console.log(1111);

})

 

$('button:eq(1)').on('click',function(){

    $('button:eq(0)').off();

    //$('button:eq(0)').off('mouseenter');

    // 傳參取消事件類型

})

 

// 一個事件上綁定多個函數執行---事件的命名空間

$('button:eq(0)').on({

    'click.a':function(){

        console.log(111);

    },

    'click.b':function(){

        console.log(222);

    }

})

 

$('button:eq(1)').on('click',function(){

    $('button:eq(0)').off('click.a');

})

 

// 只執行一次的事件

$('button').eq(0).one('click',function(){

    console.log('一次就夠了');

})

 

// 模擬執行一次事件

$('button').eq(0).on('click',function(){

console.log('一次就夠了');

$(this).off();

})

合成事件

mouseenter 和mouseleave

$('#box').hover(function(){

    // 鼠標移入執行函數

},function(){

    // 鼠標移出執行函數

})

$ 下經常使用的方法

// 能夠遍歷數組，對象，jq元素

$.each(obj, function(key, value){

    console.log(key + ':' + value);

})

還能夠$('選擇器').each()//遍歷元素  工具級別

 

var newArr = $.map(arr,function(item){

    return item * item * item; 

})有返回值

$.type()   輸出當前數據類型   typeof

$.trim()    刪除字符串先後的空格

$.inArray()    indexOf()

$.proxy()    功能相似於bind  $.proxy()

$.noConflict()  給$起個別名

$.parseJSON()   JSON.parse()

$.makeArray()    將僞數組轉成數組。 Array.from()

動畫

基本動畫

顯示隱藏

show（

    duration動畫執行時間-毫秒，

    easing運動效果（只有兩種  swing慢快慢，linear勻速， 

    complate運動執行完成後的回調）

）  

隱藏hide（）  

顯示隱藏的切換toggle（）

$('#box').show(1000,function(){

    alert('執行完畢');

})

淡入淡出

淡入fadeIn（）  淡出 fadeOut（）  透明度變化到  fadeTo（） 淡入淡出切換  fadeToggle（）

$('button').eq(0).on('click', function(){

    $('#box').fadeIn(1000);

})

 

$('button').eq(2).on('click', function(){

    $('#box').fadeTo(1000, .5);

})

下拉顯示

下拉顯示slideDown（）  上拉隱藏 slideUp（）  切換 slideToggle（）

$('button').eq(2).on('click', function(){

    $('#box').slideToggle(1000);

})

animate

animate({屬性1：目標值1，屬性2：目標值2.。。}, duration動畫持續時間，easing動畫效果，

callback回調)

// 累加

$('button').click(function(){

    $('#box').animate({width:'+=50'},200)

})

// 鏈式運動

$('button').click(function(){

    $('#box').animate({width:500},1000)

                .animate({height:300},500)

                .animate({opacity:.5},500)

})

動畫隊列

queue(function(next){})

將其餘的操做加入到動畫隊列中 按順序來完成

 

$('#box').animate({width:500},1000)

        .queue(function(next){

            $(this).css({background:'blue'});

            next();//繼續執行後續的動畫隊列中的操做

        })

        .animate({height:300},500);

判斷是否處於動畫狀態

$(元素).is(':animated') :有動畫在執行  返回true  沒有返回false

$('#box').hover(function(){

    if(!$(this).is(':animated')){

        $(this).animate({height:300},400);

    }

}, function(){

    $(this).animate({height:50},400);

})

延遲動畫

$('#box').animate({width:500},1000)

        .delay(2000)

        .animate({height:300},500);

中止動畫

stop（clearQueue清除動畫隊列， gotoEnd達到動畫最終狀態）中止動畫

finish（）完成動畫---全部動畫隊列的效果達到最終狀態（2.x以上版本支持）

// stop中止動畫的幾種組合

$('button').eq(1).click(function(){

    // 參數皆爲false 不清除動畫隊列 不達到最終狀態

    $('#box').stop(false, false); // 默認

    // 參數皆爲true 清除動畫隊列 達到最終狀態

    $('#box').stop(true, true);

    // true false 清除動畫隊列 不達到最終狀態

    $('#box').stop(true, false);

    // false true 不清除動畫隊列 達到最終狀態

    $('#box').stop(false, true);

})

// finish

$('button').eq(2).click(function(){

    $('#box').finish();

})

ajax

$.ajax({

    url,

    cache,//在get下是否啓用緩存

    type,// get/post

    data,// 上傳數據

    timeout,//相應超時時間

    datatype,//預期返回的數據類型默認 text

    success, // 成功回調

    error,

    conplate})

跨域

dataType 設置爲jsonp

$.ajax({

    url:'https://www.baidu.com/sugrec',//?prod=pc&wd=aa&cb=fn

    type:'get',

    data:{prod:'pc',wd:'cc'},

    dataType:'jsonp',

    success:function(res){

        console.log(res);

    }

})

load方法

將url傳入之後，將下載到數據直接填充到被選中元素的innerHTML中

$("div").load("2.txt #p1", function(data, statusText, xhr){

    data        下載到的數據

    statusText  下載的狀態  success

    xhr         ajax對象

})

cookie

獲取

$.cookie(name) 

設置

$.cookie(name, value) 設置name和value

$.cookie(name, value {

    raw: true  //value不進行編碼

               //默認false value要進行編碼的

})

刪除

$.cookie(name, null); 刪除cookie

 

實例

$.cookie("變種人", "X教授", {

    expires: 7,

    raw: true

})

jQuery 插件

;(function($){

    // 類級別插件 ---> 將方法拷貝到jq的原型下

    $.extend({

        'trimLeft' : function(str){

            return str.replace(/^\s+/,'');

        }

    })

    // 對象級別插件  拷貝到$.fn的原型下

    $.fn.extend({

        'changeBg' : function(select,color){

            this.children(select).css({background:color});

            return this;

        }

    })

})(jQuery)

 

var str = '        aaa      ';

 

console.log($.trimLeft(str));

$('ul').changeBg(':odd','pink');

Zepto

基本使用 和jq徹底同樣可是用到的模塊要單獨引入

$(function(){

    $('#box').on('tap', function(){

        console.log('手指點擊');

    })

})

zepto和jq的區別

隱藏的元素的獲取寬高

jq能夠獲取隱藏元素的width（）/height（）

zepto中獲取隱藏元素的width（）/height（）都爲0

$('#box').width();// 隱藏的元素在zepto中獲取寬高爲0

offset()的區別

jq中返回一個對象 包含 元素到文檔上左邊的距離

zepto中返回一個對象  包含 元素到文檔上左邊的距離和元素的寬高

$('#sub').offset();//元素到文檔的上左邊的距離

$('#sub').offset();//zepto中元素到文檔的上左邊的距離 和 元素的寬高

元素的寬高的獲取區別

jq獲取元素的寬 有4種方法

zepto中只有一個width（）和height（）方法 獲取的是佔位寬

$('#box').width();//佔位寬  內容寬 + padding + border

innerWidth();//沒有

outerWidth();//沒有

outerWidth(true);//沒有

touch模塊

tap 全部的觸碰

singleTap  手指單擊

doubleTap  手指雙擊

swipe  swipeLeft  swipeDown   swipeRight  swipeUp  手指滑動

longTap 手指長按