首頁 > web前端 > html教學 > 小強的HTML5行動開發之路(34)-jQuery中的選擇器

小強的HTML5行動開發之路(34)-jQuery中的選擇器

黄舟
發布: 2017-02-04 14:43:20
原創
1470 人瀏覽過

一、jQuery是什麼?

jQuery是由美國人John Resig創建,至今吸引了來自世界各地的眾多JavaScript高手加入其中。

小強的HTML5行動開發之路(34)-jQuery中的選擇器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

三、jQuery庫包含以下特徵

1、HTML元素選取

2、HTML元素操作


3、CSS操作

4、HTML事件函數

5、Javascript特效與動畫

6、HTML DOMOM

5、Javascript特效與動畫

6、HTML DOMOM 8、Utilites

四、新增jQuery庫

可以加入Google或Microsoft的CDN jQuery

Google的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()

$ :美元符號定義jQuery


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(&#39;W3School&#39;)")    包含指定字符串的所有元素    
:empty    $(":empty")    无子(元素)节点的所有元素    
:hidden    $("p:hidden")    所有隐藏的 <p> 元素    
:visible    $("table:visible")    所有可见的表格    
s1,s2,s3    $("th,td,.intro")    所有带有匹配选择的元素    
[attribute]    $("[href]")    所有带有 href 属性的元素    
[attribute=value]    $("[href=&#39;#&#39;]")    所有 href 属性的值等于 "#" 的元素    
[attribute!=value]    $("[href!=&#39;#&#39;]")    所有 href 属性的值不等于 "#" 的元素    
[attribute$=value]    $("[href$=&#39;.jpg&#39;]")    所有 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)!


來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板