欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript與JQuery框架基礎(chǔ)入門教程

 更新時間：2021年07月12日 15:05:18   作者：cgblpx  
這篇文章主要介紹了jQuery和JavaScript入門基礎(chǔ)知識學(xué)習(xí)指南,jQuery是當(dāng)下最主流人氣最高的JavaScript庫,需要的朋友可以參考下

一，JS對象

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

二，DOM

–1，作用

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

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

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

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

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

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

innerHtml

innerText

style

–2，測試

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>測試 DOM解析網(wǎng)頁元素</title>
		<script>
			function method(){
				// 4. 獲取標(biāo)簽名是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");//得到多個元素
				// b[0].innerHTML="test...";  //修改第一個元素的內(nèi)容
				b[0].style.color="blue";  //修改第一個元素的字的顏色
				console.log(b[0].innerHTML);//獲取第一個元素的內(nèi)容
				// 1. 獲取id="a1"
				var a = window.document.getElementById("a1");//得到一個元素
				// a.innerText = "<h1>hello</h1>" ; //修改內(nèi)容
				// document.write( a.innerText ); //直接向網(wǎng)頁寫出數(shù)據(jù)
				// //innerText和innerHtml的區(qū)別？innerHtml能解析HTML標(biāo)簽
				// a.innerHtml = "<h1>hello</h1>" ; //修改內(nèi)容
				// document.write( a.innerHtml ); //直接向網(wǎng)頁寫出數(shù)據(jù)
			}
		</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，概述

用來簡化JS的寫法，綜合使用了HTML css js。

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

–2，使用步驟

先引入jQuery的文件： 在HTML里使用script標(biāo)簽引入

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

–3，入門案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>測試 jq語法</title>
		<!-- 1. 引入jQuery文件 -->
		<script src="jquery-1.8.3.min.js"></script>
		<!-- 2. 在網(wǎng)頁中嵌入JS代碼 -->
		<script>
			// 點擊p標(biāo)簽，修改文字
				function fun(){
					//dom獲取元素
					var a = document.getElementsByTagName("p");//按照標(biāo)簽名獲取元素
					a[0].innerHTML="我變了。。。";//修改文字
					//jq獲取元素 -- jq語法：  $(選擇器).事件
					$("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. 導(dǎo)入jq文件 -->
		<script src="jquery-1.8.3.min.js"></script>
		<script>
			//寫法1的問題：想用的h1還沒被加載，用時會報錯
					// 解決方案：寫在h1加載之后 + 使用文檔就緒函數(shù)(先導(dǎo)入jq)
			// document.getElementsByTagName("h1")[0].innerHTML="我變了。。";
			//寫法2的：使用文檔就緒函數(shù)(先導(dǎo)入jq)--是指文檔都就緒了再用元素
			$(document).ready(function(){
				//document.getElementsByTagName("h1")[0].innerHTML="我變了。。";//js的dom寫法
				$("h1").text("我變了。。");//jq的寫法
			});
		</script>
	</head>
	<body>
		<h1>我是h1</h1>
	</body>
</html>

四，JQuery的語法

–1，選擇器

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

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

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

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

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

–2,常用函數(shù)

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

hide() – 隱藏

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

show()—顯示

fadeIn() — 淡入

fadeOut() — 淡出

–3,常用事件

單擊事件–click !!!

雙擊事件–dblclick

鼠標(biāo)移入事件–mouseenter

鼠標(biāo)移出事件–mousleave

鼠標(biāo)懸停事件–hover

鍵盤事件–keydown keyup keypress

–4,練習(xí)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>測試 jq的練習(xí)</title>
		<!-- 1. 引入jq -->
		<script src="jquery-1.8.3.min.js"></script>
		<!-- 2. 使用jq語法做練習(xí) 語法：$(選擇器).事件 -->
		<script>
			// jq文檔就緒函數(shù)：：保證元素都被加載過了，就可以放心使用了，不然會報錯
			$(function(){
				// 練習(xí)1：單擊id=d1的元素，隱藏id=p1的
				$("#d1").click(function(){
					$("#p1").hide();
				})
			});
			$(function(){
				// 練習(xí)2：雙擊class="dd"的元素，給div加背景色
				$(".dd").dblclick(function(){
					$("div").css("background-color","green");
				})
				// 練習(xí)3：鼠標(biāo)進入 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>

總結(jié)

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

相關(guān)文章

最新評論