JAVASCRIPT
JAVASCRIPT
对象：
var obj = new Object();
<script>
function User(name){
this.name = name;
}
let user = new User("张");
document.write(user.name);
let obj = Object();
obj.name = "张";
obj.eat = function(){
console.log("我在吃。。。");
}
// 对象调方法
obj.eat();
let teacher = {
name:"张",
age:12;
drank:function(){
console.log("我在吃。。。");
}
}
teacher.drank();
</script>
判断和循环
在JS中，if（条件）
0和null,undefined为false，非0为true
<script>
//遍历数据
let arr = [1,2,3];
for(let i = 0;i < arr.length;i++){
console.log(arr[i]);
}
for(i in arr){
console.log(arr[i]);
}
//遍历对象
let student = {
name:"小",
age:10
}
for(a in student){
console.log(a);
console.log(student[a]);
}
</script>
JS内置函数：
- concat()：连接
- join()：设置分隔符来连接数组
- pop()：删除数组最后一个元素
- sort()：从小到大排序
- isNaN()：判断是 不是数字，是数字false
- parseFloat()：整数变小数
- parseInt()：把一个小数变为整数
- Number()：把一个值转成number类型
- String()：把其他类型转成字符串
-
.toFixed(1);保留小数点
- escape("张")：进行编码
- eval()：把字符串解析成js代码执行
String :
- charAt()：取出指定位置的字符
- indexOf()：判断字符是否存在，存在返回下标
- lastIndexOf()：从后向前找
- replace('a','b')：替换字符串
- split()：拆分字符串，得到数组
- substring(1，6)：字符串的截取
Math:
- ceil()：向上取整
- floor：向下取整
- round()：四舍五入
- random()：生成一个0到1的随机数
1 2 3 4 5 | //生成1-100的随机数Math.random()*100+1//随机数公式< br >//[n-m](n、m均为整数，n< m )之间的随机数的公式为n+(new Random()).nextInt(m-n+1) |
- tan()，sin(),
- E ,Π
Date：
- new Date()：获取系统时间
- getDate()：返回日期的日 1~31
- getHours()：返回时间中的时 0~23
- getMinutes()：返回时间中的分
- getSeconds()：返回时间中的秒
- getTime()：获取时间当前时间
- getYear()：获取年
事件：
- onclick单击事件
- ondblclick 双击事件
- onblur 失去焦点，失去光标
- onfocus 获得焦点
- onchange 改变
- onload 加载
DOM编程 Document Object Model
文档本身就是一个文档对象DOCUMENT
所有的HTML元素都是元素节点
所有的HTML属性都是属性节点
元素的文本时文本节点
注释节点
获取元素：
document.getElementById("div1");
document.getElementsByClassName("aa");
document.getElementsByName("a");
document.getElementsByTagName("div");
//()里是选择器
document.querySelector('#div1');//ia
document.querySelector('.div1');//class
let aa=document.querySelectorAll('#div1');
//console.log(aa[0]);
innerHTML可以获取HTML标签
innerTest只能获取到文本
doucment:
1 2 3 4 5 | let aaa= document.getElementById("div1");console.log(div1)document.getElementsByClassName("aa");console.log(div1[0])document.getElementsByName("a"); |
1 2 3 4 5 6 7 8 | //()里是选择器document.querySelector('#div');//iddocument.querySelector('.div1');//classlet aa=document.querySelector('#div1');//iaaa.innerText="< b >1312 ";//会把标签输出，不能识别标签aa.innerHTML="< b >213 ";//可以识别标签let divs=document.querySelectorAll(div);console.log(divs[0]); |
1 2 3 | 改变文本框内容let ins=document.querySelector("#txt");ins.value="123"; |
创建元素节点
<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>Document</title>
<style>
.mydiv{
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<button onclick="fun()">按钮</button>
<div id = "con"></div>
<script>
function fun(){
//新建一个元素节点
let myDiv = document.createElement("div");
myDiv.setAttribute("class","mydiv");
let con = document.querySelector("#con");
con.append(myDiv);
}
</script>
</body> <div name = "1" oo ="2" id ="3"></div>
<script>
let div = document.querySelector("div");
//获取非原生属性
div.getAttribute("name");
div.getAttribute("oo");
//设置元素的属性
div.setAttribute("class","nn");
div.setAttribute("oo","34");//重复设置会覆盖
//删除属性
div.removeAttribute("oo");
//获取元素所有属性,返回属性节点的映射
div.attributes;
div.attributesp[1];
</script>
案例：用户输入指定用户名密码提示登录成功
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | < p > 账号：< input type="text" id="user"> < span id="sp"> < p > 密码：< input type="password" id="pass"> < p > < input type="button" value="登录" onclick="lu()"> < script > function lu(){ let num=3.333333; let u=document.querySelector("#user").value; let p=document.querySelector("#pass").value; let sp=document.querySelector("#sp"); // if(u.value=="a"&&p.value==1) // { // alert("登录成功"); // }else{ // alert("用户名或密码错误"); // } if(u=='a'){ sp.innerHTML=u; }else{ sp.innerHTML="123"; } document.write() } |
案例：三级联动下拉菜单
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | < select id="sheng" onchange="sets()"> < option >----请选择省---- < option value="ji">吉林 < option value="nei">内蒙古 < select id="shi" onchange="setss()"> < option >----请选择市---- < select id="qu"> < option >----请选择区---- < script > function sets(){ let sheng=document.querySelector("#sheng").value; let shi=document.querySelector("#shi"); // let qu1=document.querySelector("#qu"); let html=shi.innerHTML;//获取市的代码 let qu=document.querySelector("#qu"); qu.innerHTML="< option >----请选择区---- "; if(sheng=="ji"){ html="< option >----请选择市---- < option value='chang'>长春 < option value='shen'>沈阳 "; shi.innerHTML=html; }else if(sheng=="nei"){ html="< option >----请选择市---- < option value='chi'>赤峰市 < option value='hu'>呼和市 "; shi.innerHTML=html; } } function setss(){ let shi1=document.querySelector("#shi").value; let qu1=document.querySelector("#qu"); let htmlq=qu.innerHTML;//获取区的代码 if(shi1=="chang"){ htmlq="< option value='xin'>新城区 < option value='gao'>高新区 "; qu1.innerHTML=htmlq; }else if(shi1=='shen'){ htmlq="< option value='sh'>沈阳区 < option value='tie'>铁岭区 "; qu1.innerHTML=htmlq; } if(shi1=="chi"){ htmlq="< option value='hong'>红山区 < option value='song'>松山区 "; qu1.innerHTML=htmlq; }else if(shi1=='hu'){ htmlq="< option value='hushi'>户区 < option value='meng'>蒙区 "; qu1.innerHTML=htmlq; } } |
案例：计算器
jisuanqi.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | < div class="zhong"> < div class="zhongz"> < form > < input class="qc" type="submit" onclick="clear()" value="清除" > < input class="shuc" type="text" onclick="" id="txt" placeholder="结果显示"> < input class="shuzijian" type="button" onclick="get(this.value)" value="7" > < input class="shuzijian" type="button" onclick="get(this.value)" value="8" > < input class="shuzijian" type="button" onclick="get(this.value)" value="9" > < input class="shuzijian" type="button" onclick="get(this.value)" value="/" > < input class="shuzijian" type="button" onclick="get(this.value)" value="6" > < input class="shuzijian" type="button" onclick="get(this.value)" value="5" > < input class="shuzijian" type="button" onclick="get(this.value)" value="4" > < input class="shuzijian" type="button" onclick="get(this.value)" value="*" > < input class="shuzijian" type="button" onclick="get(this.value)" value="3" > < input class="shuzijian" type="button" onclick="get(this.value)" value="2" > < input class="shuzijian" type="button" onclick="get(this.value)" value="1" > < input class="shuzijian" type="button" onclick="get(this.value)" value="-" > < input class="shuzijian" type="button" onclick="get(this.value)" value="|" > < input class="shuzijian" type="button" onclick="get(this.value)" value="&" > < input class="shuzijian" type="button" onclick="get(this.value)" value="%" > < input class="shuzijian" type="button" onclick="get(this.value)" value="+" > < input class="shuzijianz" type="button" onclick="get(this.value)" value="0"> < input class="shuzijian" type="button" onclick="get(this.value)" value="." > < input class="shuzijian" type="button" onclick="sum()" value="=" > < script src="myjs/jisuanqi.js" type="text/javascript"> |
jisuanqi.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | function clear(){ //document.getElementById("txt").value=""; document.querySelector("#txt").value="";}function get(value){ //document.getElementById("txt").value+=value; document.querySelector("#txt").value+=value;}function sum(){ //let re=0; //re= document.getElementById("txt").value; //document.getElementById("txt").value=""; //document.getElementById("txt").value=eval(re).toFixed(3); let re=0; re=document.querySelector("#txt").value; document.querySelector("#txt").value=""; document.querySelector('#txt').value=eval(re).toFixed(3);} |
jisuanqi.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | .zhong{ margin:auto; padding-top: 100px; width: 800px; height: 800px; background-color: aqua;}.zhongz{ margin:auto; padding-left: 50px; padding-top: 50px; width: 500px; height: 700px; background-color: rgb(167, 223, 250); border-radius: 5px;}.qc{ width: 100px; height: 100px; background-color: coral; float: left; /* margin-right: 10px; */ border-radius: 5px; font-size: 40px; font-family: '楷体';}.shuc{ margin-left: 10px; width: 300px; height: 95px; border-radius: 10px; border: 2px solid burlywood; font-size: 40px; font-family: '楷体';}.shuzijian{ width: 100px; height: 100px; background-color: coral; margin-top: 10px; border-radius: 10px; font-size: 40px; font-family: '楷体';}.shuzijianz{ width: 205px; height: 100px; background-color: coral; margin-top: 10px; border-radius: 5px; font-size: 40px; font-family: '楷体';}body{ color: black;} |
