<h2>語法總結(jié)和注意事項(xiàng)</h2>
?<!--
?1、關(guān)于頁面元素的引用
??? 通過jquery的$()引用元素包括通過id、class、元素名以及元素的層級關(guān)系及dom或者xpath條件等方法，且返回的對象為jquery對象（集合對象），不能直接調(diào)用dom定義的方法。
<span id="msg">SPAN仙鶴信息</span>-->

<table id="table1">
<tr><td>AAA</td></tr>
<tr><td>BBB</td></tr>
<tr><td>CCC</td></tr>
</table>
<p id='p1'>單擊某個(gè)P元素則彈出其內(nèi)容</p>

<div id="msg">IDMSG內(nèi)容</div>

<p>

<table id="table2">
<tr><td>AAA</td></tr>
<tr><td>BBB</td></tr>
<tr><td>CCC</td></tr>
</table>

<div id="mytoggle">MYtoggle and toggle</div>

?<p>
?<div id="p">MyP MyP MyP MyP MyP MyP</div>
<script>
$(function(){
?? //val = $("#msg").html();???????????? //第一種方法
?? //val = $("#msg")[0].innerHTML;?????? //第二種方法
?? //val = $("#msg").eq(0)[0].innerHTML; //第三種
?? //val = $("#msg").get(0).innerHTML;?? //第四種方法?
?? //alert(val);
?? //val = $("#table1").eq(0)[0].innerHTML;
?? //alert(val);
?? //實(shí)丙表格的隔行換色效果
?? $("#table1 tr").each(function(i){this.style.backgroundColor=['#ccc', '#ffc'][i%2]})
?? //$("p").click(function(){alert($(this).html())})?????????????
?? //為每個(gè)p元素增加了click事件，單擊某個(gè)p元素則彈出其內(nèi)容
?? //為每個(gè)P元素增加了click事件,單擊某個(gè)P元素則彈出其內(nèi)容
?? $("#p1").click(function(){alert($(this).html())});
??
?? ?
?//擴(kuò)展我們需要的功能
?$.extend({
????????? min: function(a, b){return a < b ? a:b;},
??? max: function(a, b){return a > b ? a:b;}
???????????? }); //為jquery擴(kuò)展了min,max兩個(gè)方法
?//使用擴(kuò)展的方法(通過"$.方法名"調(diào)用):
?alert("a=10, b=20, max="+$.max(10,20)+", min="+$.min(10,20));
??
?
?//支持方法的連寫
?//所謂連寫,即可以對一個(gè)jquery對象連續(xù)調(diào)用各種不同的方法
?$("p").click(function(){alert($(this).html())})
?//.mouseover(function(){alert('mouse over event')})
?.each(function(i){this.style.color=['#f00', '#0f0', '#00f']});?
?
?//操作元素的樣式 主要包括以下幾種方式
?//$("#msg").css("background");
?$("#msg").css("background", "#ccc"); //返回元素的背景顏色
?$("#msg").height(300); $("#msg").width("200"); //設(shè)置寬高
?$("#msg").css({color:"red", background: "blue"}); //以名值對的形式設(shè)定樣式
?$("#msg").addClass("select"); //為元素增加名為select的clsss
?$("#msg").removeClass("select"); //刪除元素名為select的class
?$("#msg").toggleClass("select");? //如果存在就刪除名稱為select的class, 如果不存在就添加名稱為select的class
?

?//完善的事件處理功能
?//jquery 已經(jīng)為我們提供了各種事件處理方法,我們無需在html元素上直接寫事件, 而可以直接通過jquery獲取的對象添加事件.
?$("#msg").click(function(){alert("good msg")});
?$("p").click(function(i){this.style.color=['#f00', '#f0f', '#00f']});
?//為三個(gè)不同的P元素單擊事件分別設(shè)置定不同的處理
?//jquery中幾個(gè)自定義的事件
?//hover(fn1, fn2): 一個(gè)模仿懸停事件(鼠標(biāo)移動(dòng)到一個(gè)對象上面及移出這個(gè)對象)的方法。當(dāng)鼠標(biāo)移動(dòng)到一個(gè)配的元素上面時(shí)，會(huì)觸發(fā)指定的第一個(gè)函數(shù)，當(dāng)鼠標(biāo)移出這個(gè)元素時(shí)，會(huì)觸發(fā)指定的第二個(gè)函數(shù)
?//當(dāng)鼠標(biāo)放在表格的某行上時(shí)將class置為over, 離開時(shí)置為out.
?$("#table2 tr").hover(function(){
? $(this).addClass('over');
?},
?function(){
????? $(this).addClass('out');
?});
?
?//ready(fn):當(dāng)DOM載入就緒可以查詢及操縱時(shí)綁定一個(gè)要執(zhí)行的函數(shù)
?$(document).ready(function(){alert("Load Suceess")});
?//頁面加載完畢提示"Load Sucess",相當(dāng)于onload事件,與$(fu)等價(jià)
?
?//toggle(evenFn, oddFn): 每次點(diǎn)擊時(shí)切換要調(diào)用的函數(shù)，如果點(diǎn)擊了一個(gè)匹配的元素，則觸發(fā)指定的第一個(gè)函數(shù)，當(dāng)再次點(diǎn)擊同一個(gè)元素時(shí)，則觸發(fā)指定的第二個(gè)函數(shù)，隨后的每次點(diǎn)擊都重復(fù)對這兩個(gè)函靈敏的輪番調(diào)用
?//每次點(diǎn)擊時(shí)輪換添加和刪除名為seelcted的class
?$("#mytoggle").toggle(function(){
?????? $(this).addClass("over");
?},
?function(){
??????? $(this).removeClass("over");
?})
?
?//trigger(eventtype): 在每一個(gè)匹配的元不上觸發(fā)某類事件
?$("p").trigger("click"); //解發(fā)所有P元素的click事件
?
?//bind(eventtype, fn), unbind(eventtype): 事件的綁定與反綁定
?//從每一個(gè)匹配的元不中（添加）刪除綁定的事件
?$("#p").bind("click", function(){alert($(this).text())}); //為p元素添加單擊事件
?$("#p").unbind();??????? //刪除p元素上的所有事件
?$("#p").unbind("click"); //刪除p元素上的click事件
?
?
?//幾個(gè)實(shí)用特效功能
?//其中toggle()和slidetoggle()方法提供了狀態(tài)切換功能
?//如toggle（）方法包括了hide()和show()方法
?//slideToggle()方法包括了slideDown()和slideUp方法
?
?//幾個(gè)有用的確jquery方法
?//$.browser.瀏覽器類型: 檢測瀏覽器類型. 有效參數(shù): safari, opera, msie, mozilla.
?//如檢測是否ie: $.browser.isie, 是ie瀏覽器則返回true;
?//val = $.browser;
?//alert($.browser);
?//val = $.browser.isie;
?//alert(val);
?//$.each(obj, fn): 通用的迭代函數(shù), 可用于近似地迭代對象和數(shù)組(代替循環(huán))
?$.each( [0,1,2], function(i, n){ alert("Item #" + i +" : " +n); });
?//等價(jià)于
?var tempArr = [0, 1, 2];
?for(var i=0; i<tempArr.length; i++){
???? alert("Ltem # " + i + " : " + tempArr);
?}
?//也可以處理json數(shù)據(jù),如
?$.each({name:"JOhn", lang: "JS"}, function(i, n){alert("Name: " + i + ", Value: " + n); });
?
?//$.extend(target, prop1, propN): 用一個(gè)或多個(gè)其它對象來擴(kuò)展一個(gè)對象, 返回這個(gè)被擴(kuò)展的對象.這是jquery實(shí)現(xiàn)的繼聚承方式
?//$.extend(settings, options);
?//合并setings和options。并將合并結(jié)果返回settings中，相當(dāng)于options繼承setting并將繼承結(jié)果保存在setting中
?//var settings = $.extend({}, defaults, options);
?//合并defaults和optons, 并將合并結(jié)果返回到setting中而不覆蓋default內(nèi)容.
?//可以有多個(gè)參數(shù)(合并多項(xiàng)并返回)
?//$.map(array, fn): 數(shù)組映射，把一個(gè)數(shù)組中的的項(xiàng)目(處理轉(zhuǎn)換后)保存到另一個(gè)數(shù)組中，并返加生成的新數(shù)組
?var tmpArr = $.map([0,1,2], function(i){ return i + 4; });
?//tmpArr內(nèi)容為: [4,5,6]
?var tmpArr = $.map([0,1,2], function(i){ return i > 0 ? i+1 : null;});
?//tmpArr內(nèi)容為: [2,3]
?//$.merge(arr1, arr2): 合并兩個(gè)數(shù)組并刪除其中重復(fù)的項(xiàng)目
?//如： $.merge([0,1,2], [2,3,4]) //返回[0,1,2,3,4]
?//$.trim(str): 刪除字符串兩端的空白字符
?//如: $.trim(" hello, how ary you? "); //返回"hello,how ary you?"
?
?//解決自寶義方法或其它類庫與jquery的沖突
?//很多時(shí)候我們可以自已定義了$(id)方法來獲取一個(gè)元素，或者其它的一些JS類庫如prototype也都定義了$方法, 如果同時(shí)把這些內(nèi)容放在一起就會(huì)引起變量方法定義沖突，jquery對此專門提供了方法用于解決此問題
?//使用jquery中的jquery.noConflict();方法即可把充量的$的控制權(quán)讓渡經(jīng)第一個(gè)實(shí)現(xiàn)它的那個(gè)庫或之前自寶義的$方法，之后應(yīng)用jquery的時(shí)候只要將所有的$
? //jQuery.noConflict();
? //開始使用jQuery
? //jQuery("div p").hide();
? //使用其他庫的$();
? //$("content").style.display = 'none';
?
?
?
?
?
?
?
?
?
?
?
???
})
</script>

轉(zhuǎn)載于:https://www.cnblogs.com/xiangxiaodong/archive/2011/03/01/1968460.html

總結(jié)

以上是生活随笔為你收集整理的jquery技巧总结 学习的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。