<h2>語法總結和注意事項</h2>
?<!--
?1、關于頁面元素的引用
??? 通過jquery的$()引用元素包括通過id、class、元素名以及元素的層級關系及dom或者xpath條件等方法，且返回的對象為jquery對象（集合對象），不能直接調用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'>單擊某個P元素則彈出其內容</p>

<div id="msg">IDMSG內容</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);
?? //實丙表格的隔行換色效果
?? $("#table1 tr").each(function(i){this.style.backgroundColor=['#ccc', '#ffc'][i%2]})
?? //$("p").click(function(){alert($(this).html())})?????????????
?? //為每個p元素增加了click事件，單擊某個p元素則彈出其內容
?? //為每個P元素增加了click事件,單擊某個P元素則彈出其內容
?? $("#p1").click(function(){alert($(this).html())});
??
?? ?
?//擴展我們需要的功能
?$.extend({
????????? min: function(a, b){return a < b ? a:b;},
??? max: function(a, b){return a > b ? a:b;}
???????????? }); //為jquery擴展了min,max兩個方法
?//使用擴展的方法(通過"$.方法名"調用):
?alert("a=10, b=20, max="+$.max(10,20)+", min="+$.min(10,20));
??
?
?//支持方法的連寫
?//所謂連寫,即可以對一個jquery對象連續調用各種不同的方法
?$("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"); //設置寬高
?$("#msg").css({color:"red", background: "blue"}); //以名值對的形式設定樣式
?$("#msg").addClass("select"); //為元素增加名為select的clsss
?$("#msg").removeClass("select"); //刪除元素名為select的class
?$("#msg").toggleClass("select");? //如果存在就刪除名稱為select的class, 如果不存在就添加名稱為select的class
?

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

轉載于:https://www.cnblogs.com/xiangxiaodong/archive/2011/03/01/1968460.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。