cgb2107-day10 ﹏ヽ暗。殇╰゛Y 2021-09-11 02:06 317阅读 0赞 ### 文章目录 ### * * 一,JS函数 * * \--1,测试 * 二,JS对象 * * \--1,测试 * 三,DOM技术 * * \--1,概述 * \--3,document对象 * \--3,测试 * 四,JSON * * \--1,概述 * \--2,测试 ## 一,JS函数 ## ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAY2dibHB4_size_20_color_FFFFFF_t_70_g_se_x_16] ### –1,测试 ### <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试 js函数</title> <script> //统计1~100里4的整数倍数的和 //方式1: //1. 定义js函数 function test1(){ var sum = 0 ;//定义变量,记录总和 for(var i=1;i<=100;i++){ if(i % 4 == 0){ //4的整数倍 sum = sum + i ; //求和 } } return sum ;//把算完的和返回给调用者 } //2.调用函数 var a = test1(); console.log(a); //方式2: //1.定义函数 var test2 = function(){ console.log(100); } var test3 = function(){ return 666; //返回值,交给调用者保存 } var test4 = function(a,b,c){ //参数列表等着调用者传入具体的值 return a+b+c; } //2.调用函数 var tt = test4(1,2,3); console.log(tt); var t = test3(); console.log(t); test2(); </script> </head> <body> </body> </html> ## 二,JS对象 ## ### –1,测试 ### <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试 JS的对象</title> <script> //2. js的自定义对象 //方式2: {name: 'jack', age: 20} //练习:创建新的js对象 var car = { //绑定属性 k:v color : 'red' , price : 9.9 , //绑定函数 run : function(a,b){ console.log(a+b); }, stop : function(x,y,z){ return x+y+z ;//返回给调用者 } } //调用属性 console.log(car.color + car.price); //调用函数 var res = car.stop(1,2,3); console.log(res); car.run(1,2); console.log(car); var teacher = { //绑定属性 name : 'jack', age : 20 , //绑定函数 run : function(){ console.log(100); }, eat : function(){ console.log(200); } } teacher.eat();//调用函数 teacher.run(); console.log( teacher.name );//调用属性的值可以打印或修改 //方式1: function Student(){ }//声明对象 var s = new Student();//创建对象 //绑定属性 s.name='蔡徐坤'; s.hobby='唱跳rap'; //绑定函数 s.sing=function(){ console.log("solo..."); } console.log(s); s.sing(); function Person(){ }//声明对象 var p = new Person();//创建对象 //动态的给对象绑定属性 p.name = 'jack'; p.age = 20; //动态的给对象绑定函数 p.eat = function(){ console.log(100); } console.log(p); p.eat();//调用函数 //1.js的内置对象 //document对象,JSON对象...重点后面讲 //window对象的常用功能--了解 // window.alert('123');//弹出框 // window.confirm('请选择');//确认框 // window.prompt('请输入');//输入框 // window.document //获取document文档对象 // //string对象的常用功能--了解 // alert('123'.length);//求字符串的长度 // alert('123'.concat("hello"));//拼接字符串 // //number对象的常用功能--了解 // alert(3.3333.toFixed(2));//约束小数位数,参数是小数的位数 // var a = parseInt('100')+1 ;//把字符串转成数字 // alert(a);//101 </script> </head> <body> </body> </html> ## 三,DOM技术 ## ### –1,概述 ### 全称是 文档对象模型.用来 利用document对象提供的各种属性和方法,方便快速的定位网页中的所有元素 ### –3,document对象 ### 1, 获取对象: window.document 2, 常用的方法: 按照id的值获取元素: getElementById(id属性的值)–只会获取到一个元素 按照name的值获取元素: getElementsByName(name属性的值)–获取到多个元素 , 存入数组 按照class的值获取元素: getElementsByClassName(class属性的值)–获取到多个元素 , 存入数组 按照标签名的值获取元素: getElementsByTagName(标签的名字)–获取到多个元素 , 存入数组 直接向网页输出: write() 3, 常用的属性: title–返回网页的标题 id–设置或返回元素的id innerHTML–设置或返回元素的内容 ### –3,测试 ### <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试 DOM技术</title> <!-- DOM: document object model 文档对象模型,用来利用js的技术快速的操作元素 利用核心对象document提供的API完成 --> </head> <body> <!-- onclick给元素设置鼠标点击事件,调用指定函数test1() --> <div onclick="test1()">我是div1</div> <div name="n1">我是div2</div> <div class="c1">我是div3</div> <span id="d1">我是span1</span> <span name="n1">我是span2</span> <a href="#" class="c1">点我</a> <script> // 1. 定义函数--当点击我是div1时触发 function test1(){ //需求3:输出第二个class="c1"的元素内容 var data2 = document.getElementsByClassName("c1")[1].innerText; console.log(data2); //修改元素内容 // document.getElementsByClassName("c1")[1].innerText='<p>我是p1</p>';//不解析标签 document.getElementsByClassName("c1")[1].innerHTML='<p>我是p1</p>';//解析 //修改元素的样式css变字的颜色 document.getElementById("d1").style.color='red' ; //需求2:输出第一个name="n1"的元素内容 //document.getElementsByName根据name属性获取到多个元素,存入数组 //[0]按照下标,获取到数组里的第一个元素 var data = document.getElementsByName("n1")[0].innerText ; console.log(data); //也可以选中元素后,直接修改内容 document.getElementsByName("n1")[0].innerHTML='<h1>我又变了...</h1>' ; //document对象提供的innerHTML和innerText属性的区别?前者可以解析HTML代码 //需求1:输出了id=d1的元素内容 var a = document.getElementById("d1");//获取id=d1的元素 console.log(a);//输出了整个元素 console.log(a.innerHTML);//获取元素的内容 a.innerHTML='我变了....';//修改元素的内容 } </script> </body> </html> ## 四,JSON ## ### –1,概述 ### 就是一个字符串,作用就是用来,完成 浏览器 和 服务器 之间的 数据的交换 规定了 浏览器 和 服务器 之间的 数据的 格式 : ’ “name” : “jack” ’ ### –2,测试 ### <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试 JSON字符串</title> <!-- JSON用来完成 浏览器和服务器之间 的数据交换 的格式 --> <script> // 1. 定义一个简单的json字符串 var a = '"name":"jack"' ; console.log(a); console.log(a.length);//求字符串的长度 // 2. 定义一个json对象 var b = '{"name":"jack","age":"20"}' ; console.log(b); var c = b.concat('hello');//b拼接字符串 // 3. 定义一个json数组 var d ='[{"firstname":"tom","lastname":"chen"},{"firstname":"jerry","lastname":"wang"}]'; console.log(d); //问题: 解析json字符串里的数据太麻烦,还要对字符串进行切割截取.... //解决方案:把一个json字符串转成JS对象,再通过对象方便的调用属性的值--利用JSON对象 </script> </head> <body> </body> </html> [watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAY2dibHB4_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20210911/db8e0da83a4b48c3a98d14bfd634047a.png
相关 cgb2107-day08 文章目录 一,模拟 服务器解析浏览器发来的数据 二,CSS选择器 \--1,概述 \--2,简单选择器 旧城等待，/ 2021年09月11日 03:36/ 0 赞/ 283 阅读
相关 CGB2107-DAY10总结复习 DAY10 准备：下载API手册 学习的大前提： API是一些预先设定好的函数/接口，所以学习的重点应该是先使用，先学习它们的使用方式和效果 查询API手册的 向右看齐/ 2021年09月09日 10:24/ 0 赞/ 302 阅读
小鱼儿
我就是我
我不是女神ヾ
╰+攻爆jí腚メ
傷城~
朱雀
向右看齐
还没有评论，来说两句吧...