一、如何在代碼中使用Jquery

進(jìn)入Jquery官網(wǎng)，點(diǎn)擊Download Jquery

方法一、

直接在要使用jquery的網(wǎng)頁的head標(biāo)簽內(nèi)加入這以下代碼

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

然后就可以開心的使用Jquery了。

方法二、

在標(biāo)記的鏈接上郵件下載該文件，放入項(xiàng)目目錄中，然后在要使用Jquery的網(wǎng)頁中外部引入該文件下圖所示

二、DOM對(duì)象和Jquery對(duì)象

DOM對(duì)象（Document Object Model），每個(gè)DOM對(duì)象都可以將他的元素節(jié)點(diǎn)表示成一個(gè)樹狀的結(jié)構(gòu)，dom可以用document.getElementByTagName或者getElemrntById或者querryselect()方法來獲取dom中的節(jié)點(diǎn)。像這樣得到的對(duì)象就是DOM對(duì)象

Jquery對(duì)象，一句話概括。Jquery包裝之后的DOM對(duì)象。

Jquery對(duì)象轉(zhuǎn)換DOM對(duì)象

$('#cr')[0]

Jquery對(duì)象是一個(gè)類數(shù)組對(duì)象

可以用下標(biāo)來獲得DOM對(duì)象

DOM對(duì)象轉(zhuǎn)Jquery對(duì)象

div = document.querySelector('div')var $div = $(div)

?

二、Jquery強(qiáng)大的選擇器

2.1、基本選擇器

$('div') \\所有div元素節(jié)點(diǎn) $('#id') \\id值為id的所有元素節(jié)點(diǎn) $('.class') \\class值為class的所有元素節(jié)點(diǎn) $('div,ul') \\所有div和ul的元素節(jié)點(diǎn) $('*') \\全部元素節(jié)點(diǎn)

2.2、層級(jí)選擇器

$('div ul') \\所有作為div后代的ul元素節(jié)點(diǎn) $('div>ul') \\所有div的直系后代ul元素節(jié)點(diǎn) $('div+ul') \\緊跟在div元素節(jié)點(diǎn)之后的一個(gè)ul節(jié)點(diǎn) $('div~ul') \\所有緊跟在div元素節(jié)點(diǎn)之后的ul節(jié)點(diǎn)

2.3、基本過濾選擇器

$(':first') \\選擇第一個(gè) $(':last') \\選擇最后一個(gè) $(':not()') \\選擇不被選擇的元素 $(':even') \\選擇偶數(shù)個(gè) $(':odd') \\選擇奇數(shù)個(gè) $(':eq(index)') \\選擇等于索引值的元素 $(':gt(index)') \\選擇大于索引值的元素 $(':lt(index)') \\選擇小于索引值的元素 $(':header') \\選擇所有的標(biāo)題元素（h1，h2，h3等） $(':animated') \\選擇所有正在執(zhí)行的動(dòng)畫元素 $(':focus') \\選擇獲得焦點(diǎn)的元素

2.4、內(nèi)容過濾選擇器

$('div:contains(text)') \\選擇含有text文本的div元素 $('div:empty') \\選擇不含子節(jié)點(diǎn)的div元素 $('div:has(p)') \\選擇含有p標(biāo)簽的div標(biāo)簽 $('div:parent') \\選擇非空節(jié)點(diǎn)的div元素

2.5、可見性過濾器

$(':hidden') \\選擇隱藏的不可見元素 $(':visible') \\選擇可見元素

2.6、子元素過濾器

$(':nth-child') \\ 選擇第n個(gè)子節(jié)點(diǎn) $(':first-child') \\選擇第一個(gè)子節(jié)點(diǎn) $(':last-child') \\ 選擇最后一個(gè)子節(jié)點(diǎn) $(':only-child') \\ 只有一個(gè)子節(jié)點(diǎn)的元素

2.7、表單屬性過濾器

$(':enable') \\ 選擇可用節(jié)點(diǎn) $(':disabled') \\ 選擇不可用節(jié)點(diǎn) $(':checked') \\ 選擇被選中的節(jié)點(diǎn)（單選框，復(fù)選框） $(':selected') \\ 只有被選中的節(jié)點(diǎn)（下拉選擇框）

2.8、表單選擇器

$(':input') \\ 輸入框 $(':text') \\ 單行文本框 $(':password') \\ 密碼框 $(':radio') \\ 單選框 $(':checkbox') \\ 復(fù)選框 $(':submit') \\ 提交按鈕 $(':image') \\ 圖片提交按鈕 $(':reset') \\ 重置按鈕 $(':button') \\ 按鈕 $(':file') \\ 上傳域 $(':hidden') \\ 不可見元素

二、Jquery中的DOM操作

待更新。。。

總結(jié)

以上是生活随笔為你收集整理的锋利的Jquery的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。