1.鏈式風格

對應同一個對象，不超過三個操作，可以寫成一行

$("li").show().unbind("click");

同一個對象，多個操作，建議分多行寫，切加上注釋　　

//等待dom元素加載完畢. $(document).ready(function(){$(".has_children").click(function(){$(this).addClass("highlight") //為當前元素增加highlight類.children("a").show().end() //將子節點的a元素顯示出來并重新定位到上次操作的元素.siblings().removeClass("highlight") //獲取元素的兄弟元素，并去掉他們的highlight類.children("a").hide(); //將兄弟元素下的a元素隱藏}); });

　如下，不加注釋，很難看懂是什么意思

//id為table的表格里，如果每一行的最后一列的checkbox 沒有被禁用，則把這一行的背景色設為紅色 $("#table>tbody>tr:has(td:last:has(:checkbox:enabled))").css("background","red");

2.jQuery 和 Dom 的區別　　

//和Dom的區別$("#foo").html(); //等同于document.getElementById("foo").innerHTML$("#id").attr("checked"); //等同于document.getElementById("foo").checked //聲明變量var $variable = JQuery 對象 var variable = DOM 對象//jQuery 轉換為 dom//jQuery對象是個數組對象，可以通過[index]來轉換為dom對象var $arr = $("#id");var a = $arr[0];alert(a.checked);//通過jQuery 自己提供的方法getvar $arr = $("#id");var a = $arr.get(0);alert(a.checked); //dom 轉 jQuery 對象var arr - document.getElementById("#id");var $a = $(arr);

3.是否存在的判斷方式

//判斷方式if (cr.checked) {}; //dom方式判斷if ($cr.is(:checked)) {}; //jQuery方式判斷

4.　解決jQuery 庫和其他庫(prototype.js)的沖突　

//解決jQuery 庫和其他庫(prototype.js)的沖突jQuery.noConflict();//將變量$的控制權移交給prototype.jsjQuery(function(){jQuery("p").click(function(){alert(jQuery(this).text)});});$("#pp").style.display = 'none' ; //使用prototype//先倒入jQuery 庫，這樣就可以直接使用“jQuery”來做jQuery的工作，同時$()方法作為其他庫的快捷方式，無需調用jQuery.noConflict()函數。

5.選擇器

（1）基本選擇器

（2）層次選擇器

（3）過濾選擇器

1）.基本過濾選擇器

? ? ? ? ? ? ?

??

? ? ?

? ? ? ? ? ? ? ?

?

（4）表單選擇器　　

圖片新聞預覽效果，點擊到圖片上顯示大圖預覽

$(function(){$("a.tooltip").mouseover(function(e){var tip = "<div id='tooltip'><img src='"+this.href+"' title='"+this.title+"'/>"+this.title+"</div>";$("body").append(tip);$("#tooltip").css({"top":e.pageY+"px","left":e.pageX+"px"}).show("fast");}).mouseout(function(){$("#tooltip").remove();}); });

　　

　

轉載于:https://www.cnblogs.com/estellez/p/4235364.html

總結

以上是生活随笔為你收集整理的jQuery常用的选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

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