jQuery基礎使用與樣式篇

2021-10-05 19:37:37 字數 2741 閱讀 4920

一、jquery 如何獲取元素

jquery

的最基本概念是「選擇一些元素並對其進行處理」,可以使用css選擇器

$('#myid'),獲取id「myid」的元素

$('.myclass'),獲取class『myclass』的所有元素

$('input[name=first]'),獲取name屬性等於firstinput元素

也可以使用jquery特有的

$('a:first'),獲取網頁中第乙個a元素

$(':header'),獲取所有標題元素

$('p:contains(hi)'),獲取所有包含文字為hi元素

$('div:visible'),獲取可見的div元素

$('tr:odd'),獲取所有奇數元素

$('tr:even'),獲取所有偶數元素

$(':animated'),獲取所有動畫元素

二、jquery 的鏈式操作

jquery

的核心**就是,接受乙個選擇器,根據選擇器得到一些元素,但卻不返回這些元素,相反,返回乙個物件(稱為jquery構造出來的物件),這個物件可以操作對應的元素,並且所有操作可以連線在一起,以鏈條的形式寫出來,比如:

$('.test').find('child').addclass('red').addclass('blue')

分解意思就是:

$('.test') //獲取test

.find('child') //找到child

.addclass('red') //新增classname,為red

.addclass('blue') //新增classname,為blue

鏈式操作使得**更為簡潔、優雅

三、jquery 如何建立元素

jquery

建立元素的方法非常簡單,只要把新元素直接傳入$()函式中,如:

const $div = $('1

')

建立元素後,需要將其新增到頁面中

四、jquery 如何移動元素

移動元素通常由兩種方法:

假定選中h1元素,需要將它移動到p元素後面

第一種方法是使用.insertafter(),把h1元素移動到p元素後面:

$('h1').insertafter($('p'));

第二種方法是使用.after(),把p元素新增到h1前面:

$('p').after($('h1'));

看起來這兩種方法效果一樣,但實際上他們返回的元素不一樣,第一種方法是返回h1元素,第二種方法是返回p元素。

還有其他方法也遵循這種模式:

.insertbefore().before()

.prependto().prepend()

如果需要儲存對新增到頁面中的元素引用,那麼採用第一種方法,因為會返回要移動的元素。

五、jquery 如何修改元素的內容

jquery

設計思想之一就是使用同乙個函式實現讀與寫,即getter和setter合一。

$div.text()

text()

裡沒有引數,可直接寫,如有引數即可進行修改。

$div.html() //讀寫html內容

$div.attr('tittle', ) //讀寫屬性

$div.css() //讀寫style

jQuery 基礎使用與樣式篇

開發工具與關鍵技術 mvc搭建控制器首先要例項化模型物件 models.fjdpxtentities mymodel new fjdpxtentities 複寫父類的該方法 執行控制器中的方法之前先執行該方法,從而實現過濾的功能 protected override void onresultexe...

jQuery樣式與動畫

css document ready function 這裡需要 px speech.css fontsize num px 廠商在引入 試驗性的樣式屬性 時,會在其達到css規範要求之前加乙個字首。webkit property name value moz property name value...

jQuery基礎 改變CSS樣式

jquery提供css 的方法來實現嵌入式改變元素樣式,css 61dh a css color 123456 這裡選擇器 61dh a 表示id為 61dh 的元素下的所有鏈結。css color 123456 表示把顏色設為 123456 如果我們需要改變多個樣式屬性,我們可以先定義屬性變數,然...