jquery對(duì)元素的基本操作實(shí)例分析
jQuery簡(jiǎn)介
jQuery是JS的一個(gè)類庫(kù),對(duì)JS中的某些功能進(jìn)行封裝,讓DOM操作變得簡(jiǎn)單,使代碼簡(jiǎn)潔,易于使用,且支持鏈?zhǔn)綄懛?,兼容性好?/p>
jQuery的設(shè)計(jì)思想和主要用法即:選擇某個(gè)網(wǎng)頁(yè)元素,然后對(duì)其進(jìn)行一些操作。
jQuery的特別之處在于:用jQuery獲取對(duì)應(yīng)元素后,,它不返回這些對(duì)應(yīng)的元素,返回的都是jQuery對(duì)象(jQuery構(gòu)造出來(lái)的對(duì)象),而此對(duì)象可以操作這些對(duì)應(yīng)的元素。
jQuery能實(shí)現(xiàn)的功能JS一定能實(shí)現(xiàn),反之則不一定。
令window.jQuery = window.$ ,將jQuery簡(jiǎn)寫為$。
jQuery如何獲取元素
將一個(gè)選擇表達(dá)式放進(jìn)構(gòu)造函數(shù)$()里即可,然后得到被選中的元素。選擇表達(dá)式可以是CSS選擇器,也可以是jQuery特有的表達(dá)式。
// CSS選擇器 $(document) // 選擇整個(gè)文檔對(duì)象 $('#xxxID') // 選擇ID為xxx的元素 $('div.xxxClass') // 選擇Class為xxx的元素 $('input[name=first]') // 選擇類名屬性為first的元素
// jQuery特有表達(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)畫狀態(tài)的div元素
jQuery如何創(chuàng)造元素
直接將新元素傳入jQuery構(gòu)造函數(shù)即可。
創(chuàng)建的新元素不會(huì)自動(dòng)插入到頁(yè)面中,我們還需要明確的指定其插入到頁(yè)面中的位置。
舉個(gè)例子:創(chuàng)建一對(duì)
標(biāo)簽
$(function(){ let $h1 = $(' ') // 創(chuàng)建元素h1 $('body').append($h1) // 將元素h1放入到body里(用append表示成為body的最后一個(gè)子元素) }
用div舉個(gè)例子:
$('div').prepend('') // 給div添加一個(gè)大兒子(即添加到最前) $('div').append(選擇器/jQuery對(duì)象) // 給div添加一個(gè)小兒子(即添加到最后) $(' xxx ').appendTo(選擇器/jQuery對(duì)象) // 在選擇器選中的元素的子元素里,將“xxx”添加到最后
jQuery如何移動(dòng)元素
方法一:直接移動(dòng)該元素
$('div').insertAfter($('p')) // 將元素div移動(dòng)到元素p后面
方法二:移動(dòng)其他元素從而使目標(biāo)函數(shù)到達(dá)我們想要的位置
$('p').after($('div')) // 把元素p放到元素div前
這兩種方法的區(qū)別:返回的對(duì)象不同。方法一返回的對(duì)象是div,方法二返回的對(duì)象則是p。
元素不同的移動(dòng)方式:
.insertAfter()和.after() // 在現(xiàn)存元素的外部,從后面插入元素 .insertBefore()和.before() // 在現(xiàn)存元素的外部,從前面插入元素 .appendTo()和.append() // 在現(xiàn)存元素的內(nèi)部,從后面插入元素 .prependTo()和.prepend() // 在現(xiàn)存元素的內(nèi)部,從前面插入元素
jQuery如何修改元素屬性
使用attr()來(lái)修改元素屬性及其內(nèi)容,attr為attribute的縮寫,是JS中setAttribute&getAttribute的簡(jiǎn)寫。attr是取值還是賦值,由函數(shù)的參數(shù)來(lái)決定。
舉個(gè)例子:
$('img').attr('width','100px') // 為屬性'width'賦值'100px'
使用方式:
$(selector).attr(attribute) // 返回被選元素的屬性值 $(selector).attr(attribute.value) // 返回被選元素的屬性&值 $(selector).attr(attribute,function(index,oldvalue)) // 用函數(shù)返回值設(shè)置被選元素的屬性&值 $(selector).attr({attribute1:value,attribute2:value...}) // 為被選一個(gè)及以上的元素設(shè)置屬性&值,可一次修改多個(gè)屬性的屬性值
補(bǔ)充:上述第三種使用方式的意思是:用函數(shù)的返回值給屬性賦屬性值,該函數(shù)可接收并使用選擇器的index值和當(dāng)前屬性值。舉個(gè)例子:
$('button').click(function(){ $('img').attr('width',function(n,v){ return v-50; // 點(diǎn)擊按鈕圖片寬度減少50 }) })
jQuery的鏈?zhǔn)讲僮?/h3>
在選擇網(wǎng)頁(yè)元素后,對(duì)其進(jìn)行一系列操作,并且所有操作都可以連在一起并以鏈條的形式寫出來(lái),這就是jQuery的鏈?zhǔn)讲僮鳌?/p>
舉個(gè)例子:$('div').find('h3').eq(2).html('Hello');此行代碼可以拆分如下
$('div') // 找到div元素 .find('h3') // 選擇其中的h3元素 .eq(2) // 選擇第3個(gè)h3元素 .html('Hello'); // 將它的內(nèi)容改為Hello
jQuery還提供了后退操作.end(),使得操作結(jié)果可以后退一步。
$('div') .find('h3') .eq(2) .html('Hello') .end() // 退回到選中所有的h3元素的那一步 .eq(0) // 選中第一個(gè)h3元素 .html('World') // 將它的內(nèi)容改為World
到此這篇關(guān)于jquery對(duì)元素的基本操作實(shí)例分析的文章就介紹到這了,更多相關(guān)jquery對(duì)元素的基本操作內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JQuery 選擇器、DOM節(jié)點(diǎn)操作練習(xí)實(shí)例
下面小編就為大家?guī)?lái)一篇JQuery 選擇器、DOM節(jié)點(diǎn)操作練習(xí)實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09jQuery實(shí)現(xiàn)表格元素動(dòng)態(tài)創(chuàng)建功能
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)表格元素動(dòng)態(tài)創(chuàng)建功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01基于jquery fly插件實(shí)現(xiàn)加入購(gòu)物車拋物線動(dòng)畫效果
在購(gòu)物網(wǎng)站中,加入購(gòu)物車的功能是必須的功能,有的網(wǎng)站在用戶點(diǎn)擊加入購(gòu)物車按鈕時(shí),就會(huì)出現(xiàn)該商品從點(diǎn)擊出以拋物線的動(dòng)畫相似加入購(gòu)物車,這個(gè)功能看起來(lái)非常炫,對(duì)用戶體驗(yàn)也有一定的提高。下面介紹基于jquery fly插件實(shí)現(xiàn)加入購(gòu)物車拋物線動(dòng)畫效果2016-04-04jQuery實(shí)現(xiàn)下拉框選擇圖片功能實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)下拉框選擇圖片功能,可實(shí)現(xiàn)帶圖片的下拉列表功能,涉及jquery插件imageselect.js的使用,需要的朋友可以參考下2015-08-08bootstrap中日歷范圍選擇插件daterangepicker的使用詳解
daterangepicker是bootstrap的一個(gè)日歷插件 主要用來(lái)選擇時(shí)間段的插件 這個(gè)插件很好用也很容易操作 。這篇文章主要介紹了bootstrap中日歷范圍選擇插件daterangepicker的使用詳解,需要的朋友可以參考下2018-04-04jQuery實(shí)現(xiàn)的感應(yīng)鼠標(biāo)懸停圖片色彩漸顯效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)的感應(yīng)鼠標(biāo)懸停圖片色彩漸顯效果,涉及jQuery中hover、find、css等方法的使用技巧,需要的朋友可以參考下2015-03-03

jQuery實(shí)現(xiàn)懸浮在右上角的網(wǎng)頁(yè)客服效果代碼