jQuery 是一個高效、精簡并且功能豐富的 JavaScript 工具庫
jQuery下載地址：
http://jquery.com/download/
https://www.bootcdn.cn/jquery/
使用程序中，具體參考 API 應用手冊
https://jquery.cuishifeng.cn/
- jquery極大的簡化了DOM操作，讓編程變得更加簡單高效
jQuery常見操作
-
$()方法：在DOM操作中，jquery封裝了一個獲取元素的方法$()-
在jquery中，只有一個全域變數$，這也是jQuery的特點，這樣避免了全域變數的污染
-
最開始變數不叫做$，叫做jQuery()方法，在庫中兩個名字是并存的，都可以使用，
-
$("p").css("background-color","red");
jQuery("p").css("background-color","red");
- 經常出現的錯誤：$未定義（jQuery檔案引入錯誤）
jquery物件
-
通過$()方法獲取到的內容叫做jQuery物件
-
jQuery物件內部封裝了大量的屬性和方法，比如 .css() 和 .html() 和 .animate()等方法都是jQuery（）物件的方法，
-
通過$()獲取的元素是一組元素，進行操作時是批量操作，
-
<style>
p{
width: 80px;
height: 50px;
}
</style>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<script src="https://www.cnblogs.com/dreamtown/jq/jquery-1.12.4.min.js"></script>
<script>
//通過 $()方法 獲取到的是jQuery物件
//獲取的是一組html的元素,會進行批量操作
$("p").css("background-color","skyblue")
$("p").html("hello");
$("p").animate({"width" : 100},1000);
</script>
</body>
- jQuery物件得到后，只能使用jQuery物件的方法，不能使用原生js元素物件的方法
console.log($("p").innerHTML);//undefined
- 原生JS物件也不能使用jQuery的方法
var p = document.getElementsByTagName("p");
p[0].html("change this p");//報錯,沒有html這個方法
- jQuery物件實際是一個類陣列物件，內部包含所有的獲取的原生JS物件，以及大量的jQuery的方法和屬性
console.log($("p"));
jQuery物件中原生Js物件的個數
- $().length
console.log($("p").length);
- $().size()
console.log($("p").size())
轉換
- jQuery轉原生：直接利用陣列下標方式，得到jQuery封裝的原生物件
var $p = $("p");
//通過jQuery獲取p物件(類陣列物件,包含所有p,所以后續使用通過下標呼叫即可)
$p[0].innerHTML = "112233";//使用原生js方法
- 原生轉jQuery：將原生物件用$()方法包裹即可
//原生js物件轉換jQuery物件
var op = document.getElementsByTagName("p")[0];
$(op).css("background-color","red");
//使用$()包裹op,將op獲取的物件作為一個引數,傳入jQuery物件中,這樣就可以使用jQuery物件的方法了
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/270856.html
標籤：jQuery