在JQuery文件中下載,并將其引入html文件。在使用jQuery之前,我們需要到j(luò)Query的官方網(wǎng)站:“https://jquery.com/download/”
把下載好的文件放到工程根目錄下,然后在這個根目錄下創(chuàng)建index.html文件。最后,將下載的JQuery文件引入index.html文件,其代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.5.1.min.js"></script>
</head>
<body>
</body>
</html>
1234567891011121314151617181920212223242526272829復(fù)制代碼類型:[html]
通過引入script標簽,JQuery被引入到subject的subject中,subject是:
接下來,我們將研究JQuery的基本語法,并對其進行一些介紹。
示例1:$("div").hide();此行表示隱藏div元素;
例子2:$(".box1").hide();這行代碼意味著class屬性隱藏在box1的元素中;
示例3:$("#wrap").hide();這行代碼表示隱藏元素id的值為wrap;
示例4:$("hide.box1").hide();這一行代碼意味著,隱藏帶有box1的cycle屬性的hv元素;
從上面的例子中可以看出,JQuery語法非常簡單,只需要一個美元符號$,后面跟著一個html的元素選擇符(與我們之前學(xué)到的css選擇符高度一致),然后在后面加上JQuery的方法,例如hide(show等等)。
無論顯示或隱藏元素時,都需要一個事件來觸發(fā)該動作,我們常用的觸發(fā)方式是鼠標點擊,比如你用鼠標點擊一個按鈕,然后頁面上就會彈出一個提示框,通過點擊來觸發(fā)效果,我們稱之為“事件”。點擊JQuery中事件的書寫方式為:$("div").click(function(){...}),此代碼意味著在div標簽被點擊之后觸發(fā)事件,具體事件內(nèi)容以函數(shù)形式寫入。除單擊事件外,JQuery還可以通過鼠標移動事件、雙擊事件、元素獲取焦點事件等方式進行學(xué)習(xí),后面我們將一一介紹,并查看JQuery如何使用。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.5.1.min.js"></script>
</head>
<style>
.box1 {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<body>
<button id="btn1">點我隱藏元素</button>
<div class="box1"></div>
</body>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$(".box1").hide();
})
})
</script>
</html>
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253復(fù)制代碼類型:[html]
在以上代碼中,我們定義了一個button元素,一個div元素,然后點擊按鈕button,這個div元素就會被隱藏起來,各位同學(xué)可以嘗試一下。在代碼的最后一部分,包含了一段script標簽,這段是JavaScript代碼,所有的JavaScript代碼都將被放置在script標簽中以執(zhí)行。
接下來是代碼的第一句話:$(document).ready(function){...},這是JQuery的固定寫法,意思是頁面加載后立即執(zhí)行,執(zhí)行代碼被寫入function函數(shù)的方法中(即{}內(nèi))。我們已經(jīng)看到了這一方法。
$("#btn1").click(函數(shù)){
$(".box1").hide();
})
這個代碼就是我們前面提到的click事件,當單擊id值為btn1的按鈕時,會引發(fā)一個click元素的隱藏事件,click元素的名字叫做box1。
JQuery 是將 JS 的一些代碼塊進行封裝,方便使用。
1.JQ的引入
(1)link 導(dǎo)入
先進入 https://www.bootcdn.cn/ 網(wǎng)站進行查找,找到后復(fù)制到一個 js 中,進行引用。
(2)直接復(fù)制標簽
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
1. JQ 獲取元素
$('.p1').eq(1).text('今天天氣真好')
$('.p1').html('<h>天氣真熱</h>')
2.JS 轉(zhuǎn) JQ
$(ap1).text('天好冷')
3. JQ 轉(zhuǎn) JS
var ap3=$('.p1')
ap3[0].innerText='金地是'
ap3.get(1).innerText='多少金幣' //get() 傳下標
4. JQ JS 都可用
$('ul li').each(function (){
console.log($(this).text());
// console.log(this.innerText);
console.log($(this).index()); //jq 獲取下標
})
<button>添加</button>
<button>刪除</button>
1. 添加 class
//添加class
$("button").eq(0).click(function (){
$("div").addClass("div1")
})
2. 刪除 class
(1)removeClass
//刪除class
$("button").eq(1).click(function (){
$("div").removeClass("div1")
})
(2)removeAttr
//刪除屬性和屬性值
$("button").eq(1).click(function (){
$("div").removeAttr("class")
3. 修改 class
(1)toggleclass
//無則增 有則增
$("button").eq(0).click(function (){
$("div").toggleClass("div1")
(2)attr
//無則增 有則改
$("button").eq(0).click(function (){
$("div").attr("class","div1")
$("div").attr("class","div2")
})
4.獲取 value
$("input").eq(0).val('666');
1. 獲取盒子寬高
(1)獲取寬
console.log($("div").width());
(2)獲取內(nèi)邊框加寬
$("div").innerWidth()
(3)獲取內(nèi)邊框,邊框外邊距和寬的寬度
$("div").outerWidth()
2. JQ 修改 CSS
// jq修改css
$("div").css("background","blue")
$("div").css({
"background":"pink",
"width":"150px"
})
3.定位元素(父級元素一定要有定位)
$(".div2").position()
4.定位瀏覽器窗口
$(".div2").offset()
1.單擊事件
$("div").click(function (){
console.log(1);
})
2.雙擊事件
$("div").dblclick(function (){
console.log(2);
})
3.劃入事件
$("div").mouseenter(function (){
console.log(3);
})
4.劃出事件
$("div").mouseout(function (){
console.log(4);
})
5.劃入劃出事件
$("div").hover(
function (){
console.log(3);
},function (){
console.log(5);
}
)
6.綁定事件
$("button").click(function (){
$("p").on("click",function (){
$("p").css('background','red')
})
})
7.綁定多個事件
$("p").on({
"mouseenter":function (){
$(this).css('background','yellow')
},
"mouseout":function (){
$(this).css('background','blue')
}
})
8.清除事件
$("button").click(function (){
$("p").off()
})
1. 隱藏
$("button").eq(0).click(function (){
// $("div").hide(1000)
$("div").slideUp(1000)
})
2.顯示
$("button").eq(1).click(function (){
$("div").show(1000)
// $("div").slideDown(1000)
})
3.取反
$("button").eq(2).click(function (){
$("div").slideToggle(1000)
// $("div").slideDown(1000)
})
4.淡出事件
$("button").eq(3).click(function (){
$("div").fadeOut(1000)
})
5.淡入事件
$("button").eq(4).click(function (){
$("div").fadeIn(1000)
})
6.淡入淡出取反事件
$("button").eq(5).click(function (){
$("div").fadeToggle(1000)
})
7.動畫效果
$("button").eq(6).click(function (){
$("div").delay(100).animate({
"width":"130px",
"height":"130px",
"top":"50px",
"left":"20px",
})
})
8.停止
$("button").eq(7).click(function (){
$("div").stop(1000)
})
附(今日份學(xué)習(xí)):
了執(zhí)行Javascript,需要在HTML文件內(nèi)以特定的方式書寫JavaScript的代碼,JavaScript的書寫方法有多種,其執(zhí)行的流程也各不相同:
此種嵌入方法無法操作<script>之后的DOM元素。因為<script>之后的DOM元素還未構(gòu)造,因此在<script>標簽內(nèi)就無法取得位于其后的DOM元素。
此種嵌入方法可以指定defer、async屬性。defer可以推遲執(zhí)行,async可以異步執(zhí)行。
此種嵌入方法在頁面讀取完后再對其執(zhí)行,所以可以對所有的DOM元素操作。
<body onload="alert('hello')">
window.onload=function(){alert('hello');};
當window.onload事件觸發(fā)時,頁面上所有的DOM、樣式表、腳本、圖片、flash都已經(jīng)加載完成了。
//window.onload不能同時編寫多個。
//以下代碼無法正確執(zhí)行,結(jié)果只輸出第二個。
window.onload=function(){
alert("test1");
};
window.onload=function(){
alert("test2");
};
//$(document).ready()能同時編寫多個
//結(jié)果兩次都輸出
$(document).ready(function(){
alert("Hello World");
});
$(document).ready(function(){
alert("Hello again");
});
window.onload和body中onload也有些許區(qū)別:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script language="javascript">
window.onload=haha;
function haha(){console.log("window.onload");}
if(document.addEventListener){
function DOMContentLoaded(){
console.log("DOMContentLoaded");
}
document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
}</script>
</head>
<body onload="console.log('bodyonload');">
<div id="div1">a</div>
</body>
</html>
在IE10和FireFox下,結(jié)果為 :
"DOMContentLoaded"
"bodyonload"
說明body中的onload會覆蓋window.onload
在chrome下,結(jié)果為:
DOMContentLoaded
window.onload
bodyonload
然后,如果把javascript代碼移到最下面,結(jié)果又會是什么樣呢?
chrome和IE10、FireFox的結(jié)果竟然是一樣的:
DOMContentLoaded
window.onload
IE 10、Fire Fox可以理解,window.on load和body中的 on load 誰在下面就是誰覆蓋誰,只會執(zhí)行后面的那個。
onload方法可能需要等待時間,而本方法可以在完成HTML解析后發(fā)生的事件,減少等待時間。
在chrome、IE10和FireFox中,執(zhí)行結(jié)果是:DOMContentLoaded然后才是onload的輸出。所以說一般情況下,DOMContentLoaded事件要在window.onload之前執(zhí)行,當DOM樹構(gòu)建完成的時候就會執(zhí)行DOMContentLoaded事件。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="jquery2.js"></script>
<script language="javascript">
window.onload=haha;
function haha(){console.log(document.getElementById("div1"));}
if(document.addEventListener){
function DOMContentLoaded(){
console.log("DOMContentLoaded");
}
document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
}
</script>
</head>
<body>
<div id="div1">a</div>
</body>
</html>
如果你是個jQuery使用者,你可能會經(jīng)常使用$(document).ready();或者$(function(){}),這都是使用了DOMContentLoaded事件
5.1 使用原生js方法
動態(tài)創(chuàng)建script標簽,并指定script的src屬性
function loadJs(url, callback) {
var script=document.createElement('script');
script.type="text/javascript";
if (typeof(callback) !="undefined") {
if (script.readyState) {
script.onreadystatechange=function() {
if (script.readyState=="loaded" || script.readyState=="complete") {
script.onreadystatechange=null;
callback();
}
}
} else {
script.onload=function() {
callback();
}
}
}
script.src=url;
document.body.appendChild(script);
}
loadJs("test.js", function() {
alert('done');
});
還可以使用同樣的原理動態(tài)加載css文件,只不過插入的的父節(jié)點是head標簽。
5.2 使用document.write/writeln()方式
該種方式可以實現(xiàn)js文件的動態(tài)加載,原理就是在重寫文檔流,這種方式會導(dǎo)致整個頁面重繪。
document.writeln("<script src=\"http://lib.sinaapp.com/js/jquery/1.6/jquery.min.js\"></script>");
需要注意的是特殊字符的轉(zhuǎn)義。
5.3 使用jQuery
使用getScript(url,callback)方法實現(xiàn)動態(tài)加載js文件
$.getScript('test.js',function(){
alert('done');
});
-End-
*請認真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。