Linux教程網 >> Linux編程 >> Linux編程 >> jQuery基礎及選擇器

jQuery基礎及選擇器

日期：2017/3/1 9:52:14 编辑：Linux編程

JavaScript中所有不聲明而直接使用的變量均為全局量，定義和使用函數時要注意閉包問題，一般將函數定義放到一個閉包中，變量均聲明為局部變量。如

(funciton(){

var obj;//局部變量

v1 = 123;//全局變量

});

jQuery庫添加了三個全局變量：jQuery，$兩個相同，其實是jQuery.fn.init函數的對象

添加jQuery庫可以使用Google CDN內容分發網絡（速度更快，可以根據使用的地點選擇最近的服務器），可以加載其提供的jQuery.js，本地服務器不需要保存jQuery庫源碼。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">

google.load("jQuery","1.7.1")

</script>

jQuery用法

一、jQuery對象的方法：

var o = jQuery();

o.method();

二、jQuery自身方法：jQuery核心函數，Ajax，工具函數都是該用法

jQuery.method();

jQuery核心函數，

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jQuery選擇器練習</title>

<script type="text/javascript" src="jquery-1.7.1.js"></script>

<script type="text/javascript">

//jQuery的文檔加載後執行JavaScript方法

//jQuery(function($){});全局使用jQuery，傳遞$參數，保證引用多個JavaScript庫（如，Prototype）時不出變量沖突

jQuery(function($) {

//===================DOM對象與JQuery包裝集===================

//通過document.getElementById()，document.getElementsByName()及document.getElementsByTagName()等取的就是DOM對象或DOM對象集，前者取的是對象，後者取得DOM對象集

var dom_obj = document.getElementById("text11");

var dom_obj = document.getElementsByName("text11")[0];

//var dom_obj = document.all["text11"];//在Quirks Mode下Firefox才有作用

//如果要使用JQuery提供的函數首先要構造JQuery包裝集，通過$()返回的即是JQuery包裝集（jQuery自定義的對象）

/*

* jQuery包裝集“$”與"jQuery"一樣都是調用如下函數返回

* "$===jQuery =" function (selector, context) {

* return new jQuery.fn.init(selector, context, rootjQuery);

* }

*/

var jquery_obj = $("#text11");

//返回是jQuery包裝集對象，不是DOM對象

//===================JQuery包裝集與DOM對象互相轉換===================

//DOM對象不能使用JQuery屬性方法，但DOM對象可以通過$()（這是jQuery一個核心函數）轉換成JQuery包裝集

var htmlStr = $(document.getElementById("text11")).val();

//JQuery包裝集可以使用部分DOM對象的屬性方法如.length，但也有個別屬性方法不能使用如.value，可以獲取對應DOM對象後進行操作

//要想根據jQuery包裝集對象得到DOM對象，有以下方法

var dom_obj = $("#text11")[0];

var dom_obj = $("#text11").get(0);

var dom_obj = $("#text11").get()[0];

var text11_dom = $("#text11")[0];

//在each循環時或觸發事件時的this也是DOM對象

$("#text11").click(function() {

this.value = "";

});

//===================$符號在JQuery中代表對JQuery對象的引用，JQuery的核心方法有四個===================

//jQuery(html[,ownerDocument]):根據HTML字符串動態創建Dom元素.

$("<div><p>Hello!</p></div>").appendTo("body");

//jQuery( elements ):將一個或多個Dom對象封裝為jQuery包裝集，就是上面的DOM對象與JQuery包裝集轉換

//jQuery( callback ):$(document).ready()的簡寫方式$(function(){ alert("Hello!");});

//JQuery(selector[,context]):在指定范圍內查找符合條件的JQuery包裝集，context為查找范圍，context可以是DOM對象集也可以是JQuery包裝集

//在所有tr標簽中查找id為text11元素的JQuery包裝集

var text11_query=$("#text11","tr");

//===================jQuery選擇器全解===================

//jQuery選擇器可以使用全部的CSS選擇器，以及XPath選擇器

//===================1. 基礎選擇器 Basics===================

//根據標簽名進行選擇

var input_query=$("input");

//根據id值選取

var text11_query=$("#text11");

//根據class值進行選取

var text11_query=$(".text11");

//同時選擇多個符合條件的JQuery包裝集，用","號分隔條件

var text_query=$("#text11,#text12");

//選擇所有DOM元素

var all_query=$("*");

//===================2.層次選擇器 Hierarchy===================

//獲取以tr標簽作為上下文的id值為text11的元素

var text11_query=$("tr #text11");

//獲取所有td標簽下的所有直接input子元素

var input_query=$("td > input");

//獲取所有id為text11元素的同級且緊靠的class為button11元素。text11與button11在地位上屬於同級關系

var button11_query=$("#text11 + .button11");

//獲取與id為text11元素同級，且處於後面的所有class為button11的元素

var button11_query=$("#text11~.button11");

//===================3.基本過濾器 Basic Filters===================

//相當於CSS選擇器中的偽類

//獲取第一個input元素

var input_query=$("input:first");

//獲取最後一個input元素

var input_query=$("input:last");

//獲取所有未被選中的input元素，僅對有checked屬性的元素有效

var input_query=$("input:not(:checked)");

//獲取所有input元素中偶數的元素，第一個input元素為1

var input_query=$("input:even");

//獲取所有input元素中奇數的元素，第一個input元素為1

var input_query=$("input:odd");

//查找所有input元素中索引為1的input元素，索引值從0算起

var input_query=$("input:eq(1)");

//查找所有input元素中索引大於0的input元素（不包含索引為0的元素）

var input_query=$("input:gt(0)");

//查找所有input元素中索引小於2的input元素（不包含索引為2的元素）

var input_query=$("input:lt(2)");

//獲取頁面所有標題元素，等價於$("h1, h2,h3,h4,h5,h6")

var h_query=$(":header");

//獲取所有正在執行動畫效果的元素

var animated_query=$(":animated");

//===================4. 內容過濾器 Content Filters===================

//查找所有html內容含有"你好世界！"的h1元素

var h1_query=$("h1:contains('你好世界！')");

//獲取所有不含子標簽或html內容為空的td元素

var td_query=$("td:empty");

//查找所有含有input子元素的td元素

var td_query=$("td:has(input)");

//查找所有含有子標簽或有html內容的td元素，與empty過濾器作用相反

var td_query=$("td:parent");

//===================5.可見性過濾器 Visibility Filters===================

//hidden查找所有不可見元素（如<script>標簽不可見），或者type為hidden的元素（對於使用visibility:hidden隱藏的元素不能獲取）

//查找使用type為hidden的input元素

var input_query=$("input:hidden");

//查找所有可見的input元素

var input_query=$("input:visible");

//===================6.屬性過濾器 Attribute Filters===================

//查找所有含有id屬性的input元素

var input_query=$("input[id]");

//查找name值為text11的input元素

var input_query=$("input[name='text11']");

//查找name值不等於text11的所有input元素

var input_query=$("input [name!='text11']");

//查找name值以text開頭的input元素

var input_query=$("input[name^='text']");

//查找name值以11結尾的所有input元素

var input_query=$("input[name$='11']");

//查找name值中含有ext的所有input元素

var input_query=$("input[name*='ext']");

//查找所有含有id屬性並且name值中含有ext的input元素

var input_query=$("input[id][name*='ext']");

//===================7.子元素過濾器 Child Filters===================

//查找父元素中子元素中排第2的input元素

//:eq(index)只匹配一個元素，而為:nth-child每一個父元素匹配子元素

//:nth-child從1開始的，而:eq()是從0算起。

var input_query=$("input:nth-child(2)");

//查找父元素中第一個子元素是input元素的所有input

var input_query=$("input:first-child");

//查找父元素中最後一個子元素是input元素的所有input

var input_query=$("input:last-child");

////查找父元素中子元素有且僅有一個是input元素的所有input

var input_query=$("input:only-child");

//===================8.表單選擇器 Forms===================

//查找所有input元素

var input_query=$(":input");

//查找所有文本框元素

var text_query=$(":text");

//查找所有密碼框元素

var password_query=$(":password");

//查找所有復選框

var checkbox_query=$(":checkbox");

//查找所有提交按鈕元素

var submit_query=$(":submit");

//查找所有圖像域元素

var image_query=$(":image");

//查找所有重置按鈕元素

var reset_query=$(":reset");

//查找所有按鈕元素

var button_query=$(":button");

//查找所有文件域元素

var file_query=$(":file");

//===================9.表單過濾器 Form Filters===================

//查找所有可用的input元素

var input_query=$(":input:enabled");

//查找所有不可用的input元素

var input_query=$("input:disabled");

//查找所有選中的單選復選框

var input_query=$("input:checked");

//查找所有選中的下拉框,該過濾器對於多選下拉框非常有用

//當多選時，可返回所有選中項的值

$("select").click(function(){

var option_query=$(":selected");

alert($(this).val());

})

});

