jquery基本操作

2021-08-27 12:39:43 字數 3632 閱讀 6732

終於像擠牙膏一樣開始了在的第一篇隨記,一直想寫博,又都沒時間(其實都是忽悠自已)。經歷了乙個電商平台的開發,真心很疲憊,想休息下,但我不敢。今天若休息,明天呢,最終會發現一直是在自已忽悠自己。以前經常看別人的部落格,某些寫的真的很好,是書本上根本看不到的,現在我也要用部落格來記錄下我的所學所悟。以下是使用jquery的乙個小總結,為一些常用選擇器和方法。

1.id選擇器:$("#elementid"),選擇id為elementid的元素集,注意當使用服務.net的伺服器控制項時,由於使用母板或元素巢狀等因素解析到客戶端的元素id可能會有變化

2.class選擇器:$(".elementclass"),選擇class含elementclass的元素集,元素是可以指定多個樣式的,如class="btn001 width100"

3.子選擇器:$("pselector>cselector"),選擇pselector的cselector子元素

4.後代選擇器:$("aselector dselector"),選擇aselector的dselector後代元素集,注意子選擇器與後代選擇器的區別

5.基本過濾選擇器:$("selector:first")、$("selector:last"),選擇selector中的第乙個/最後乙個元素,如$("ul li:first")選擇ul下的第乙個li元素

6.  $("selector:eq(index)"),選擇selector中的第index+1個元素,如$("ul li:eq(1)")選擇ul下的第二個li元素

7.  $("selector:not(selector2)"),選擇selector中不符合selector2的元素集,如$("ul li:not(.highlight)")選擇ul下的不含樣式highlight的li元素集

8.      $("selector:even")、$("selector:odd"),選擇selector中index為偶/奇的元素集,如$("ul li:even")選擇ul下的偶index的li元素集,即從第一條,then隔條取

9.屬性過濾選擇器:$("selector[typename=typevalue]"),選擇selector中typename屬性的值為typevalue的元素集,如選擇單選按鈕$("input[type=radio]")

10.   :$("selector[typename]"),選擇selector中含typename屬性的元素集,如選擇選中的單選按鈕$("input[type=radio][checked]")

11.表單物件屬性過濾選擇器:$("input:checked"),獲取選中的元素,相當於$("input[checked]")

12    $("select :selected"),獲取下拉框下的選中項,如$("select :selected").length獲取下拉框選項的個數,相當於$("select input[selected]")

13.表單選擇器:$("selector :elementtype"),提取selector下elementtype型別的元素,如$("#form1 :checkbox")選取form表單中的核取方塊,相當於$("#form1 input[type=checkbox")

說明:1.以上均為個人開發中一些實際常用到的選擇器

2.選擇的結果均為集合,表現為有length屬性

3.屬性過濾與表單物件屬性過濾:從字面就可以理解後者只是前者的乙個子功能,即前者可以實現後者

4.表單物件屬性過濾與表單選擇器的區別:前者是對元素的attr的過濾,後者是對元素的type的過濾

1.事件方法:click()、focus()、hover()、ready(),為元素繫結事件處理器

2.unbind():為元素移除事件處理器,如在為文字框賦值並觸發焦點時,焦點會文字的前面,解決辦法:繫結元素focus事件的內容為為文字框賦值,觸發focus事件,unbind focus事件

3.toggle():指定兩個或多個處理器,click時輪流執行

4.trigger():觸發事件,$ele.trigger("click")與$ele.click()的確沒區別,但如果要給事件傳參呢,答案是只能用trigger。如$ele.click(function(event,arg1,arg2){}),可以這樣觸發$.ele.trigger("click",["zhagnsan","male"])

5.sildedown()、slideup()、slidetoggle():展開、收起、切換

6.children()與find():前者為其子元素,而後者為其所有後代元素

7.parent()與parents():前者為其父,後者為其祖先

8.prev()、prevall()、next()、nextall()與siblings():前一,前所有、後

一、後所有與兄弟元素。均位於同層

9.hasclass()、addclass()、removeclass():對元素的樣式進行判斷、新增、移除

10.val()、text()、html()、width()、height()、css()、attr():根據傳參的個數取或賦

11.show()、hide():顯示或隱藏元素

12.has()、is():前者篩選出含有匹配該選擇器的後代元素的元素,後者篩選出匹配該選擇器的元素。如$("div").has(":hidden")篩選出含有不可見div元素的元素,而$("div").is(":hidden")篩選出不可見的div元素

14.$element.offset().top、$element.offset().left:元素左上腳相對於document的top、left

15.e.pagex、e.pagey:事件觸發時滑鼠指標的座標

16.animate():動畫,如$(".div1").animate(,2000),在2秒內使.div的width、height同時完成漸變為100px

17.js中的一些字串操作:str.substring(num1,num2),選取索引為小num到序號為大num的子串;$.trim(),$.trim()相當於c#的trim(),注意沒有str.trim()這種用法;str.match(reg),使用正規表示式模式對字串執行查詢,並將包含查詢的結果作為陣列返回;str.split(sep),返回str用sep分隔後的陣列;$.inarray(str,strarray),返回str在strarray中的索引

18.each():遍歷,兩種用法:array.each(function(index,element){}),或$.each(array,function(index,element){}),return false可跳出each

jquery 基本操作

id id選擇器 div 元素選擇器 classname 類選擇器 classname,classname1,id1 組合選擇器 id classname 子元素選擇器 id classname 後代元素選擇器 id classname 緊鄰下乙個元素選擇器 id classname 兄弟元素選擇器...

jQuery基本操作

jquery新增標籤屬性 div attr class 返回文件中所有div元素的class屬性值 div attr class box 設定所有div的class屬性值為box div removeattr class 刪除文件中所有div的class屬性 不建議使用 img removeprop...

jquery基本操作

終於開始了在的第一篇隨筆,一直想寫,又都沒時間 其實都是忽悠自已 經歷了乙個電商平台的開發,真心很疲憊,想休息下,但我不敢。今天若休息,明天呢,最終會發現一直是在自已忽悠自己。以前經常看別人的部落格,某些寫的真的很好,是書本上根本看不到的,現在我也要以此來記錄下我的所學所悟。以下是使用jquery的...