jQuery設(shè)計(jì)思想
前面的話
在深入了解jQuery的各個(gè)細(xì)節(jié)之前，需要對(duì)jQuery的設(shè)計(jì)思想有一個(gè)大致的了解。在遇到問(wèn)題時(shí)， 知道應(yīng)該使用jQuery的哪一個(gè)功能，然后迅速?gòu)氖謨?cè)中找到具體的用法。本文將詳細(xì)介紹jQuery的設(shè)計(jì)思想
選擇元素
jQuery的基本設(shè)計(jì)思想和主要用法，就是"選擇某個(gè)網(wǎng)頁(yè)元素，然后對(duì)其進(jìn)行某種操作"。這是它區(qū)別于其他javascript庫(kù)的根本特點(diǎn)
使用jQuery的第一步，往往就是將一個(gè)選擇表達(dá)式，放進(jìn)構(gòu)造函數(shù)jQuery()(簡(jiǎn)寫(xiě)為$)，然后得到被選中的元素
【模擬CSS選擇元素】
$(document) //選擇整個(gè)文檔對(duì)象
$('#myId') //選擇ID為myId的網(wǎng)頁(yè)元素
$('div.myClass') // 選擇class為myClass的div元素
$('input[name=first]') // 選擇name屬性等于first的input元素
【特有表達(dá)式選擇】
$('a:first') //選擇網(wǎng)頁(yè)中第一個(gè)a元素
$('tr:odd') //選擇表格的奇數(shù)行
$('#myForm :input') // 選擇表單中的input元素
$('div:visible') //選擇可見(jiàn)的div元素
$('div:gt(2)') // 選擇所有的div元素，除了前三個(gè)
$('div:animated') // 選擇當(dāng)前處于動(dòng)畫(huà)狀態(tài)的div元素
【多種篩選方法】
$('div').has('p'); // 選擇包含p元素的div元素
$('div').not('.myClass'); //選擇class不等于myClass的div元素
$('div').filter('.myClass'); //選擇class等于myClass的div元素
$('div').first(); //選擇第1個(gè)div元素
$('div').eq(5); //選擇第6個(gè)div元素
寫(xiě)法
【方法函數(shù)化】
在原生javascript中，賦值操作符用的比較多。而在jQuery中，多使用函數(shù)傳參的方式，也就是方法函數(shù)化
//原生
window.onload = function(){};
//jQuery
$(function(){});
//原生
div.onclick = function(){};
//jQuery
div.click(function(){});
//原生
div.innerHTML = '123';
//jQuery
div.html('123');
【鏈?zhǔn)讲僮鳌?/strong>
選中網(wǎng)頁(yè)元素以后，可以對(duì)它進(jìn)行一系列操作，并且所有操作可以連接在一起，以鏈條的形式寫(xiě)出來(lái)
$('div').find('h3').eq(2).html('Hello');
分解開(kāi)來(lái)，就是下面這樣：
$('div') //找到div元素
.find('h3') //選擇其中的h3元素
.eq(2) //選擇第3個(gè)h3元素
.html('Hello'); //將它的內(nèi)容改為Hello
這是jQuery最令人稱道、最方便的特點(diǎn)。它的原理在于每一步的jQuery操作，返回的都是一個(gè)jQuery對(duì)象，所以不同操作可以連在一起
jQuery還提供了.end()方法，使得結(jié)果集可以后退一步
$('div')
.find('h3')
.eq(2)
.html('Hello')
.end() //退回到選中所有的h3元素的那一步
.eq(0) //選中第一個(gè)h3元素
.html('World'); //將它的內(nèi)容改為World
【取賦值合體】
操作網(wǎng)頁(yè)元素，最常見(jiàn)的需求是取得它們的值，或者對(duì)它們進(jìn)行賦值。jQuery使用同一個(gè)函數(shù)來(lái)完成取值(getter)和賦值(setter)，即"取值器"與"賦值器"合一。到底是取值還是賦值，由函數(shù)的參數(shù)決定
$('h1').html(); //html()沒(méi)有參數(shù)，表示取出h1的值
$('h1').html('Hello'); //html()有參數(shù)Hello，表示對(duì)h1進(jìn)行賦值
常見(jiàn)的取值和賦值函數(shù)如下
.html() 取出或設(shè)置html內(nèi)容 .text() 取出或設(shè)置text內(nèi)容 .attr() 取出或設(shè)置某個(gè)屬性的值 .width() 取出或設(shè)置某個(gè)元素的寬度 .height() 取出或設(shè)置某個(gè)元素的高度 .val() 取出某個(gè)表單元素的值
需要注意的是，如果結(jié)果集包含多個(gè)元素，那么賦值的時(shí)候，將對(duì)其中所有的元素賦值；取值的時(shí)候，則是只取出第一個(gè)元素的值
[注意].text()例外，它取出所有元素的text內(nèi)容
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
jquery遍歷checkbox的注意事項(xiàng)說(shuō)明
本篇文章主要是對(duì)jquery遍歷checkbox的注意事項(xiàng)進(jìn)行了說(shuō)明介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02
jQuery移動(dòng)頁(yè)面開(kāi)發(fā)中的觸摸事件與虛擬鼠標(biāo)事件簡(jiǎn)介
這篇文章主要介紹了jQuery移動(dòng)頁(yè)面開(kāi)發(fā)中的觸摸事件與虛擬鼠標(biāo)事件的簡(jiǎn)單編寫(xiě)方法,jQuery是當(dāng)今人氣最高的Javascript庫(kù)并被廣泛應(yīng)用于移動(dòng)web的開(kāi)發(fā),需要的朋友可以參考下2015-12-12
這篇文章主要介紹了jQuery中size()方法用法,實(shí)例分析了size()方法返回對(duì)象集合中元素?cái)?shù)目的使用技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
jQuery 使用手冊(cè)，大家可以耐心的看完，就基本上入門(mén)了。2009-09-09
jQuery 獲取除某指定對(duì)象外的其他對(duì)象 ( :not() 與.not())
這篇文章主要介紹了JQuery 獲取除某指定對(duì)象外的其他對(duì)象 （ :not() 與.not()）,需要的朋友可以參考下2018-10-10
jQuery實(shí)現(xiàn)仿百度帖吧頭部固定導(dǎo)航效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿百度帖吧頭部固定導(dǎo)航效果,涉及jquery針對(duì)頁(yè)面高度計(jì)算與樣式的動(dòng)態(tài)添加及刪除技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-08-08
jQuery提供了強(qiáng)大的選擇器讓我們獲取對(duì)象。在這邊，我人為地將jQuery選擇器分為兩大部分：選擇對(duì)象和篩選條件。選擇對(duì)象表示要獲取什么對(duì)象，篩選條件是對(duì)獲取的對(duì)象進(jìn)行篩選，最終留下符合某些特征的對(duì)象2013-08-08
jQuery利用DOM遍歷實(shí)現(xiàn)商城結(jié)算系統(tǒng)實(shí)戰(zhàn)
這篇文章主要介紹了jQuery利用DOM遍歷實(shí)現(xiàn)商城結(jié)算系統(tǒng)實(shí)戰(zhàn)，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具一定的參考價(jià)值，感興趣的小伙伴可以參考一下2022-06-06
這篇文章主要介紹了jquery事件冒泡，以及如何阻止jQuery事件冒泡現(xiàn)象，感興趣的朋友可以參考一下2016-01-01
jQuery UI Dialog 創(chuàng)建友好的彈出對(duì)話框?qū)崿F(xiàn)代碼
jQuery UI Dialog是jQuery UI的彈出對(duì)話框組件，使用它可以創(chuàng)建各種美觀的彈出對(duì)話框；它可以設(shè)置對(duì)話框的標(biāo)題、內(nèi)容，并且使對(duì)話框可以拖動(dòng)、調(diào)整大小、及關(guān)閉；平常主要用來(lái)替代瀏覽囂自帶的alert、confirm、open等方法2012-04-04