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-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:
let aaa= document.getElementById("div1");
console.log(div1)
document.getElementsByClassName("aa");
console.log(div1[0])
document.getElementsByName("a");
//()里是选择器
document.querySelector('#div');//id
document.querySelector('.div1');//class
let aa=document.querySelector('#div1');//ia
aa.innerText="< b >1312 ";//会把标签输出，不能识别标签
aa.innerHTML="< b >213 ";//可以识别标签
let divs=document.querySelectorAll(div);
console.log(divs[0]);
改变文本框内容
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>
案例：用户输入指定用户名密码提示登录成功
< 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()
}
案例：三级联动下拉菜单
< 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
< 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
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
.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;
}
浙公网安备 33010602011771号