小強的HTML5行動開發之路（34）－jQuery中的選擇器
- 黄舟原創
- 2017-02-04 14:43:201453瀏覽
一、jQuery是什麼？
jQuery是由美國人John Resig創建，至今吸引了來自世界各地的眾多JavaScript高手加入其中。
jQuery的創辦人和技術領袖，目前在Mozilla擔任JavaScript工具開發工程師。著有《Pro JavaScript Techniques》（即《精通JavaScript》）等經典JavaScript書籍。
jQuery是繼prototype之後又一個優秀的JavaScript框架。其宗旨是－WRITE LESS, DO MORE,寫更少的程式碼，做更多的事。
jQuery是輕量級的js庫（壓縮後只有21k），這是其他js庫所不及的，它兼容CSS3,還兼容各種瀏覽器。
下載地址：http://jquery.com/download/
jQuery是一個快速的，簡潔的javaScript庫，使用戶能更方便地處理HTMLdocuments、events、實現動畫效果，並且方便地為網站提供AJAX交互。
jQuery能夠使用戶的html頁保持程式碼和html內容分離，也就是說，不用再在html裡面插入一堆js來呼叫指令了，只需定義id即可。
二、目前流行的javascript庫
jQuery
EXTJS
PrototypePrototype
EXTJS
MooTools
1、HTML元素選取
3、CSS操作
4、HTML事件函數
5、Javascript特效與動畫
6、HTML DOMOM
5、Javascript特效與動畫6、HTML DOMOM 8、Utilites四、新增jQuery庫可以加入Google或Microsoft的CDN jQueryGoogle的CDN<head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs /jquery/1.4.0/jquery.min.js"></script> </head>Microsoft的CDN
<head> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery /jquery-1.4.min.js"></script> </head>了，JavaScript是HTML5以及所有現代瀏覽器中的預設腳本語言。 有兩個版本的JQuery可以下載：http://jquery.com/download/1、Production version ：用於實際的網站中，已經被精簡壓縮。 2、Development version ：用於測試和開發，未壓縮可讀。
五、簡單實用方法
jQuery 語法是為 HTML 元素的選取編制的，可以對元素執行某些操作。
基礎語法是：$(selector).action()
selector ：查詢並找出HTML元素
action() ：執行對元素的操作
。 .hide 隱藏目前的HTML元素
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
<span style="white-space:pre"> </span>$(document).ready(function(){
<span style="white-space:pre"> </span>$("button").click(function(){
<span style="white-space:pre"> </span>$(this).hide();
<span style="white-space:pre"> </span>});
<span style="white-space:pre"> </span>});
</script>
</head>
<body>
<button type="button">Click me</button>
</body>
</html>注意上面程式碼的朋友可能會對上面的如下程式碼感到疑惑
$(document).ready(function(){
--- jQuery functions go here ----
});這句程式碼是為了防止文件在完全載入就執行jQuery程式碼，否則就可能出現問題。
除了上的this以外，還可以透過其他方式取得元素物件1、元素選擇器$("#test") ：id="test"的元素。
$("p") ：
元素。
$(".test") ：class="test"的元素。
$("p.intro") ： class="intro" 的
元素。
$("p#demo") ： id="demo" 的元素。
2、屬性選擇器jQuery使用XPath表達式來選擇帶有給定屬性的元素。
$("[href]") 選取所有帶有href屬性的元素。
$("[href='#']") 選取所有帶有href且值等於#的元素。
$("[href!='#']") 選取所有帶有 href 值不等於 "#" 的元素。 $("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結尾的元素。 3、CSS選擇器
jQuery CSS 選擇器可用於變更 HTML 元素的 CSS 屬性。
$("p").css("background-color","red");六、jQuery選擇器表
选择器 实例 选取
* $("*") 所有元素
#id $("#lastname") id="lastname" 的元素
.class $(".intro") 所有 class="intro" 的元素
element $("p") 所有 <p> 元素
.class.class $(".intro.demo") 所有 class="intro" 且 class="demo" 的元素
:first $("p:first") 第一个 <p> 元素
:last $("p:last") 最后一个 <p> 元素
:even $("tr:even") 所有偶数 <tr> 元素
:odd $("tr:odd") 所有奇数 <tr> 元素
:eq(index) $("ul li:eq(3)") 列表中的第四个元素（index 从 0 开始）
:gt(no) $("ul li:gt(3)") 列出 index 大于 3 的元素
:lt(no) $("ul li:lt(3)") 列出 index 小于 3 的元素
:not(selector) $("input:not(:empty)") 所有不为空的 input 元素
:header $(":header") 所有标题元素 <h1> - <h6>
:animated 所有动画元素
:contains(text) $(":contains('W3School')") 包含指定字符串的所有元素
:empty $(":empty") 无子（元素）节点的所有元素
:hidden $("p:hidden") 所有隐藏的 <p> 元素
:visible $("table:visible") 所有可见的表格
s1,s2,s3 $("th,td,.intro") 所有带有匹配选择的元素
[attribute] $("[href]") 所有带有 href 属性的元素
[attribute=value] $("[href='#']") 所有 href 属性的值等于 "#" 的元素
[attribute!=value] $("[href!='#']") 所有 href 属性的值不等于 "#" 的元素
[attribute$=value] $("[href$='.jpg']") 所有 href 属性的值包含以 ".jpg" 结尾的元素
:input $(":input") 所有 <input> 元素
:text $(":text") 所有 type="text" 的 <input> 元素
:password $(":password") 所有 type="password" 的 <input> 元素
:radio $(":radio") 所有 type="radio" 的 <input> 元素
:checkbox $(":checkbox") 所有 type="checkbox" 的 <input> 元素
:submit $(":submit") 所有 type="submit" 的 <input> 元素
:reset $(":reset") 所有 type="reset" 的 <input> 元素
:button $(":button") 所有 type="button" 的 <input> 元素
:image $(":image") 所有 type="image" 的 <input> 元素
:file $(":file") 所有 type="file" 的 <input> 元素
:enabled $(":enabled") 所有激活的 input 元素
:disabled $(":disabled") 所有禁用的 input 元素
:selected $(":selected") 所有被选取的 input 元素
:checked $(":checked") 所有被选中的 input 元素
以上就是 小強的HTML5行動開發之路（34）－jQuery中的選擇器的內容，更多相關網內容請注意.php.cn）！