国产成人精品18p,天天干成人网,无码专区狠狠躁天天躁,美女脱精光隐私扒开免费观看

JavaScript與JQuery框架基礎入門(mén)教程

發(fā)布時(shí)間：2021-08-17 12:16 來(lái)源： 閱讀：0 作者：cgblpx 欄目： JavaScript 歡迎投稿：712375056

目錄

    一，JS對象

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>測試 js的創(chuàng  )建對象</title>
		<script>
			//2. 創(chuàng  )建對象方式2：
				var p2 = {
					//綁定了屬性
					name:"張三",
					age:19,
					//綁定了函數
					eat:function(a){
						console.log(a);
					}
				}
				console.log(p2);
				p2.eat(10);//調用函數
			//1. 創(chuàng  )建對象方式1：
				//聲明對象
				function Person(){}
				//創(chuàng  )建對象
				var p = new Person();
				//動(dòng)態(tài)綁定屬性
				p.name="張三" ;
				p.age=18 ;
				//動(dòng)態(tài)綁定函數
				p.eat=function(){
					console.log("吃豬肉");
				}
				//查看
				console.log(p);
				//調用函數
				p.eat();
		</script>
	</head>
	<body>
	</body>
</html>

    二，DOM

    –1，作用

    使用document對象的各種方法屬性。解析網(wǎng)頁(yè)里的各種元素。

    按照id獲取元素-----getElementById(“id屬性的值”)

    按照name獲取元素-----getElementsByName(“name屬性的值”)

    按照class獲取元素-----getElementsByClassName(“class屬性的值”)

    按照標簽名獲取元素-----getElementsByTagName(“標簽名”)

    在瀏覽器輸出-----write(“要展示的內容”)

    innerHtml

    innerText

    style

    –2，測試

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>測試 DOM解析網(wǎng)頁(yè)元素</title>
		<script>
			function method(){
				// 4. 獲取標簽名是p的
				var d = document.getElementsByTagName("p");
				d[0].innerHTML="hi...";
				console.log(d[0].innerHTML);
				// 3. 獲取 class="f"
				var c = document.getElementsByClassName("f");
				c[0].innerHTML="hi...";
				console.log(c[0].innerHTML);
				// 2. 獲取name="d"
				var b = document.getElementsByName("d");//得到多個(gè)元素
				// b[0].innerHTML="test...";  //修改第一個(gè)元素的內容
				b[0].style.color="blue";  //修改第一個(gè)元素的字的顏色
				console.log(b[0].innerHTML);//獲取第一個(gè)元素的內容
				// 1. 獲取id="a1"
				var a = window.document.getElementById("a1");//得到一個(gè)元素
				// a.innerText = "<h1>hello</h1>" ; //修改內容
				// document.write( a.innerText ); //直接向網(wǎng)頁(yè)寫(xiě)出數據
				// //innerText和innerHtml的區別？innerHtml能解析HTML標簽
				// a.innerHtml = "<h1>hello</h1>" ; //修改內容
				// document.write( a.innerHtml ); //直接向網(wǎng)頁(yè)寫(xiě)出數據
			}
		</script>
	</head>
	<body>
		<div name="d" onclick="method();">我是div1</div>
		<div name="d">我是div2</div>
		<div class="f">我是div3</div>
		<a href="#" id="a1">我是a1</a>
		<a href="#" class="f">我是a2</a>
		<p class="f">我是p1</p>
		<p>我是p2</p>
	</body>
</html>

    三，Jquery

    –1，概述

    用來(lái)簡(jiǎn)化JS的寫(xiě)法，綜合使用了HTML css js。

    語(yǔ)法： $(選擇器).事件

    –2，使用步驟

    先引入jQuery的文件： 在HTML里使用script標簽引入

    使用jQuery的語(yǔ)法修飾網(wǎng)頁(yè)的元素

    –3，入門(mén)案例

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>測試 jq語(yǔ)法</title>
		<!-- 1. 引入jQuery文件 -->
		<script src="jquery-1.8.3.min.js"></script>
		<!-- 2. 在網(wǎng)頁(yè)中嵌入JS代碼 -->
		<script>
			// 點(diǎn)擊p標簽，修改文字
				function fun(){
					//dom獲取元素
					var a = document.getElementsByTagName("p");//按照標簽名獲取元素
					a[0].innerHTML="我變了。。。";//修改文字
					//jq獲取元素 -- jq語(yǔ)法：  $(選擇器).事件
					$("p").hide();//隱藏元素
					$("p").text("我變了33333。。。");//修改文字
				}
		</script>
	</head>
	<body>
		<p onclick="fun();">你是p2</p>
	</body>
