1.什么是javaScript

1.概述

2.历史

2.快速入门

1.引入JavaScript

1.内部标签

2.外部引用

2.基本语法入门

3.打印方式

4.数据类型

4.严格检查模式strict

3.数据类型

1.字符串

2.数组

3.对象

4.流程控制(和java无异)

5.Map和Set

6.iterator

4.函数

1.定义函数

2.变量的作用域

3.方法

5.内部对象

1.Date

2.JSON

1.JSON字符串和JS对象的转化

2.JSON字符串和JS对象的区别

3.Ajax

6.面向对象编程

1.什么是面向对象

2.class继承

1.ES6之前定义一个函数与添加方法

2.ES6之后定义类、属性、方法

3.继承

4.继承的本质(查看对象原型)

5.原型链

7.操作BOM对象(重点)

8.操作DOM对象(重点)

9.操作表单

10.jQuery

1.什么是javaScript

1.概述

javaScript是一门世界上最流行的脚本语言

java、javascript

一个合格的后端人员，必须要精通javaScript

2.历史

https://blog.csdn.net/kese7952/article/details/79357868

ECMAScript是javaScript的一个标准

2.快速入门

1.引入JavaScript

1.内部标签

2.外部引用

script标签必须成对出现
<script scr="js/sm.js"></script>
<script scr="js/sm.js" type="text/javascript"></script>不用显示定义type，也默认就是javascript

2.基本语法入门

<script>//1.定义变量 变量类型 变量名 =变量值var score=1// var num=1;// var name="雙馬";// alert(num)//2.条件控制if (score>60&&score<70){alert("60~70")}else if (score>70&&score<80){alert("70~80")}else {alert("other")}//console.log()在浏览器控制台打印变量 相当于System.out.print()
</script>

3.打印方式

console.log()在控制台打印

document.write()在页面打印

alert()警告框打印

4.数据类型

数值，文本，图形，音频，视频...

变量

var 王者荣耀="倔强青铜"//不能用数字和除_$以外的符号进行命名

number

js不区分小数和整数，nummber

123//整数123
123.1//浮点数123.1
1.23e3//科学计数法
-99//负数
NaN //not a number不是一个数字
Infinity//表示无限大

字符串

'abc' "abc"

布尔值

true，false

逻辑运算符

比较运算符！！

==等于(类型不一样，值一样，也会判断true)

===绝对等于(类型一样，值一样才相等，结果true)

这是js的缺陷，坚持不要使用==比较

Nan===Nan，NaN与所有数值都不相等，包括自己

只能通过isNaN(NaN)来判断这个数是否是NaN

浮点数问题：

console.log((1/3)===(1-2/3))//false

尽量避免使用浮点数进行运算，存在精度丢失问题

console.log(Math.abs(1/3-(1-2/3))<0.00000001)//true

null和undefined

null 空

undefined 未定义

数组

java的数组必须列相同类型的对象，JS中不需要这样

var arr=[1,2,3,4,5,'hello',null,true]

取数组下标：如果越界了就会undefined

对象

对象是大括号{}，数组是中括号[]

var pp{name:"shuangma",age:3,tags:['js','java','web']
}

取对象的值

pp.name

>"shuangma"

pp.age

4.严格检查模式strict

'use strict' 严格检查模式，预防javascript的随意性导致产生的一些问题，必须写在JavaScript第一行
var是ES6以前的产出，有缺陷，例如作用域
局部变量建议都使用let去定义，前提编写的软件支持ES6语法

3.数据类型

1.字符串

1.正常字符串使用单引号' '，或双引号" "包裹起来
2.注意转义字符 \
- \'
- \n
- \t
- \u4e2d \u### Umocde字符
- \x41 Ascll字符
3.多行字符串编写
- ·hello
- 你好
- 啊· (··)Tab上边的键
4.模板字符串

let name="shuangma"let msg=`你好啊，${name}`

5.字符串长度

consolse(msg.lenth)

6.字符串的一旦被创建就不可变
7.大小写转换
- student.toUpperCase() 转大写
- student.toLowerCase() 转小写
8.student.indexOf('t') 获取字符串第一次出现的位置，索引
9.substring(1) 或 substring(1,3) 含头不含尾

