一,js 函数
一测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>测试js函数</title>
<script>
//统计1~100里4的整数倍数的和
//1方式1:
//1.定义js函数
function test1() {
var sum = 0; //定义总量,记录总和
for (var i = 1; i < 100; i++) {
if (i % 4 == 0) {
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;
};
//调用函数
var tt = test4(1, 2, 3);
console.log(tt);
var t = test3();
console.log(t);
test2();
</script>
</head>
<body></body>
</html>
二js对象
测试
<!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对象提供的各种属性和方法,方便快速的定位网页中的所有元素
–2,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>