</html>

    –4，jQuery的文檔就緒

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>測試 jq的文檔就緒</title>
		<!-- 1. 導入jq文件 -->
		<script src="jquery-1.8.3.min.js"></script>
		<script>
			//寫(xiě)法1的問(wèn)題：想用的h1還沒(méi)被加載，用時(shí)會(huì )報錯
					// 解決方案：寫(xiě)在h1加載之后 + 使用文檔就緒函數(先導入jq)
			// document.getElementsByTagName("h1")[0].innerHTML="我變了。。";
			//寫(xiě)法2的：使用文檔就緒函數(先導入jq)--是指文檔都就緒了再用元素
			$(document).ready(function(){
				//document.getElementsByTagName("h1")[0].innerHTML="我變了。。";//js的dom寫(xiě)法
				$("h1").text("我變了。。");//jq的寫(xiě)法
			});
		</script>
	</head>
	<body>
		<h1>我是h1</h1>
	</body>
</html>

    四，JQuery的語(yǔ)法

    –1，選擇器

    標簽名選擇器： $(“div”) – 選中div

    id選擇器： $("#d1") – 選中id=d1的元素

    class選擇器： $(".cls") – 選中class=cls的元素

    屬性選擇器： $("[href]") – 選中有href屬性的元素

    高級選擇器： $(“div.d3”) – 選中class=d3的div

    –2,常用函數

    text() html() val() — 獲取或者設置值

    hide() – 隱藏

    $(“p”).css(“background-color”,“yellow”); --設置樣式

    show()—顯示

    fadeIn() — 淡入

    fadeOut() — 淡出

    –3,常用事件

    單擊事件–click !!!

    雙擊事件–dblclick

    鼠標移入事件–mouseenter

    鼠標移出事件–mousleave

    鼠標懸停事件–hover

    鍵盤(pán)事件–keydown keyup keypress

    –4,練習

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>測試 jq的練習</title>
		<!-- 1. 引入jq -->
		<script src="jquery-1.8.3.min.js"></script>
		<!-- 2. 使用jq語(yǔ)法做練習 語(yǔ)法：$(選擇器).事件 -->
		<script>
			// jq文檔就緒函數：：保證元素都被加載過(guò)了，就可以放心使用了，不然會(huì )報錯
			$(function(){
				// 練習1：?jiǎn)螕鬷d=d1的元素，隱藏id=p1的
				$("#d1").click(function(){
					$("#p1").hide();
				})
			});
			$(function(){
				// 練習2：雙擊class="dd"的元素，給div加背景色
				$(".dd").dblclick(function(){
					$("div").css("background-color","green");
				})
				// 練習3：鼠標進(jìn)入 id="d1"的div，隱藏有href屬性的元素
				$("#d1").mouseenter(function(){
					$("[href]").hide();
				})
			});
		</script>
	</head>
	<body>
		<div id="d1">我是div1</div>
		<div class="dd">我是div2</div>
		<div>我是div3</div>
		<div class="dd">我是div4</div>
		<p id="p1">我是p1</p>
		<p>我是p2</p>
		<a class="dd">我是a1</a>
		<a href="#">我是a2</a>
		<a href="#">我是a3</a>
	</body>
</html>

    總結

    本篇文章就到這里了，希望能給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內容！

    免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng )、來(lái)自本網(wǎng)站內容采集于網(wǎng)絡(luò )互聯(lián)網(wǎng)轉載等其它媒體和分享為主，內容觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如侵犯了原作者的版權，請告知一經(jīng)查實(shí)，將立刻刪除涉嫌侵權內容，聯(lián)系我們QQ:712375056，同時(shí)歡迎投稿傳遞力量。

    • 100倍故障賠償
    • 1天無(wú)理由退款
    • 7x24小時(shí)服務(wù)
    • 0元快速備案
    • 1V1專(zhuān)席秘書(shū)
    亚洲 中文字幕 日韩 无码| 国产免费天天看高清影视在线| 欧洲精品免费一区二区三区| 久久99热精品免费观看| 99久久无色码中文字幕人妻蜜柚| 日本熟妇浓毛|