JavaScript與JQuery框架基礎入門教程

阿新 • • 發佈：2021-07-14

一，JS物件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>測試 js的建立物件</title>
		<script>
			//2. 建立物件方式2：
				var p2 = {
					//綁定了屬性
					name:"張三",age:19,//綁定了函式
					eat:function(a){
						console.log(a);
					}
				}
				console.log(p2);
				p2.eat(10);//呼叫函式
			//1. 建立物件方式1：
				//宣告物件
				function Person(){}
				//建立物件
				var p = new Person();
				//動態繫結屬性
				p.name="張三" ;
				p.age=18 ;
				//動態繫結函式
			http://www.cppcns.com 
	p.eat=function(){
					console.log("吃豬肉");
				}
				//檢視
				console.log(p);
				//呼叫函式
				p.eat();
		</script>
	</head>
	<body>
	</body>
</html>

二，DOM

–1，作用

使用document物件的各種方法屬性。解析裡的各種元素。

按照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解析網頁元素</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");//得到多個元素
				// b[0].innerHTML="test...";  //修改第一個元素的內容
				b[0].style.color="blue";  //修改第一個元素的字的顏色
				console.log(b[0].innerHTML);//獲取第一個元素的內容
				// 1. 獲取id="a1"
				var a = window.document.getElementById("a1");//得到一個元素
				// a.innerText = "<h1>hello</h1>" ; //修改內容
				// document.write( a.innerText ); //直接向網頁寫出資料
				// //innerText和innerHtml的區別？innerHtml能解析HTML標籤
				// a.innerHtml = "<h1>hello</h1>" ; //修改內容
				// document.write( a.innerHtml ); //直接向網頁寫出資料
			}
		</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 js。

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

–2，使用步驟

先引入jQuery的檔案：在HTML裡使用script標籤引入

使用jQuery的語法修飾網頁的元素

–3，入門案例

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

四，JQuery的語法

–1，選擇器

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

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

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

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

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

–2,常用函式

text() html() val() — 獲www.cppcns.com取或者設定值

hide() – 隱藏

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

show()—顯示

fadeIn() — 淡入

fadeOut() — 淡出

–3,常用事件

單擊事件–click !!!

雙擊事件–dblclick

滑鼠移入事件–mouseenter

滑鼠移出事件–mousleave

滑鼠懸停事件–hover

鍵盤事件–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語法做練習 語法：$(選擇器).事件 -->
		<script>
			// jq文件就緒函式：：保證元素都被載入過了，就可以放心使用了，不然會報錯
			$(function(){
				// 練習1：單擊id=d1的元素，隱藏id=p1的
				$("#d1").click(function(){
					$("#p1").hide();
				})
			});
			$(function(){
				// 練習2：雙擊class="dd"的元素，給div加背景色
				$(".dd").dblclick(function(){
					$("div").css("background-color","green");
http://www.cppcns.com				})
				// 練習3：滑鼠進入 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>