Jquery學習筆記一

衣舞晨風發表於2016-01-28
jQuery筆記

1、Jquery中$(document).ready()和window.onload的區別

這裡寫圖片描述

2、多個庫之間衝突

這裡寫圖片描述

3、簡單選擇器

在使用 jQuery 選擇器時，我們首先必須使用“$()”函式來包裝我們的 CSS 規則。而CSS 規則作為引數傳遞到 jQuery 物件內部後，再返回包含頁面中對應元素的 jQuery 物件。隨後，我們就可以對這個獲取到的 DOM 節點進行行為操作了。

#box {
//使用 ID 選擇器的 CSS 規則
color:red;
//將 ID 為 box 的元素字型顏色變紅
}

在 jQuery 選擇器裡，我們使用如下的方式獲取同樣的結果：

$('#box').css('color', 'red');
//獲取 DOM 節點物件，並新增行為

除了 ID 選擇器之外，還有兩種基本的選擇器，分別為：元素標籤名和類(class)：
這裡寫圖片描述
CSS 找到元素後新增的是單一的樣式，而 jQuery 則新增的是動作行為。最重要的一點是：CSS 在新增樣式的時候，高階選擇器會對部分瀏覽器不相容，而 jQuery 選擇器在新增 CSS 樣式的時候卻不必為此煩惱。

4、進階選擇器

這裡寫圖片描述

//群組選擇器
span, em, .box {
//多種選擇器新增紅色字型
color:red;
}
//群組選擇器 jQuery 方式
$('span, em, .box').css('color', 'red');

//後代選擇器
ul li a {
//層層追溯到的元素新增紅色字型
color:red;
}
//群組選擇器 jQuery 方式
$('ul li a').css('color', 'red');

//通配選擇器
* {
//頁面所有元素都新增紅色字型
color:red;
}
$('*').css('color', 'red');//通配選擇器

小注：
在實際使用上，通配選擇器一般用的並不多，尤其是在大通配上，比如：$(‘*’)，這種使用方法效率很低，影響效能，建議竟可能少用。

組合了多種選擇器

$('#box p, ul li *').css('color', 'red');
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="../Src/jquery.js"></script>
    <meta charset="utf-8" />
    <script type="text/javascript">
        $(document).ready($(function () {
            $('#box p, ul li *').css('color', 'red');
        }))
    </script>
</head>
<body>
    <div id="box">
        <p>pppp1</p>
        div
        <p>pppp2</p>
    </div>
    <p>
        pppp3
    </p>
    <ul>
        <li> <a>aaaa</a></li>
        <li> 2</li>
        <li> 3</li>
    </ul>
</body>
</html>

效果：
這裡寫圖片描述

相關文章