jquery学习手记（4）元素的选择与操作
一. 選擇元素
id選擇器，示例為：
1 // Selecting elements by ID 2 $("#myId"); // note IDs must be unique per page類名選擇器，示例為：
1 // Selecting elements by class name 2 $(".myClass");屬性選擇器，示例為：
1 // Selecting elements by attribute 2 $("input[name='first_name']"); // beware, this can be very slow in older browsers復雜css選擇器，示例為：
1 // Selecting elements by compound CSS selector 2 $("#contents ul.people li");偽選擇器，示例為：
// Pseudo-selectors $("a.external:first"); $("tr:odd"); // select all input-like elements in a form (more on this below) $("#myForm :input"); $("div:visible"); // all except the first three divs $("div:gt(2)"); // all currently animated divs $("div:animated");注意：
1.偽選擇器使用:visible 和:hidden時，jquery只是測試此元素的真實可見性，而不是css的可見性或者呈現。jquery用來檢測此元素在頁面的物理高度和寬度是否都大于0.
2.這種測試不能和<tr>一起使用。當和<tr>一起使用時，jquery檢查css的呈現屬性，當呈現屬性被設置為none的時候，該元素會被隱藏。
3.元素沒有加入到DOM上的都視為不可見的。即使css設置元素的屬性為可見，也不起作用。
二. 選擇選擇器。
jquery提供了許多基于屬性的選擇器，這些選擇器允許使用簡單的規則表達式（基于任意屬性的內容）來選擇。示例如下：
1 // find all <a>s whose rel attribute 2 // ends with "thinger" 3 $("a[rel$='thinger']");測試元素是否存在：
1 //Testing whether a selection contains elements 2 if ( $("div.foo").length ) { 3 ... 4 }保存元素：
var $divs = $("div");重新定義和過濾元素：
1 // Refining selections 2 $("div.foo").has("p"); // div.foo elements that contain <p> tags 3 $("h1").not(".bar"); // h1 elements that don't have a class of bar 4 $("ul li").filter(".current"); // unordered list items with class of current 5 $("ul li").first(); // just the first unordered list item 6 $("ul li").eq( 5 ); // the sixth選擇表單元素：
注意：為了瀏覽器有更好的性能，使用 [type = "element"] 而不是:element偽選擇器.
:button
1 // :button pseudo-selector 2 // selects <button> elements and elements with type="button" 3 $("form :button");:checkbox
1 // :checkbox pseudo-selector 2 // selects elements with type="checkbox" 3 $("form :checkbox");:checked
1 // :checked pseudo-selector 2 // selects checked checkboxes and radio buttons 3 $("form :checked");:disabled
1 // :disabled pseudo-selector 2 // selects all input elements with the disabled attribute 3 $("form :disabled");:enabled
1 // :enabled pseudo-selector 2 // selects all elements that do not have the disabled attribute 3 $("form :enabled");:file
1 // :file pseudo-selector 2 // selects all inputs with a type = "file" 3 $("form :file");:image
1 // :image pseudo-selector 2 // selects all input elements of type "image" 3 $("form :image");:input
// :input pseudo-selector // selects <input>, <textarea>, <select>, and <button> elements $("form :input");:password
1 // :password pseudo-selector 2 //targets any <input>s with a type of password 3 $("form :password");:radio
// :radio pseudo-selector // selects all <input>s of type "radio" $("form :radio"); 1 // Selection associated radio buttons with :radio 2 // selects all radio buttons with the name attribute of gender 3 $("form input[name="gender"]:radio"):reset
// :reset pseudo-selector // selects all elements of type "reset" $("form :reset");:selected
// :selected pseudo-selector // selects all selected items in <option> elements $("form :selected");:submit
// :submit pseudo-selector // selects all inputs with type = "submit" $("form :submit");:text
// :text pseudo-selector // selects all inputs with type = "text" $("form :text");?使用選擇表達式
? get/set方法
1 //The $.fn.html method used as a setter 2 $("h1").html("hello world"); 3 4 // The html method used as a getter 5 $("h1").html();Set方法返回一個jquery對象，允許你在選擇表達式中繼續調用jquery方法。
Get方法根據你要求返回的結果，因此就不能在get方法的返回值中繼續調用jquery方法。
例如：
// Attempting to call a jQuery method after calling a getter // This will NOT work $("h1").html().addClass("test")鏈式結構
如果你使用的選擇表達式返回的是jquery對象，那么你就可以繼續調用jquery對象的方法而不用使用分號作為中止符號，這種形式就像一個鏈條一樣：
// Chaining $("#content").find("h3").eq( 2 ).html("new text for the third h3!");但通常為了可讀性而把上述選擇表達式拆分成如下形式：
1 // Formatting chained code 2 $("#content") 3 .find("h3") 4 .eq( 2 ) 5 .html("new text for the third h3!");同樣jquery也提供了一個方法在鏈式表達式中間返回對象：$.fn.end。例如：
1 // Restoring your original selection using $.fn.end 2 $("#content") 3 .find("h3") 4 .eq( 2 ) 5 .html("new text for the third h3!") 6 .end() // restores the selection to all h3s in #content 7 .eq( 0 ) 8 .html("new text for the first h3!");操作元素
操作元素的get/set屬性方法
- $.fn.html – 獲取或者設置html內容.
- $.fn.text -獲取或者設置text內容; HTML will be stripped.
- $.fn.attr -獲取或者設置屬性值.
- $.fn.width – 獲取或者設置寬度.
- $.fn.height -獲取或者設置高度
- $.fn.position – 獲取位置，僅有一個get方法。
- $.fn.val – 獲取或者設置表單元素的值.
注意：選擇表達式可能會影響所有的元素，如果僅要修改一個元素，請注意使用正確的表達式。例如：
// Changing the HTML of an element $("#myDiv p:first").html("New <strong>first</strong> paragraph!");?
移動/復制/移除元素
移動元素
在DOM中移動元素的方法很多，通常使用的方法有兩種：
放置一個選定的元素以另一個元素為坐標。
放置一個元素以選定元素為坐標。
例如：jquery提供的$.fn.insertAfter 和$.fn.after方法。
$.fn.insertAfter方法放置選定元素在參數中提供的元素位置之后。
$.fn.after方法放置元素位于參數中提供的選定元素之后。
其他別的方法還有：
$.fn.insertBefore / $.fn.before, $.fn.appendTo / $.fn.append, and $.fn.prependTo / $.fn.prepend.
實例如下：
1 // Moving elements using different approaches 2 3 4 5 // make the first list item the last list item 6 7 var $li = $("#myList li:first").appendTo("#myList"); 8 9 10 11 // another approach to the same problem 12 13 $("#myList").append( $("#myList li:first") ); 14 15 16 17 // note that there's no way to access the 18 19 // list item that we moved, as this returns 20 21 // the list itself?
復制元素
// Making a copy of an element// copy the first list item to the end of the list $("#myList li:first").clone().appendTo("#myList");?
?
注意：如果你需要復制相關的數據及事件，請給$.fn.clone傳遞true參數。
?
移除元素
從頁面移除元素的方法有兩種：$.fn.remove 和$.fn.detach。
$.fn.remove一次性永久移除元素所有的數據和事件。
$.fn.detach保留元素的數據和事件，可以恢復。
?
如果你僅向移除一個元素的內容而在此頁面上保留這個元素，請使用$.fn.empty來舍棄元素的內部html。
?
創建新元素
Jquery使用$()來創建一個新的元素。示例如下：
?
// Creating new elements from an HTML string $("<p>This is a new paragraph</p>");$("<li class=\"new\">new list item</li>");// Creating a new element with an attribute object $( "<a/>", {html : "This is a <strong>new</strong> link","class" : "new",href : "foo.html"});?
當新建一個元素時，通常不能離開就增加到頁面上。如果想立即把一個元素加入到頁面，可以使用如下的方法：
?
// Getting a new element on to the pagevar $myNewElement = $("<p>New element</p>");$myNewElement.appendTo("#content");$myNewElement.insertAfter("ul:last"); // this will remove the p from #content! $("ul").last().after( $myNewElement.clone() ); // clone the p so now we have 2?
?
或者不使用引用來保存元素：
// Creating and adding an element to the page at the same time $("ul").append("<li>list item</li>");批量添加元素的方法，為了性能的考慮，請使用array來收集所有的元素，然后把它們一起加入到頁面，例如：
?
var myItems = [];var $myList = $("#myList");for ( var i = 0; i < 100; i++ ) {myItems.push( "<li>item " + i + "</li>" );}$myList.append( myItems.join("") );?
操作屬性
操作屬性的示例如下：
// Manipulating a single attribute $("#myDiv a:first").attr( "href", "newDestination.html" );// Manipulating multiple attributes $("#myDiv a:first").attr({href: "newDestination.html",rel: "super-special"});// Using a function to determine an attribute's new value $("#myDiv a:first").attr({rel: "super-special",href: function( idx, href ) {return "/new/" + href;}});$("#myDiv a:first").attr( "href", function( idx, href ) {return "/new/" + href;});?
?
?
?
?
?
?
轉載于:https://www.cnblogs.com/davidwang456/archive/2013/04/14/3019954.html
總結
以上是生活随笔為你收集整理的jquery学习手记（4）元素的选择与操作的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jquery学习手记（3）属性
- 下一篇： jquery学习手记（5）对象