Jquery中基本選擇器用法實例詳解
更新時間：2015年05月18日 15:36:30 作者：永遠(yuǎn)愛好寫程序
這篇文章主要介紹了Jquery中基本選擇器用法,以實例形式較為詳細(xì)的分析了jQuery中常見選擇器的使用方法,并備有較為詳細(xì)的備注說明,需要的朋友可以參考下
本文實例講述了Jquery中基本選擇器用法。分享給大家供大家參考。具體如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery 基本選擇器</title>
<style type="text/css">
.myDiv{width:100px;background-color:Blue;}
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
//JQuery選擇器用于查找滿足條件的元素。
//基本選擇器是JQuery中最常用的選擇器,也是最簡單的選擇器,
//它通過元素id,class和tagName來查找dom元素
//1.$("#id") : id選擇器,document.getElementById("id");
//2.$("div") :元素選擇器 document.getElementByTagName("div");
//3.$(".myClass") : 類選擇器,返回所有class="myClass"的元素
//4.$("*") : 返回所有元素,多用于結(jié)合上下文搜索
//5.$("div,span,p.myClass") : 多條件選擇器,返回所有查到的元素
$(function () {
//-----1.id選擇器
//var $divMain = $("#main");
//alert($divMain.get(0));
//-----2.元素選擇器
//var $divs = $("div");
//for (var i = 0; i < $divs.length; i++) {
// alert($divs.get(i).innerHTML);
//}
//-----3.類選擇器
//var $divs = $(".myDiv");
//for (var i = 0; i < $divs.length; i++) {
// alert($divs.get(i).innerHTML);
//}
//-----4.返回所有元素
//var $Elements = $("*");
//for (var i = 0; i < $Elements.length; i++) {
// alert($Elements.get(i).innerHTML);
//}
//-----5.多條件選擇器
var $MyObjs = $("div,input,span");
for (var i = 0; i < $MyObjs.length; i++) {
alert($MyObjs.get(i).id);
}
});
</script>
</head>
<body>
<input id="button1" type="button" value="我是button1" />
<div id="main">
<div id="div1" class="myDiv">我是div1
<span id="span1">我是span1</span>
</div>
<div id="div2" class="myDiv">我是div2
<span id="span2">我是span2</span>
</div>
</div>
<input id="button2" type="button" value="我是button2" />
</body>
</html>
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
相關(guān)文章
詳細(xì)解讀Jquery各Ajax函數(shù)($.get(),$.post(),$.ajax(),$.getJSON())
這篇文章主要介紹了詳細(xì)解讀Jquery各Ajax函數(shù)($.get(),$.post(),$.ajax(),$.getJSON())的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
本篇文章只要是對jquery ajax跨域解決方法(json方式)進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
web的各種前端打印方法之jquery打印插件jqprint實現(xiàn)網(wǎng)頁打印
本文介紹JQuery插件Jqprint實現(xiàn)網(wǎng)頁打印，不懂的同學(xué)正可借此機會學(xué)習(xí)下，以備不時之需，話不多說，切入主題2013-01-01
這篇文章主要為大家詳細(xì)介紹了基于jquery實現(xiàn)簡單的分頁控件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03
下面介紹自己寫的一個jQuery圓角的插件，功能非常簡單。目前只能實現(xiàn)1px的固定弧度的圓角矩形邊框。2010-10-10
jQuery設(shè)置單選按鈕radio選中/不可用的實例代碼
這篇文章主要介紹了jQuery設(shè)置單選按鈕radio選中/不可用的實例代碼的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06
jQuery實現(xiàn)級聯(lián)下拉框?qū)崙?zhàn)（5）
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)級聯(lián)下拉框的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
select標(biāo)簽?zāi)M/美化方法采用JS插件
select標(biāo)簽的外觀問題很惱人，各個瀏覽器都不一致，單單就IE，一個版本就一個長相，還不能用CSS修飾，接下來將本人對select的美化方法共享出來，感興趣的朋友可以參考下2013-04-04
基于JQUERY的兩個ListBox子項互相調(diào)整的實現(xiàn)代碼
基于JQUERY的兩個ListBox子項互相調(diào)整的實現(xiàn)代碼，需要的朋友可以參考下。2011-05-05
基于JQuery的拖動插件有幾個都相當(dāng)好用，效果也很好，但再好，還是自己琢磨一個最好。所以，我的理念就是即使實際項目中使用別人的程序，自己也得根據(jù)自己的理解和想法寫一個出來。那么今天，就來看看我的思路是不是可以實現(xiàn)拖動排序的功能2013-10-10