JS语言、JQuery

最新推荐文章于 2024-08-12 17:04:47 发布

胖头Fish

最新推荐文章于 2024-08-12 17:04:47 发布

阅读量135

点赞数

分类专栏：笔记文章标签： jquery css js

本文链接：https://blog.csdn.net/weixin_56747126/article/details/116809952

版权

笔记专栏收录该内容

37 篇文章 0 订阅

订阅专栏

一,js对象:
–1,网页代码

JS对象

				<!-- 引入一个js文件 -->
				<script src="js/4.js"></script>
			</head>
			<body>
			</body>
		</html>

--2,js代码
		// 写js代码，用来测试 js对象--自定义js对象(声明对象+new对象+属性/函数)
		function Person(){  } //1，声明对象
		var a =  new Person();//2，new对象
		a.name = "jack" ; //3，动态的添加属性
		a.age = 20 ; //3.1，动态的添加属性
		a.study = function(){//4，动态的添加函数
			console.log(100); 
		};
		a.study();//调用函数

		a.coding = function(m,n){//4.1，动态的添加函数
			console.log(m+n); 
		} ;
		a.coding("rose",10);//调用函数

		a.eat = function(m,n){//4.2，动态的添加函数
			return m+n; //返回结果
		} ;
		//5，调用函数
		var b = a.eat(1,2);
		console.log("eat函数的返回值::"+b); //打印eat()的返回值
		//6，调用属性(要么打印要么赋值)
		console.log("name属性的值::"+a.name);
		console.log("age属性的值::"+a.age);
		//查看a对象的结构
		console.log(a); 

		/* 练习:::创建Student对象 */
		function Student(){}//声明对象
		var x = new Student();//new对象
		x.name="张三";//动态添加属性
		x.age=18;//动态添加属性
		x.eat=function(){//动态添加函数
			console.log(x.name);
			console.log(this.name); //this表示当前对象
		};
		x.eat();//调用函数
		console.log( x.name  ) ;//调用属性(要么赋值要么打印)
		console.log(x);

		//创建对象的方式2
		var pp = {
			name: "李四" , //添加属性
			age: 20 , //添加属性
			score: 100 ,  //添加属性
			show: function(){ //添加函数
				console.log("abc");
			}
		}
		pp.show();//调用函数
		console.log(pp.name);//调用属性
		console.log(pp);
		console.log(100);

		/* 也可以直接在浏览器的console里输入代码 */
		var p3 = { name:"jack" ,age:20 ,addr:"北京"};
		console.log(p3);
		console.table(p3);

二,DOM
–1,概述
本质上就是把一整个HTML文件,当做一个Document对象解析.
使用js提供的Document对象,的各种API解析HTML文件中的每个元素节点
–2,Document对象
–获取对象: window.document
–调用方法:
getElementById(“元素的id的属性的值”)–返回1个元素
getElementsByName(“元素的name属性的值”)–返回多个元素(用数组)
getElementsByClassName(“元素的class属性的值”)–返回多个元素(用数组)
getElementsByTagName(“元素的标签名的值”)–返回多个元素(用数组)
title–返回网页的标题
innerText–在网页内部插入text数据
innerHTML–在网页内部插入html数据
–DOM解析:

dom

				<script>
					function fn1(){
									//获取文档中,name=a1的元素 ,,,返回多个
									//[0] 就是获取下标为0的元素
									//innerText是document提供的属性,用来获取文本数据
						var a = document.getElementsByName("a1")[0].innerText;
						alert(a);	
					}
					//获取网页中id=div1的元素,并修改文本数据
					function fn2(){
									//获取文档中,id=div1的元素 ,,,返回1个
									//innerText是document提供的属性,用来获取文本数据
						var b = document.getElementById("div1").innerText;
						alert(b);
					}
					//获取网页中class="p1" 元素,获取文本数据
					function fn3(){
						var a = document.getElementsByClassName("p1");
						alert(  a[0].innerText ); //获取数据
						//a[0].innerText = "我变了..."; //修改数据,只是展示文本字符串,不解析标签
						a[0].innerHTML = "<h1>我变了...</h1>"; //可以解析HTML标签
					}
					//获取网页中的 p标签 里的文本数据
					function fn4(){
						var a = document.getElementsByTagName("p");
						alert( a[0].innerText );
						alert( a[1].innerText );
					}	
				</script>
			</head>
			<body>
				<span onclick="fn1();">我是span1</span>
				<span>我是span2</span>
				<div id="div1"  onclick="fn2();">我是div1</div>
				<div id="div2">我是div2</div>
				<a href="#" name="a1">点我1</a>
				<a href="#" name="a2">点我2</a>
				<p class="p1"  onclick="fn3();">我是p1</p>
				<p  onclick="fn4();">我是p2</p>

				<!-- 添加按钮事件 -->
				<button onclick="alert(1);">单击按钮</button>
				<button ondblclick="alert(2);">双击按钮</button>
				<button onmouseenter="alert(3);">鼠标进入按钮</button>
				<button onmouseleave="alert(4);">鼠标离开按钮</button>
			</body>
		</html>

