js中的继承 json转换交互框 DOM操作

Myth丶恋晨 2024-04-18 08:53 17阅读 0赞

#### 对象 ####

js 的对象都是obj对象衍生出来的  
对象.属性名 = 赋值;

var obj = new Object();
    			//添加属性 
    			obj.name = "张无忌";
    			obj.age = 28;
    			obj.job = "教主";
    			console.log(obj);
    			//对象.属性 
    			console.log(obj.age);
    			//对象删除属性  delete 关键字删除属性 
    			delete obj.job;
    			console.log(obj);

可以通过 obj对象封装数据 转换成对象

function factory(name,age){
        
    				var obj = new Object();
    				obj.age = age;
    				obj.name = name;
    				return obj;
    			}
    			
    			//通过factory 这个方法创建对象 
    			
    			var fac = factory("张三",34);
    			console.log(fac);

还可以简化为如下形式，使用this关键字

function Person(name,age){
        
    			    console.log(this);
    			    this.age = age;
    				this.name = name;
    			}
    			
    			var p1 = new Person("张三丰",100);
    			var p2 = new Person("范瑶",30);

prototype 指向了 其他对象的引用
    			// 类似java中 在 java 类中添加了一个方法 
    			// 其他所有的对象都可以使用这个方法 
    			Person.prototype.eat=function(){
        
    				console.log("我们都要吃饭");
    			}
    			
    			//所有的对象 都可以使用eat方法
    			
    			p1.eat();
    			p2.eat();

js中的继承

function Person(name,age){
        
    				this.name = name;
    				this.age = age;
    			}
    			
    			function Stu(sno){
        
    				this.sno = sno;
    			}
    			
    			// prototype 属性指向 Person 
    			Stu.prototype = new Person("aa",33);
    			
    			var stu1 = new  Stu(1001);
    			var stu2 = new  Stu(1001);
    			
    			console.log(stu1.name);			
    			console.log(stu1.age);			
    			console.log(stu2.name + stu2.age);

#### json对象 ####

json 对象  { 开始    } 结束 
    		 k是字符串 使用 : 和值分开 
    		 v 是值  (可以是对象.number ,string ...)
    		k-v 和k-v 用,隔开;

var jsonObj = {
        "name":"张三","age":34};
    			
    			// 通过对象点属性 获取值 
    			console.log(jsonObj.name);
    			console.log(jsonObj.age);

json对象可以数组

var jsonObj2 = [10,20,30];

json 可以嵌套

var jsonObj3 = {
        
    				            "name":"张三",
    				            "age":34,
    				             "dog":{
        
    				             	"name":"旺财",
    				             	"age":2
    				             }
    			              };
    			
    			// 先拿到 dog 对象 
    			var dogName = jsonObj3.dog.name;
    			console.log(dogName);

###### js中字符串和json对象的互相转化 ######

json k 是字符串 可以省略
    			var json1 = {
        name:"aa",age:20};
    			console.log(json1);
    			console.log(typeof json1);
    			
    			// 把json对象转成字符串 
    			var jsonStr = JSON.stringify(json1);
    			console.log(jsonStr);
    			console.log(typeof jsonStr);
    			
    			//把json字符串转成 json对象 
    			var jsonStr1 = '{"name":"aa","age":20}';
    			
    			// JSON.parse() 把字符串转成json 
    			var jsonObj = JSON.parse(jsonStr1);
    			console.log(jsonObj.name + jsonObj.age);

###### java中字符串和json对象的互相转化 ######

1.把对象转成json字符串  
框架 fastJson 阿里巴巴 产品 下载jar 地址 https://mvnrepository.com/

String jsonString = JSON.toJSONString(u);
    		System.out.println(jsonString);
    		
    		// 把java集合对象转成 字符串 
    		List<User> list = new ArrayList();
    		list.add(new User("乔峰", 30));
    		list.add(new User("段正淳", 35));
    		list.add(new User("白刀风", 30));
    		
    		// 统计  JSON.toJSONString(u);
    		String jsonString2 = JSON.toJSONString(list,true);

