8.30JS第3天

JS第3天学习笔记

一、JS查找标签

<h1 id="top">我是h1标签</h1>
	
	<div class="box">
		我12312312312312v
	</div>
	<div class="box">
		我是class为box的div
	</div>
	<div class="box">
		我是class为box的div
	</div>
	
	<img src="1.png" alt="" class="image">
	<img src="1.png" alt="" class="image">
	<img src="1.png" alt="" class="image">
	<script>
		// js中三大基本数据类型:number数字  string字符串  boolean布尔
		// js中内置的类型(复杂类型)Array/Date....
		// js中还可以自定义类型
		// document 当前整个页面文档对象
		// getElementById 通过标签的id属性查找标签,并且只能获取到一个HTML节点
		var topH = document.getElementById("top")
		console.log(topH)
		// getElementsByClassName 通过标签的class属性查找标签,找到多个标签,标签被放在一个容器中
		var divs = document.getElementsByClassName("box")
		// 使用for循环遍历容器,取出容器中的每一条数据
		// for (var i=0;i<10;i++){
		// 	
		// }
		console.log(divs)
		// of 将divs中的每一个元素进行循环,并且每次循环将元素赋值给变量div
		for (var div of divs){
			// 循环体中变量div表示循环得到每一个标签元素
			// div.innerText = "123"
		}
		
		var imgs = document.getElementsByClassName("image")
		for (var img of imgs){
			// 修改标签属性
			// 标签对象.标签属性 = "属性值"
			img.src = '2.png'
			console.log(img)
		}
		
		// getElementsByName 通过name属性查找标签
		// document.getElementsByName()
		// getElementsByTagName 通过标签名称查找标签
		// document.getElementsByTagName()
		// querySelector() 通过css选择器查找标签,只返回第一个符合css选择器的标签
		var box = document.querySelector(".box")
		console.log(box)
		// querySelectorAll 根据css选择查找标签,返回所有符合css选择器的标签
		var boxs = document.querySelectorAll(".box")
		console.log(boxs)
		// 可以通过循环取出每一个元素
		for (var div of boxs){
			div.innerText = "通过querySelectorAll找到了你"
		}
	</script>
	

二、对象的基本结构

<script>
		// 类和对象
		// 类: 具有与相同特点(属性)和行为方法的事物的抽象的集合
		// 人类/动物/植物/手机
		// 对象: 类的具体的实例化
		// 你自己/窗外的一只麻雀/窗外的一棵树/你自己的手机
		
		// js声明对象
		// 1.字面量声明对象
		// {}  js中大括号包裹的值就是一个对象
		var people = {
			// 属性:属性值,
			// 属性:属性值,.......
			// key:value  键值对
			name: "张三",
			age: 21,
			sex: "男",
			// 对象可以添加函数
			run: function(){
				console.log("跑步了.....")
			}
		}
		// console.log(people)
		// 修改对象的属性值
		// 对象.属性名 = 属性值
		people.name = "张思"
		// 当对象.属性名=属性值,但是对象中原来没有这个属性,就执行添加属性的操作
		people.phone = 110
		
		// document.getElementById("money").value
		// 获取对象的属性值
		var rsAge = people.age
		// 通过key属性名找到对应的属性值
		// var rsAge = people["age"]
		console.log(rsAge)
		
		// 删除对象的属性
		delete people.age
		
		console.log(people)
		
		// 执行对象中的run函数
		people.run()
		// 给对象添加属性,属性值是一个函数
		people.eat = function(){
			console.log("早上吃饭了吗？")
		}
		// 调用对象中的函数
		people.eat()
			
		// for of 只能用于遍历可迭代的对象
		// for in 可以遍历任何对象
		// for in 遍历对象,遍历的结果就是对象的所有属性名
		for (var k in people){
			// k就是对象属性名
			// 通过属性名获取属性值
			console.log(k)
			console.log(people[k])
			// people[k] = '123'
		}
	</script>

三、数组

