JQUERY 選取器
Jquery的選取方式
原則上很簡單
分為基本六個
1. #id 編號
2. element元素
3. class類別
4. class.class
5.* 萬用字元
6.selector1, selector2, selectorN 元素共用
第六個選項
第一個id 就是在標籤內輸入id 的名稱
例如<p id=’ele01′></p>
那在jquery選取時就可以用 $(“#ele01″)
第二種 元素.所謂的元素指的是 標籤本身
例如 <div></div >
那在jquery選取時就可以用$(“div")
第三種 類別 就是在標籤內輸入 class 名稱
例如 <span class=’c1′> </span>
或是 <div class=’c1′></div>
此時div 及 span 都是套用同一個class
那在jquery選取時就可以用$(‘.c1′)
第四種 類別中的類別 這樣的方式比較抽象
但是以類別的角度來看.其實是差不多的
例如 <span class=’c1 c2’></span>
這樣的方式可以用 $(‘.c1.c2’)的方式選取
第五種 萬用字元 簡單來說就是"所有"的意思
$(" * “)=>所有的元素都選取
第六種 共用,所謂的共用就是有好幾個都要使用同一個動作.所以要"一起選"
例如$(“#ele01 , div , .c1″)這樣就取了三種東西.這樣的方式一起選取好幾個一起再套用
在CSS中也有相同的選取方式
以上的選取方式為Basic的選取方式 當然還有再進一步的選取方式
—————————————————————————–
jquery-套用css
—————————————————————————–
.addClass()——-增加樣式類別
.css()————-讀取屬性
.hasClass()——-檢查樣式是否存在
.height()———-高度
.innerHeight()—–內部高度
.innerWidth()—–內部寬度
.offset()———–位移
.outerHeight()—–外部高度
.outerWidth()—–外部寬度
.position()——–位置
.removeClass()—移除樣式
.scrollLeft()——-滾動值(水平)
.scrollTop()——-滾動值(垂直)
.toggleClass()—–樣式開關
.width()———–寬度
其中有讀取值的 像 CSS() position () height() width() 也有套用值的
其中最重要的功能當然就是 CSS()
例如
var cssObj=$(“p").css()
$(“div").css(cssObj)
這樣就可把段落的樣式值 套在 DIV 身上了
——————————————————————————-
jQuery 選取元素 (Selectors)
——————————————————————————-
jQuery 選取元素 (Selectors)
jQuery 最基本的中心思想就是以「選取 DOM 元素為開始」，接著就是對它們作一些事。
jQuery 在選取元素方面採用 CSS 選擇器的語法 (CSS1、CSS2、CSS3)，此外透過 plugin 你也可以使用 XPath 語法，
我們直接看幾道範例你就會明白怎麼在 jQuery 中用 CSS Selectors 選取元素：
語法 (Syntax)…………..
$(selectors);
tag selector
————
jQuery 中
$(“a"); // 取得頁面中所有的<a>標籤元素
JS DOM 中
document.getElementsByTagName(“a");
CSS 中
a {}
id selector
————
jQuery 中
$(“#container"); // 取得id為container的元素
JS DOM 中
document.getElementById(“container");
CSS 中
#container {}
class selector
—————
jQuery 中
$(“.content"); // 取得class name為content的所有元素
JS DOM 中
document.getElementsByClassName(“content");
// FF3、或自己實作這個函式
CSS 中
.content {}
同樣道理，CSS中有的你都能依樣畫葫蘆
jQuery 中
$(‘#container a’); // 取得id為container之元素其內部的所有連結
CSS 中
#container a {}
jQuery 中
$(“div > p"); // 取得div父元素其下所有的p子元素
CSS 中
div > p {}
jQuery 中
$(“tr:first"); // 取得第一個找到的tr標籤元素
CSS 中
tr:first {}
jQuery 中
$(“input[name=’newsletter’]"); // 取得其name屬性值為newsletter的input元素
CSS 中
input[name=’newsletter’] {}
jQuery Selectors 取回的元素之型態？
————————————–
jQuery 物件 ($) 會將匹配到的元素以「陣列」型態返回一個 jQuery 物件，
也就是說你可以像下面這樣取得被匹配到元素的個數：
// 選取到幾個<a>？
$(‘a’).length;
$(‘a’).size();
jQuery 物件 → 實際 HTML DOM 元素
正如上述，取得的元素是一個 jQuery 物件，因此如果我們作下面這樣操作是會產生錯誤的：
$(“#container").style.display = “none";
WHY？因為 style is not defined。(jQuery 物件沒 style 這屬性，因為它不是 DOM 物件嘛！)
jQuery 物件只能使用 jQuery 的方法；而 DOM 物件只能使用 DOM 物件的方法。
如果你想操作實際的 DOM 元素怎麼辦？ jQuery 提供下面的方法來處理這問題：
/* 轉換為真實 DOM 元素集合 */
var container = $(“#container").get();
/*
取得 $(“.containers") 元素集合裡的第X個 DOM 元素
get後面接的是索引值，索引值由0開始
*/
var containers = $(“.containers").get(0);
或，您也可以這樣
var container = $(“#container")[0];
我們再來看看，可以正確執行的 Code 應該是這樣的：
$(“#container").get(0).style.display = “none";
DOM 物件 → jQuery 物件
反過來，如果你想將 DOM 轉為 jQuery 物件，只要將 DOM 傳入「$()」:
jQuery(elements);
或
$(elements);
如：
$(document.getElementById(“id"));
jquery radio取值，checkbox取值，select取值，radio選中，checkbox選中，select選中，及其相關
//獲取一組radio被選中項的值
var item = $(‘input[@name=items][@checked]’).val();
//獲取select被選中項的文本
var item = $(“select[@name=items] option[@selected]").text();
//select下拉清單的第二個元素為當前選中值
$(‘#select_id’)[0].selectedIndex = 1;
//radio單選組的第二個元素為當前選中值
$(‘input[@name=items]’).get(1).checked = true;
獲取值：
文字方塊，文本區域：$(“#txt").attr(“value")；
多選框checkbox：$(“#checkbox_id").attr(“value")；
單選組radio： $(“input[@type=radio][@checked]").val();
下拉清單select： $(‘#sel’).val();
控制表單元素：
文字方塊，文本區域：$(“#txt").attr(“value","); //清空內容
$(“#txt").attr(“value",’11’); //填充內容
多選框checkbox： $(“#chk1″).attr(“checked","); //不打勾
$(“#chk2″).attr(“checked",true); //打勾
if($(“#chk1″).attr(‘checked’)==undefined) //判斷是否已經打勾
單選組radio： $(“input[@type=radio]").attr(“checked",’2′); //設置value=2的項目為當前選中項
下拉清單select： $(“#sel").attr(“value",’-sel3′); //設置value=-sel3的項目為當前選中項
$(“<option value=’1′>1111</option><option value=’2′>2222</option>").appendTo(“#sel") //添加下拉清單的option
—- 2012.1.13 補充 ——————————————————————————————-
1 jQuery大多是基於 document 一個或多個元素進行操作的，選擇元素就是基礎。
1.1 通過tagName匹配。$(“p")就是選出所有的document中P標簽的元素
1.2 通過ID匹配。$(“#list1″)就是選出所有的document中 id="list1″的元素
1.3 通過.className匹配。$(“.a")就是選出所有的document中class="a"的元素
1.4 通過tag.className匹配。$(“p.b")就是選出所有的P標簽的屬性class="b"的元素
1.5 通過tag#id.className匹配。$(“ul#list1.b")
就是選出所有的ul標簽id="list1″的屬性class="b"的元素
1.6多類一起選擇。$(‘ul, ol, dl’) 選出所有的ul、ol、dl標簽的元素
2 匹配元素是集合時，需要通過過滤來匹配元素。
2.1 基本過滤。
2.1.1 :first (:last) $(“p:first")P標簽元素集的第1個
2.1.2 :even (:odd) $(“p:odd")P標簽元素集的第奇數個（開始）
2.1.3 :eq(n) :gt(n) :lt(n) $(“p:gt(1)") P標簽元素集第大於1的（開始）
2.1.4 :not $(“p:not(p:eq(2))") P標簽元素集中不是第2 個那些（開始）
2.1.5 :header
2.1.6 :animated
2.2 屬性過滤
2.2.1 [attribute] $(“p[name]") P標簽元素集中含name屬性的元素
2.2.2 [attribute=value] $(“p[id=para1]") P標簽元素集中id=" para1″的元素
2.2.3 [attribute!=value] $(“p[id!=para1]") P標簽元素集中id非 para1的那些元素
2.2.4 [attribute^=value] $(“p[id^=para]") P標簽元素集中id以 para開頭的元素
2.2.5 [attribute$=value] $(“p[id$=a1]") P標簽元素集中id以a1結尾的元素
2.2.6 [attribute*=value] $(“p[id*=ar]") P標簽元素集中i d包含ar的那些元素
2.2.7 [attrFilter1][attrFilterN] $(“p[id^=para][lang*=en-]") P標簽元素集中id不以para開頭且屬性lang包含en-的元素
2.3 內容過滤
2.3.1 :contains(text) $(“p:contains(ara)") P標簽元素集中text包含ara的那些元素
2.3.2 :empty $(‘td:empty’) td標簽元素集中無text的那些td元素
2.3.3 :has(selector) $(“ul:has(li[class=a])") ul標簽集中包含li[class=a] 元素的那些ul元素
2.3.4 :parent $(“p:parent")P標簽元素集中那些非空的元素
2.4 可見性過滤
2.4.1 :visible $(“p: visible “)P標簽元素集中那些可見的元素
2.4.2 :hidden $(“p: hidden “)P標簽元素集中那些不可見的元素
2.5 子元素過滤
2.5.1 :nth-child(index)、:nth-child(even)、:nth-child(odd) $(“ul li:nth-child(odd)")ul標簽子元素li集中那些奇數元素（1開始）
2.5.2 :nth-child(equation) $(“ul li:nth-child(2n)") ul標簽子元素li集中那些數元素（1開始）
2.5.3 :first-child、:last-child $(“ul li:first-child") ul標簽子元素li集中第1個元素
2.5.4 :only-child $(“ul li:only-child") ul標簽子元素li集中僅有1個元素
2.6 Form過滤
2.6.1 :input $(“form :input")Form中所有的輸入域，包括：select、text、textarea、button等
2.6.2 :text $(“form :text")Form中所有的text域
2.6.3 :password $(“form : password “)Form中所有的password域
2.6.4 :redio、:checkbox、:checked、:submit、:reset、:button、:file、:image
2.7 遍曆過滤
2.7.1 size()、length 。$(“p").size()、$(“p").length返回P標簽元素集中成員數
2.7.2 get() $(“li").get() li標簽所有的元素
2.7.3 get(index) $(“li").get(0) li標簽第1個元素
2.7.4 find(expression) $(“ul").find(“li.b") ul標簽集中那些li[class=b] 元素的li元素
2.7.5 each(fn) $(“p").each(function() {$(this).css(“border", border+"px solid red");$(this).css(“margin-left", leftmargin);border += 2;leftmargin += 10;});P標簽集每元素添加函數
2.8 組合過滤
2.8.1 $(‘form#login’) 匹配id="login"的Form元素
2.8.2 $(‘#external_links a’) 匹配id="external_links"元素集中那些a元素
2.8.3 $(“li a[href$=.pdf]") 匹配li標簽集中那些a標簽中href屬性以.pdf結尾的li元素
2.8.4 $(“li").not(“[ul]") 匹配所有的li元素但去除了沒有ul子元素的li元素
2.8.5 $(‘input:not(.required)’) 匹配所有不含 required 類的輸入元素
2.8.6 $(“input:checkbox/..") 匹配所有輸入复選框的父元素
3 對頁面內容的操作
3.1 html() 獲得頁面元素的內容（包括標簽）$(“#list1″).html()
3.2 text() 獲得頁面元素的文字內容（不包含標簽）$(“#list1″).text()
3.3 html(newcontent) 置元素的內容$(“#para2″).html(“<p>This is a new paragraph</p>");
3.4 text(newtext) 置元素的文字內容 $(“p:last").text(“this is the last paragraph");
3.5 attr(name) 獲得第1個匹配元素的屬性值，若該屬性不存在返回undefined。$(“a").attr(“href")
3.6 removeAttr(name) 去掉所有匹配元素的屬性。$(“a").removeAttr(“href");
3.7 attr(key, value) 對所有匹配元素的添加一個屬性。$(“a").attr(“target", “_blank");
3.8 attr(properties) 對所有匹配元素的添加一組屬性。$(“img").attr({ src: “images/Spring.jpg", alt: “spring" });
3.9 attr(key, fn) 對所有匹配元素的key屬性用一個函數取代它的值。
3.10 css(name) 獲得第1個匹配元素的CSS的name屬性值。
3.11 css (key, value) 對所有匹配元素的添加CSS的一個屬性。
3.12 css (properties) 對所有匹配元素的添加CSS的一組屬性。
3.13 addClass(class) 所有匹配元素添加class。
3.14 hasClass(class) 如果所有匹配元素中至少有1個有class，則返回true。
3.15 removeClass(class) 所有匹配元素去掉class。
3.16 toggleClass(class) 所有匹配元素如果存在（不存在）就刪除（添加）class。
3.17 append(content) 對每匹配元素後添加內容。$(“p").append(" with some content appended");
3.18 prepend(content) 對每匹配元素原內容前添加內容。$(“p").prepend(“Hello! “);
3.19 appendTo(selector) 將所有匹配元素移到selector選定元素後。$(“p:last").appendTo(“p:first");
3.20 prependTo(selector) 將所有匹配元素移到selector選定元素前。$(“p:last").prependTo(“p:first");
3.21 after(content) 對每匹配元素後添加content內容元素。$(“p").after(" element appended");
3.22 before(content) 對每匹配元素前添加content內容元素。$(“p").before(“Hello “);
3.23 wrap(html) 使用html包裹每匹配元素。$(“p").wrap(“<div style=’border:3px solid red’/>");
3.24 wrapAll(html) 使用html包裹所有匹配元素。$(“p").wrapAll(“<div style=’border:3px solid red’/>");
3.25 empty() 去掉所有匹配元素的子節點。$(“ul").empty();
3.26 remove() 去掉所有匹配元素。$(“ul"). remove()
4 事件處理（無需在html元素上直接寫事件，而可以直接为通過jquery獲取的對象添加事件）
4.1 事件的绑定$(selector).bind(event,data,handler)、解绑$(selector).unbind(event, handler)。Event可以取的值为：blur, focus, load, resize, scroll, unload, beforeunload, click, dbclick, mousedown, mouseup, mousemove, mouseover, mouseout, mourseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error。$(“#evtTarget").bind(“mouseover mouseleave", highlight); data可以沒有。
4.2 $(selector).click(fn) 定義click事件處理函數。click可以用blur, change, dbclick, error, focus, keydown, keypress, keyup, load, mousedown, mouseup, mousemove, mouseover, mouseout, mourseenter, mouseleave, resize, scroll, unload代替定義其它事件處理函數。$(“div").mousemove(function(evt) { $(this).html(“pageX: " + evt.pageX + “, pageY: " + evt.pageY ); });
4.3 $(selector).toggle(fn1,fn2,fn3…) 當click第1次執行fn1，第2次執行fn2，第3次執行fn3等。$(“#evtTarget").toggle(fnClick1, fnClick2); 第1次執行fnClick1，第2次執行fnClick2，第3次執行fnClick1。
4.4 $(selector).hover(fnOver, fnOut) 當鼠標進入時fnOver處理，當鼠標離開時fnOut處理。$(“#theList tr").hover(function() {$(this).toggleClass(“highlight");}, function() {$(this).toggleClass(“highlight");});
4.5 事件處理函數的参數：type 事件類型、target 發生事件的元素、data 函數绑定的數據、pageX,pageY 發生事件時鼠標坐標位置、result 最後事件處理的返回值、timestamp 事件發生時間。$(“div").click(function(evt) {$(this).html(“pageX: " + evt.pageX + “, pageY: " + evt.pageY + “, type: " + evt.type + “, target: " +evt.target);});
4.6 preventDefault() 防止瀏覽器執行缺省動作
4.7 isDefaultprevented() 返回是否調用preventDefault()
4.8 stopPropagation() 防止事件傳到父元素
4.9 isPropagationStopped()返回是否調用stopPropagation()。
4.10 $(selector).one(type, data, handler) 類似.bind，但只執行一次事件處理
4.11 $(selector).trigger(event, data) 匹配的每個元素定義觸發瀏覽器的相應動作
4.12 $(selector).triggerHandler (event, data) 觸發匹配的第1個元素绑定的所有event處理函數，不觸發瀏覽器的相應動作。
5 視覺效果操作
5.1 hide()、show()、toggle()是隱藏、顯示、轉換顯示函數。hide(speed, callback)、show(speed, callback)、toggle(speed, callback)設定了變化速度和回調函數，回調函數可以不設，$(“#theDiv").toggle(“slow");。toggle(switch)當switch为true時顯示匹配元素，为false時隱藏匹配元素。toggle ()方法包括了hide()和show()方法。
5.2 fadeIn(speed, callback)、fadeOut(speed, callback)、fadeTo(speed, opacity, callback)是變透明度函數。fadeIn變到完全不透明（顯示）、fadeOut fadeIn變到完全透明（隱藏）、fadeTo變到opacity指定的透明度。$(“#theDiv").fadeTo(3000, 0.3);
5.3 slideDown(speed, callback)、slideUp(speed, callback)、slideToggle(speed, callback)是滑動函數。slideUp滑動到隱藏、slideDown滑動到顯示。$(“#theDiv").slideDown(“normal");。slideToggle()方法包括了slideDown()和slideUp()方法。
5.4 animate(params, options)、animate(params, duration, easing, callback) 、stop()是動畫函數。params：動畫屬性参數，options：動畫選項集，duration：動畫毫秒數，easing：動畫類型swing(連續)和linear(線性)。$(“#theDiv").animate({ width: “500px" }, “slow");。$(“#theDiv").animate({ fontSize: “24pt" }, 1000);。$(“#theDiv").animate({ left: “500″ }, 1000, “swing");
5.5 setInterval(fn, duration)按duration(毫秒數)周期調用fn函數。setInterval(“rotateImages()", 2000);
6 用戶界面庫提供一組優化用戶界面的函數（http://jqueryui.com/docs/Getting_Started）有例子有代碼
6.1 互動功能：Draggable、Droppable、Resizable、Selectable、Sortable
6.2 部件功能：Acordion、Datepicker、Progressbar、Dialog、Slider、Tabs
6.3 效果功能：Add Class、Remove Class、Toggle Class、Hide、Show、Toggle、Color Animation
7 函數鏈$(selector).fn1().fn2().fn3(); 可以對一個jquery對象連續調用各種不同的方法。$(‘<p></p>’).html(‘Hey World!’).css(‘background’, ‘yellow’).appendTo(“body");
8 Jquery的擴展函數。$.extend({min: function(a, b){return a < b?a:b; },max: function(a, b){return a > b?a:b; } }); //为jquery擴展了min,max兩個方法。使用擴展的方法（通過“$.方法名”調用）如：$.max(10,20)
9 注意
9.1 調用方法時要注意操作的是dom對象還是jquery對象。普通的dom對象一般可以通過$()轉換成jquery對象。由於jquery對象本身是一個集合，所以如果jquery對象要轉換为dom對象則必須取出其中的某一項，一般可通過索引取出。$(“#theDiv")、$(“#theDiv").eq(0)是jquery對象，而$(“#theDiv")[0]、$(“#theDiv")get(0)是dom對象。dom對象可以使用dom中的方法，但不能再使用Jquery的方法。
9.2 为了避免變量方法定義沖突，使用jquery中的jQuery.noConflict();方法即可把變量$的控制權讓渡给第一個實現它的那個庫或之前自定義的$方法。之後應用Jquery的時候只要將所有的$換成jQuery即可，如原來引用對象方法$(“#msg")改为jQuery(“#msg")。
——— 2014.1.1 補充————————————————————————————————————————————–
jQuery select option 操作
1. $(“#select_id").append(“<option value=’Value’>Text</option>"); //為Select追加一個Option
2. $(“#select_id").prepend(“<option value=’0′>請選擇</option>"); //為Select插入一個Option(第一個位置)
3. $(“#select_id option:last").remove(); //刪除Select中索引值最大Option(最後一個)
4. $(“#select_id option[index=’0′]").remove(); //刪除Select中索引值為0的Option(第一個)
5. $(“#select_id option[value=’3′]").remove(); //刪除Select中Value=’3’的Option
6. $(“#select_id").empty();
Avatar
張偉雄的 Blog....... 