cgb2105-day10

怼烎@ 2021-09-11 03:06 286阅读 0赞

### 文章目录 ###

*   *  一，JS对象
     *  二，DOM
     *   *  \--1，作用
         *  \--2，测试
     *  三，Jquery
     *   *  \--1，概述
         *  \--2，使用步骤
         *  \--3，入门案例
         *  \--4，jQuery的文档就绪
     *  四，JQuery的语法
     *   *  \--1，选择器
         *  \--2,常用函数
         *  \--3,常用事件
         *  \--4,练习

## 一，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 ;
    				//动态绑定函数
    				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 css js。  
语法： $(选择器).事件

### –2，使用步骤 ###

先引入jQuery的文件： 在HTML里使用script标签引入  
使用jQuery的语法修饰网页的元素

### –3，入门案例 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>测试 jq语法</title>
    		
    		
    		<script src="jquery-1.8.3.min.js"></script>
    		
    		<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>
    		
    		
    		<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() — 获取或者设置值  
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>
    		
    		
    		<script src="jquery-1.8.3.min.js"></script>
    		
    		<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");
    				})
    				// 练习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>