Jquery學習筆記一

Jquery學習筆記一
1、Jquery中$(document).ready()和window.onload的區別

2、多個庫之間衝突

3、簡單選取器

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

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

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

$('#box').css('color', 'red');//擷取 DOM 節點對象，並添加行為

除了 識別碼選取器之外，還有兩種基本的選取器，分別為：元素標籤名和類(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');

<script src="../Src/jquery.js"></script><script type="text/javascript"> $(document).ready($(function () { $('#box p, ul li *').css('color', 'red'); })) </script>

pppp1

div

pppp2

pppp3

• aaaa
• 2
• 3

效果：