JQuery初識
阿新 • • 發佈：2018-09-28
display 不同 code show 3.1 獲取 lap 不存在 ide 
一丶什麽是JQuery
jQuery 是js的一個庫,封裝了我們開發過程中常用的一些功能,方便我們調用,提高開發效率
js庫是把我們常用的功能放到一個單獨的文件中,我們用的時候,直接引用到頁面裏即可
關於jQuery的相關資料:
官網: http://jquery.com/
官網API文檔: http://api.jquery.com/
漢化API文檔: http://www.css88.com/jqapi-1.9/
二丶JQuery的文件講解
1.先導入模塊,在前端中一個js 文件就是一個模塊,一個css也可以是一個模塊
<script type="text/javascript" src="./jquery.js"></script>
在JQuery的內部api 99%的都是方法
2.在JQuery還是要遵循那三步走 獲取事件源丶事件丶事件驅動
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
width: 100px;
height: 100px;
background
三丶JQuery的入口函數
原生js的入口函數指的是; window.onload = function() {}; 如下:
//原生 js 的入口函數。頁面上所有內容加載完畢，才執行。 //不僅要等文本加載完畢，而且要等圖片也要加載完畢，才執行函數。 window.onload = function () { alert(1); }
JQuery有以下幾種寫法:
寫法一:
//1.文檔加載完畢，圖片不加載的時候，就可以執行這個函數。 $(document).ready(function () { alert(1); })
寫法二:(寫法一的簡潔版)
//2.文檔加載完畢，圖片不加載的時候，就可以執行這個函數。 $(function () { alert(1); });
寫法三:
//3.文檔加載完畢，圖片也加載完畢的時候，在執行這個函數。 $(window).ready(function () { alert(1); })
JQuery入口函數與js入口函數的區別:
區別一:書寫個數不同:
1.JS的入口函數只能出現一次,出現多次會存在事件覆蓋的問題.
2.JQuery的入口函數,可以出現任意多次,並不存在事件覆蓋問題.
區別二:執行時機不同:
1.JS的入口函數是在所有的文件資源加載完成後,才執行.這些文件資源包括:頁面文檔丶外部的js文件丶外部的css文件丶圖片等.
2.JQuery的入口函數,是在文檔加載完成後,就執行.文檔加載完成指的是:DOM樹加載完成後,就可以操作DOM了,不用等到所有的外部資源都加載完成.
文檔加載順序:從上往下,邊解析邊執行
四丶JQuery $符號
$時機上表示的是一個函數名:
$(); // 調用上面我們自定義的函數$ $(document）.ready(function(){}); // 調用入口函數 $(function(){}); // 調用入口函數 $(“#btnShow”) // 獲取id屬性為btnShow的元素 $(“div”) // 獲取所有的div標簽元素
根據傳入參數的不同,進行不同的調用,實現不同的功能.返回的是JQuery對象.
JQuery這個js庫,除了$之外,還提供了另外一個函數:JQuery. jQuery函數跟$函數的關系:jQuery =$.
五丶js中的DOM對象和jQuery對象比較(重點)
1.二者的區別
通過jQuery獲取的元素是一個數組,數組中包含著原生js中的DOM對象.
針對下面這樣一個div結構:
<div></div> <div id="app"></div> <div class="box"></div> <div class="box"></div> <div></div
通過原生js獲取這些元素節點的方式是:
var myBox = document.getElementById("app"); //通過 id 獲取單個元素 var boxArr = document.getElementsByClassName("box"); //通過 class 獲取的是偽數組 var divArr = document.getElementsByTagName("div"); //通過標簽獲取的是偽數組
通過jQuery獲取這些元素節點的方式是:(獲取的都是數組)
//獲取的是數組，裏面包含著原生 JS 中的DOM對象。 console.log($(‘#app‘)); console.log($(‘.box‘)); console.log($(‘div‘));
設置當前4個div的樣式:
$(‘div‘).css({ ‘width‘: ‘200px‘, ‘height‘: ‘200px‘, "background-color":‘red‘, ‘margin-top‘:‘20px‘ })
總結：jQuery 就是把 DOM 對象重新包裝了一下，讓其具有了 jQuery 方法。
2.二者的相互轉換
(1)DOM對象轉為JQuery對象:
$(js對象);
(2)JQuery對象轉為DOM對象:
jquery對象[index]; //方式1（推薦） jquery對象.get(index); //方式2
(3)JQuery對象轉換成了DOM對象之後,可以直接調用DOM提供的一些功能.如:
$(‘div‘)[1].style.backgroundColor = ‘yellow‘;
$(‘div‘)[3].style.backgroundColor = ‘green‘;
總結：如果想要用哪種方式設置屬性或方法，必須轉換成該類型。
舉例:隔行換色
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-3.3.1.js"></script>
<script>
//入口函數
jQuery(function () {
var jqLi = $("li");
for (var i = 0; i < jqLi.length; i++) {
if (i % 2 === 0) {
//jquery對象，轉換成了js對象
jqLi[i].style.backgroundColor = "pink";
} else {
jqLi[i].style.backgroundColor = "yellow";
}
}
});
</script>
</head>
<body>
<ul>
<li>小馬哥</li>
<li>小馬哥</li>
<li>小馬哥</li>
<li>小馬哥</li>
<li>小馬哥</li>
<li>小馬哥</li>
</ul>
</body>
</html>
View Code
JQuery動畫:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
width: 200px;
height: 200px;
background-color:red;
/*display: none;*/
}
</style>
</head>
<body>
<button>動畫</button>
<button>動畫</button>
<button>動畫</button>
<button>動畫</button>
<button>動畫</button>
<button>動畫</button>
<div id="box"></div>
<script src="jquery.js"></script>
<script>
$(function () {
console.log($(‘button‘));
var isShow = true;
// 內部提升
$(‘button‘).click(function () {
//點擊改變長寬
// $(‘#box‘).hide(2000);
// $(‘#box‘).show(2000,function() {
// alert(2222);
// });
// 顯示:2秒顯示出來
// $(‘#box‘).fadeIn(2000);
// 隱藏:22秒逐漸隱藏起來
// $(‘#box‘).fadeOut(2000);
//上下逐漸展開
// if (isShow) {
// // 用動畫 先 stop()再開動畫
// $(‘#box‘).stop().slideUp(1000);
// isShow = false;
// }else{
// $(‘#box‘).stop().slideDown(1000);
// isShow = true;
// }
//
//上下逐漸展開關閉
// $(‘#box‘).slideToggle(1000);
// $(‘#box‘).slideDown(3000);
})
});
</script>
</body>
</html>
JQuery初識