站長資訊網
        最全最豐富的資訊網站

        十分鐘搞懂jquery對元素的基本操作

        本篇文章給大家?guī)砹薺query常用功能總結,其中包括怎樣獲取、移動、創(chuàng)造和修改元素,希望對大家有幫助。

        十分鐘搞懂jquery對元素的基本操作

        jQuery簡介

        jQuery是JS的一個類庫,對JS中的某些功能進行封裝,讓DOM操作變得簡單,使代碼簡潔,易于使用,且支持鏈式寫法,兼容性好。

        jQuery的設計思想和主要用法即:選擇某個網頁元素,然后對其進行一些操作。

        jQuery的特別之處在于:用jQuery獲取對應元素后,,它不返回這些對應的元素,返回的都是jQuery對象(jQuery構造出來的對象),而此對象可以操作這些對應的元素。

        jQuery能實現(xiàn)的功能JS一定能實現(xiàn),反之則不一定。

        令window.jQuery = window.$ ,將jQuery簡寫為$。

        jQuery如何獲取元素

        將一個選擇表達式放進構造函數(shù)$()里即可,然后得到被選中的元素。選擇表達式可以是CSS選擇器,也可以是jQuery特有的表達式。

        // CSS選擇器 $(document) // 選擇整個文檔對象 $('#xxxID') // 選擇ID為xxx的元素 $('div.xxxClass') // 選擇Class為xxx的元素 $('input[name=first]') // 選擇類名屬性為first的元素
        // jQuery特有表達式 $('a:first') // 選擇網頁中第一個a元素 $('tr:odd') // 選擇表格的奇數(shù)行 $('#myForm:input') // 選擇表單中的input元素 $('div:visible') // 選擇可見的div元素 $('div:gt(2)') // 選擇所有的div元素,除了前三個 $('div:animated') // 選擇當前處于動畫狀態(tài)的div元素

        jQuery如何創(chuàng)造元素

        直接將新元素傳入jQuery構造函數(shù)即可。

        創(chuàng)建的新元素不會自動插入到頁面中,我們還需要明確的指定其插入到頁面中的位置。

        舉個例子:創(chuàng)建一對<h1></h1>標簽

        $(function(){ let $h1 = $('<h1></h1>') // 創(chuàng)建元素h1 $('body').append($h1) // 將元素h1放入到body里(用append表示成為body的最后一個子元素) }

        用div舉個例子:

        $('div').prepend('') // 給div添加一個大兒子(即添加到最前) $('div').append(選擇器/jQuery對象) // 給div添加一個小兒子(即添加到最后) $('<h2>xxx</h2>').appendTo(選擇器/jQuery對象) // 在選擇器選中的元素的子元素里,將“xxx”添加到最后

        jQuery如何移動元素

        方法一:直接移動該元素

        $('div').insertAfter($('p')) // 將元素div移動到元素p后面

        方法二:移動其他元素從而使目標函數(shù)到達我們想要的位置

        $('p').after($('div')) // 把元素p放到元素div前

        這兩種方法的區(qū)別:返回的對象不同。方法一返回的對象是div,方法二返回的對象則是p。

        元素不同的移動方式:

        .insertAfter()和.after() // 在現(xiàn)存元素的外部,從后面插入元素 .insertBefore()和.before() // 在現(xiàn)存元素的外部,從前面插入元素 .appendTo()和.append() // 在現(xiàn)存元素的內部,從后面插入元素 .prependTo()和.prepend() // 在現(xiàn)存元素的內部,從前面插入元素

        jQuery如何修改元素屬性

        使用attr()來修改元素屬性及其內容,attr為attribute的縮寫,是JS中setAttribute&getAttribute的簡寫。attr是取值還是賦值,由函數(shù)的參數(shù)來決定。

        舉個例子:

        $('img').attr('width','100px') // 為屬性'width'賦值'100px'

        使用方式:

        $(selector).attr(attribute) // 返回被選元素的屬性值 $(selector).attr(attribute.value) // 返回被選元素的屬性&值 $(selector).attr(attribute,function(index,oldvalue)) // 用函數(shù)返回值設置被選元素的屬性&值 $(selector).attr({attribute1:value,attribute2:value...}) // 為被選一個及以上的元素設置屬性&值,可一次修改多個屬性的屬性值

        補充:上述第三種使用方式的意思是:用函數(shù)的返回值給屬性賦屬性值,該函數(shù)可接收并使用選擇器的index值和當前屬性值。舉個例子:

        $('button').click(function(){     $('img').attr('width',function(n,v){      return v-50;  // 點擊按鈕圖片寬度減少50     }) })

        jQuery的鏈式操作

        在選擇網頁元素后,對其進行一系列操作,并且所有操作都可以連在一起并以鏈條的形式寫出來,這就是jQuery的鏈式操作。

        舉個例子:$('div').find('h3').eq(2).html('Hello');此行代碼可以拆分如下

        $('div') // 找到div元素   .find('h3') // 選擇其中的h3元素   .eq(2) // 選擇第3個h3元素   .html('Hello'); // 將它的內容改為Hello

        jQuery還提供了后退操作.end(),使得操作結果可以后退一步。

        $('div')  .find('h3')  .eq(2)  .html('Hello')  .end() // 退回到選中所有的h3元素的那一步  .eq(0) // 選中第一個h3元素  .html('World') // 將它的內容改為World

        相關視頻教程推薦:jQuery視頻教程

        贊(0)
        分享到: 更多 (0)
        網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
        主站蜘蛛池模板: 国产亚洲一区二区精品| 欧美精品免费观看二区| 国产精品亚韩精品无码a在线| 国产精品成人99久久久久91gav| 无码精品黑人一区二区三区| 国产福利精品在线观看| 精品欧洲av无码一区二区| 无码乱码观看精品久久| 国产精品色视频ⅹxxx | 精品伦精品一区二区三区视频 | 久久噜噜久久久精品66| 青青青青久久精品国产h| 精品人妻中文av一区二区三区| 香蕉99久久国产综合精品宅男自 | 日韩精品人妻系列无码专区免费| 国产精品亚洲高清一区二区| 日韩精品一区二区三区影院| 国产成人精品免费视频网页大全| 亚洲AV永久无码精品一百度影院| 欧美国产精品久久高清| 国产精品热久久无码av| 97精品在线播放| 国产精品亚洲午夜一区二区三区| 国产亚洲精品无码成人| 无码精品国产VA在线观看DVD| 日韩精品人成在线播放| 久久噜噜久久久精品66| 久久99精品久久久久久不卡| 国产精品亚洲欧美大片在线观看| 久久91精品国产91久久麻豆| 国产a视频精品免费观看| 国产精品美女久久久久久2018| 久久精品亚洲精品国产色婷| 无码精品A∨在线观看中文| 中文字幕精品亚洲无线码二区| 一本大道无码日韩精品影视| 一区二区国产精品| 亚洲国产第一站精品蜜芽| 亚洲国产成人精品无码区在线观看| 亚洲综合精品网站| 色一乱一伦一图一区二区精品|