jQuery是一個JavaScript腳本庫,不需要特別的安裝,只需要我們在頁面 <head> 標籤內中,通過 script 標籤引入 jQuery 庫即可。
二:JQuery的各個樣式
1. helloword初體驗
<html>
<head>
<title>第一個簡單的jQuery程序</title>
<style type="text/css">
div {
padding: 8px 0px;
font-size: 12px;
text-align: center;
border: solid 1px #888;
}
</style><!-- 你下載的JQuery地址-->
<script src="E:\SC_informaion\Jquery\jquery-3.4.1\jquery-3.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div").html("你好,歡迎第一次使用JQuery!!");
});
</script></head>
<body>
<div>123421</div>
</body>
</html>
其中 $(document).ready 的作用是等頁面的文檔(document)中的節點都加載完畢後,再執行後續的代碼,因爲我們在執行代碼的時候,可能會依賴頁面的某一個元素,我們要確保這個元素真正的的被加載完畢後才能正確的使用。
2.JQuery和DOM對象的區別
普通處理,通過標準JavaScript處理,通過document.getElementById("")方法獲取的dom元素就是一個DOM對象,在通過innerHTML與style屬性處理文本與顏色。
JQuery處理(var $p=$('')),通過$('')的方法獲取一個$p的對象,然後$p是一個類數組對象,這個方法與上面的處理結果是一模一樣的。
3.JQuery對象轉化成DOM對象
利用數組下標的方式
var $div=$('div') //JQuery對象
var div=$div[0]//轉化爲JSON對象
div.style.color="red"; //操作dom對象的屬性
通過JQuery自帶的get()方法
var $div=$('div')
var div=$div.get(0)
div.style.color='red';
<body>
<div id="doc1">qwq</div>
<div id="doc2">ewrw</div>
<div id="doc3">wew</div>
<script type="text/javascript">
var $div = $('div'); //jQuery對象
var div = $div.get(2);
div.style.color = 'red'; //操作dom對象的屬性
</script>
</body>
DOM對象轉化爲JQuery對象
var div=document.getElementsByTagName('div');
var $div=$(div);
var $first=$div.first(); //找到第一個div元素
$first.css('color','red'); //給第一個元素設置顏色
三:JQuery選擇器
1. id選擇器-- $( "#id" )
注:id是唯一的,每個id值在一個頁面中只能使用一次。如果多個元素分配了相同的id,將只匹配該id選擇集合的第一個DOM元素。但這種行爲不應該發生;有超過一個元素的頁面使用相同的id是無效的
2. 類選擇器-- $(".class")
注: 獲取所有class名的dom
3. 元素選擇器-- $("element")
注://通過jQuery直接傳入標籤名p
//標籤是可以多個的,所以得到的同樣也是一個合集
$("div").css("border", "3px solid red");
4. 全選擇器-- $("*")
5. 層級選擇器
$("parent>child") 子選擇器,選擇parent下的直接child子元素
$("ancestor descendant") 後代選擇器,選擇ancestor裏面的所有後代
$("prev +next") 相鄰兄弟選擇器,選擇緊跟在prev後面的元素
$("prev ~sibling") 一般兄弟選擇器,匹配prev之後的所有sibling元素並且屬於同一個父親
6. 基本篩選選擇器
$(':first') -- 匹配第一個元素
$(':last') -- 匹配最後一個元素
$(':not(selector)') -- 一個 用來過濾的選擇器,選擇所有元素取出不匹配給定的選擇器元素
$(':eq(index)') -- 在匹配集中選擇索引值爲index的元素
7.內容文本選擇器
8. 可見性選擇篩選器