jQuery基本選擇器選擇元素使用介紹
更新時(shí)間:2013年04月18日 14:50:03 作者:
基本選擇器:是jQuery中使用最頻繁的選擇器,它由元素Id、Class、元素名、多個(gè)選擇符組成,通過基本選擇器可以實(shí)現(xiàn)大多數(shù)頁面元素的查找,感興趣的朋友可以參考下哈
復(fù)制代碼 代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
1.基本選擇器:是jQuery中使用最頻繁的選擇器,它由元素Id、Class、元素名、多個(gè)選擇符組成,通過基本選擇器可以實(shí)現(xiàn)大多數(shù)頁面元素的查找
jQuery選擇器詳解
根據(jù)所獲取頁面中元素的不同,可以將jQuery選擇器分為:基本選擇器、層次選擇器、過濾選擇器、表單選擇器四大類。其中,在過濾選擇器中有可以分為:簡單過濾選擇器、內(nèi)容過濾選擇器、可見性過濾選擇器、屬性過濾選擇器、子元素過濾選擇器、表單對(duì)象屬性過濾選擇器6種
-->
<title></title>
<!--使用jQuery基本選擇器選擇元素:一個(gè)頁面包含兩個(gè)<div>標(biāo)記,其中一個(gè)用于設(shè)置ID屬性,另一個(gè)用于設(shè)置Class屬性;我們?cè)僭黾右粋€(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>
您可能感興趣的文章:
- 使用jquery選擇器如何獲取父級(jí)元素、同級(jí)元素、子元素
- jQuery層次選擇器選擇元素使用介紹
- jQuery學(xué)習(xí)總結(jié)之元素的相對(duì)定位和選擇器(持續(xù)更新)
- jquery基本選擇器匹配多個(gè)元素的實(shí)現(xiàn)方法
- 簡單講解jQuery中的子元素過濾選擇器
- jquery子元素過濾選擇器使用示例
- jquery層級(jí)選擇器(匹配父元素下的子元素實(shí)現(xiàn)代碼)
- jquery層級(jí)選擇器的實(shí)現(xiàn)(匹配后代元素div)
- jQuery+css last-child實(shí)現(xiàn)選擇最后一個(gè)子元素操作示例
- jQuery選擇器之子元素過濾選擇器
- jQuery選擇器之子元素選擇器詳解
- jQuery選擇器選中最后一個(gè)元素,倒數(shù)第二個(gè)元素操作示例
相關(guān)文章
基于MVC5和Bootstrap的jQuery TreeView樹形控件(二)之?dāng)?shù)據(jù)支持json字符串、list集合
這篇文章主要介紹了基于MVC5和Bootstrap的jQuery TreeView樹形控件(二)之?dāng)?shù)據(jù)支持json字符串、list集合的相關(guān)資料,需要的朋友可以參考下2016-08-08jQuery Selectors(選擇器)的使用(二、層次篇)
本系列文章主要講述jQuery框架的選擇器(Selectors)使用方法,我將以實(shí)例方式進(jìn)行講述,以簡單,全面為基礎(chǔ),不會(huì)涉及很深,我的學(xué)習(xí)方法:先入門,后進(jìn)階!2009-12-12jQuery實(shí)現(xiàn)按鈕的點(diǎn)擊 全選/反選 單選框/復(fù)選框 文本框 表單驗(yàn)證
這篇文章主要介紹了jQuery實(shí)現(xiàn)按鈕的點(diǎn)擊 全選/反選 單選框/復(fù)選框 文本框 表單驗(yàn)證的相關(guān)資料,需要的朋友可以參考下2015-06-06jquery過濾特殊字符'',防sql注入的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨query過濾特殊字符',防sql注入的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08jquery easyui滾動(dòng)條部分設(shè)置介紹
dialog并沒有隨著滾動(dòng)條往下滾動(dòng),這時(shí)就需要用戶滑動(dòng)滾動(dòng)條來定位dialog,在說出解決方案前先來普及一下jquery關(guān)于定位的幾個(gè)方法2013-09-09