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...