jQuery 選擇器LOGIN

jQuery 選擇器

jQuery最核心的組成部分是:選擇器引擎,它繼承了css語法,可以對DOM元素的標籤名,屬性名,狀態等進行快速準確的選擇,並且不用擔心瀏覽器的兼容性,

因此我們下面介紹的jQuery選擇器大多與我們之前學習的CSS選擇器類似

CSS選擇器是用來尋找和定位頁面中的元素,並將樣式設置到元素上

jQuery選擇器也是用來尋找元素,我們找到元素後,可以使用一些給定的方法來修改、刪除、甚至移動元素

在使用jQuery選擇器時,我們必須使用「$()」函數來包裝使用我們的css規則,而css規則作為參數傳遞到jQuery物件內部後,在返回包含頁面中對應元素的jQuery對象,隨後,我們就可以對這個取得到的DOM節點進行行為操作了。


元素選擇器

#jQuery 元素選擇器是基於元素名稱選取元素。

在頁面中選取所有<p> 元素:

$("p")

實例

使用者點選按鈕後,所有<p> 都會改變顏色:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("p").css('color','red');           //添加一个行为
            });
        });
     </script>

</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>

執行程式嘗試


########## #id 選擇器############jQuery #id 選擇器透過HTML 元素的id 屬性選取指定的元素。 ######注意:ID在頁面只允許出現一次,我們一般都是要求開發者蹲守並保持這個規則。但如果你在頁面中出現三次,並且使用css樣式,那麼這三個元素還會執行效果,但如果你在jQuery中這樣做,就會遇到問題,只有一個ID會生效,所以我們一定要養成習慣,在頁面只使用一個ID######透過id 選取元素語法如下:#########$("#test")########### ####實例############當使用者點擊按鈕後,有id="test" 屬性的元素會變成紅色:###
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#test").css('color','red');
            });
        });
    </script>
</head>
<body>
<h2>标题</h2>
<p>段落</p>
<p id="test">我变颜色了</p>
<button>点我</button>
</body>
</html>
###執行程式嘗試## #

.class 選擇器

jQuery 類別選擇器可以透過指定的 class 來尋找元素。

語法如下:

$(".test")

實例

#使用者點擊按鈕後,所有有class="test" 屬性的元素都會改變顏色:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $(".test").css('color','blue');
            });
        });
    </script>
</head>
<body>
<h2 class="test">class选择器</h2>
<p class="test">class选择器</p>
<button>点我</button>
</body>
</html>
執行程式嘗試


更多的選擇器實例#語法##描述 ##$(this)目前HTML 元素$("p")所有<p> 元素




############# #######$("p.intro")######所有class="intro" 的<p> 元素############$(".intro ")######所有class="intro" 的元素############$("#intro")######id="intro" 的元素## ##########$("ul li:first")######每個<ul> 的第一個<li> 元素########### ##$("[href$='.jpg']")######所有以".jpg" 結尾的屬性值的href 屬性############$ ("div#intro .head")######id="intro" 的<div> 元素中的所有class="head" 的元素############## ##########################下一節
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); }); </script> </head> <body> <h2>标题</h2> <p>段落</p> <p id="test">#id选择器,点击我会隐藏</p> <button>点我</button> </body> </html>
章節課件