<script>
		<!-- 一般用于存储多个类型相同的数据，按照顺序进行存储 -->
		<!-- 数组是js中内置类型 -->
		// 1.创建数组,通过类构造函数创建数组
		// var nameList = new Array();
		// 2.字面量创建数组
		
		// 数组中存储的数据是有顺序的, 数据中的每一个元素都一个下标(索引),索引从0开始,第一条数据索引为0,第二条为1,依次类推...
		var nameList = ["hello", 3.14, 5, 6, true, {name: "张三"}]
		
		console.log(nameList)
		
		// 取出数组中的数据,根据索引取数据
		// 引用(复制)该条数据
		var pi = nameList[1]
		console.log(pi)
		console.log(nameList)
		
		// 修改数组中的数据,根据索引进行修改
		nameList[1] = 3.1415926
		console.log(nameList)
		
		// 添加数据
		// push() 向数组中追加数据,数据在数组末尾
		nameList.push(false)
		console.log(nameList)
		
		// 删除数据
		delete nameList[2]
		console.log(nameList)
		
		// 数组是可迭代对象
		// for of 遍历数组 遍历得到的是数据
		for (var data of nameList){
			
			console.log(data)
		}
		
		// for in 遍历数组 遍历得到的是索引
		for (var idx in nameList){
			// idx是遍历得到的索引
			console.log(idx)
			// 根据索引取出数组中对应的数据
			var data = nameList[idx]
			console.log(data)	
		}
		// json数据（例子）
		var data = {"data": [{"fields": {"name": "现代简约"}, "model": "main.casestyle", "pk": 1},
		 {"fields": {"name": "欧式古典"}, "model": "main.casestyle", "pk": 2}, {"fields": {"name": "新中式"},
		  "model": "main.casestyle", "pk": 3}, {"fields": {"name": "法式"}, "model": "main.casestyle", "pk": 4},
		   {"fields": {"name": "北欧"}, "model": "main.casestyle", "pk": 5}, {"fields": {"name": "美式乡村"},
		    "model": "main.casestyle", "pk": 6}, {"fields": {"name": "简欧"}, "model": "main.casestyle", "pk": 7},
		     {"fields": {"name": "现代前卫"}, "model": "main.casestyle", "pk": 8}, {"fields": {"name": "雅致主义"},
		      "model": "main.casestyle", "pk": 9}, {"fields": {"name": "地中海"}, "model": "main.casestyle", "pk": 11},
		      {"fields": {"name": "简美"}, "model": "main.casestyle", "pk": 12}, {"fields": {"name": "现代极简"}, 
		      "model": "main.casestyle", "pk": 13}, {"fields": {"name": "轻奢"}, "model": "main.casestyle", "pk": 14},
		       {"fields": {"name": "其他"}, "model": "main.casestyle", "pk": 15}], "code": 200, "msg": "success"}	
	</script>
	

四、Json数据解析步骤
1.解析数据
2.查找标签
3.遍历数据，获取idx索引
4.根据索引取出数据
5.根据索引取出标签元素
6.将数据赋值给标签，进行显示

小例子：
<body>
		
		<p class="content"></p>
		<p class="content"></p>
		<p class="content"></p>
		<p class="content"></p>
		<p class="content"></p>
		<p class="content"></p>
		<p class="content"></p>
		<p class="content"></p>
		<p class="content"></p>
		<p class="content"></p>
		<script>
			
			var originData = {"data": [{"fields": {"name": "别墅"}, "model": "main.casetype", "pk": 1},
			 {"fields": {"name": "跃层"}, "model": "main.casetype", "pk": 2}, {"fields": {"name": "普通住宅"}, 
			 "model": "main.casetype", "pk": 3}, {"fields": {"name": "会所"}, "model": "main.casetype", "pk": 4},
			  {"fields": {"name": "一居室"}, "model": "main.casetype", "pk": 5}, {"fields": {"name": "二居室"}, 
			  "model": "main.casetype", "pk": 6}, {"fields": {"name": "三居室"}, "model": "main.casetype", "pk": 7}, 
			  {"fields": {"name": "四居室"}, "model": "main.casetype", "pk": 8}, {"fields": {"name": "Loft"}, 
			  "model": "main.casetype", "pk": 9}, {"fields": {"name": "复式"}, "model": "main.casetype", "pk": 10}],
			   "code": 200, "msg": "success"}
			// 解析数据
			var data = originData.data
			// 查找标签
			var ps = document.getElementsByClassName("content")
			
			// 遍历数据,获取idx索引
			for (var idx in data){
				// 根据索引取出数据
				var houseType = data[idx].fields.name
				// 根据索引取出标签元素
				var p = ps[idx]
				// 将数据赋值给标签,进行显示
				p.innerText = houseType
			}
			
		</script>
	</body>