Jquery學習筆記一
阿新 • • 發佈:2018-12-25
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>
效果: