jQuery基礎知識

Posted 2020-10-03 獨行者

jQuery基礎知識

 

$(function(){}) //jQuery先執行一遍再執行其他函數

$(document).ready(fn) //文檔加載完後觸發

 

1、 刪除$：jQuery.noConflict（）

 

2、 $(‘#m‘) $(‘a‘) $(‘.n‘) $(‘*‘)

$(‘ul li *‘) $(‘div#b ul.c‘) $(‘span,em,.box‘)

$(‘div>p‘) $(‘div+p‘) $(‘div ~p‘)

 

3、 $(‘#w‘).find(‘p‘).css() // #m下的p 同$(‘div p‘)

$(‘#m‘).children（‘p‘) // #m的子元素p 同$(‘div>p‘)

$(‘#m‘).next(‘p‘) // #m同級下一個p 同$(‘div+p‘)

$(‘#m‘).nextAll(‘p‘) // #m同級下面所有的p 同$(‘div ~p‘)

$(‘#m‘).prev(‘p‘) // #m同級上一個p

$(‘#m‘).prevAll(‘p‘) // #m同級下面所有的p

$(‘#m‘).siblings(‘p‘) // #m同級所有的p

$(‘#m‘).preUntil(‘p‘) // #m向上選擇遇到p則停止

$(‘#m‘).nextUntil(‘p‘) // #m向下選擇遇到p則停止

 

4、 $(‘a[title]‘) //包含title屬性的a

$(‘a[title=value]‘) //包含title屬性且title=value的a

$(‘a[title^=value]‘) //包含title屬性且title開頭匹配value的a

$(‘a[title$=value]‘) //包含title屬性且title結尾匹配value的a

$(‘a[title!=value]‘) //包含title屬性且title不為value的a

$(‘a[title~=value]‘) //包含title屬性且title匹配value(value的其後為空格)的a

$(‘a[title*=value]‘) //包含title屬性且title匹配value

$(‘a[title|=value]‘) //包含title屬性且title開始匹配value或value_

$(‘a[bbb][title=value]‘) //包含bbb和title屬性且title=value的a

 

5、 $(‘li:first‘) $(‘li:last‘)

$(‘li:not(.re)‘) //li中class非re的元素

$(‘li:even‘) //索引為偶數的元素集合(0開始)

$(‘li:odd‘) //索引為奇數的元素集合(0開始)

$(‘li:eq(2)‘) //選取第3個元素

$(‘li:gt(2)‘) //索引大於2的元素。注：-1位最後一個

$(‘li:lt(2)‘) //索引小於2的元素。注：-1位最後一個

$(‘:header‘) //選擇標題元素 h1~h6 的集合

$(‘:animated‘) //選擇正在執行動畫的元素

$(‘:focus‘) //選擇獲取焦點的元素

--

$(‘li‘).eq(2) $(‘li‘).first

$(‘li‘).last $(‘li‘).not(‘.re‘)

 

6、 $(‘div:contains(‘y.com‘)‘) //選取div中包含y.com的元素

$(‘div:empty‘) //選取沒有元素的div

$(‘div:has(.re)‘) //選取class為re的div元素

$(‘:parent‘) //選取有子元素或文本的元素

$(‘p:hidden‘) //元素p中有隱藏屬性的p

$(‘p:visible‘) //元素p中有顯示屬性的p

--

$(‘ul‘).has(‘re‘) //選取class為re的div元素

$(‘li‘).parent() //選擇li的父元素

$(‘li‘).parents() //選擇li的父元素和祖先元素

$(‘li‘).parentUntil(‘div‘) //遇到祖先元素div即截止

 

7、 $(‘li:first-child‘) //每個父元素的第一個子元素

$(‘li:last-child‘) //每個父元素的末一個子元素

$(‘li:only-child‘) //只有一個子元素的父元素

$(‘li:nth-child(odd)‘) //每個父元素奇數 li 元素

$(‘li:nth-child(even)‘) //每個父元素偶數 li 元素

$(‘li:nth-child(2)‘) //每個父元素第三個li 元素

$(‘li:nth-child(3n)‘) //每個父元素的3的倍數的li 元素（n從0算起）

$(‘li:nth-child(3n+1)‘) //每個父元素的3的倍數加1的li 元素

$(‘.red‘).is(‘li‘) //选择器，检测 class 为是否为 red

$(‘.red‘).is($(‘li‘)) //true，jQuery 对象集合，同上

$(‘.red‘).is($(‘li‘).eq(2)) //true，jQuery 对象单个，同上

$(‘.red‘).is($(‘li‘).get(2)) //true，DOM 对象，同上

$(‘li‘).eq(2).hasClass(‘red‘) //和 is 一样，只不过只能传递 class

$(‘li‘).slice(0,2) //li的前三个

$(‘li‘).slice(2) //從第3往後全部選定

$(‘li‘).slice(-3,-2) //從倒數第3個取到倒數第2個

$(‘li‘).end() //獲取當前元素的前一個元素

$(‘li‘).contents() //某元素下面的所有節點

$(‘li‘).filter(‘.red‘) //li下面所有class為red的元素

還可以filter(‘.red‘,:first,:last) 即可套用偽類

 

8、 $(‘#box‘).html() //獲取元素のhtml內容，含Html標籤

$(‘#box‘).text() //獲取元素中の文本內容，不含Html標籤

$(‘#box‘).html(<em>value</em>) //Html標籤會解析

$(‘#box‘).text(<em>value</em>) //Html標籤會轉義

$(‘input‘).val() //獲取表單中文本的內容

$(‘input‘).val(‘China‘) //設置表單中文本的內容

$(‘input‘).val([‘ch1‘,‘ch2‘,‘ra‘])

$(‘div‘).attr("title") //獲取屬性值

$(‘div‘).attr(‘title‘,‘中華‘) //設置屬性值

$(‘div‘).attr({

title:‘中華‘,

value:‘人民‘

})

$(‘div‘).attr(‘title‘,function([index][,value]){

return .....;

})

另注釋：html()、text()、val()、is()、filter()也可傳遞function()

css設置同attr

 

9、 $(‘#m‘).addclass(c1 c3 c2); //添加class屬性

$(‘#m‘).removeclass(c1) //移除class

$(‘#m‘).toggleClass(‘c1 c3‘) //讓元素在c1和c3之間來回切換

$(‘#m‘).toggleClass(‘red‘,count++%2==0,[false/true]) //兩次切換一下[是否切換]

 

10、$(‘#m‘).width([value]) //獲取元素長度[賦值]

$(‘#m‘).innerWidth() //獲取元素のWidth+Padding

$(‘#m‘).outerWidth() //InnerWidth+Border

$(‘#m‘).outerWidth(ture) //OuterWidth+Margin

$(‘#m‘).height([value]) //獲取元素高度[賦值]

$(‘#m‘).innerHeight() //獲取元素のHeight+Padding

$(‘#m‘).outerHeight() //InnerHeight+Border

$(‘#m‘).outerHeight(ture) //OuterHeight+Margin

$(‘#m‘).offset().left //獲取相對於視口的左邊距離

$(‘#m‘).offset().top //獲取相對於視口的上邊距離

$(‘#m‘).position().left //獲取相對於父元素的左邊距離

$(‘#m‘).position().top //獲取相對於父元素的上邊距離

 

11、$(‘#m‘).append(con) //向#m內部の尾部添加con元素

例子：$(day).append(‘<option value =‘+i+‘>‘+i+‘</option>‘);

$(‘#m‘).appendTo(‘div‘) //將#m添加到div後面

例子：$("<b> Hello World!</b>").appendTo("p");

$(‘#m‘).append(function(index,html){}) //index為#m的索引,html為#m的Html

 

$(‘#m‘).prepend(con) //向#m內部の首部添加con元素

例子：$(day).prepend(‘<option value =‘+i+‘>‘+i+‘</option>‘);

$(‘#m‘).prependTo(‘div‘) //將#m添加到div前面

例子：$("<b> Hello World!</b>").prependTo("p");

$(‘#m‘).prepend(function(index,html){}) //index為#m的索引,html為#m的Html

 

$(‘#m‘).after(con) //將con插到#mの後面

$(‘#m‘).insertAfter(con) //將com移到#mの後面

$(‘#m‘).before(con) //將con插到#mの前面

$(‘#m‘).insertBefore(con) //將com移到#mの前面

 

$(‘#m‘).before(function(index,html){})

$(‘#m‘).after(function(index,html){})

 

12、$(‘#m‘).wrap(<strong/>) //在#m外加上strong,只包括一個；也可以用<strong></strong>

$(‘#m‘).wrap(<strong>123</strong>) //在#m外添加strong，123放在#m前面

$(‘#m‘).wrap(function(index){})

 

$(‘#m‘).unwrap() //輸出父元素

$(‘#m‘).wrapAll(<strong/>) //把所有的#m都包裹在一起

$(‘#m‘).wrapInner(<strong/>) //子內容包裹一層

 

13、$(‘#m‘).clone() //複製#m,包含元素和內容

$(‘#m‘).clone(ture) //複製#m,包含元素和內容和行為

$(‘#m‘).remove() //刪除#m

$(‘#m‘).remove(‘#box‘) //只刪除所有#m中ID=box的元素

$(‘#m‘).detach() //保留事件行為的刪除

$(‘#m‘).empty() //清空#m裡面的內容，保留標籤

$(‘#m‘).replaceWith(‘<em>Chn</em>‘) //將所有的#m內容(含標籤)替換為‘<em>Chn</em>‘

$(‘#m‘).replaceAll(‘<em>Chn</em>‘) //同上

 

14、$(‘:input‘) //選取所有のinput

$(‘:text‘) //選取所有のinput:text

$(‘:radio‘) //選取所有のinput:radio

$(‘:checkbox‘) //選取所有のinput:checkbox

$(‘:submit‘) //選取所有のinput:submit

$(‘:reset‘) //選取所有のinput:reset

$(‘:image‘) //選取所有のinput:image

$(‘:button‘) //選取所有のinput:button

$(‘:hidden‘) //選取所有のinput:hidden

$(‘:file‘) //選取所有のinput:file

過濾器

$(‘:enabled‘) //選取所有の可用元素

$(‘:disabled‘) //選取所有の不可用元素

$(‘:checked‘) //選取所有被選中の元素(單選和複選)

$(‘:selected‘) //選取所有被選中の元素(下拉列表)

 

15、事件簡寫,為了便於看將function(){}簡寫為fn s=$(‘#m‘)

 

s.click(fn) //單擊觸發

s.dblclick(fn) //雙擊觸發

s.mousedown(fn) //單擊後觸發

s.mouseup(fn) //單擊彈起時觸發

s.mouseover(fn) //鼠標移入(不含子元素)

s.mouseout(fn) //鼠標移出(不含子元素)

s.mousemove(fn) //鼠標移動時觸發

s.mouseenter(fn) //鼠標移入(含子元素)

s.mouseleave(fn) //鼠標移出(含子元素)

s.hover([fn1,]fn2) //鼠標移入觸發fn1，移出觸發fn2

s.keydown(fn) //鍵盤按下[e.keyCode]

s.keyup(fn) //鍵盤按下彈起[e.keyCode]

s.keypress(fn) //鍵盤按下[e.charCode]

 

s.unload(fn) //事件解綁

s.resize(fn) //改變大小時觸發

s.scroll(fn) //滾動時觸發

s.focus(fn) //獲取焦點時

s.blur(fn) //失去焦點時

s.focusin(fn) //獲取焦點時(含子元素)

s.focusout(fn) //失去焦點時(含子元素)

s.select(fn) //当 textarea 或文本类型的 input 元素中的文本被选择时

s.change(fn) //值改變時

s.submit(fn) //在form下提交時，只適用表單元素

 

16、s.click().trigger(‘click‘) //模擬點擊

s.click(fn(e,d1,d2){}).trigger(‘click‘,[‘123‘,‘abc‘])

trigger與triggerHandlerの區別

①triggerHandler不會觸發默認事件，而trigger會

②triggerHandler只會影響第一個匹配的元素，而trigger全影響

③triggerHandler返回事件執行の返回值，而trigger返回包含元素のjQuery對象

④triggerHandler不會冒泡，而trigger會

 

17、s.on(‘click‘,false) //阻止冒泡和默認行為

s.on(‘click‘,‘.button‘,fn()) //委託：將.buttonの行為綁到sのclick事件上

s.off(‘click‘,‘.btn‘) //取消委託

s.one(‘click‘,‘.button‘,fn()) //只觸發一次

 

18、s.show() //顯示s

s.show(1000) //1秒顯示，勻速改變大小和透明度

s.show(‘slow‘) //慢速顯示，slow:800,normal:400,fast:800

s.show(‘slow‘,fn())

s.hide([1000/‘slow‘][,fn()]) //隱藏s

s.toggle([‘slow‘/‘fast‘/‘normal‘]) //自動切換顯隱

 

s.slideUp([1000/‘slow‘][,fn()]) //向上收縮

s.slideDown([1000/‘slow‘][,fn()]) //向下展開

s.slideToggle([‘slow‘/‘fast‘/‘normal‘]) //自動切換捲縮

 

s.fadeIn([1000/‘slow‘][,fn()]) //淡入

s.fadeOut([1000/‘slow‘][,fn()]) //淡出

s.fadeToggle([‘slow‘/‘fast‘/‘normal‘]) //自動切換淡入淡出

s.fadeTo(‘slow‘,0.33) //自動到透明度

 

s.animate({

width:‘200px‘,height:‘300px‘,left:‘200px‘,top:‘300px‘,fontSize:‘16px‘,opacity:0.5,

}[,1000][,fn()])

 

累加功能：left:‘+=100px‘ 或 left:+=100

 

s.queue() //列隊化，使之順序執行

模擬動畫：

s.queue(fn([next]){

$(this).css(‘‘,‘‘);

[next();]

})[.hide(‘slow‘)];

 

s.stop([參1[,參2]]) //停止動畫

參1：是否停止動畫，默認為false(不停止)，true(停止)

參2：是否直接到達動畫結尾(省略中間的動畫)，默認為false(直達),true(不直達)

 

$.fx.interval=1000; //默認為13，每13毫秒運行一幀

$.fx.off=true; //關閉頁面上的所有動畫，false為默認

 

19、通用文件加載和數據傳遞

s.load(‘test.html .my‘) //加載test.html中class=my的數據,把數據放到s中

s.load(‘test.php?a=man‘) //[Get方法]向test.php發送數據

s.load(‘test.php‘,{a:‘man‘})//[Post方法]向test.php發送數據

s.load(

‘test.php‘,

{a:‘man‘}

function(respone,status,xhr){}

);

備註： response 從服務器返回の數據

status 狀態，成功返回success，失敗返回error

xhr.responseText 返回の數據

xhr.responseXML 返回XML的文檔型

xhr.status 相應Httpの狀態

xhr.statusText Httpの狀態說明

 

status  statusText 說明

200 ：OK ：成功

400 ：BadRequest ：語法錯誤

401 ：Unauthorized ：需要認證

404 ：Not Found ：URL找不到

500 ：Internal Server Error ：服務器以外錯誤

503 ：Service Unavailable ：服務器過載

s.load()第一個參數為必選，其他可選，不僅可以傳到php，還可以傳到xml、json、text中

s.load()為局部方法，全局方法為$.get()和$.post()

$.get()和$.post()有四個參數，前三個同s.load()，最後一個為返回の內容格式

為xml、html、script、json、jsonp、text

 

20、專用文件加載和數據傳遞

$.getScript(‘test.js‘) //動態加載js文件

$.getJSON(‘test.json‘,function(response,status,xhr){}); //專用加載json文件

 

21、$.get()和$.post()合用$.ajax()

AJAX 是与服务器交换数据的一项技术，它可以在不重新加载整个网站的情况下更新网页的某部分。

$.ajax({

type:‘POST‘, //傳送的類型

url:‘text.php‘, //傳送的目標

data:{ //傳送的數據值

a:‘man‘,

b:‘snow‘

}

success:fn(), //成功後執行函數

timeout:500, //設置超時

global:false, //不觸發全局事件

dataType:‘json‘ //接收的數據類型

})

 

data:$(‘#f‘).serialize() //表單序列化，不僅能獲取數據還能獲取單選、複選、下拉の內容

返回の數據形式(Get用)：FirstName=10&LastName=20

data:$(‘#f‘).serializeArray() //表單序列化，數據JSON化

Post用，為Object類型

獲取JSON化的內部數據：

    x=$("form").serializeArray();

    $.each(x, function(i, field){

      $("#results").append(field.name + ":" + field.value + " ");

    });

Post用數據轉換為Get用數據：$.param($(‘#f‘).serializeArray())

 

初始化參數，最開始的值

$.ajaxSetup({

url:‘3.txt‘,

data:{b:‘snow‘},

type:‘POST‘,

success:fn()

})

 

var obj={a:1,b:2,c:3}

$.param(obj); //將obj對象轉換成Get用

 

s.ajaxStart(fn()) //AJAX 請求發送前

s.ajaxStop(fn()) //AJAX 請求完成時

s.error(function([xhr,status,info]){}) //元素遇到錯誤(沒有正確載入)時

s.ajaxError(function([event,xhr,options,exc])) //對應局部變量error，AJAX 請求發生錯誤時

s.ajaxSuccess(function([event,xhr,options])) //對應局部變量success，AJAX 請求成功時

s.ajaxComplete(function(event,xhr,options)) //對應局部變量complete，AJAX 請求完成時(不論成功與否)

s.ajaxSend([function(event,xhr,options)]) //對應局部變量beforeSend，AJAX 請求開始時

 

局部變量用法：

s.ajax{

error:fn(),

success:fn(),

complete:fn(),

beforeSend:fn()

}

 

22、 jqXHR對象：

var jqXHR = $.ajax({

type : ‘POST‘,

url : ‘test.php‘,

data : $(‘form‘).serialize()

});

使用 jqXHR 的连缀方式比$.ajax()的属性方式有三大好处：

1.可连缀操作，可读性大大提高；

2.可以多次执行同一个回调函数；

3.为多个操作指定回调函数；

 

jqXHR.done() //替代局部方法success 或全局方法ajaxSuccess

jqXHR.always() //替代局部方法complete 或全局方法ajaxComplete

jqXHR.fail() //替代局部方法error 或全局方法ajaxError

s.when() //執行一個或多個對象の回調函數(回调函数就是一个通过函数指针调用的函数)

 

23、 工具函數

$.trim() //刪除左右兩邊的空格

$.each(array,function(index,value){}) //遍歷數組array，index為索引，value為值

$.each(object,function(name,fn){}) //遍歷對象object，name為名稱，fn為方法

$.grep(arr, function (element, index) { //返回數組中の值小於6，索引小於5の數據

return element < 6 && index < 5; //返回一數組，index 是从 0 开始计算的

});

$.map(arr, function (element, index) { //修改數據，返回一數組

if (element < 6 && index < 5) {

return element + 1;

}}

$.inArray(1, arr); //查找arr數組中數據為1のindex

$.merge(arr1,arr2); //合併數組1和數組2

$.unique(object) //刪除重複調用的DOM對象

$(‘li‘).toArray() //合并多个 DOM 元素组成数组

$(‘div‘).get() //獲取所有的div

 

23、 判斷函數

$.isArray(obj) //判断是否为数组对象，是返回 true

$.isFunction(obj) //判断是否为函数，是返回 true

$.isEmptyObject(obj) //判断是否为空对象，是返回 true

$.isPlainObjet(obj)   //判断是否为纯粹对象，是返回 true

$.contains(obj) //判断 DOM 节点是否含另一个 DOM 节点，是返回 true

$.type(data) //判断数据类型

$.isNumeric(data) //判断数据是否为数值

$.isWindow(data) //判断数据是否为 window 对象

$.proxy(obj,‘test‘) //外部觸發，指針調用，‘test‘中調用的this 指向obj

 

24、 自定義插件：

1.插件名推荐使用 jquery.[插件名].js，以免和其他 js文件或者其他库相冲突；

2.局部对象附加 jquery.fn 对象上，全局函数附加在 jquery 上；

3.插件内部，this 指向是当前的局部对象；

4.可以通过 this.each 来遍历所有元素；

5.所有的方法或插件，必须用分号结尾，避免出现问题；

6.插件应该返回的是 jQuery 对象，以保证可链式连缀；

7.避免插件内部使用$，如果要使用，请传递 jQuery 进去。