2.把 json字符串 直接转成 对象

String jsonstr = "{\"age\":34,\"name\":\"aa\"}";
    		
    		// 把 字符串 直接转成 对象  JSON.parseObject(str,clazz)
    		User u = JSON.parseObject(jsonstr, User.class);
    		System.out.println();
    		
    		
    		String jsonStr2 ="[\r\n" + 
    				"	{\r\n" + 
    				"		\"age\":30,\r\n" + 
    				"		\"name\":\"乔峰\"\r\n" + 
    				"	},\r\n" + 
    				"	{\r\n" + 
    				"		\"age\":35,\r\n" + 
    				"		\"name\":\"段正淳\"\r\n" + 
    				"	},\r\n" + 
    				"	{\r\n" + 
    				"		\"age\":30,\r\n" + 
    				"		\"name\":\"白刀风\"\r\n" + 
    				"	}\r\n" + 
    				"]";
    		
    		//把 json字符串 转成 java对象
    		List<User> list = JSON.parseArray(jsonStr2, User.class);
    		
    		for (User user : list) {
        
    			System.out.println(user);
    		}

#### 交互框 ####

//警告框 
    			//window 调用 alert() 可以省略
    			alert("不要睡觉");
                //确认框   有返回值  点击确定返回 true
              var flag = confirm("你吃饭了?");
    			
    			if(flag){
        
    				console.log("吃撑了");
    			}else{
        
    				console.log("前胸贴后背")
    			}
    			
    			//询问框   返回值是你输入的内容
    			var msg = prompt("你的银行卡密码是?");
    			
    			if(msg == 1234){
        
    				alert("今晚买单");
    			}else{
        
    				alert("密码不正确");
    			}

#### 窗口的调用 ####

<button onclick="openWin()">打开一个新窗口</button>
    		<button onclick="closeWin()">关闭一个新窗口</button>
    
    		<script>
    			var winId = null;
    
    			function closeWin() {
        
    
    				if(winId != null) {
        
    					window.close(winId);
    					winId = null;
    				}
    
    			}
    
    			function openWin() {
        
    
    				//windon.open() 打开窗口
    				//				window.open("http://www.itbaizhan.com");
    				/**
    				 *  url  打开窗口的链接  
    				 *  name 打开窗口取名
    				 *  params 设置窗口的参数
    				 */
    				// oepn 后会返回一个窗口的id 
    				if(winId == null) {
        
    					console.log("点我了....")
    					winId = window.open(
    						"http://www.itbaizhan.com",
    						"",
    						"height=400,width=400,top=400,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no");
    
    				}
    
    			}

#### 延时任务 ####

<button onclick="timeoutFun()">开启任务</button>
    		<button onclick="timeoutFunClear()">取消任务</button>
    
    		<script>
    			
    			var timeOutId = null;
    			
    			//清除延时任务
    			function timeoutFunClear(){
        
    				console.log("取消延时任务...")
    				// 把延时任务的id传入进来 
    				window.clearTimeout(timeOutId);
    			}
    			
    			// 执行的函数   开启延时任务
    			function timeoutFun() {
        
    
    				/**
    				 * setTimeout  延时任务 
    				 * function()  延时执行的函数 
    				 * 5000 延时的时间 
    				 */
    				//				window.setTimeout(function() {
        
    				//
    				//					console.log("上一趟厕所");
    				//				}, 5000);
    				// 把go函数出入进来    5秒钟后 执行go函数
    				timeOutId = window.setTimeout(go, 5000);
    
    			}
    
    			function go() {
        
    
    				console.log("上一趟厕所");
    			}

#### 周期任务 ####

<button onclick="startFun()">开启任务</button>
    		<button onclick="endFun()">取消任务</button>
    
    		<script>
    			var IntervalId = null;
    
    			function endFun() {
        
    
    				if(IntervalId != null) {
        
    					window.clearInterval(IntervalId);
    					IntervalId = null;
    				}
    
    			}
    
    			//开启周期任务
    			function startFun() {
        
    
    				// 判断 开启一次就好
    				if(IntervalId == null) {
        
    					IntervalId = window.setInterval(function() {
        
    
    						console.log("上厕所" + new Date().toLocaleTimeString());
    
    					}, 3000);
    				}
    
    			}

