jQuery學習筆記(二)

2022-02-23 06:31:50 字數 3385 閱讀 8513

l         jquery選擇器

jquery選擇器用於查詢滿足條件的元素,比如可以用$(「#控制項id」)來根據控制項id獲得控制項的jquery物件,相當於getelementbyid;

如: $(「#div1」).html(「abcd」);

l         $(「tagname」)來獲取所有指定標籤名的jquery物件。相當於getelementbytagname;

$(function())})

l         css選擇器,同時選擇擁有樣式的多個元素

簡介請帶上你的身份證

l         jquery隱式迭代

問題:jquery使用id選擇器時即使id寫錯了也不會報錯這給開發人員帶來了很大的麻煩。所以需要判斷物件是否存在。

原因:jquery選擇器返回的是乙個物件陣列,呼叫text()、html()、click()之類的方法時候其實是對陣列中每個元素迭代呼叫每個方法,因此即使通過id選擇的元素不存在也不會報錯。所以如果需要判斷指定的id是否存在,應該如下寫:

if($(「#btn1」).length<=0));//自動隱式迭代

siblings()方法用於獲取所有同輩元素,

$(「.menuitem」).siblings(「li」)

$("div").click(function () ); //給點選的設定為紅色,沒有點選的設定為白色

l         基本過濾選擇器

l         :first 選取第乙個元素。$(「div:first」)選取第乙個

l         :last 選取最後乙個元素,$(「div:last」)選取最後乙個

l         :not(選擇器) 選取不滿足「選擇器」條件的元素 $(「input:not(.myclass)」)選採樣式名不是myclass的

l         :even、:odd 選取索引是奇數、偶數的元素; $(「input:even」)選取索引為偶數的

l         :eq(索引序號)、:gt(索引序號)、:lt(索引序號) 選取索引等於、索引大於、索引小於序號的元素,比如: $(「input:lt(2)」) 選取索引值小於2的

l         $(「:header」) 選取所有的h1…….h6元素

l         $(「div:animated」) 選取正在執行動畫的元素

案例:$(function () );

l         相對定位:只要在$()指定第二個引數,第二個引數為相對的元素。$(「ul」,$(this)).css(「background」,」red」)

l         屬性過濾器:

$(「div[id]」)選取有id屬性的

$(「div[title=test]」)選取 title屬性值為」test」的因為jquery沒有getelementbyname的方法封裝。只能使用上述方法選取.如:$(「div[name=abcd]」) 表示選取name屬性值為abcd的

$(「div[title!=title]」)選取title屬性值不為」title」的

l         表單物件選擇器 注意#form1與:enabled之間沒有空格

$(「#form1:enabled」)選取id為form1的表單內所有啟動的元素

$(「#form1:disabled」)選取id為form1的表單內所有禁止的元素

$(「input:checked」)選取所有選中的元素(radio,checkbox)

$(「select:selected」)選取所有選中的選項元素(下拉列表)

$(function () );

});l         元素的each jquery元素也可以呼叫each方法,只是對$.each的簡化呼叫。

案例:顯示選中的核取方塊資訊

小羅小周¨

小王l         表單選擇器

$(「:input」) 選取所有、、、元素,和$(「input」)區別,$(「input」)只能獲得

$(「:text」)選取所有單行文字框,等價於$(「input[type=text]」)

$(「:password」)選取所有的密碼框,同理的還有::radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden

l         jquery的dom操作

使用html()可以讀取或設定元素的innerhtml 如 alert($(「a:first」).html()); $(「a:first」).html(「hello」);

使用text()可以讀取或設定元素的innertext 如alert($(「a:first」).text());  $(「a:first」).text(「hello」);

使用 attr()方法讀取或設定元素的屬性,對於jquery沒有封裝的屬性用attr進行操作

如: $(「a:first」).attr(「href」)  $(「a:first」).attr(「href」,「

使用remove刪除屬性。刪除屬性和清空屬性的區別:刪除屬性在源**是沒有看不到的,而清空屬性在源**中屬性是存在的只是值為空

l         動態建立dom節點

prepend 在元素開始新增元素 (新增兒子是在元素裡面新增元素)

after 在元素之後新增元素 (新增兄弟)

before 在元素之前新增元素 (新增兄弟)

l         jquery的dom操作

使用html()方法讀取或者設定元素的innerhtml  alert($(「a:first」).html()) //讀取元素的innrthtml $(「a:first」).html(「hello」) //設定元素的html

使用text()方法讀取或者設定元素的innertext  alert($(「a:first」).text()) //讀取元素的innertext  $(「a:first」).text(「hello」); //設定元素的innertext

使用attr()方法讀取或者設定元素的屬性。對於jquery物件沒有封裝的屬性可以使用attr()方法進行操作。

如:alert($(「a:first」).attr(「href」))   //新增了a的href屬性

$(「a:first」).attr(「href」,」  //設定了a的href屬性為

使用remove方法刪除屬性,刪除的屬性在源**中看不到,而清空屬性的值在**中是存在的只是值為空。這是刪除與清空的區別。

$(function () );

});remove方法的返回值是被刪除的節點物件,還可以繼續使用被刪除的節點。比如重新新增到其他節點下:

北à¡à京?

天¬¨¬津¨°

長¡è沙¦3

上¦?海¡ê

" style="float:left;width:100%"/ id="btnright">

案例加法計算器  需求解釋:輸入加數和被加數等到結果++

jQuery學習筆記二

再了解取值付值的方法,更改屬性的方法 實驗的結果是 note不可寫 重新整理時,只彈出了 我是乙個大好人 的提示框,原先頁面上的ddddd沒有載入進來 還有script如果放在前面的話,也是上頁面最上面的地方,提示框也不會彈出。並且note框也是可寫的 為啥會這樣,我只能暫時理解為,它是從上到下執行...

jQuery 學習筆記(二 )

1.控制項的顯示與隱藏 a2.jquery 滑動 1.根據元件id滑動選擇a 2.根據class 滑動 2.1 新增css樣式屬性 2.2 引用樣式選擇a 2.3function fun1 2.4 停止動畫 stop bottom stop 3.jquery 動畫 tip 要實現動畫首先把元素的 c...

JQuery學習筆記(二)

一 滑動 selector slidedown speed,callback 下滑 selector slideup speed,callback 上滑 selector slidetoggle speed,callback 用於上滑,下滑 二 animate 動畫 selector animate...