三,jQuery
–1,概述
封装了大量的js,优化了DOM解析HTML文档的代码
本质上就是一个.js文件,写好了很多函数/属性
jQuery可以快速的定位网页中的元素位置,基于Css选择器
–2,使用步骤:
–在网页上引入jQuery的文件

–使用jQuery语法写高效简洁的jQuery代码
–3,语法:
基础语法是：$(selector).action()
–4,文档就绪函数

jQuery语法测试

				<!-- 第一步:引入jQuery提供的js文件 -->
				<script src="js/jquery-1.8.3.min.js"></script>
				//问题的解决方式2: 整个文档都加载完再用 -- 用到jQuery的文档就绪事件
				<script>
					/* 第二步:JQuery的语法: $(选择器).事件 */
					//jQuery的文档就绪事件
					// $(document).ready( function(){
					$( function(){ //文档就绪的简化写法
						var a = document.getElementById("h");
						alert(a.innerText);
					} );
				</script>
			</head>
			<body>
				<h1 id="h">我是h1</h1>
		<!-- 		<script>
		//问题: 当你想用的资源还没被加载时,会得到null,然后调用null的属性或者函数都会有问题
		//解决方式1: 要用的资源先加载完再用 
					// 获取 id="h"元素里的文字
					var a = document.getElementById("h");
					alert(a.innerText);
				</script> -->
			</body>
		</html>

--5,jQuery的选择器
	--id选择器: 按照id获取网页中的元素
	--class选择器: 按照class获取网页中的元素
	--标签名选择器/属性选择器: 按照标签名获取网页中的元素
--5,jQuery的事件
	--单击事件:click
	--双击事件:dbclick
	--鼠标进去:mouseenter
	--鼠标移出:mouseleave
--6,测试
		<!DOCTYPE html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>jquery事件</title>
				
				<!-- 引入jQuery的文件 -->
				<script src="js/jquery-1.8.3.min.js"></script>
				
				<script>
					//jQuery语法: $(选择器).事件( function(){ .... })
					// $(document).ready( function .... );//写全的了文档就绪
					$(function(){ //简写了文档就绪
		//#表示id选择器,选中网页中的元素,动态的给 id="p1"绑定一个 单击事件click
						$("#p1").click( function(){
							alert(1);
						});
		//#表示id选择器,选中网页中的元素,动态的给 id="div1"绑定一个 双击事件dblclick
						$("#div1").dblclick(function(){
							alert(2);
						});
		//.表示class选择器,选中网页中的元素,动态的给 class="a1"绑定一个 鼠标进入mouseenter
						$(".a1").mouseenter(function(){
							alert(3);
						});
		//.表示class选择器,选中网页中的元素,动态的给 class="a2"绑定一个 鼠标划走mouseleave
						$(".a2").mouseleave(function(){
							alert(4);
						});
		//元素选择器,选中网页中的a元素,动态的把a绑定一个 鼠标进入事件mouseleave
						$("a").mouseenter(function(){
							$("a").hide();//隐藏指定元素
						})
					});
				</script>
			</head>
			<body>
					<a href="#" class="a2">鼠标划走弹4</a>
					<p id="p1">单击我弹1</p>
					<div id="div1">双击我弹2</div>
					<a href="#" class="a1">鼠标进入弹3</a>
			</body>
		</html>

扩展:
–maven:用来统一管理jar包
–步骤:
–创建maven工程
File-New-Project-选中Maven-next-起个名字(展开填GroupId–cn.tedu)-Finish
–在idea里配置maven
File-Settings-Build, Execution, Deployment-Build Tools-Maven-设置Maven Home Directory(浏览maven解压后的位置)-ok