#### location对象 ####

<body onload="alert('加载数据...')">
    
    		<button onclick="testLocation()"> 测试location </button>
    
    		<script>
    			function testLocation() {
        
    
       				// location 对象用于获得当前页面的地址
       				// 设置 url请求的 链接 
    // 				window.location.href = "http://www.itbaizhan.com";
                    //从新加载界面 
    //              window.location.reload(); //重写接着界面 
                    // 可以实现界面的刷新  
                    console.log(window.location.href);
    //              window.location.href = window.location.href;
    			}
    		</script>
    
    	</body>

### DOM操作 ###

##### 节点的属性值 #####

<body>
    		
    		<p id="p1" class="a1">hello</p>
    		
    		<button onclick="getAttr()"> 点我</button>
    		
    		<script>
    			
    			function getAttr(){
         
    				
    				// 拿到节点 
    				var pNode = document.getElementById("p1");
    				
    				// 元素节点的名称 就是标记  p
    				//       nodeType 是 1 
    				//       nodeValue null
    				console.log(pNode.nodeName + "," + pNode.nodeType + pNode.nodeValue);
    			}
    		</script>
    		
    		
    		
    	</body>

#### 获取节点 ####

1.通过id获取  
var pNode = document.getElementById(“p1”);  
getAttribute(属性名字) 获取 节点的属性值  
2. 通过标签获取 getElementsByTagName() 返回的是数组  
3. 通过name获取  
var inputArr = document.getElementsByName(“sex”);  
4.可以通过class来获取  
var pArr2 = document.getElementsByClassName(“box1”);

#### 间接获取节点 ####

<body>
    
    		<div id="box">
    			<p id="p1">昔我往矣</p>
    			<p id="p2" class="box1">杨柳依依</p>
    			<p class="box1"> 今我来思</p>
    			<p>雨雪霏霏</p>
    		</div>
    
    		<br />
    		<button onclick="getMyNodes()"> 获子节点 </button>
    		<button onclick="getParentNodes()"> 获父节点 </button>
    		<button onclick="getBrotherNodes()"> 获兄弟节点 </button>
    
    		<script>
    			// 获取兄弟节点 
    			function getBrotherNodes() {
         
    
    				// 先获取当前的节点  p2 
    				var p2Node = document.getElementById("p2");
    
    				// 上一个节点 如果 有空 获取的是空节点 
    				var p2Per1 = p2Node.previousSibling;
    				console.log(p2Per1);
    				// 获取一个元素节点 
    				var p2Per2 = p2Node.previousElementSibling;
    				console.log(p2Per2);
    			}
    
    			//获取父节点 
    			function getParentNodes() {
         
    
    				// 拿到 p1   在获取父节点 
    				var p1Node = document.getElementById("p1");
    				var parent = p1Node.parentNode;
    				console.log(parent);
    			}
    
    			// 获取子节点 
    			function getMyNodes() {
         
    
    				var divNode = document.getElementById("box");
    				// 获取子节点   获取空节点  + 元素节点   
    				var pNodes = divNode.childNodes;
    				console.log(pNodes);
    
    				// 只获取元素节点  
    				var pNodes2 = divNode.children;
    				console.log(pNodes2);
    
    				// 获取 第一个子节点 和左后一个子节点 
    				// firstChild 如果有空格 获取的是第一个 空节点 
    				var child1 = divNode.firstChild;
    				console.log(child1);
    
    				// 获取的是第一个 元素节点
    				var child2 = divNode.firstElementChild;
    				console.log(child2);
    
    				// 如果有空节点 如果过滤掉  nodeType == 1 就是元素节点 
    				console.log("空节点过滤.....")
    				for(var index = 0; index < pNodes.length; index++) {
         
    					if(pNodes[index].nodeType == 1) {
          // 元素节点 
    						console.log(pNodes[index]);
    					}
    				}
    
    			}
    		</script>
    
    	</body>

