jQuery:基礎知識
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 进去。