快捷導(dǎo)航

jQuery基本選擇器選擇元素使用介紹

更新時(shí)間：2013年04月18日 14:50:03 作者：

基本選擇器：是jQuery中使用最頻繁的選擇器，它由元素Id、Class、元素名、多個(gè)選擇符組成，通過基本選擇器可以實(shí)現(xiàn)大多數(shù)頁面元素的查找，感興趣的朋友可以參考下哈

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<!-- 
1.基本選擇器：是jQuery中使用最頻繁的選擇器，它由元素Id、Class、元素名、多個(gè)選擇符組成，通過基本選擇器可以實(shí)現(xiàn)大多數(shù)頁面元素的查找 
jQuery選擇器詳解 
根據(jù)所獲取頁面中元素的不同，可以將jQuery選擇器分為：基本選擇器、層次選擇器、過濾選擇器、表單選擇器四大類。其中，在過濾選擇器中有可以分為：簡單過濾選擇器、內(nèi)容過濾選擇器、可見性過濾選擇器、屬性過濾選擇器、子元素過濾選擇器、表單對象屬性過濾選擇器6種 
--> 
<title></title> 
<!--使用jQuery基本選擇器選擇元素：一個(gè)頁面包含兩個(gè)<div>標(biāo)記，其中一個(gè)用于設(shè)置ID屬性，另一個(gè)用于設(shè)置Class屬性；我們再增加一個(gè)<span>標(biāo)記，全部元素初始值均為隱藏，然后通過jQuery基本選擇器顯示相應(yīng)的頁面標(biāo)記。--> 
<script src="jquery-1.9.1.js" type="text/javascript"></script> 
<style type="text/css"> 
body{font-size:12px;text-align:center;} 
.clsFrame{width:300px;height:100px} 
.clsFrame div,span{display:none;float:left;width:65px;height:65px;border:solid 1px #ccc;margin:8px} 
.clsOne{background-color:#eee} 
</style> 
<script type="text/javascript"> 
$(function () { //ID匹配元素 
$('#divOne').css('display', 'block'); 
}) 
$(function () { //元素名匹配元素 
$('div span').css('display', 'block'); 
}) 
$(function () { //類匹配元素 
$('.clsFrame .clsOne').css('display', 'block'); 
}) 
$(function () { //匹配所有元素 
$('*').css('display', 'block'); 
}) 
$(function () { //合并匹配元素 
$('#divOne,span').css('display', 'block'); 
}) 
</script> 
</head> 
<body> 
<div class="clsFrame"> 
<div id="divOne"> 
ID</div> 
<div class="clsOne"> 
CLASS</div> 
<span>SPAN</span> 
</div> 
</body> 
</html> 

您可能感興趣的文章:

相關(guān)文章

jquery dataTable 獲取某行數(shù)據(jù)
本篇文章主要介紹了jquery dataTable 獲取某行數(shù)據(jù)的相關(guān)知識，具有很好的參考價(jià)值。下面跟著小編一起來看下吧
2017-05-05
jquery實(shí)現(xiàn)彈出層登錄和全屏層注冊特效
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)彈出層登錄和全屏層注冊特效，推薦給大家，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2015-08-08
Easyui筆記2：實(shí)現(xiàn)datagrid多行刪除的示例代碼
本篇文章主要介紹了Easyui筆記2：實(shí)現(xiàn)datagrid多行刪除，詳細(xì)介紹了完成一個(gè)多行勾選并刪除的功能。有興趣的可以了解一下。
2017-01-01
jquery遍歷標(biāo)簽中自定義的屬性方法
下面小編就為大家?guī)硪黄猨query遍歷標(biāo)簽中自定義的屬性方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-09-09
jQuery實(shí)現(xiàn)上下滾動公告欄詳細(xì)代碼
之前做項(xiàng)目的時(shí)候，一直都想著做一個(gè)上下滾動的公告欄，作為展示網(wǎng)站的最新公告信息，給用戶帶來極好的用戶體驗(yàn)，下面小編通過實(shí)例代碼給大家分享基于jQuery實(shí)現(xiàn)上下滾動公告欄，感興趣的朋友一起看看吧
2018-11-11
jquery實(shí)現(xiàn)鼠標(biāo)滑過顯示二級下拉菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)鼠標(biāo)滑過顯示二級下拉菜單效果,通過jquery操作鼠標(biāo)事件及頁面樣式動態(tài)變換實(shí)現(xiàn)該功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-08-08
jQuery實(shí)現(xiàn)的仿百度,仿谷歌搜索下拉框效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的仿百度,仿谷歌搜索下拉框效果,結(jié)合實(shí)例形式分析了基于jQuery的鼠標(biāo)事件響應(yīng)與頁面元素動態(tài)操作相關(guān)技巧,需要的朋友可以參考下
2016-12-12
jQuery實(shí)現(xiàn)列表的全選功能
本文給大家分享的是使用jquery實(shí)現(xiàn)的全選刪除插件的代碼，非常的實(shí)用，本文示例是結(jié)合的ThinkPHP,小伙伴們可以自由擴(kuò)展。
2015-03-03
jquery實(shí)現(xiàn)圖片水平滾動效果代碼分享
這篇文章主要介紹了jquery實(shí)現(xiàn)圖片水平滾動效果，很實(shí)用的代碼，推薦給大家，有需要的小伙伴可以參考下。
2015-08-08
jQuery TextBox自動完成條
剛開始學(xué)jQuery，于是想試試學(xué)習(xí)效果，所以就做了個(gè)這個(gè)TextBox自動完成條，練習(xí)練習(xí)。請牛人們別笑話。
2009-07-07