1.什么是JavaScript
1.1概述
JavaScript一门世界上最流行脚本语言。
一个合格的后端人员,必须精通JavaScript。
1.2历史
ECMAscript它可以理解为JavaScript的一个标准,最新版本已经到es6版本,但是大部分浏览器还只停留在支持es5代码上!
开发环境—线上环境,版本不一致。
2.快速入门
2.1 引入JavaScript
1.内部标签
<script>
//....
</script>
2.外部引入
abc.js
//...
test.html
<script src="abc.js"></script>
2.2基本语法入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- Javascript严格区分大小写!-->
<script>
// 1.定义变量 变量类型 变量名=变量值;
var score = 77;
// 2.条件控制
if(score>60&&score<70){
alert("60-70")
}else if(score>70&&score<80){
alert("70-80")
}else{
alert(other)}
// 3.多行注释 /* */
// 4.console.log(score) 在浏览器的控制台打印变量!System.out.println()
// 5.
</script>
</head>
<body>
</body>
</html>
浏览器必备知识:
2.3.数据类型
数值 文本 图形 音频 视频…
变量(定义是不能以数字开头)
var 王者荣耀="倔强青铜"
number
js不区分小数和整数 Number
123 //整数123
123.1 //浮点数123.1
1.123e3//科学计数法
-99 //负数
NaN //not a number
Infinity //表示无限大
字符串
‘abc’ ‘‘abc’’
布尔值
true , flase
逻辑运算
&&
||
!
比较运算符
= 赋值
== 等于(类型不一样,值一样,也会判断为true)
=== 绝对等于(类型和值一样)
须知:
- NaN与所有的数值都不想等,包括自己
- 只能通过isNaN(NaN)来判断这个数是否为NaN
浮点数问题:
console.log((1/3)===(1-2/3))
尽量避免使用浮点数进行运算,存在精度问题!
Math.abs(1/3-(1-2/3))<0.00001
null和undefined
- null 空
- undefined 未定义
数组
java的数组必须是相同的类型,一系列相同类型的对象,js中不需要这样!
// 保证代码可读性,尽量使用[]
var arr=[1,2,3,4,5,'hello',null,true]
new Array(1,2,3,4,'hello')
去数组下标,如果越界了,就会 undefined
对象
对象是大括号,数组是中括号
,每个属性之间使用逗号隔开,最后一个不要添加
//Person person=new person(1,2,3,4,5);
var person={
name:"kk",
age:18,
tags:['js','java','web']
}
取对象的值
person.name
"kk"
2.4严格检查格式
(‘use strict’;)
<script>
//'use strict'; 严格检查模式,预防JavaScript的随意性导致产生的一些问题
//'use strict'; 必须写在JavaScript第一行;
//局部变量 建议都是用let去定义
'use strict';
//Es6 let定义局部变量
let i=2;
</script>
3. 数据类型
3.1字符串
- 正常字符串我们使用’ ‘或者“ ”包裹
- 注意转义字符 \
\'
\n
\t
\u4e2d unicode字符
\x41 Ascll字符
- 多行字符串编写
//tab上面的piao
var msg=`
world
你好
kk
`
- 模板字符串
//tab上面的piao
let name ='kk';
let agr=18;
let msg=`
你好呀,
${name}
`
- 字符串长度
str.length
- 字符串的可变性,不可变
student[0]=1
1
console.log(student)
VM361:1 student
- 大小写转换
//注意:这里是方法,不是属性
console.log(student.toLocaleUpperCase())
console.log(student.toLocaleLowerCase())
- student.indexOf(‘u’)
console.log(student.indexOf('u'))
//字符串中u的位置
- substring
console.log(student.substring(1,3))
tu
//字符串中2.3的内容
3.2数组
Array可以包含任意数据类型
var arr =[1,2,3,4,5,6] //通过下标取值和赋值
arr[0]
arr[0]=1;
- 长度
arr.length
注意:假如给arr,length赋值,数组大小会发生变化~如果赋值过小,元素会丢失
- indexOf,通过元素获得下标索引
arr.indexOf(2)
1
字符串的1和数字1是不同的!
- slice()截取Array的一部分,返回一个新的数组
arr=[1,2,3,4,5,6,"1","2"]
(8) [1, 2, 3, 4, 5, 6, "1", "2"]
arr.slice(3)
(5) [4, 5, 6, "1", "2"]
- push和pop(压入尾部和弹出尾部)
arr
(8) [1, 2, 3, 4, 5, 6, "1", "2"]
arr.push('a','b')
10
arr
(10) [1, 2, 3, 4, 5, 6, "1", "2", "a", "b"]
arr.pop()
"b"
arr
(9) [1, 2, 3, 4, 5, 6, "1", "2", "a"]
-
unshift(),shift()(压入头部和弹出头部)(同4)
-
排序 sort()
(5) [1, 2, 3, 4, 5]
arr.unshift(6)
6
arr.sort()
(6) [1, 2, 3, 4, 5, 6]
- 元素反转
arr.reverse()
(6) [6, 5, 4, 3, 2, 1]
- conat()
arr.concat(["a","b","c"])
(9) [6, 5, 4, 3, 2, 1, "a", "b", "c"]
arr
(6) [6, 5, 4, 3, 2, 1]
注意:concat()并没有修改数组,只是返回一个新的数组
- 连接符join
arr
(6) [6, 5, 4, 3, 2, 1]
arr.join('-')
"6-5-4-3-2-1"
打印拼接数组,使用特定的字符串连接
- 多维数组
array=[[1,2],[3,4],["5","6"]];
array [1][1]
4
数组:存储数据(如何存,如何取,方法都可以实现)
3.3对象
若干个键值对,
var 对象名={
属性名:属性值,
属性名:属性值,
属性名:属性值
}
var person={
name:"kk",
age: 3,
email:"[email protected]",
score:0
}
JS中对象,{…}表示一个对象,键值对描述属性xxxx:xxxx,多个属性之间使用逗号隔开,最后一个属性不加逗号。
JavaScript中所有的键都是字符串,值是任意对象!
- 对象赋值
person.age=16
16
- 使用一个不存在的对象属性,不会报错! undefined
person.sss
undefined
- 动态的删除属性,通过delete删除对象的属性
delete person.name
true
- 动态的添加
person.haha="haha"
"haha"
- 判断属性值是否在对象中! xxx in xxx
'age' in person
true
//继承
'toString' in person
true
- 判断一个属性是否是这个对象自身拥有的hasOwnProperty()
person.hasOwnProperty('toSting')
false
person.hasOwnProperty('age')
true
3.4流程控制
if判断
var age =4;
if(age>3){
//第一个判断
alert("haha");
}else if(age<3){
//第二个判断
alert("kuwa");
}else{
alert("www");
}
while循环,避免程序死循环
var age =3;
while(age<100){
age=age+1;
console.log(age)
}
do{
age=age+1;
console.log(age)
}while(age<100)
for循环
var age =3;
for (let i = 0; i < 100; i++) {
console.log(i)
}
forEach循环
var age =[12,3,4,13,22,11,123,33];
age.forEach(function (value){
console.log(value)
})
3.5Map和Set
ES6的新特性
//Es6 Map
//学生的成绩;学生的名字
// var names=["a","b","c"];
//var scores=[100,90,80];
var map=new Map([['a',100],['b',90],['c',80]]);
var name = map.get('a');//通过key获得value
map.set('admin',123456); //新增或修改
map.delete('a');//删除一个元素
//Set 无序不重复集合
var set= new Set([3,1,1,1,1]);//set可以去重
set.add(2);//添加
set.delete(1);//删除
console.log(set.has(3));//是否包含某个元素
3.6iterable迭代
//通过for of /for in下标
var arr=[3,4,5];
for(var x of arr) {
console.log(x);
}
遍历map
var map=new Map([["a",100],["b",90],["c",80]]);
for(let x of map) {
console.log(x);
}
遍历set
var set=new Set([5,6,7]);
for (let x of set)
console.log(x);
遍历下标
for(let x in arr)
{
console.log(x)
}
4.函数
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
参数问题:javascript可以传任意个参数,也可以不传递参数。
参数进来是否存在的问题?假设不存在参数,如何回避
var abs =function(x){
//手动抛出异常来判断
if(typeof x!=='number'){
throw 'Not a number';
}
if(x>=0){
return x;
}else{
return -x;
}
}
arguments
argument
是一个JS免费赠送的关键字;
代表,传递进来的所有的参数,是一个数组。
var abs =function(x){
console.log("x=>"+x);
for (let i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
if(x>=0){
return x;
}else{
return -x;
}
}
问题:arguments包含所有的参数,我么有时候想使用多余的参数来进行附加操作,需要排除有的参数。
rest
以前
if (arguments.length>2){
for (let i = 2; i < arguments.length; i++) {
}
}
Es6引入新特性,获取除了已经定义的函数之外的所有函数~ …
function aaa(a,b,...rest) {
console.log("a=>" + a);
console.log("b=>" + b);
console.log(rest);
}
rest参数只能写在后面必须用 …标记。
4.2变量的作用域
在javascript中,var定义变量实际是有作用域的。
假设在函数体中声明,则在函数体外不可以使用~(闭包)
function qj(){
var x=1;
x=x+1;
}
x=x+2; // Uncaught ReferenceError: x is not defined
如果两个函数使用了相同的变量名,只要在函数内部,就不冲突
function qj(){
var x=1;
x=x+1;
}
function qj2(){
var x=1;
x=x+1;
}
内部函数可以访问外部函数成员,反之则不行
function qj() {
var x = 1;
//内部函数可以访问外部函数成员,反之不行。
function qj2() {
var y= x+1;//
}
var z=y+1;//
}
假设,内部函数变量和外部函数变量的重名!
function qj() {
var x = 1;
//内部函数可以访问外部函数成员,反之不行。
function qj2() {
var x= 'A';//
console.log('inner'+x)
}
console.log('outer'+x)
qj2();
}
qj();
假设在JavaScript从函数查找变量从自身函数开始~,由内向外查找!假设外部存在这个同名的函数变量,则内部函数变量会屏蔽外部函数变量
提升变量的作用域
function qj(){
var x="x"+y;
console.log(x);
var y='y';
}
qj();
结果:xundefined
说明:js执行引擎,自动提升了y的声明,但是不会提升变量y的赋值;
function qj2(){
var y;
var x="x"+y;
console.log(x);
y='y';
}
这个是在JavaScript建立之初就存在的特性,养成规范;所有的变量定义都放在函数头部,不要乱放,便于代码维护
function qj2(){
var x=1,
y=x+1,
z,i,a;//undefined
//之后随意用
}
全局函数
//全局变量
var x =1;
function f(){
console.log(x);
}
f();
console.log(x)
全局对象window
var x ='xxx';
alert(x);
alert(window.x);
alert本身也是一个window的变量;
//全局变量
var x ='xxx';
window.alert(x);
var old_alert=window.alert;
// old_alert(x);
window.alert=function (){
}
//发现alert()失效了
window.alert(123);
//恢复
window.alert=old_alert;
window.alert(456);
javascript实际上只有一个全局作用域,任何变量(函数也可以视为变量),假设没有在函数作用范围内找到,就会向外查找,如果在全局作用域都没有找到,报错ReferenceError
规范
由于我们所有的全局变量都会绑定到windows上,如果不同的js文件使用了相同的全局变量,冲突~ -》》》》如何能够减少冲突?
//唯一全局变量
var kkapp={
};
//定义全局变量
kkapp.name='kk';
kkapp.add=function (a,b){
return a+b;
}
把自己的代码全部放入自己定义的唯一空间名字中,降低全局命名冲突的问题~
jQuery===¥
局部作用域
function aaa(){
for (var i = 0; i < 100; i++) {
console.log(i)
}
console.log(i+1)//问题? i出了作用域还可以用
}
全局作用域
function aaa(){
for (let i = 0; i < 100; i++) {
console.log(i)
}
console.log(i+1)//问题? i出了作用域还可以用
}
Es6 关键字,解决局部作用域冲突问题!
function aaa(){
for (let i = 0; i < 100; i++) {
console.log(i)
}
console.log(i+1)// Uncaught ReferenceError: i is not defined
建议都是用let去定义局部作用域~
常量 const
在Es6之前定义常量,只要用全部大写字母命名的变量就是常量;建议不要修改这样的值。
在ES6引入了常量关键字 const
const PI='3.14' //只读变量
console.log(PI)
PI='123';//此处不可以修改Uncaught TypeError: Assignment to constant variable
4.3 方法
定义方法
var kk = {
name:'lxh',
bitrh:2000,
//方法
age:function (){
var now=new Date().getFullYear();
return now-this.bitrh;
}
//今年-出生年
}
//属性
kk.name
//方法
kk.age()
this代表什么?
function getAge(){
var now=new Date().getFullYear();
return now-this.bitrh;
}
var kk = {
name:'lxh',
bitrh:2000,
age:getAge()
}
//kk.age() ok
//getAge() NaN Windows对象
this是无法指向的,是默认指向调用它的那个对象
apple
在js中可以控制this指向
function getAge(){
var now=new Date().getFullYear();
return now-this.bitrh;
}
var kk = {
name:'lxh',
bitrh:2000,
age:getAge()
};
var xm = {
name:'hxl',
bitrh:2001,
age:getAge()
};
//kk.age() ok
//getAge() NaN Windows对象
getAge.apply(kk,[]);//this指向了kk这个对象,参数为空
getAge.apply(xm,[]);
5.内部对象
标准对象
typeof 123
"number"
typeof true
"boolean"
typeof '123'
"string"
typeof {
}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"
5.1Date
基本使用
var now = new Date();//Mon Jan 18 2021 08:50:54 GMT+0800 (中国标准时间)
now.getFullYear();//年
now.getMonth();//月
now.getDate();//日
now.getDay();//星期几
now.getHours();//时
now.getTime();//时间戳,全世界统一 1970.1.1 0:00:00到现在的毫秒数
转换
console.log(new Date(1610931054576))
VM182:1 Mon Jan 18 2021 08:50:54 GMT+0800 (中国标准时间)
undefined
now.toLocaleDateString
ƒ toLocaleDateString() {
[native code] }//注意:调用的是方法!!!
now.toLocaleDateString()
"2021/1/18"
now.toGMTString
ƒ toUTCString() {
[native code] }
now.toGMTString()
"Mon, 18 Jan 2021 00:50:54 GMT"
5.2 JSON
JSON是什么
-
一种轻量级交换格式。
-
简洁和清晰的层次结构。
JavaScript中一切皆为对象,任何js支持的类型都可以用json来表示;numbei,string…
格式:
- 对象都用大括号{}
- 数组都用中括号[]
- 所有的键值对都使用key:value
var user ={
name:"kk",
age:3,
sex:'男'
}
//对象转化为json字符串{"name":"kk","age":3,"sex":"男"}
var jsonuser= JSON.stringify(user)
//json字符串转化为对象m参数为json字符串{name: "kk", age: 3, sex: "男"}
var obj=JSON.parse('{"name":"kk","age":3,"sex":"男"}')
很多人搞不清楚json和js对象的区别
var obj ={
a:'hello',b:'hellob'}
var josn ='{"a":"hello","b":"hellob"}'
6.面向对象编程
原型对象
JavaScript,Java,c# 面向对象:JavaScript有些区别
-
类:模板
-
对象:具体实例
在JavaScript这个需要大家换一下思维方式!
原型:
var Student ={
name:"kk",
age:3,
run:function (){
console.log(this.name+"run...");
}
};
var xiaoming={
name:"xiaoming"
};
//小明的原型时 Student
xiaoming.__proto__=Student;
//xiaoming.run()
//xiaomingrun...
class继承
class关键字是在Es6引入的。
1.定义一个类,属性,方法
//定义一个学生的类
class Student{
constructor(name) {
this.name=name;
}
hello(){
alert('hello')
}
}
var kk=new Student("kk");
var kk1=new Student("kk1");
//kk.hello()
//kk.name
//"kk"
//kk1.name
//"kk1"
2.继承
//定义一个学生的类
class Student{
constructor(name) {
this.name=name;
}
hello(){
alert('hello')
}
}
class xxs extends Student{
constructor(name,grade) {
super(name);
this.grade=grade;
}
mygrade(){
alert("我是一名小学生");
}
}
var kk1=new xxs("kk1",1)
本质:查看对象原型
原型链
__ proto __
7.操作BOM对象(重点)
浏览器介绍
JavaScript和浏览器关系?
JavaScript诞生就是为了能让他在浏览器中运行!
BOM:浏览器对象模型
- IE
- Chrome
- Safari
- FireFox
第三方浏览器
- qq浏览器
- 360浏览器
Windows(重要)
Windows代表 浏览器窗口
window.alert(1)
undefined
window.innerHeight
1105
window.innerWidth
225
window.outerHeight
825
window.outerWidth
886
Navigator
navigator,封装了浏览器信息
navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.66 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.66 Safari/537.36"
navigator.platform
"Win32"
大多数时候,我们不会使用navigator对象,因为会被认为修改!
不建议使用这些属性来判断和编写代码
screen
代表屏幕尺寸
screen.width
1680
screen.height
1050
loction(重要)
location代表当前页面的URL信息
location.host: "localhost:63342" //主机
location.hostname: "localhost" //姓名
location.protocol: "http:" //协议
location.reload: ƒ reload() //刷新网页
location.https://blog.csdn.net/Barry_kk?spm=1000.2115.3001.5343 //定位
document
document代表当前页面,HTML DOM文档数
document.title
"Title"
document.title='kk'
"kk"
获取具体的文档树节点
<dl id="app">
<dt>java</dt>
<dd>javase</dd>
<dd>javaee</dd>
</dl>
<script>
var dl= document.getElementById('app');
</script>
获取cookie
document.cookie
//
劫持cookie原理
www.taobao.com
<script src="aa.js"></script>
<!--恶意人员获得cookie-->
服务器端可以设置cookie :httpOnly
history
history代表浏览器的历史记录
history.forward //前进
hisrory.back //后退
8.操作DOM对象(重点)
核心
浏览器网页就是一个DOM树形结构!(文档对象模型)
- 更新:更新Dom节点
- 遍历DOM节点:得到Dom节点
- 删除:删除一个Dom节点
- 添加:添加一个新的节点
要操作一个dom节点,就必须先获得这个dom节点!
获得dom节点
// 对应css选择器
var h1=document.getElementsByTagName('h1');//标签选择器获得节点
var p1=document.getElementById('p1');//id选择器获得节点
var p2=document.getElementsByClassName('h1');
var father=document.getElementById('father');
var childrens=father.children;//获取父节点下的所有子节点
// father.firstChild 第一个节点
// father.lastChild 上一个节点
//father.nestChile 下一个节点
原生代码,之后尽量使用jquery
更新dom节点
<div id="id1">
</div>
<script>
var id1=document.getElementById('id1');
</script>
操作文本
- **id1.innerText=‘123’**修改文本的值 ///“123”
- id1.innerHTML=’< strong> 123 </ strong>’ //可以解析HTML文本标签
操作JS style
id1.style.color='red';//属性使用字符串 包裹
"red"
id1.style.fontSize='20px';//- 转驼峰命名问题
"20px"
id1.style.padding='2em';
"2em"
删除节点
删除节点的步骤:先获取父节点然后再通过父节点删除自己!
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
//标准删除案例
void self=document.getElementById('p1');
var father=p1.parentElement;
father.removeChild(self);
//删除是一个动态的过程 console.log()
father.removeChild(father.children[0])//cw
father.removeChild(father.children[0])//错误
father.removeChild(father.children[0])//cw
</script>
注意:删除多个节点是,children是在时刻变化的,一定要注意
插入节点
我们获得了某个dom节点,假设dom节点是空的,我们通过innerHTML增加一个元素,但是这个DOM节点已经存在元素了,我们就不能这么干了 !会产生覆盖
<body>
<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');
</script>
</body>
控制台中 list.appendChild(js) -》可以追加节点
- 创建一个新的标签实现插入
<body>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
</div>
<script>
//通过JS创建一个新节点
var newP=document.createElement('p');
newP.id='newP';
newP.innerText='hello,kk';
list.appendChild(newP);
</script>
</body>
- 插入到固定顺序位置
<body>
<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 ee=document.getElementById('ee');
var js=document.getElementById('js');
var list=document.getElementById('list')
list.insertBefore(js,ee);
</script>
9.操作表单(验证)
表单是什么
- 文本框 text
- 下拉框
- 单选框 radio
- 隐藏域 checkbox
- 密码框 password
- …
表单目的:提交信息
获得要提交的信息
<body>
<form action="post">
<p><span>用户名</span> <input type="text" id="username"></p>
<!-- 多选框的值,就是定义好的value值-->
<p><soan>性别</soan>
<input type="radio" name="sex" value="man" id="boy">男
<input type="radio" name="sex" value="women" id="girl">女</p>
</form>
<script>
var input_text=document.getElementById('username');
var boy_radio=document.getElementById('boy')
var girl_radio=document.getElementById('girl')
//111111对于单选多选框等等固定的值
// 控制台中 boy_radio.checked
// 控制台中 boy_radio.checked=true
//222222得到输入框的值
// 控制台中 input_text.value
//修改输入框的值
//控制台中 input_text.value='111'
</script>
</body>
提交表单
<body>
<form action="#" method="get">
<p><span>用户名:</span> <input type="text" id="username" name="username"></p>
<p><span>密码:</span> <input type="text" id="password" name="password"></p>
<!--绑定事件-->
<button type="button" onclick="aaa()">提交</button>
</form>
<script>
function aaa(){
var uname=document.getElementById('username');
var pwd=document.getElementById('password');
console.log(uname.value); //value就是内容
console.log(pwd.value); //value就是内容
pwd.value='*********';
}
</script>
</body>
10.jQuery
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
javascript和jQuery:工具类
jQuery库,里面存在大量的JavaScript函数
选择器
<script>
//原生js,选择器少,麻烦不好记
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();
//jquery css中选择器全可用
$(’p‘).click() //标签选择器
$(’#id1‘).click() //id选择器
$(’.class‘).click() //class选择器
</script>
jQuery事件
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
#divMove{
width: 500px;
height: 500px;
border: 3px solid red;
}
</style>
</head>
<body>
<!--获取鼠标当前的坐标-->
mouse: <span id="mouseMove"></span>
<div id="divMove">
点这里移动鼠标试试
</div>
<script>
//当网页元素加载完毕之后,响应事件
$(function aaa() {
$('#divMove').mousemove(function (e) {
$('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)
})
});
</script>
操作dom元素
//节点文本操作
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<ul id="test-ul">
<li class="jsq">javascript</li>
<li name="python">python</li>
</ul>
<script>
//document.getElementById()
$('#test-ul').text(); //获得值
// $('#test-ul').text(’设置值‘); //设置值
$('#test-ul').html(); //获得值
$('#test-ul[name=python]').show();
$('#test-ul[name=python]').hide();
$('#test-ul').css({
'color':'red'})
</script>
</body>
11.如何巩固js
-
看框架源码 jQuery
-
看游戏源码 源码之家
-
巩固html css (拔网站,对应修改看效果)
12.常用工具相应
- element
- ant design
- docsify