python JS相关
Javascript
基本数据类型
数字：Number 字符串： String 布尔：Boolean
Undefined:是一个数据类型
Null:null 针对对象用的,表示尚未存在的对外
引用数据类型：
对象：object
一、引入js方式1
<!--<script src="test.js"></script>-->
<!--引入js方式2-->
<script>
// alert(666)
// var x;
// x=12
// if(1){
// alert(111)
// }else
// {
// alert(222)
// }
// typeof: 基本数据类型的区分
// console.log(typeof 123);
// console.log(typeof "hello");
// console.log(typeof true);
// console.log(typeof null);
// console.log(typeof undefined);
//
// console.log(typeof [12,4,5]);
// console.log(typeof [{"name":"jack"}]);
// i++ i--
<!--var i-->
<!--i=10-->
<!--console.log(i++)-->
<!--var n=NaN-->
<!--console.log(n>5)-->
<!--console.log(n==NaN); //NAN只要参与比较，布尔值为false-->
<!--console.log(2==="2")-->
<!--console.log(2=="qw")-->
<!--console.log("3">"40")-->
<!--</script>-->
######################################################################################################
二，Js控制语句及异常处理
<body>
<p>第一天</p>
<p>第二天</p>
<p>第三天</p>
<p>第四天</p>
<div>一周</div>
</body>
<script>
//if 循环
// var name="jack";
// if (name=="zhangsan"){
// alert("不好听")
// }
// else if(name=="lishi"){
// alert("太普通")
// }
// else{
// alert("this is jack")
// }
//switch 语句
// var week="Friday";
//
// switch (week){
// case "Monday":alert("星期一"); break;
// case "Tuesday":alert("星期二"); break;
// case "Wednesday":alert("星期三"); break;
// case "Thursday":alert("星期四"); break;
// case "Friday":alert("星期五"); break;
// case "Saturday":alert("星期六"); break;
// case "Sunday":alert("星期天"); break;
// }
// for语句
// for(var i=0;i<10;i++){
// document.write("welcome " +i+"<br>")
// }
// var attr=[111,222,333];
// for(var i=0;i<3;i++){
// document.write(i);
// document.write(attr[i]+"<br>")
// }
//用for循环，来取标签内容
// var else_p=document.getElementsByTagName("p")
// console.log(else_p)
//
// for(var i=0;i<else_p.length;i++){
// console.log(i)
// console.log(else_p[i])
// }
//用while for 循环计算1 + ..100的值
//用while
// var i=0;
// var sum=0;
// while(i<=100){
// sum+=i;
// i++;
// }
// console.log(sum)
//用for
// var sum=0;
// for(var i=1;i<101;i++){
// sum+=i;
// }
//console.log(sum)
//JS异常处理
// try{
// console.log(123);
// throw Error("define error");
//
// }
// catch(e){
// console.log(e);
// }
// finally{
// console.log("finally");
// }
</script>
################################################################################################################
三、Js字符串对象
<script>
var str1="hello"
// var str2= new String("hello2")
// console.log(typeof str1) //类型是字符串
// console.log(typeof str2) //类型是对象
//字符串的属性
// console.log(str1.length) //属性长度
//1.字符串的编排方法
// console.log(str1.italics())
// console.log(str1.anchor())
//大小写转换
// console.log(str1.toLowerCase())
// console.log(str1.toUpperCase())
//查字符串
// var str="welcome to the world"
// var str2=str.indexOf("l")
// var str3=str.lastIndexOf("l")
// alert(str2)
// alert(str3)
// sunstr sunstring方法
// console.log(str1.substr(1,3));
// console.log(str1.substring(1,3));
// slice相当于python的切片
// console.log(str1.slice(1,4))
// console.log(str1.slice(-1,-4))
//替代字符串
// var str3="jackmilk"
// var str4=str3.replace("mi","oo")
// alert(str4)
//分割字符串
// var str2="一,二,三,四,五,六,日"
// var strArray=str2.split(",");
// alert(strArray[1])
//连接字符串
// var str5="abc";
// var str6=str5.concat(",hello")
// alert(str6)
</script>
##################################################################################################
四、Js数组对象
<script>
// Array数组
//创建方式
// arr1=[1,"hello",[2,14],{"name":"milk"}]
// arr2=new Array(3)
// arr3=new Array(1,"hello",true,[23.56])
//类型都是对象
// console.log(typeof arr1)
// console.log(typeof arr2)
// console.log(typeof arr3)
// 注意： var arr4=new Array(10) 10是size
// console.log(arr1.length)
//数组方法
//1. join方法
// var arr5=[1,3,5,6,"jac"]
// console.log(arr5.join("**"))
//toString()
// var arr1=[1,3,5,6,"jac"]
// var ret2=arr1.toString();
// console.log(ret2)
// console.log(typeof ret2)
// concat() 拼接字符串
// var arr5=[1,2,3];
// var ret3=arr5.concat([55,66])
// console.log(ret3)
// console.log(typeof ret3)
// reverse 反转,排序
// var arr6=[23,89,45,67,78]
// console.log(arr6.reverse())
// console.log(arr6.sort())
// 用函数写sort比较大小
// function f(a,b) {
// return a-b
//
// }
// console.log(arr6.sort(f))
//数组的进出栈
// push(添加到后面) pop（删除，先进后出） 栈操作
// var arr7=[1,2,3];
// arr7.push(7,8,0);
// arr7.push("hello",19);
// console.log(arr7);
// console.log(arr7.length);
//
// console.log(arr7.pop())
// console.log(arr7.pop())
// console.log(arr7.length)
//shift(先删除后添加进去的) unshift（增加到前面） 栈操作，先 var arr8=[5,6,7]
// var arr8=[5,6,7]
// arr8.unshift([11,22])
// arr8.unshift(true,"yes");
// arr8.shift();
// console.log(arr8)
// console.log(arr8.length)
</script>
#########################################################################################################
五、Js函数对象
<script>
//函数的第一种表达方式
// function f(x,y) {
// alert(123)
// return x+y //null
// }
// console.log(f(45,90))
//函数的第二种表达方式
// function foo(name) {
// console.log("hello"+name)
//
// }
// foo("jack")
// var obj=new Function("name","console.log(\"hello\"+name)")
// obj("milk")
//函数的调用
// function add(x,y,z) {
// return x + y +z
//
// }
// console.log(add(1,2,3,4,5))
// console.log(add(1,2))
// console.log(add(1,2,"abv"))
//面试题
// function f(x,y) {
// return x+y;
// }
// var f=1
// var b=2;
// f(f,b)
// 执行结果是：f is not a function
//arguments可无限量存储
// function f(a,b) {
// console.log(arguments)
// return a+b;
// }
// console.log(f(12,52,85,63))
//arguments任意数相关的结果
// function add() {
// var sum=0;
// for (var i=0;i<arguments.length;i++){
// sum+=arguments[i]
// }
// return sum
// }
// console.log(add(41,19,36,44,11))
//匿名函数
//方式1
// var func =function (arg) {
// return "jack"
// }
// func("hello")
//方式2
// (function (arg) {
// alert(arg)
// })("mark")
</script>
####################################################
六、Js作用域
<script>
// js的作用域和py相似，if while等控制语句没有自己的作用域 ，而函数是有自己的作用域
if(1){
var x=10
}
console.log(x);
function f() {
var y=20;
}
console.log(y)
// x可以找到， y不可以
#########################################################################
七 Js windows方法
// windows对象方法
//1. alert ，仅用来提醒
// alert("hello")
// 2.confirm, 有一个返回值 true false
// var ret=window.confirm("Hello World")
// console.log(ret)
//3.prompt 输入内容，返回输入的内容
// var ret2=window.prompt("Measss....")
// console.log(ret2)
// 4.open打开一个新窗口,close关闭
// open("https://www.baidu.com")
//5.setTimeout clearTimeout 在指定的毫秒数后调用函数或计算表达式
// function f() {
// console.log("hello....")
// }
// var e=setTimeout(f,1000);
// clearTimeout(e);
//6.setInteral clearInteral 指定周期，来调用函数或计算表达式
<body>
<input type="text" id="id1" onclick="begin()" >
<button onclick="end()">停止</button>
<script>
//6.setInteral clearInteral 指定周期，来调用函数或计算表达式
function Showtime() {
var current_time=new Date().toLocaleString();
var ele=document.getElementById("id1")
ele.value=current_time;
}
var clock1;
function begin() {
if(clock1==undefined){
Showtime()
clock1=setInterval(Showtime,1000)
}
}
function end() {
clearInterval(clock1)
clock1=undefined;
}
</script>
</body>
#######################################################################################
1 location方法
<body>
<button onclick="f()">刷新</button>
<script>
// location.assign("https://www.baidu.com/")
function f() {
// location.reload() //刷新
location.replace("https://www.baidu.com/")
}
</script>
2. history方法
##history1.html
<body>
<a href="history对象1.html">click</a>
<!--<button onclick="history.forward()">点击</button>-->
<button onclick="history.go(1)">点击</button>
</body>
##history2.html
<body>
<!--<button onclick="history.back()">返回</button>-->
<button onclick="history.go(-1)">返回</button>
</body>
3. Js_DOM对象
------------------ 全局查找标签的方法 -----------------
q2=document.getElementsByClassName("v1")
q3=document.getElementsByName("111")[0]
q4=document.getElementsByTagName("div")
q1=document.getElementById("p1")
----------------------局部查找标签的方法--------------------
ele.getElementsByClassName("v2")
ele.getElementsByTagName("")
<body>
<div class="div1">
<p class="ppp">ggg</p>
<p class="p1">hello p</p>
<div class="div2">welcome div2
<div class="div3"> dive</div>
<a href="#"></a>
</div>
</div>
<p id="i1">jjj</p>
<script>
//节点自身属性
// var ele=document.getElementsByClassName("p1")[0]
// console.log(ele)
//
// console.log(ele.nodeType)
// console.log(ele.nodeName)
// console.log(ele.innerHTML) //拿标签的内容,用的最多
// ele.innerHTML="hello world"
//导航属性
// var p_ele=ele.parentNode; //找它的上一层(父标签)
// console.log(p_ele.nodeName)
// var b_ele=ele.nextSibling
// console.log(b_ele.nodeName)
//
// var b_ele2=ele.nextElementSibling; //兄弟标签
// console.log(b_ele2.nodeName)
// console.log(b_ele2.innerHTML)
// e.g
// var ele4=document.getElementsByClassName("div1")[0]
// var ele5=ele4.getElementsByTagName("a")
// console.log(ele5)
// console.log(ele5.innerText)
// var ele11=document.getElementById("i1")
// ele11.onclick=function () {
// alert(123)
// }
</script>
##################################################################
1. onsubmit对象
</head>
<body>
<form action="" id="form">
<input type="text" name="username">
<input type="submit" value="提交">
</form>
<script>
var ele=document.getElementById("form");
ele.onsubmit=function (e) {
// alert(提成成功)
// return false; //return flase代表表单数据不提交到后端 ，
e.preventDefault() //也是阻止表单数据提交到后端
}
</script>
</body>
2.stoppropagation 事件传播
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer{
width: 300px;
height: 300px;
background-color: #396bb3;
}
.inner{
width: 200px;
height: 200px;
background-color: #84a42b;
}
</style>
</head>
<body>
<div class="outer " onclick="func2()">
<div class="inner" ></div>
</div>
<script>
//通过如下的两个方式，点击innner的区别的时候，会出现打印 i am inner and outter,
//为了阻止此事件的发生可使用 stoppropagation属性
// function func1() {
// alert("I am inner!")
// }
var ele=document.getElementsByClassName("inner")[0];
ele.onclick=function (e) {
alert("I am Inner!")
e.stopPropagation()
}
function func2() {
alert("I am outer!")
}
</script>
</body>
################################################################################################
1.模态对话框（相当于chuiti的注册页面）
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
height: 1800px;
background-color: white;
}
.shade{
position: fixed;
top: 0;
left:0;
right: 0;
bottom: 0;
background-color: green;
opacity: 0.35;
}
.mode1{
width: 200px;
height: 200px;
background-color: darkorange;
position: absolute;
top:50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="content">
<button onclick="show()">show</button>
hellohellohellohellohellohellohello
</div>
<div class="shade hide"></div>
<div class="mode1 hide">
<button onclick="cancel()">show</button>
</div>
<script>
function show() {
var ele_shade=document.getElementsByClassName("shade")[0]
var ele_mode1=document.getElementsByClassName("mode1")[0]
ele_shade.classList.remove("hide")
ele_mode1.classList.remove("hide")
}
function cancel() {
var ele_shade=document.getElementsByClassName("shade")[0]
var ele_mode1=document.getElementsByClassName("mode1")[0]
ele_shade.classList.add("hide")
ele_mode1.classList.add("hide")
}
</script>
</body>
2.正反选
</head>
<body>
<button onclick="selectAll()">全选</button>
<button onclick="cancel()">取消</button>
<button onclick="reverse()">反选</button>
<table border="1px">
<tr>
<td><input type="checkbox"></td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
</table>
<script>
function selectAll() {
var inputs=document.getElementsByTagName("input");
for (var i=0;i<inputs.length;i++){
var input=inputs[i]
input.checked=true
}
}
function cancel() {
var inputs=document.getElementsByTagName("input");
for (var i=0;i<inputs.length;i++) {
var input = inputs[i]
input.checked = false;
}
}
function reverse() {
var inputs=document.getElementsByTagName("input");
for (var i=0;i<inputs.length;i++) {
var input = inputs[i]
// if(input.checked){
// input.checked=false
// }else {
// input.checked=true;
// }
input.checked=!input.checked; //方法2，用反选代替上面的if else
}
}
</script>
</body>
3.二级联动（相于地址的中省份，市的选择）
<body>
<select id="provinces">
<option value="">请选择省份</option>
</select>
<select name="" id="citys">
<option value="">请选择城市</option>
</select>
<script>
data={"浙江省":["杭州","宁波"],"江苏省":["苏州","南京"],"山东省":["济南","青岛"]}
var pro_ele=document.getElementById("provinces");
var city_ele=document.getElementById("citys")
for(var i in data){
var ele=document.createElement("option")
ele.innerHTML=i;
pro_ele.appendChild(ele);
}
pro_ele.onchange=function() {
console.log(this.selectedIndex)
console.log(this.options[this.selectedIndex])
var citys = data[this.options[this.selectedIndex].innerHTML];
city_ele.options.length=1
for (var i=0; i<citys.length;i++) {
var ele = document.createElement("option");
ele.innerHTML=citys[i]
city_ele.appendChild(ele)
}
}
</script>
</body>
浙公网安备 33010602011771号