<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>welcome</title>
<script>
alert('welcome');
</script>
<script src="js/test01.js"></script>
</head>
<body>
</body>
</html>
test01.js
alert('hello world!')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>alert</title>
<script>
n1 = 1;
n2 = 2;
alert(n1+n2);
if(n1<n2 && 3>2){
alert('cj'+'true')
}else if(4>3){
alert('love'+'true')
}else{
alert('gjl'+'true')
}
//JS严格区分大小写
//在浏览器按F12后显示elements是左边HTML与右边CSS
//按console进入控制台输入alert(n1);回车即可执行
//如果在控制台按console.log(n1)那就在控制台输出
//按sources可以看源代码并加断点,刷新页面,调试
//按network,刷新页面,可以看请求,响应,cookie
//按application可以看缓存
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据类型基础</title>
<script>
console.log(123)
console.log(123.1)
console.log(NaN)
console.log(Infinity)
console.log(2>1)
console.log('abc')
console.log(!(2>1 && 2<1)||3>4)
console.log(3.0=='3') //值一样(请坚持用===)
console.log(3.0==='3') //类型一样值一样
console.log(NaN===NaN) //NaN与所有值都不等
console.log(isNaN(NaN)) //NaN判断
console.log(1/3===(1-2/3)) //false
console.log(Math.abs(1/3-(1-2/3))<0.0001) //true
console.log(null)
console.log(undefined)
console.log( )
arr=[1,2,3,4,5]
for (let i=0; i<arr.length; i++){
console.log(i+arr[i])
}//数组就是列表
console.log(arr[5])//undefined
person={
name:'cj',
age:30,
tags:['love','gjl']
}//不得不说,真的很像python
console.log(person.name,person.age,person.tags)
王者荣耀='倔强青铜'
console.log(王者荣耀)
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据类型重点</title>
<script>
//1、严格检查 所有变量定义强制用let
'use strict'
//2、转义字符
let i = '\'1';
//3、let 设置循环变量的那部分是父作用域,循环体内是单独的子作用域
console.log(i)
for (let i = 0; i < 2; i++) {
let i = 'abc';
console.log(i);
}
//4、反引号 可以读取多行字符串,输出时建议不要用${}
let s=`
a
b
c`
console.log(`你好呀${s}`+s)
//5、字符串 获取长度,下标录值,大小写,下标,子串
let stu='student'
console.log(stu.length)
console.log(stu[0])
console.log(stu.toUpperCase())
console.log(stu.indexOf('t'))
console.log(stu.substring(2,5))
//6、字符串 改值
stu='a'//变量赋值是可以的
//stu[0]='a'但这行是不行的
console.log(stu)
console.log("yyyy-MM-dd-hh-mm-ss".replace("-","/"))
console.log("yyyy-MM-dd-hh-mm-ss".replace(/-/g,"/"))
//7、数组
let arr=[1,2,3,4,5]
console.log(arr)
console.log(arr.length)
arr.length=9
arr[0]=11
arr[6]=20
console.log(arr)
console.log(arr[5])//undefined
console.log(arr.indexOf(20))//6
console.log(arr.indexOf(22))//-1
console.log(arr.includes(20))//true
let brr=arr.slice(3,7)//切片
console.log(brr)
brr.push(100)//后入
console.log(brr)
brr.pop()//后出
console.log(brr)
brr.unshift(200)//前入
console.log(brr)
brr.shift()//前出
console.log(brr)
function sortNumber(a,b){
return a - b
}
brr.sort(sortNumber)//排序
console.log(brr)
brr.reverse()//翻转
console.log(brr)
let crr=brr.concat([33,44,55])
console.log(brr)//没变
console.log(crr)//变了
let ss=crr.join('-')//连接(empty跳过)
console.log(ss)
let drr=[[1,2],[3,4],['5','6']]
console.log(drr)
console.log(drr[1][1])
console.log(drr.length)
//8、对象
let person={
name:'cj',
age:24,
sex:'male'
}
console.log(person)
console.log(person.name)
console.log(drr.love)//undefined
drr.love='gjl'
console.log(drr.love)//gjl
delete drr.love
console.log(drr.love)//undefined
delete drr.name//定义时生成的属性不能删
console.log(person.name)//仍然存在
console.log('age' in person)//true
console.log('toString' in person)//true,在控制台输出person点开下面的__proto__可以看到继承的方法有toString
console.log(person.hasOwnProperty('toString'))//false
console.log(person.hasOwnProperty('age'))//true
//JS中键是字符串,值是任意对象
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流程控制</title>
<script>
'use strict'
let age=3
if(age<3){
console.log('1')
}else if(age<5){
console.log('2')
}else{
console.log('3')
}
while(age<10){
age=age+1
console.log(age)
}
for(let i=0;i<10;i++){
console.log(i)
}
let arr=[1,2,3,4,5]
for(let i in arr){
console.log(i)//读下标,好像没什么卵用
}
for(let i of arr){
console.log(i)//用of才是读值,有用!
}
arr.forEach(function(value){console.log(value)})
//把arr里逐个元素作为参数value扔给function执行
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>map/set</title>
<script>
'use strict'
let cj_map = new Map([['cj',100],['love',200],['gjl',300]])
console.log(cj_map.get('love')) //用get获得值
cj_map.set('forever',1314) //用set设键值对(没就新增)
console.log(cj_map)
cj_map.delete('cj') //用delete删键值对
console.log(cj_map)
console.log(cj_map.keys())
console.log(cj_map.values())
let cj_set = new Set([12,3,4,54])
cj_set.add(2)
cj_set.delete(4)
console.log(cj_set.has(54))
console.log(cj_set.keys())
console.log(cj_set.values())
let cj_arr=[3,4,5]
console.log(cj_arr)
for(let x of cj_arr){
console.log(x)//3,4,5
}
for(let x of cj_map){//值
console.log(x) //长为2的list(事实证明可遍历)
console.log(x[0],x[1]) //取出来后用下标读即可
}
for(let x of cj_set){
console.log(x)//12,3,54,2
}
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数与变量作用域 </title>
<script>
'use strict'
function cj_abs(x,...rest) { // 另一种写法是let cj_abs=function(x){
// if (typeof x!== 'number'){
// throw 'Not a number'
// }
for (let i=0;i<arguments.length;i++){
console.log(arguments[i])
}
console.log(rest)
if(x>=0){
return x
}else{
return -x
}
}
console.log(cj_abs(-10),'test1')
console.log(cj_abs(10),'test2')
console.log(cj_abs(10,20,30),'test3') //只读取10
console.log(cj_abs(),'test4') //传入NaN,上面throw打开会报错
//如果函数没显示返回,就是返回undefined
//JS无论传多少参数都不报错,异常要手动设
//变量的作用域就看{}即可,如果内{}与外{}有同名变量,则内{}变量覆盖外部变量
let tt=1
function func() {
let tt=2
console.log(tt)
}
console.log(tt)
func()
console.log(tt)
//所有var定义的全局变量都会绑定在window对象下,但let不会
let x=100
console.log(x)
console.log(window.x)
var xx=100
console.log(xx)
console.log(window.xx)
//同理alert也是绑定在window下
window.alert(xx)
window.alert(window.xx)
//重写
var old_alert=window.alert;
window.alert=function(){} //重写
window.alert(123) //失效
window.alert=old_alert
window.alert(123) //生效
//规范:把自己的变量全部放入自己定义的唯一空间名字,避免全局命名冲突
var CJApp={}
CJApp.name='cj';
CJApp.add=function(a,b){
return a+b
}
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>方法</title>
<script>
'use strict'
function getAge(x) {
let now=new Date().getFullYear()
return now-this.birth-x//谁调用它谁就是this
}
let cj={
name:'cj',
birth:1996,
age:getAge//可以理解为函数名就是函数指针
}
let gjl={
name:'gjl',
birth:1997,
age:getAge//可以理解为函数名就是函数指针
}
console.log(cj.age(1)) //24
console.log(gjl.age(2)) //22
console.log(getAge.apply(cj,[1])) //24
console.log(getAge.apply(gjl,[2])) //22
//注意:即使不传参,apply中的[]也要保留
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>date</title>
<script>
'use strict'
/*
typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"
*/
let now=new Date() //不传参Date()就是返回现在时间
now.getFullYear() //2021
now.getMonth() //一月是0
now.getDate() //23
now.getDay() //星期6
now.getHours() //19点
now.getMinutes() //58分
now.getSeconds() //41秒
now.getTime() //1611403121613时间戳
now = new Date(1611403121613)//Sat Jan 23 2021 19:58:41 GMT+0800 (中国标准时间)
now.toLocaleString()//"2021/1/23 下午7:58:41",这是string对象不是Date对象
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSON</title>
<script>
'use strict'
let user={
name:'cj',
age:3,
sex:'男'
};
let jsonUser=JSON.stringify(user)
//控制台输入console.log(jsonUser)
//控制台输入console.log(jsonUser)
//控制台输出{"name":"cj","age":3,"sex":"男"}
let obj=JSON.parse('{"name":"cj","age":3,"sex":"男"}')
//控制台输入console.log(obj)
// 控制台输出{"name":"cj","age":3,"sex":"男"}
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类与继承</title>
<script>
'use strict'
//第一种创建student对象(对象也是类)的写法
let student={
name:'CJ',
age:23,
run:function () {
console.log(this.name+" ran at "+this.age+".")
}
}
let gjl={
name:'GJL'//有自己的name属性则下面的继承不会用父对象更改
}
//第一种继承的写法(继承的student既是类也是对象)
gjl.__proto__=student
gjl.run()
let bird={
fly:function () {
console.log(this.name+" flew.")
}
}
gjl.__proto__=bird
gjl.fly()
//gjl.run()报错!
//最后看一下输出
console.log(student)
/*
{name: "CJ", age: 23, run: ƒ}
age: 23
name: "CJ"
run: ƒ ()
__proto__: Object
*/
console.log(gjl)
/*
{name: "GJL"}
name: "GJL"
__proto__: Object
如果展开__proto__有:
fly: ƒ ()
__proto__: Object
*/
//第二种创建类的写法
class abc{
constructor(name) {
this.name=name
}
hello(){
console.log(this.name+" abc.")
}
}
let xyz=new abc('cj')//类必须实例化出对象
xyz.hello()
//第二种继承的方法
class ijk extends abc{
constructor(name,grade) {
super(name)
this.grade=grade
}
my_grade(){
console.log(this.name+this.grade)
}
}
let lmn=new ijk('gjl','super')
lmn.my_grade()
//最后看一下输出
console.log(abc)//其实就是定义式
/*
class abc{
constructor(name) {
this.name=name
}
hello(){
console.log(this.name+" abc.")
}
}
*/
console.log(xyz)
/*
abc {name: "cj"}
name: "cj"
__proto__:
constructor: class abc
hello: ƒ hello()
__proto__: Object
*/
console.log(ijk)
console.log(lmn)
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOM</title>
<script>
'use strict'
/*
微软IE
苹果Safari
LinuxFireFox
*/
// 零、调整窗口在控制台尝试下面指令
// 一、window
// window.innerHeight
// 618
// window.innerWidth
// 169
// window.outerHeight
// 1047
// window.outerWidth
// 931
// //二、navigator
// navigator.appName
// "Netscape"
// navigator.appVersion
// "5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36"
// navigator.userAgent
// "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36"
// navigator.platform
// "Win32"
// //三、screen
// screen.width
// 1920
// screen.height
// 1080
// //四、location
// location.host
// "www.baidu.com"
// location.href
// "https://www.baidu.com/"
// location.protocol
// "https:"
// location.reload()//刷新网页
// location.assign('https://blog.csdn.net/cj1064789374')//重定向
// //五、document
// document.title
// "百度一下,你就知道"
// document.title='cj'
// "cj"
// let dl=document.getElementById('APP') 这行必须放在ID定义了之后
// document.cookie
// "discount_free_trigger=true; freePromorunningtmr=1584000"
// 恶意人员会获取你的cookie然后用你的cookie来登陆,不需要你的账号与密码
// //六、history
history.back()
history.forward()
</script>
</head>
<body>
<dl id="APP">
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
</body>
<script>
let dl=document.getElementById('APP')
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM查改</title>
</head>
<body>
<div id="father">
<h1>this is the h1</h1>
<p id="p1">this is the p1</p>
<p class="p2">this is the p2</p>
</div>
</body>
<script>
'use strict'
let h1=document.getElementsByTagName('h1')
console.log(h1)
console.log(h1[0].innerText)
console.log('----------')
let p1=document.getElementById('p1')
console.log(p1)
console.log(p1.innerText)
p1.innerText='I love GJL.'//html与text同步更改
console.log(p1)
console.log(p1.innerText)
p1.innerHTML='<strong>I love CJ.</strong>'
console.log(p1)
console.log(p1.innerHTML)
console.log('----------')
let p2=document.getElementsByClassName('p2')
console.log(p2)
console.log(p2[0].innerText)
p2[0].style.color='yellow'
p2[0].style.fontSize='30px'
p2[0].style.padding='2em'
console.log('----------')
let father=document.getElementById('father')
let children=father.children
console.log(children)
console.log(children[0]===h1[0]) //全等!
console.log(children[1]===p1) //全等!
console.log(children[2]===p2[0]) //全等!
console.log('----------')
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM删除</title>
</head>
<body>
<div id="aaa">
<p id="bbb">b</p>
<p id="ccc">c</p>
<p id="ddd">d</p>
<p id="eee">e</p>
</div>
</body>
<script>
'use strict'
let self=document.getElementById('bbb')//删法一读儿子
self.parentElement.removeChild(self)//再找父亲来删
let root=document.getElementById('aaa')
root.removeChild(root.children[0])//删ccc,注意后面的下标会前移
root.removeChild(root.children[0])//删ddd
//其实也可以一开始就father.innerText=''把三个全清掉
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM增加</title>
<style>
</style>
</head>
<body>
<p id="aaa">a</p>
<div id="bbb">
<p id="ccc">c</p>
<p id="ddd">d</p>
<p id="eee">e</p>
<p id="fff">f</p>
</div>
</body>
<script>
'use strict'
//一、读已有的
let aaa=document.getElementById('aaa')
let bbb=document.getElementById('bbb')
bbb.appendChild(aaa)//注意插进去之后原先的aaa就没有了
//二、建未有的
let newP=document.createElement('p')//
newP.id='newP'
newP.style.color='red' //用style可设置样式
newP.innerText='hi'
bbb.appendChild(newP)
//三、其他标签及属性设置
let z=document.getElementsByTagName('style')
z[0].setAttribute('type','text/css')
z[0].innerHTML='body{background-color:yellow}'//下面y覆盖了这个黄色背景效果
let y=document.getElementsByTagName('body')
y[0].setAttribute('style','background:red')//万能设置属性方法
let x=document.createElement('script')
x.setAttribute('type','text/javascript')//万能设置属性方法
bbb.appendChild(x)
//四、换序
let ddd=document.getElementById('ddd')
let eee=document.getElementById('eee')
bbb.insertBefore(eee,ddd)
//五、替换
let ccc=document.getElementById('ccc')
let fff=document.getElementById('fff')
bbb.replaceChild(fff,ccc)//用fff代替ccc,则原来的fff就没有了
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form</title>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form method="post" action="#" onsubmit="return ff()">
<p>
<input type="text" name='username' id='username'>
<input type="text" id='password'>
<input type="hidden" name='password' id='md5password'>
</p>
<p>
<input type="radio" name='sex' id='boy' value='boy'>boy
<input type="radio" name='sex' id='girl' value='girl'>girl
</p>
<input type="submit">
</form>
</body>
<script>
'use strict'
let input_text = document.getElementById('username')
input_text.value='33'
let input_boy = document.getElementById('boy')
let input_girl = document.getElementById('girl')
input_boy.checked=true
input_girl.checked=true//只能二选一所以上面input_boy就会变false
function ff() {
let pwd=document.getElementById('password')
let md5pwd=document.getElementById('md5password')
md5pwd.value=md5(pwd.value)//设隐藏的md5password是为了防止用户点击提交时密码框内容瞬间有变长的显示效果
return true//如果是true就会提交,这里false可以是判断到表单内容不符合正则表达式
}
//按F12,按network,按左边的一个HTTP请求,右边接到最下面有form data
//特别注意:name与id与value的区别:
//id是让前端的CSS与JS中的document定位的(value就是标签的值)
//name是写在请求里的key(value就是标签的值)
</script>
</html>
jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm
最后总结来区分下function是类还是函数:看有没有new
然后成员一定是有this.来声明的!
console.log(1);
function checkscope(){
this.xx=2;
this.f=function(){
console.log('3');
}
}
let x = new checkscope();
console.log(x.xx);
x.f();
console.log(4);
function checkscope2(){
this.xx=5;
return function(){
return this.xx;
}
}
let xy = checkscope2();//这个函数返回了一个函数
console.log(xy());//执行xy这个函数,得到xx值(是在执行时才取出变量的值)
console.log(xy.xx);//不是类对象,没有成员
输出如下:
> 1
> 2
> "3"
> 4
> 5
> undefined