jQuery中的頂級對象（$） jQuery 中最常用的對象即 $ 對象，要想使用 jQuery 的方法必須通過 $ 對象。只有將普通的 Dom 對象封裝成 jQuery 對象，然後才能調用 jQuery 中的各種方法。 $ 是 jQuery 簡寫，在代碼中可以使用 jQuery 代替$ $ ，但一 ...
jQuery中的頂級對象（$）
jQuery 中最常用的對象即 $ 對象，要想使用 jQuery 的方法必須通過 $ 對象。只有將普通的 Dom 對象封裝成 jQuery 對象，然後才能調用 jQuery 中的各種方法。 $ 是 jQuery 簡寫，在代碼中可以使用 jQuery 代替$ $ ，但一般為了方便大家都直接使用 $。
例如;
通過和JavaScript對比
//Window.onload=function(){} 頁面中只能存在一個 window.onload=function () { console.log(" 頁面完全載入後才觸發該事件"); }; //$(document).ready(function(){}); 可以存在多個 $(docElem).ready(function () { console.log("1"); }); //$(document).ready(function(){}); 只要 DOM 元素載入完就觸發 $(docElem).ready(function () { console.log("2"); });
// 想在 jquery 中實現 window.onload $(window).load(function () { alert(" 哈哈1"); }); $(window).load(function () { alert(" 哈哈2"); }); // 速度明顯比 window.onload 快 $(document).ready(function () { alert(" 嘎嘎"); });
Window.onload只能寫一次,重覆會被後面的幹掉頁面所有的標簽,圖片,外部引入載入後才觸發$(document).ready()DOM基本標簽載入後就觸發可以寫多個$(document).ready()和$(function)一樣
Jquery對象和DOM對象互轉
DOM對象轉Jquery對象操作方便,畢竟Jquery中方法都是封裝好了的,而且相容問題解決的很好,代碼少,方便.Jquery對象轉DOM對象,因為Jquery中文件一直在更新，很多東西都是隨著使用而進行封裝和升級,不太可能把所有dom中用到的進行封裝,還有很多未知的相容問題沒有封裝進去,所以,有的時候jquery中不能解決的問題,還需要原生的js代碼來解決,所以,jquery對象有的時候需要轉成dom對象來進行操作。
1.dom對象轉成jquery對象,加$就可以了
例如：
/*取得<input>標簽中的value屬性的內容[dom對象->jquery對象] var inputElement = document.getElementById("inputID");//DOM對象 var $input = $(inputElement);//jQuery對象 var value = $input.val(); alert(value); */
2.jquery對象轉dom對象
例如：
/*取得<div>標簽中的文本內容[jquery對象->dom對象，方法一] var $div = $("#divID");//jQuery對象 var divElement = $div[0];//DOM對象 var html = divElement.innerHTML; alert(html); */ //取得<div>標簽中的文本內容[jquery對象->dom對象，方法二] var $div = $("#divID");//jQuery對象 var divElement = $div.get(0);//DOM對象 var html = divElement.html(); alert(html);
註意:jquery 對象不能直接調用 dom 中對象的屬性或者是方法,反之一樣
例如：
$(function () { var dv1 = $("#dv");// 由 jquery 對象轉成了 dom 對象 var dv2 = document.getElementById("dv");// 對象 // 必然報錯 , 為什麼 ? 因為 jquery 對象不能直接調用 dom 中對象的屬性或者是方法 dv1.innerHTML = "<p> 哈哈</p>"; // 同理 , 下麵這行代碼必然報錯 , 為什麼呢 ? 因為 dom 對象是不能直接調用 jquery 對象的方法的 dv2.html("<p> 哈哈</p>"); });
jQuery案例
網頁開關燈，點擊按鈕實現網頁開關燈效果（通過和JavaScript對比）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../jquery-1.12.2.js"></script>
</head>
<body>
<input type="button" value="關燈" id="btn">
<script>
//JavaScript
/*window.onload = function(){
document.getElementById('btn').onclick = function(){
if(this.value == '關燈'){
document.body.style.backgroundColor = 'black';
this.value = '開燈';
}else{
document.body.style.backgroundColor = 'white';
this.value = '關燈';
}
};
};*/
//jQuery
$(function(){
$('#btn').click(function(){
if($(this).val()=='關燈'){
$('body').css('background-color','black');
$(this).val('開燈');
}else{
$('body').css('background-color','white');
$(this).val('關燈');
}
});
})
</script>
</body>
</html>
JQuery選擇器
1.jQuery 選擇器 實現了從CSS1 到CSS3 的所有選擇器
2.jQuery和JS設置css屬性的不同：
jquery: $(#id").css('background',"red")
JS: dom.style.backgroundColor="red'
3.$(“#demo”): 選擇 id為demo的第一個元素 （id選擇器）
$("#demo").css('background','black") //有多個只選擇第一個
4.$(“.item”) : 選擇所有class為item的元素 （類選擇器）
$(".item").css('background','black")
5.$(‘div’) : 選擇所有標簽為div的元素 （標簽選擇器）
$('div') .css('background','black")
6.$(“*”) : 選擇所有的元素，配合其他選擇器來使用
$("*").css('background','black")
7.$(‘.item,div’) : 選擇多個指定的選擇器，這裡是指item和div元素
$('.item,div') .css('background','black")
8.層級選擇器
（1）後代選擇器
$(“#dv li”)或者$(“ul li”)或者$(“.cls li”)
（2）子代選擇器(直接的所有子元素,兒子)
$(“#ul>li”)或者$(“div >span”)或者$(“.cls >li”)
（3）獲取當前元素的相鄰元素:
$(“div + span”)
（4）獲取當前元素後面所有元素
$(“div ~ span”)
9.索引選擇器
eq(3) 獲取索引的元素
gt(3) 索引大於3 的所有元素
lt(3) 索引小於3 的所有的元素
$("#u1 li:eq(7)").css("backgroundColor","red");
$("#u1 li:gt(7)").css("backgroundColor","green");
$("#u1 li:lt(5)").css("backgroundColor","black");
規律：jQuery完全是結合了css獲取class的模式來操作dom
$(selector).css('background','black")
jQuery幾個常見的方法（更多方法參考離線手冊，地址：鏈接：https://pan.baidu.com/s/1IhRT7L68F_CGcqMdhm-Nmw 提取碼：0ue5 ）
1. .html() 方法,設置標簽中間顯示其他標簽及內容,類似於innerHTML
2. .text() 方法,設置標簽中間顯示的文本內容,類似於innerText
3. .val() 方法.設置input標簽中value的值,類似於value
4. .css() 方法,.設置元素的樣式,類似於style
註意::
()中寫字元串,一個參數,就是要設置的值,什麼也不寫,返回的是這個屬性的值
.css()寫的是鍵值對
特此聲明：如需轉載請註明出處，如有疑問請及時提出以便於改正，如有侵權，聯繫刪除，謝謝