#### 获取元素操作属性和文本 ####

<html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    
    	<style>
    		.box2 {
         
    			width: 100px;
    			height: 100px;
    			background-color: red;
    		}
    	</style>
    
    	<body>
    
    		<div id="b1" class="box1"> <i> 我是div</i> </div>
    
    		<button onclick="testAtrr()"> 属性的设置 和 获取</button>
    		<button onclick="testHtml()"> html 设置 和 获取</button>
    		<button onclick="testText()"> text 设置 和 获取</button>
    		
    		<script>
    			
    			function testText(){
         
    			   	
    			   	// 获取文本  
    				//拿到节点 
    				var divNode = document.getElementById("b1");
    				
    				// 获取是文本 不会标签 
    				var text = divNode.innerText;
    				console.log(text);
    				
    				//设置 都是文本不会解析 html标签
                    divNode.innerText = "<b> 我是div</b>";
    			}
    			
    			function testHtml(){
         
    				
    				// 获取标签中的html
    				//拿到节点 
    				var divNode = document.getElementById("b1");
    				// 获取 html 
    //				var html = divNode.innerHTML;
    //               获取元素节点 的 标签 + 文本 
    //				console.log(html);
    				
    				//设置      设置  标签 会被网页解析 
    				divNode.innerHTML = "<b> 我是div</b>";
    			}
    			
    			
    			function testAtrr() {
         
    
    				//拿到节点 
    				var divNode = document.getElementById("b1");
    
    				// getAttribute 要把 属性界面name给他
    				//				var classStr = divNode.getAttribute('class');
    				//				console.log(classStr);
    				divNode.setAttribute("class","box2"); 
    				
    				//图片修改 src="a.jpg";
    			}
    		</script>
    
    	</body>
    
    </html>

#### 节点的添加 ####

<body>
    
    		<div id="p1"></div>
    
    		<div id="p2">
    
    			<p id="b1"> java </p>
    			<p id="b2"> javascript </p>
    			<p id="b3"> mysql </p>
    
    		</div>
    
    		<button onclick="addMyTextNode()">添加文本节点</button>
    
    		<button onclick="addMyNode()">添加元素节点</button>
    		<button onclick="addBeforeMyNode()">在某个节点之前 添加节点</button>
    		<button onclick="delMyNode()"> 删除节点</button>
    
    		<script>
    			function delMyNode() {
         
    
    				// 拿到父节点 
    				var divNode = document.getElementById("p2");
    
    				// 拿到子节点
    				var p2Node = document.getElementById("b2");
    				// 删除操作 
    				divNode.removeChild(p2Node);
    
    			}
    
    			function addBeforeMyNode() {
         
    				// 拿到父节点 
    				var divNode = document.getElementById("p2");
    
    				// 拿到 b2 节点 
    				var p2Node = document.getElementById("b2");
    
    				// 创建新节点 
    				var newNode = document.createTextNode("我是新添加的节点 ");
    
    				//在b2 之前添加节点 
    				divNode.insertBefore(newNode, p2Node);
    			}
    
    			function addMyNode() {
         
    
    				// 拿到 div节点 
    				var divNode = document.getElementById("p1");
    				// 创建文本文本节点 
    				var textNode = document.createTextNode("我是新添加的文本节点");
    				// 创建 元素节点 
    				var h1Node = document.createElement("h1");
    				// 把文本节点添加到 元素节点 
    				h1Node.appendChild(textNode);
    				// 把元素节点添加到 div节点中 
    				divNode.appendChild(h1Node);
    
    			}
    
    			function addMyTextNode() {
         
    
    				//拿到节点 
    				var divNode = document.getElementById("p1");
    
    				//创建一个文本节点 createTextNode 
    				var textNode = document.createTextNode("我是新添加的文本节点");
    
    				//把 文本节点 添加到  div节点中appendChild 父节点中添加子节点 
    				divNode.appendChild(textNode);
    
    			}
    		</script>
    	</body>

#### js操作css样式 ####