2.数组

Array可以包含任意的数据类型

语法：var arr =[1,2,3,4,5,6]

通过下标取值或赋值

1.长度
- arr.lenth
- 注意：加入给arr.lenth赋值，数组大小就会发生变化，把超出原来数组的部分就会变成undefined，如果赋值过小，元素就会丢失
2.arr.indexOf(2) 获得下标索引
字符串的"1"和数字的1是不同的
3.slice(3)或slice(1,3) 截取Array的一部分，返回一个新数组，类似于substring
4.push()、pop() 尾部
- push：压入(追加)尾部
- pop：弹出尾部
5.unshift()、shift()头部
- unshift：压入到头部
- shift：弹出头部的一个元素
6.sort()排序
7.reverse()元素反转
8.concat()拼接
- 并没有改变原本的数组，只是会返回一个新的数组
9.join连接符
- 打印拼接数组，使用特定的字符串连接
- var arrs =["C","B","A"] arrs.join("-") 输出："C-B-A"
10.多维数组

数组：存储数据(如何存，如何取，方法都可自己去实现)

3.对象

var 对象名 = {

属性名，属性值，

属性名，属性值

}

js中对象，{......}表示一个对象，键值对描述属性xxxx：xxxx多个属性之间使用逗号隔开，最后一个属性不加逗号

js中所有的键都是字符串，值是任意对象

1.对象赋值
- pp.name='qinjiang'
- pp.name //输出：qinjiang
2.使用一个不存在的对象属性，不会报错
- pp.hah
- undefined
3.动态的删减属性通过delete删除对象的属性
- delete pp.name pp的name被删除了
4.动态的添加，直接给新的值添加属性即可
- person.hah = 'hah'
- person //person {hah:'hah'}
5.判断属性是否在这个对象中！ xxx in xxx
- ' hah' in pp //true
6.判断一个属性是否是这个对象自身拥有的
- hasOwnProperty() //对象创建时所定义的属性是对象自身拥有的

4.流程控制(和java无异)

if判断
- 语法：if(){}else if(){}else{}
while循环,避免死循环
- while(){}
- do(){}
for循环
- for(let i=0;i<3;i++){}
forEach循环
- var age = [1,2,3,4,5,6,7,8,9,10,21]
- age.forEach(function(value){console.log(value)})
for in循环
- for(var num in age){if(age.hasOwnProperty(num)){console.log(age[num])}} 打印值
- for(var num in age){console.log(num)} 打印索引

5.Map和Set

ES6新特性

Map:

  var map =new Map([['tom',100],['xx',200],['aa',300]]);var name=map.get('tom');//通过键来获取值map.set('admin',123456);//新增或修改console.log(name);console.log(map);console.delete('tom')//删除键

Set:无序不重复的集合

  var set = new Set([3,1,1,1,1,1]);//可以去重set.add(2);//新增set.delete(1);//删除set.has(3);//是否包含set.clear();//清空

6.iterator

for of循环
- for(var num of age){console.log(num)}

4.函数

1.定义函数

绝对值函数

第一种写法

function abs(x){if (x>0){return x;}else {return  -x;}}

一旦执行到return 代表函数结束，返回结果！

如果没有执行return，函数执行完成也会返回结果，结果是undefined

第二种写法

var abs= function(x){if (x>=0){return x;}else {return -x;}}

function(x){....}这是一个匿名函数，但是可以把结果赋值给abs，通过abs就可以调用函数

方式一盒方式二等价

调用函数

abs(10)//10
abs(-10)//10

参数问题：JS可以传任意个参数，也可以不传递参数

