jquery 根據class名 賦值_《jQuery初識》
技術標籤：jquery 根據class名 賦值
jQuery的核心思想
window提供一個全域性函式jQuery
jQuery函式接受一個選擇器
選擇器會獲取這些元素，但不會返回這些元素
會返回一個物件，稱為jQuery構造出來的物件
物件裡有一些函式（方法），這些函式會操作這些元素 //閉包
同時返回this //鏈式操作
jQuery 是建構函式嗎？
- 是：因為jQuery函式確實構造出了一個物件
- 不是：因為不需要寫 new jQuery()就能構造出一個函式
- 結論：jQuery 是一個不用加 new 的建構函式 、jQuery 不是常規意義上的建構函式。
jQuery物件代指 jQuery函式構造出來的物件
jQuery物件不是說「jQuery這個物件」
舉例：
- Object 是個函式
- Object物件表示 object 構造出來的物件
- Array物件/陣列物件表示 Array 構造出來的物件
- Function 是個物件
- Function物件/函式物件表示 Function 構造出來的物件
一、選擇網頁元素
jQuery的基本設計思想和主要用法，就是"選擇某個網頁元素，然後對其進行某種操作"。這是它區別於其他Javascript庫的根本特點。
使用jQuery的第一步，往往就是將一個選擇表示式，放進建構函式jQuery()（簡寫為$），然後得到被選中的元素。
選擇表示式可以是CSS選擇器
$(document) //選擇整個文件物件
$('#myId') //選擇ID為myId的網頁元素
$('div.myClass') // 選擇class為myClass的div元素
$('input[name=first]') // 選擇name屬性等於first的input元素
也可以是jQuery特有的表示式：
$('a:first') //選擇網頁中第一個a元素 $('tr:odd') //選擇表格的奇數行 $('#myForm :input') // 選擇表單中的input元素 $('div:visible') //選擇可見的div元素 $('div:gt(2)') // 選擇所有的div元素，除了前三個 $('div:animated') // 選擇當前處於動畫狀態的div元素
二、改變結果集
jQuery設計思想之二，就是提供各種強大的過濾器，對結果集進行篩選，縮小選擇結果。
$('div').has('p'); //選擇包含p元素的div元素
$('div').not('.myClass'); //選擇class不等於myClass的div元素
$('div').filter('.myClass'); //選擇class等於myClass的div元素
$('div').first(); //選擇第1個div
$('div').eq(5); //選擇第6個div元素
有時候，我們需要從結果集出發，移動到附近的相關元素，jQuery也提供了在DOM樹上的移動方法：
$('div').next('p'); //選擇div元素後面的第一個p元素
$('div').parent(); //選擇div元素的父元素
$('div').closest('form'); //選擇離div最近的那個form父元素
$('div').children(); //選擇div的所有子元素
$('div').siblings(); //選擇div的同級元素
三、鏈式操作
jQuery設計思想之三，就是最終選中網頁元素以後，可以對它進行一系列操作，並且所有操作可以連線在一起，以鏈條的形式寫出來，比如：
$('div').find('h3').eq(2).html('Hello');
分解開來，就是下面這樣：
$('div') //找到div元素
.find('h3') //選擇其中的h3元素
.eq(2) //選擇第3個h3元素
.html('Hello'); //將它的內容改為Hello
這是jQuery最令人稱道、最方便的特點。它的原理在於每一步的jQuery操作，返回的都是一個jQuery物件，所以不同操作可以連在一起。
jQuery還提供了.end()方法，使得結果集可以後退一步：
$('div')
.find('h3')
.eq(2)
.html('Hello')
.end() //退回到選中所有的h3元素的那一步
.eq(0) //選中第一個h3元素
.html('World'); //將它的內容改為World
四、元素的操作：取值和賦值
操作網頁元素，最常見的需求是取得它們的值，或者對它們進行賦值。
jQuery設計思想之四，就是使用同一個函式，來完成取值（getter）和賦值（setter），即"取值器"與"賦值器"合一。到底是取值還是賦值，由函式的引數決定。
$('h1').html(); //html()沒有引數，表示取出h1的值
$('h1').html('Hello'); //html()有引數Hello，表示對h1進行賦值
常見的取值和賦值函式如下：
.html() 取出或設定html內容
.text() 取出或設定text內容
.attr() 取出或設定某個屬性的值
.width() 取出或設定某個元素的寬度
.height() 取出或設定某個元素的高度
.val() 取出某個表單元素的值
選擇網頁中的元素需要注意的是，如果結果集包含多個元素，那麼賦值的時候，將對其中所有的元素賦值；取值的時候，則是隻取出第一個元素的值（.text()例外，它取出所有元素的text內容）。
五、元素的操作：移動
jQuery設計思想之五，就是提供兩組方法，來操作元素在網頁中的位置移動。一組方法是直接移動該元素，另一組方法是移動其他元素，使得目標元素達到我們想要的位置。
假定我們選中了一個div元素，需要把它移動到p元素後面。
第一種方法是使用.insertAfter()，把div元素移動p元素後面：
$('div').insertAfter($('p'));
第二種方法是使用.after()，把p元素加到div元素前面：
$('p').after($('div'));
表面上看，這兩種方法的效果是一樣的，唯一的不同似乎只是操作視角的不同。但是實際上，它們有一個重大差別，那就是返回的元素不一樣。第一種方法返回div元素，第二種方法返回p元素。你可以根據需要，選擇到底使用哪一種方法。
使用這種模式的操作方法，一共有四對：
.insertAfter()和.after()： 在現存元素的外部，從後面插入元素
.insertBefore()和.before()： 在現存元素的外部，從前面插入元素
.appendTo()和.append()： 在現存元素的內部，從後面插入元素
.prependTo()和.prepend()： 在現存元素的內部，從前面插入元素
六、元素的操作：複製、刪除和建立
除了元素的位置移動之外，jQuery還提供其他幾種操作元素的重要方法。
複製元素使用.clone()。
刪除元素使用.remove()和.detach()。兩者的區別在於，前者不保留被刪除元素的事件，後者保留，有利於重新插入文件時使用。
清空元素內容（但是不刪除該元素）使用.empty()。
建立新元素的方法非常簡單，只要把新元素直接傳入jQuery的建構函式就行了：
$('<p>Hello</p>');
$('<li class="new">new list item</li>');
$('ul').append('<li>list item</li>');
參考值阮一峰部落格：
jQuery設計思想 - 阮一峰的網路日誌www.ruanyifeng.com