Jquery基礎知識點梳理

2022-04-07 02:37:38 字數 3008 閱讀 9301

1、第乙個jq程式

a、jq物件和dom物件的方法不能混用

b、dom物件轉換成jq物件$(dom),jq物件轉換成dom物件jq[0],轉換之後方法就可以使用了

2、jq選擇器

基本選擇器

$('body') //

標籤選擇器

$('#btn') //

id選擇器

$('.class') //

類選擇器

$('p:odd') //

奇偶行選擇器

$('p:even')

$('p:first') //

頁面中的第乙個p

$('p:last')

$('p:first-child') //

p的父元素的第乙個子元素p

$('p:first-last')

$('p:nth-child(1)') //

p的父元素的第乙個子元素p

$('p:nth-of-type(2)') //

p元素是其父元素的第2個p元素

$('p:nth-last-of-type(2)') //

倒序

額外選擇器

$('div:has(a)') //

裡面包含a標籤的div

$('a[title]') //

屬性選擇器有title屬性的a

$('a[href^=www]') //

以www開頭的href值的a

$('a[href$=pdf]') //

以pdf結束的href值的a

$('a[href="www.jfidg"]') //

href值為www.jfidg的a

$('a[href*=www]') //

href屬性值裡包含www的a

$('input[type=button]')

$(':button') //

獲取所有的按鈕

$(':disabled') //

所有被禁用的元素

3、jq基本方法

$('div').eq(2) //

第二個div

$('div:eq(2)') //

eq也可以寫在裡面

$('div:gt(2)') //

第二個div後面的乙個div(此方法只能寫在裡面)

$('div').eq(2).siblings() //

獲取第二個div的兄弟元素

$('span').not(':eq(2)') //

不包括第二個的span

$('input').not(':button')

$('span').filter(':eq(2)') //

刷選出第二個

$(".d1").parent() //

找到類為d1的一級父元素

$(".d1").parents() //

找到類為d1的所有的祖先父元素

$(".d1").children() //

找到子元素

$(".d1").prev() //

同一級的上乙個

$(".d1").prevall() //

同一級的所有的

$(".d1").next() //

下乙個 $(".d1").nextall()

4、jq鏈

$("div").find("p").addclass("c2").addclass("c1")

$("div").find("p").addclass("c2").end().addclass("c1") //

end是當前結果級的上乙個結果,此處是div

$("div").find("p").addclass("c2").endself().addclass("c1") //

endself表示給當前結果和當前結果的上級都加

5、jq額外方法

$("div").attr("title") //

獲取屬性值

$("div").attr("title","aaaa") //

設定屬性值

$("div").attr() //

設定多個屬性值

$("#d4").html() //

獲取所有,加上引數也可以設定內容

$("#d4").text() //

獲取文字

$("#d2").hasclass("c1") //

判斷是否含有c1類

$("#d1").is("p") //

判斷是否是p元素

$("div").addclass("d1").filter(function

(index) ).addclass("c2");

追加內容

加到某個元素中

$("你好

").insertbefore('#d1') //

插入到d1前面

$("你好

").insertafter('#d1') //

插入到d1後面

$("div").mousemove(function

() )

$("div").mousedown(function

() )

$("div").hover(function

() ,function

() )

$('div').size() //

獲取div的數量

$('div').css('color','red') //

新增樣式,設定的是行內樣式,權重比較高

$('div').css()

$('div').addclass('classname') //

新增類名,一般用於樣式修改

$('div').removeclass('classname') //

一次類名

$('div').find('p') //

查詢元素

JS基礎知識點梳理

1.資料型別 ecmascript有五種簡單 基本 資料型別,分別是undefined,null,boolean,number,string,還有一種複雜資料型別object。物件可以理解成一組資料和功能的集合。可以通過new object 方法來建立。js不支援自己建立資料型別。鑑於資料型別是鬆散...

Jquery知識點梳理

jquery 代表選擇器 js選取元素 操作內容 操作屬性 操作樣式 1122 33 頁面載入完成 document ready function e 頁面載入完成之後執行 js 找元素,dom物件 var a document.getelementbyid aa alert a var a doc...

jQuery基礎知識梳理

語法 jquery語法是為html元素的選取編制的,可以對元素執行某些操作。基礎語法 selector action 美元符號定義jquery 選擇符 selector 查詢 和 查詢 html元素 jquery的action 執行對元素的操作 文件就緒函式 為防止文件在完全載入之前裕興jquery...