當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

JQuery中的ID选择器

發(fā)布時(shí)間：2023/12/31 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 JQuery中的ID选择器小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

頁(yè)面的任何操作都需要節(jié)點(diǎn)的支撐，開(kāi)發(fā)者如何快速高效的找到指定的節(jié)點(diǎn)也是前端開(kāi)發(fā)中的一個(gè)重點(diǎn)。jQuery提供了一系列的選擇器幫助開(kāi)發(fā)者達(dá)到這一目的，讓開(kāi)發(fā)者可以更少的處理復(fù)雜選擇過(guò)程與性能優(yōu)化，更多專注業(yè)務(wù)邏輯的編寫(xiě)。

jQuery幾乎支持主流的css1~css3選擇器的寫(xiě)法

id選擇器：一個(gè)用來(lái)查找的ID，即元素的id屬性
$( “#id” )

id選擇器也是基本的選擇器，jQuery內(nèi)部使用JavaScript函數(shù)document.getElementById()來(lái)處理ID的獲取。原生語(yǔ)法的支持總是非常高效的，所以在操作DOM的獲取上，如果能采用id的話盡然考慮用這個(gè)選擇器
下面代碼使用兩種方式獲取id 為aaron的div,并對(duì)其css進(jìn)行設(shè)置。

<!DOCTYPE html> <html> <head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title></title><style>div {width: 100px;height: 90px;float: left;padding: 5px;margin: 5px;background-color: #EEEEEE;}</style><script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head><body> <div id="aaron"><p>id="aaron"</p><p>選中</p></div><div id="imooc"><p>id="imooc"</p><p>jQuery選中</p></div><div id="imooc"><p>id="imooc"</p><p>jQuery未選中</p></div><script type="text/javascript">//通過(guò)原生方法處理var div = document.getElementById('aaron');div.style.border = "3px solid blue";</script><script type="text/javascript">//通過(guò)jQuery直接傳入id//id的唯一，只選擇到了第一個(gè)匹配的id為imooc的div節(jié)點(diǎn)$("#aaron").css("border", "3px solid red");</script>

值得注意的是：
id是唯一的，每個(gè)id值在一個(gè)頁(yè)面中只能使用一次。如果多個(gè)元素分配了相同的id，將只匹配該id選擇集合的第一個(gè)DOM元素。但這種行為不應(yīng)該發(fā)生;有超過(guò)一個(gè)元素的頁(yè)面使用相同的id是無(wú)效的。

總結(jié)

以上是生活随笔為你收集整理的JQuery中的ID选择器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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