</script>

</head>

<body>

<form name="form1" id="form1" class="form1" action="" method="post">

<table name="table1" id="table1" class="table1">

<tr name="tr1" id="tr1" class="tr1">

<td name="td11" id="td11" class="td11" nowrap>

<input type="text" name="text11" id="text11" class="text11" value="text11"/>

<input type="button" name="button11" id="button11" class="button11" value="button11"/>

<input type="button" name="button12" id="button12" class="button11" value="button12"/>

</td>

<td name="td12" id="td12" class="td12">

<input type="text" name="text12" id="text12" class="text12" value="text12"/>

<input type="hidden" name="hidden12" id="hidden12" class="hidden12" value="hidden12"/>

</td>

<td name="td13" id="td13" class="td13">

<input type="text" name="text13" id="text13" class="text13" value="text13"/>

</td>

</tr>

<tr name="tr2" id="tr2" class="tr2">

<td name="td21" id="td21" class="td21">

<input type="password" name="password21" id="password21" class="password21" value="password21"/>

<input type="radio" name="radio21" id="radio21" class="radio21" value="radio21" checked/>

<input type="checkbox" name="checkbox21" id="checkbox21" class="checkbox21" value="checkbox21" checked/>

</td>

<td name="td22" id="td22" class="td22" nowrap>

<input type="submit" name="submit22" id="submit22" class="submit22" value="submit22"/>

<input type="image" name="image22" id="image22" class="image22" value="image22"/>

<input type="reset" name="reset22" id="reset22" class="reset22" value="reset22"/>

</td>

<td name="td23" id="td23" class="td23">

<input type="file" name="file23" id="file23" class="file23" value="file23"/>

</td>

</tr>

<tr name="tr3" id="tr3" class="tr3">

<td name="td31" id="td31" class="td31">

<select multiple="multiple" name="select31" size="3">

<option value="select311">option1</option>

<option value="select312">option2</option>

<option value="select313">option3</option>

</select></td>

<td name="td32" id="td32" class="td32"></td>

<td name="td33" id="td33" class="td33"></td>

</tr>

</table>

</form><h1>你好世界！</h1>

</body>

</html>