var abs= function(x){//typeof 用于判断对象类型if (typeof x!='number'){throw 'not a Number'//手动抛出异常}if (x>=0){return x;}else {return -x;}}

arguments

arguments类似数组，但不是数组，拥有数组的lenth

代表，传入的参数为数组，可以拿到数组的所有参数

存在的问题arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作，需要排除已有参数

rest

以前

if (arguments.length>2){for (var  i =2;i<arguments.length;i++){//...}}

ES6引入的新特性，获取除了已经定义的参数之外的所有参数

function aaa(a,b,...rest){console.log(a);console.log(b);console.log(rest);}

rest参数只能卸载最后面，必须用...标识(类似于java的变长字符串)

2.变量的作用域

在JS中，var定义变量实际是有作用域的

假设在函数体中声明，则在函数体外不可以使用~(非要想实现的话，可以使用闭包 )

function sm(){var x=1;x=x+1;
}
x=x+2//Uncaught ReferenceError:x is not defined 函数未定义

如果两个函数使用了相同的变量名，只要在函数内部，就不冲突

        function sm(){var x=1;x=x+1;}function sm2(){var x=1;x=x+1;}

函数内部可以访问外部函数，外部不可以访问内部

function sm(){var x=1;//函数内部可以访问外部函数，外部不可以访问内部function sm2(){var y=x+1;}var z=y+1;//Uncaught ReferenceError: y is not defined}

内部函数变量与外部函数的变量重名时，会由'内'向'外'查找(就近原则),内部如果有，就会屏蔽外部

        function sm(){var x=1;//函数内部可以访问外部函数，外部不可以访问内部function sm2(){var x='a';console.log('index'+x)}console.log('outer'+x);sm2();}sm();

提升变量的作用域

js的执行引擎，自动提升了y的声明，但是不提升y的赋值
这是在JS建立之初就存在的特性
规范：所有变量定义都放在函数的头部

        function sm(){var  x='x'+y;console.log(x);//xundefinedvar  y='y';}

全局函数

        //全局变量x=1;function f(){console.log(x)}f();console.log(x);

全局对象 window

        var x='xxx';alert(x);alert(window.x);//默认所有的全局变量，都会自动绑定在window对象下

alert()这个函数本身也是一个window变量

window.alert()

JS实际上只有一个全局作用域，任何变量(函数也可以视为变量)，假设没有在函数作用内找到，就会向外查找，如果在全局作用域都没有找到，报错，RefrencError

        var old_alert=window.alert;window.alert=function (){};//alert失效了window.alert(123);//改为了old_alertold_alert(456);//恢复alertwindow.alert=old_alert;window.alert(789);

规范

由于我们所有的全局变量都会绑定到我们的 window上，如果不同的js文件，使用了相同的全局变量
把代码放入自己定义的唯一空间名字中，降低全局命名冲突问题(jQuery会使用)

//唯一全局变量var sm={};//定义全局变量sm.name='shuangma';sm.add=function (a,b){return a+b;}

局部作用域 let

function aaa(){for (var i=0;i<100;i++){console.log(i);}console.log(i+1);//101 问题：i除了这个作用域还可以使用}aaa();

ES6 let关键字，解决局部作用域冲突问题 建议使用let去定义局部作用域的变量

        function aaa(){for (let i=0;i<100;i++){console.log(i);}console.log(i+1);//Uncaught ReferenceError: i is not defined}aaa();

常量 const

在ES6之前，怎么定义常量：只有用全部大写字母命名的变量就是常量；建议不要修改这样的值

var PI='3.14';
console.log(PI);
PI='213';//可以改变这个值
console.log(PI);

在ES6引入了常量关键字 `const`

const PI ='3.14';//制度变量
CONSOLE.log(PI);
PI = '123';//TypeError:Assignment to constart variable 类型错误

3.方法

定义方法

方法就是把函数放在对象的里面，对象只有两个东西：属性和方法

  var shuangma={name:'雙馬',bitrh:2000,//方法age:function (){//今年-出生年var now = new Date().getFullYear();return now-this.bitrh;}}
//属性
shuangma.name;
//方法
shuangma.age();

this是无法指向的，是默认指向调用它的那个对象

  function getAge(){var now = new Date().getFullYear();return now - this.bitrh;}var shuangma={name:'雙馬',bitrh:2000,age:getAge}// shuangma.age(); //ok// getAge()// NaN 指向window

apply

JS中apply在语句运行的时候可以控制this的指向，并不是一直指向
接受数组形式的参数

function getAge(){var now = new Date().getFullYear();return now - this.bitrh;}var shuangma={name:'雙馬',bitrh:2000,age:getAge}getAge.apply(shuangma,[])//this指向了shuangma，参数为空//shaungma.age()  和getAge().apply(shuangma,[])结果一样// getAge()// NaN 指向window

5.内部对象

标准对象

typeof 123
'number'
typeof '123'
'string'
typeof true
'boolean'
typeof NaN
'number'
typeof []
'object'
typeof {}
'object'
typeof Math.abs
'function'
typeof undefined
'undefined'

1.Date

基本使用

  var now =new Date();//Fri Sep 09 2022 17:43:00 GMT+0800 (中国标准时间)now.getFullYear();//年now.getMonth();//月now.getDate();//日now.getDay();//星期几now.getHours();//小时now.getMinutes();//分now.getSeconds();//秒now.getTime();//时间戳 全世界统一 1970 1.1 0:00:00 的毫秒值console.log(new Date(now.getTime()));//Fri Sep 09 2022 17:43:00 GMT+0800 (中国标准时间)console.log(now.getTime());//1662717967765console.log(new Date(1662717967765));

now.toLocaleString()
'2022/9/9 18:19:22'
now.toLocaleString//注意，调用是一个方法，不是一个属性
//ƒ toLocaleString() { [native code] }
now.toGMTString
//ƒ toUTCString() { [native code] }
now.toGMTString()
//'Fri, 09 Sep 2022 10:19:22 GMT'

2.JSON

早期，所有数据传输习惯使用XML文件!

JSON(JavaScript Object Notation, JS对象简谱)是一种轻量级的数据交换格式。

简洁和清晰的层次结构使得JSON成为理想的数据交换语言。

易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在JavaScript一切皆为对象、任何js 支持的类型都可以用JSON来表示;：number、string、...

格式：

对象都用 {}

对象里的字符串尽量用双引号"",因为JSON默认转换为双引号，解析时更为方便

数组都用 []

所有键值对都用 key:value
key必须是字符串

JSON.stringify(对象名、等) 交换数据、对象转换为JSON字符串

JSON.parse(' ') 解析 json字符串转对象等 json字符串被单引号包裹起来

1.JSON字符串和JS对象的转化

<script>var user={name:"shuangma",age:3,sex:"男"}//对象转化为JSON字符串var jsonUser=JSON.stringify(user);//'{"name":"shuangma","age":3,"sex":"男"}'//JSON字符串转化为对象 参数为JSON字符串var obj=JSON.parse('{"name":"shuangma","age":3,"sex":"男"}')//{name: 'shuangma', age: 3, sex: '男'}对象
</script>

2.JSON字符串和JS对象的区别

var obj ={a:'hello',b:'hellob'};//对象转换json字符串 js对象
var json ='{"a":"hello","b":"hellob"}';//json字符串解析js对象 json字符串

3.Ajax

原生的js写法xhr 异步请求
jQuey 封装好的方法$("#name"),ajax("")
axios请求

6.面向对象编程

1.什么是面向对象

javascript、java、c#...... 面向对象：javascript的面向对象和其他有区别

类：模板

对象：具体实例

类是对象的抽象，对象是类的具体实例

JavaScript：

原型：

语法：子对象.__proto__=父对象

  var student={name:"shuangma",age:3,run:function (){console.log(this.name+"run.....");}};var xiaoming={name:"xiaoming"}//小明的原型是studentxiaoming.__proto__=student;

xiaoming
//{name: 'xiaoming'}
xiaoming.run
//ƒ (){      console.log(this.name+"run.....");    }
xiaoming.run()
//xiaomingrun.....//undefined
xiaoming.age
//3

2.class继承

class关键字，是在ES6引入的

1.ES6之前定义一个函数与添加方法

  function student(name){this.name=name;}//给student新增一个方法student.prototype.hello =function (){alert('hello')};

2.ES6之后定义类、属性、方法

  //定义一个学生的类class Student{constructor(name) {this.name=name;}hello(){alert('hello')}//需要什么方法直接在后面加就行}

3.继承

class Student{constructor(name) {this.name = name;}hello(){alert('hello')}
}class xiaoStudent extends Student{constructor(name, grade) {super(name);this.grade = grade;}myGrade(){alert('我是小学生')}}var xiaoming = new Student("xiaoming");var xiaohong = new xiaoStudent("xiaohong",1);xiaoming.hello()

4.继承的本质(查看对象原型)

5.原型链

7.操作BOM对象(重点)

浏览器介绍

JavaScript 和浏览器关系？

JavaScript诞生就是为了能够让他在浏览器中运行

BOM：浏览器对象模型

IE 6–11
Chrome
Firefox

window

window代表浏览器窗口

Navigator

Navigator 封装了浏览器的信息

大多数时候，我们不会使用navigator对象，因为会被人为修改，不建议使用这些属性来判断和编写代码。

screen 代表屏幕尺寸

location(重要)

location 代表当前页面的URL信息

host:"www.baidu.com"//主机
href:"https://www.baidu.com/"//指向(跳转的位置)位置
protocol:"https:"//协议
reload: f leload()  //刷新网页(重新加载)
//设置新的地址
location.assign('https://blog.kuangstudy.com/')

document 内容；DOM

document 代表当前的页面，HTML DOM文档树

doucment.title
//“百度一下，你就知道”
doucument.title = "nice"
//"nice"

获得具体的文档树节点

<dl id="app"><dt>Java</dt><dd>JavaSE</dd><dd>JavaEE</dd>
</dl><script>var dl = document.getElementById('app')
</script>

获取cookie

document.cookie
//'OTZ=6394369_24_24__24_; 1P_JAR=2022-03-03-02'

劫持cookie原理

<script src="aa.js"></script>
<!--恶意人员：获取你的cookie上传到其他的服务器-->

服务器端可以设置cookie：httpOnly

history 代表浏览器历史记录

history.back()//返回
history.forward()//前进

8.操作DOM对象(重点)

核心

浏览器网页就是一个Dom树形结构

更新：更新Dom节点
遍历Dom节点：得到Dom节点
删除：删除一个Dom节点
添加：添加一个新的节点

要制作一个Dom节点，就必须要先获得这个Dom节点

获得dom下的节点：

document.getElementsByTagName('标签选择器')

document.getElementsById('id选择器')

document.getElementsByTagName('类选择器')

father.children 获取父节点下的所有的子节点

father.children[0] 获取下标为0的节点

这是原生代码，之后尽量使用jQuery();

//对应CSS的 选择器var h1 = document.getElementsByTagName('h1')//标签选择器var p1 = document.getElementsById('p1')//id选择器var p2 = document.getElementsByTagName('p2')//类选择器var father = document.getElementById('father')var childrens = father.children; //获取父节点下的所有节点var childrens = father.children[0];//获得下标为0的节点// father.firstChild//第一个节点// father.lastChild//最后一个节点

更新节点

<div id="id1">
</div>
<script>var id1 = document.getElementById('id1')
</script>

操作文本：

id1.innerText = '456' 修改文本的值

id1.innerHTML=<strong>123</strong> 可以解析HTML文本

操作JS

//css的操作
id1.style.color = 'yellow';  //属性使用 字符串 包裹
id1.style.fontSize = '20px';  //不支持- 用驼峰命名 存在驼峰命名的问题
id1.style.padding = '2em';

删除节点：父节点.removeChild(子节点)

删除节点的步骤：先获取父节点，再通过父节点删除自己

<div id="father"><h1>标题一</h1><p id="p1">p1</p><p class="p2">p2</p>
</div>
<script>var self = document.getElementsById('p1')var father = p1.parentElement;father.removeChild(self)//删除子节点father.removeChild()father.children[0])//删除这个节点之后，原本索引为1的变为0，依次往前一位
</script>

注意：删除多个节点时，children是在时刻变化的，删除节点的时候一定要注意

插入节点

我们获得了某个Dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素，但是这个Dom节点已经存在元素了，我们就不能这么做。因为会覆盖。一般通过追加操作。

追加

<P id="js">JavaScript</P>
<div id="list"><p id="se">JavaSE</p><p id="ee">JavaEE</p><p id="me">JavaME</p>
</div><script>var js = document.getElementById('js');var list = document.getElementById('list');list.appendChild(js);//追加到后面
</script>

创建一个新的标签，实现插入

<script>var js = document.getElementById('js');//已经存在的节点var list = document.getElementById('list');//通过JS创建一个新节点var newP = document.createElement('p')//创建一个p标签newP.id = 'newP';newP.innerText = 'Hello,donger'//创建一个新标签节点var myScript = document.createElement('script');myScript.setAttribute('type','text/javascript')//可以创建一个Style标签var myStyle = document.createElement('style');//可以创建一个空Style标签myStyle.setAttribute('type','text/css');myStyle.innerHTML = 'body{background-color:chartreuse}';//设置标签内容document.getElementsByTagName('head')[0].appendChild(myStyle)</script>

insertBefore 向目标节点前插入内容

语法：insertBefore(内容,在哪个节点前面)

var ee = document.getElementById('ee');var js = document.getElementById('js');var list = document.getElementById('list');//要包含的节点,insertBefore(newNode,targetNode)list.insertBefore(js,ee);

9.操作表单

表单是什么？ form DOM树

表单的目的：提交信息

文本框 text
下拉框 select
单选框 radio
多选框 checkbox
隐藏域 hidden
密码框 password
.......

获得要提交的信息

<form action="post"><p><span>用户名：</span> <input type="text" id="username"></p><!--多选框的值，就是定义好的value--><p><span>性别：</span><input type="radio" name="gender" value="man" id="boy">男<input type="radio" name="gender" value="woman" id="girl">女</p></form><script>var input_text = document.getElementById('username');var boy_radio = document.getElementById('boy');var girl_radio = document.getElementById('girl');//得到输入框的值变量.value//修改输入框的值input_text.value = '123'//对于单选框，多选框等固定的值，boy_radio.value只能取到当前的值boy_radio.checked;//查看返回的结果，是否为true，如果为true，则被选中。girl_radio.checked = true;//赋值</script>

提交表单，md5加密密码表单优化

<form action="https://www.baidu.com/" method="post" onsubmit="return aaa()"><p><span>用户名：</span> <input type="text" id="username" name="password"></p><p><span>密码：</span> <input type="password" id="input-password" ></p><!--这里的md5id与inputid用来混淆基础不牢的程序员--><input type="hidden" id="md5-password" name="password"><!--绑定事件onclick 被点击--><button type="submit">提交</button>
</form><script>function aaa() {alert(1);var uname = document.getElementById('username');var pwd = document.getElementById('input-password');var md5pwd = document.getElementById('md5-password');// console.log(uname.value);// console.log(pwd.value);//MD5算法// pwd.value = md5(pwd.value);// console.log(pwd.value);md5pwd.value = md5(pwd.value);//可以校验到表单内容，true就是通过提交，false,阻止提交return true;}
</script>

10.jQuery

JavaScript

jQuery库(封装)，里面存在大量的JavaScript函数

公式： $(selector).action

获取jQuery

注意:需要导入在线cdn

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--在线cdn--><script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body><!--公式： $(selector).action--><a href="" id="test-jquery">点我</a><script>//document.getElementById('id');//选择器就是css的选择器$('#test-jquery').click(function (){alert('hello,jquery');})</script></body>
</html>

选择器

//原生js，选择器少，麻烦//标签document.getElementsByTagName();//iddocument.getElementById();//类document.getElementsByClassName()//jQuery  css中的选择器 它 都能用$('p').click();//标签选择器$('#id1').click();//id选择器$('.class').click();//class选择器

文档工具栈：https://jquery.cuishifeng.cn/

事件

鼠标事件，键盘时间，其他事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#divMove{width:500px;height:500px;border:1px solid red;}</style><script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<!--要求：获取鼠标当前的一个坐标-->
mouse:<span id="mouseMove"></span>
<div id="divMove">在这里移动鼠标试试
</div><script>//当网页元素加载完毕之后响应事件// $(document).ready(function () {//// })//其简写//$(function(){//});$(function () {$('#divMove').mousemove(function (e) {$('#mouseMove').text('x:'+e.pageX + 'y:'+e.pageY)})});
</script>
</body>
</html>

操作DOM

节点文本操作

$('#test-ul li[name=python]').text();//获得值
$('#test-ul li[name=python]').text('设置值');//设置值
$('#test-ul').html();//获得值
$('#test-ul').html('<strong>123</strong>');//设置值

css操作

$('#test-ul li[name=python]').css("color","red");

元素的显示和隐藏：本质 display = none;

$('#test-ul li[name=python]').show()//显示
$('#test-ul li[name=python]').hide()//隐藏

娱乐测试

$(window).width()//系统的高度
$(window).height()//系统的宽度

精简JavaScript相关推荐

网站前端性能优化之javascript和css
之前看过Yahoo团队写的一篇关于网站性能优化的文章,文章是2010年左右写的,虽然有点老,但是很多方面还是很有借鉴意义的.关于css的性能优化,他提到了如下几点: CSS性能优化 1.把样式表置于顶 ...
JavaScript与WebAssembly进行比较
2019独角兽企业重金招聘Python工程师标准>>> 本文由云+社区发表作者:QQ音乐前端团队在识别和描述核心元素的过程中,我们分享了构建SessionStack时使用的一些经 ...
新一波 JavaScript Web 框架
本文来自InfoQ中文站,原作者FrontEndMastery,译者Sambodhi,策划Tina 太过保守很难在 Javascript 生态系统中保持与时俱进.对于那些刚进入这个行业的人来说,要在新 ...
工赋开发者社区 | 新一波JavaScript Web框架
这篇文章让读者们了解为什么新的 JavaScript Web 框架扩散如此迅速,并且对大规模的问题和创新的最新发展进行了深入的探讨. 太过保守很难在 Javascript 生态系统中保持与时俱进.对于 ...
JavaScript的1000+篇文章总结
JavaScript的1000+篇文章总结本文收集和总结了有关JavaScript的1000+篇文章,由于篇幅有限只能总结近期的内容,想了解更多内容可以访问:http://www.ai2news.c ...
前端面试题（理论知识+HTML+CSS+JavaScript）
之前我也收集整理分享了一些前端面试题目的文章,有的附了答案,有的没有附答案:虽然我们不是为了做题而做题目,也不是只为了在面试中过关,我们做题目的,首先,是看我们对基础知识的掌握程度:其次,也是对重要知 ...
2022最新面试题JavaScript、Vue
JavaScript typeof 和 instanceof的区别 typeof 会返回一个变量的基本类型,instanceof返回的是一个布尔值 instanceof 可以准确的判断复杂引用数据类型 ...
JavaScript --经典问题
JavaScript中如何检测一个变量是一个String类型?请写出函数实现方法1. function isString(obj){ return typeof(obj) === "str ...
面试相关 JavaScript
JavaScript中如何检测一个变量是一个String类型?请写出函数实现 typeof(obj) === "string" typeof obj === "strin ...

精简JavaScript

1.什么是javaScript

1.概述

2.历史

2.快速入门

1.引入JavaScript

1.内部标签

2.外部引用

2.基本语法入门

3.打印方式

4.数据类型

4.严格检查模式strict

3.数据类型

1.字符串

2.数组

3.对象

4.流程控制(和java无异)

5.Map和Set

6.iterator

4.函数

1.定义函数

2.变量的作用域

3.方法

5.内部对象

1.Date

2.JSON

1.JSON字符串和JS对象的转化

2.JSON字符串和JS对象的区别

3.Ajax

6.面向对象编程

1.什么是面向对象

2.class继承

1.ES6之前定义一个函数与添加方法

2.ES6之后定义类、属性、方法

3.继承

4.继承的本质(查看对象原型)

5.原型链

7.操作BOM对象(重点)

8.操作DOM对象(重点)

9.操作表单

10.jQuery

精简JavaScript相关推荐

最新文章

热门文章