1.什么是JavaScript？
JavaScript是一门直接上最流行的脚本语言
ECMAScript是JavaScript的一种标准规范
2.基本使用及HelloWorld
JavaScript快速上手：第一个JavaScript
设置弹窗alert
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的第一个JavaScript程序</title>
<!-- script标签内写JavaScript代码-->
<!-- <script !src="">-->
<!-- alert("hello world!");-->
<!-- </script>-->
<!-- 外部引入 注意：script标签必须成对存在-->
<script src="js/qd.js"></script>
<!-- 不用显示定义type，也默认就是JavaScript-->
<script type="text/javascript"> </script>
</head>
<body>
<!--这里也可以存放JavaScript代码-->
</body>
</html>
alert('hello world');
3.浏览器控制台的使用
控制台调试变量
控制台打印变量，相当于sout
源码
调试代码
控制台最常用
4.数据类型快速浏览
1.数据类型：
数值、文本、图形、音频、视频……
2.js不区分小数和整数，Number
123 // 整数123
123.1 //浮点数123. 1
1.123e3 //科学计数法
-99 //复数
NaN //not a numbe
Infinity //表示无限大
3.逻辑运算
&& 与
|| 或
！ 非
4.比较运算符（很重要，相当于是JS的一个缺陷，坚持不要使用==比较）
=
==
等于(类型不一样，值一样，也会判断为true)
===
绝对等于(类型-样，值一样，结果true)
5.字符串
"abc" 'abc'
6.须知：NaN===NaN，这个与所有的数值都不相等，包括自
己只能通过isNaN(NaN)来判断这个数是否是NaN
7.空指针
null和undefined
●null空
●undefined 未定义
8.数组
Java的数值必须是相同类型的对象~，JS中不需要这样!
var arr = [1,2,3,4,5,'he11o' ,nu11，true]
取数组下标:如果越界了，就会
1 undefined
9.对象（所有变量都是用var关键字）
对象是大括号，数组是中括号
var person={
name:"suibian",
age:15,
tags:['js','java','web','66']
}
属性之间用逗号隔开，最后一个属性不需要添加逗号
10.变量
主要不能以数字开头
可以用$开头，也可以使用下划线
也可以使用中文
浮点数问题：（尽量避免使用浮点数，存在精度问题）
可以使用判断测试范围
5.严格检查模式strict
前提是IDEA设置了es6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>严格检查模式</title>
<script !src="">
// 写js代码尽量带上严格检查模式↓ 避免出现js随意性产生的一些问题
//下面这行代码必须写在JS第一行
'use strict';
// 全局变量：尽量避免，因为太容易冲突
i=1;
// 另外局部变量尽量都是用let定义
let i=1;
</script>
</head>
<body>
</body>
</html>
6.字符串类型详解
转义字符
’ 单引号
\n 换行
\t table空格
\u4e2d \u#### Unicode字符
\x41 Ascll字符
多行字符串编写
使用esc按键上的字符，就可以编写多行字符串
<script>
'use strict'
var msg=
`
你好
nihao
hello world
`
</script>
模板字符串
let name="suibian";
let age=15;
let msg=`你好呀，${name}`
字符串长度
console.1og(str. length)
字符串的可变性（不可变）
console.log(msg)
VM127:1 你好呀，suibian
undefined
var student="student"
undefined
student[0]=1
1
console.log(student)
VM317:1 student
方法
1.小写转换成大写
console.log(msg)
VM127:1 你好呀，suibian
undefined
var student="student"
undefined
student[0]=1
1
console.log(student)
VM317:1 student
undefined
console.log(student.toUpperCase)
VM450:1 ƒ toUpperCase() { [native code] }
undefined
console.log(student.toUpperCase())
VM469:1 STUDENT
2.大写转换成小写
console.log(msg)
VM127:1 你好呀，suibian
undefined
var student="student"
undefined
student[0]=1
1
console.log(student)
VM317:1 student
undefined
console.log(student.toUpperCase)
VM450:1 ƒ toUpperCase() { [native code] }
undefined
console.log(student.toUpperCase())
VM469:1 STUDENT
undefined
console.log(student.toLowerCase())
VM495:1 student
undefined
3.其他方法
注意substring是[ )的意思，包前面不包后面的一个范围
7.数组类型详解
JS里面Array可以包含任意的数据类型
var arr=[1,2,3,4,5]
undefined
console.log(arr)
VM599:1 (5) [1, 2, 3, 4, 5]
0: 1
1: 2
2: 3
3: 4
4: 5
length: 5[[Prototype]]: Array(0)
undefined
数组的内容可以产生变化
修改数组的长度大于实际数组内容长度，数组的长度就会发生变化，只是会产生空的未被定义的内容，如果小于实际数组内容的长度，就会产生内容缺失，但是是可以运行的
indexOf：下标索引
arr=[1,2,3,4,5,6,"1","2"]
(8) [1, 2, 3, 4, 5, 6, '1', '2']
arr.indexOf(0)
-1
arr.indexOf(1)
0
arr.indexOf(2)
1
arr.indexOf("1")
6
slice截取数组一部分的数据（类似于String中的SubString）
arr=[1,2,3,4,5,6,"1","2"]
(8) [1, 2, 3, 4, 5, 6, '1', '2']
arr.indexOf(0)
-1
arr.indexOf(1)
0
arr.indexOf(2)
1
arr.indexOf("1")
6
arr.slice(2)
(6) [3, 4, 5, 6, '1', '2']
push、pop 尾部添加元素、去掉尾部第一个元素
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']
push是往尾部添加元素
pop是排除掉最后一个元素
unshift、shift 头部添加元素、去掉头部第一个元素
arr=[1,2,3,4,5]
(5) [1, 2, 3, 4, 5]
arr.unshift("a","b")
7
arr
(7) ['a', 'b', 1, 2, 3, 4, 5]
arr.shift
ƒ shift() { [native code] }
arr.shift()
'a'
unshift往头部开始加入元素
shift是去掉头部的第一个元素
shift括号里面添加任何数字都是去掉第一个元素
arr.sort（）排序
arr=["A","D","C"]
(3) ['A', 'D', 'C']
arr.sort()
(3) ['A', 'C', 'D']
arr.reverse（）元素反转
arr=["A","D","C"]
(3) ['A', 'D', 'C']
arr.sort()
(3) ['A', 'C', 'D']
arr.reverse()
(3) ['D', 'C', 'A']
arr.concat（）返回数组、没有修改数组
arr=["A","D","C"]
(3) ['A', 'D', 'C']
arr.sort()
(3) ['A', 'C', 'D']
arr.reverse()
(3) ['D', 'C', 'A']
arr.concat(1,2,3)
(6) ['D', 'C', 'A', 1, 2, 3]
arr
(3) ['D', 'C', 'A']
join是数组内的元素用某连接符号连接起来
arr.join('-')
'D-C-A'
多维数组
arr = [[1,2],[3,4],["5","6"]];
arr[1] [1]
4
8.对象类型详解
设置若干个对象
JS中所有的键都是字符串，值是任意对象
var 对象名={
属性名：属性值
属性名：属性值
属性名：属性值
}
//定义了一个person对象，他有四个属性
var person={
name:"suibian",
age:15,
length:20
}
使用键值对，也就是对象属性：对象值，多个属性之间用逗号隔开，最后一个属性不加逗号
对象赋值
person.name="suibian1";
使用一个不存在的属性报错
person.hah
undefined
动态删减属性
delete person.name
true
person
{age: 15, length: 20}
动态添加属性
person.haha=1
1
查找对象值
'age' in person
true
'toString' in person
true
判断一个属性是否是这个对象自身拥有的
person.hasOwnProperty('age')
true
person.hasOwnProperty('toString')
false
9.分支和循环详解
if判断
var age=3;
if (age>3){
alert("suibian")
}else{
alert("maiyou")
}
while、do while循环语句
while (age<100){
age=age+1;
console.log(age)
}
do{
age=age+1;
console.log(age)
}while(age>3)
避免死循环，例如弹窗永远关不掉
while(true){
alert(123)
}
for循环
//快捷fori，和java的i.for有一点点不一样
for (let i = 0; i < 100; i++) {
console.log(i)
}
遍历数组
var age=[12,456,8,78,7156,4,878,7,489]
age.forEach(function (value){
console.log(value)
})
for……in
for (var num in age){
// if (age.hasOwnProperty(num)){
//
// }
console.log(age[num])
}
最常用↓↓↓↓也可以遍历Map以及字符、数组等等
for (var x of age){
console.log(x)
}
遍历Set
var set = new Set([5,6,7]);
for (1et x of set) {
console.1og(x)
}
遍历Map
var map = new Map([["tom" ,100],["jack" , 90],["haha" ,80]]);
for (1et x of map){
console.log(x)
}
10.Map和Set集合
检查有没有报错，需要ES6，ES6新特性
new Set();
new Map();
Map集合
new Set();
new Map();
var map=new Map([['tom',100],['jack',90],['jary',10]]);
var name=map.get('tom');// 通过key值获得value
console.log(name);
map.set('admin',20);//新增元素
map.delete("tom")//删除元素
Set集合（set是无序不重复的集合）
var set=new Set([1,1,1,1,3,4])
下面的是浏览器调试台测试
Set(3) {1, 3, 4}
set.add(1)
Set(3) {1, 3, 4}
set.add(8)
Set(4) {1, 3, 4, 8}
set.delete(1)
true
set
Set(3) {3, 4, 8}
查看是Set否包含某元素
console.log(set.has(3))
VM322:1 true
undefined
Iterator遍历Set中的元素
ES6新特性，因为for in有漏洞，遍历下标的时候会将name，age等属性遍历进去
11.函数的定义和参数获取
定义方式一、
JS里面所有的函数都是用function定义
-旦执行到return代表函数结束,返回结果!
如果没有执行return，函数执行完也会返回结果,结果就是undefined
function abs(x){
if (x>0){
return x=1
}else {
return x=0
}
}
定义方式二、
这种就是匿名内部类的写法
var abs=function (x){
if (x>0){
return x=1
}else {
return x=0
}
}
调用函数
abs(10)
手动抛出异常
JS可以传输任意的参数，但是也可以不传递参数，都不会报错
所以就需要手动定义异常，（JS不严谨）
var abs=function (x){
if (typeof x!='number'){
throw 'Not a Number';
}
if (x>0){
return x=1
}else {
return x=0
}
}
arguments关键字（遍历全部元素）
var abs=function (x){
if (typeof x!='number'){
throw 'Not a Number';
}
console.log("x=>"+x);
for (let i = 0; i < arguments.length; i++) {
console.log( arguments[i])
}
if (x>0){
return x=1
}else {
return x=0
}
}
rest的使用（多个参数往后的参数归为数组）
function abs(a,b,...rest){
console.log(a);
console.log(b);
console.log(rest);
}
11.变量的作用域、let、const详解
如果两个函数使用了相同的变量名，只要是在内部就不冲突
function sb(){
var x=1;
x=x+1;
}
function sb1(){
var x="A";
x=x+1;
}
内部函数可以访问外部函数，反之则不行
function sb(){
var x=1;
function sb1(){
y=x+1;//内部函数可以访问外部函数————可运行
}
z=y+1;//报错Uncaught ReferenceError: y is not defined
}
假设内部函数变量名和外部函数变量名重名
function a(){
var x=1;
function a2(){
var x='A';
console.log('inner'+x);
}
console.log('outer'+x);
a2();
}
在JS中函数查找变量从自身函数开始，由内向外查找，假设外部存在同名的函数变量，则内部函数会屏蔽外部函数的变量
提升变量的作用域
function a(){
var x="x"+y;
console.log(x);
var y='y';
}
a();
得出结果xundefined
相当于
function a(){
var y;
var x="x"+y;
console.log(x);
var y='y';
}
a();
JS执行引擎，直接提升的y的声明，但是不会提升变量y的赋值，属于JS的特性
所以变量的定义应该直接先放在头部，不要乱放，便于代码维护
function a(){
var x=1,
y=x+1,
z,i,b;undefined
//之后随意用
}
全局对象
默认所有的全局变量都会被绑定在windows下
alert本身也是windows下的一个变量
规范
//规范
var guifan= {};
//定义全局变量
guifan.name='guifan';
guifan.add=function (a,b){
return a+b;
}
把自己的代码放入自己的定义的唯一空间中，降低全局命名冲突的问题
let局部作用域
function aaa(){
for (var i = 1; i <100 ; i++) {
console.log(i)
}
console.log(i+1)//问题？i已经跑出了作用域了
}
let关键字解决局部作用域冲突问题
function aaa(){
for (let i = 1; i <100 ; i++) {
console.log(i)
}
console.log(i+1)//问题？i已经跑出了作用域了
}
常量const（ES6新特性—只读变量）
ES6之前都是常量用大写来代替，习惯
ES6引入之后就用const定义，它是一个只读变量
const PI=3.14
PI=2.12//报错
12.方法的定义和调用、apply
方法就是吧函数放在对象里面，对象只有两个东西：属性和方法
var ming={
name:'名',
birth:2000,
age:function (){
var now=new Date().getFullYear();
return now-this.birth;
}
}
apply
13.Date
内部对象
typeof NaN
'number'
typeof true
'boolean'
typeof 123
'number'
获取时间Date
var now =new Date();//Thu Mar 03 2022 10:02:29 GMT+0800 (中国标准时间)
now.getFullYear();
now.getMonth();//0-11月份
now.getDate();
now.getDay();//星期几
now.getHours();
now.getMinutes();
now.getSeconds();
now.getTime();//时间戳，全世界统一，子1970.1.1 00：00 开始的毫秒数
//根据时间戳返回当前的时间
// now.getTime();
// 1646273359214
// console.log(new Date(1646273359214))
// VM457:1 Thu Mar 03 2022 10:09:19 GMT+0800 (中国标准时间)
// 返回本机规格的时间
// now.toLocaleString()
// '2022/3/3 10:15:52'
now.getUTCSeconds();//根据世界时返回时间的秒数（0~59）。
最标准的就是
now.getTime();
console.log(new Date(1646273359214))
14.JSON对象（轻量级的数据交换格式）
JSON字符串和JS对象的转换
var user={
name:"sb",
age:3,
sex:'男'
}
//对象转化为json字符串
var jsonUser=JSON.stringify(user);
//json字符串转换为对象，参数为json字符串
var obj=JSON.parse('{ "name":"sb","age":3,"sex":"男"}');
Ajax
原生的js写法xhr异步请求
jQuey封装好的方法$("#name").ajax(")
axios 请求
15.面向对象原型继承
proto（指向关系，类似于继承）
var User={
name:"sb",
age:3,
sex:'男',
run: function (){
console.log(this.name+"run...");
}
};
var xiaoming={
name: "xiaoming"
};
//小明的原型指向User
xiaoming.__proto__=User;
如果中间小明指向了人、后面指向了鸟，那他就是先成为人再成为鸟
16.面向对象class继承
function Box(name, age) {
//构造函数模式
this.name = name;
this.age = age;
this.run = function () {
return this.name + this.age + '正在运行...';
};
}
var box1 = new Box('Sb', 100); //new Box()
var box2 = new Box('Sb1', 200);
alert(box1.run());
alert(box1 instanceof Box); //box1从属于Box
17.操作BOM对象（重点！！）
BOM浏览器对象模型
windows代表浏览器窗口
Navigator(多数的时候不会使用)
Navigator封装了浏览器信息，多数的时候不会使用，因为它可以认为修改
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36'
navigator.platform
'Win32'
screen
screen.height
900
screen.width
1600
location（重点）代表当前页面的URL信息
location
Location {ancestorOrigins: DOMStringList, href: 'https://www.baidu.com/', origin: 'https://www.baidu.com', protocol: 'https:', host: 'www.baidu.com', …}
ancestorOrigins: DOMStringList {length: 0}
assign: ƒ assign()
hash: ""
host: "www.baidu.com" 主机
hostname: "www.baidu.com"
href: "https://www.baidu.com/" 挂钩
origin: "https://www.baidu.com"
pathname: "/"
port: ""
protocol: "https:" 协议
reload: ƒ reload() 方法——重新加载——刷新网页
replace: ƒ replace()
search: ""
toString: ƒ toString()
valueOf: ƒ valueOf()
Symbol(Symbol.toPrimitive): undefined
[[Prototype]]: Location
location.assign('https://fanyi.youdao.com/') 设置新的地址，在JS中放入新的地址就可以实现跳转
document 当前页面
document.title='狂神说' 改变当前页标题
'狂神说'
获取具体的文档树节点
<dl id="app">
<dt>java</dt>
<dd>SE</dd>
<dd>AE</dd>
<dd>UE</dd>
<dd>IE</dd>
</dl>
<script !src="">
var dl=document.getElementById('app');
</script>
dl
<dl id="app"><dt>java</dt><dd>SE</dd><dd>AE</dd><dd>UE</dd><dd>IE</dd></dl>
获取cookie（重点）
document.cookie
劫持cookie原理
恶意获取你的cookie，上传到自己的服务器
解决办法：服务端可以设置cookie：httpOnly
history浏览器历史记录
history.back() 后退
history.forward() 前进
18.获取DOM节点
浏览器网页就是一-个Dom树形结构!
●更新:更新Dom节点
●遍历dom节点:得到Dom节点
●删除:删除一个Dom节点
●添加:添加一个新的节点
要操作一个Dom节点，就必须要先获得这个Dom节点
<div id="father">
<h1 >标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script !src="">
var h1=document.getElementsByTagName('h1');
var p1=document.getElementById('p1');
var p2=document.getElementsByClassName('p2');
var father=document.getElementById('father');
var childrens=father.children;//获取父节点下所有子节点
father.firstChild;
father.lastChild;
</script>
这是原生代码，之后尽量都是用JQuery（）；
19.更新DOM节点
<div id="id1">
</div>
更新节点
修改文本的值
id1.innerText='123'
id1.innerText='456'
加粗文本（HTML）可以解析HTML文本标签
id1.innerHTML='<strong>123</strong>'
给文本设置颜色
id1.style.color='yellow'
文本设置大小
id1.style.fontSize='200px';
文本内边距设置
id1.style.padding='2em'
修改网页的布局
20. 删除DOM节点
先获取父节点，再通过父节点删除自己
标准删除节点
<div id="father">
<h1 >标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script !src="">
var self=document.getElementById('p1');
var father=p1.parentElement;
father.removeChild(self);
</script>
方式二
需要注意！！————删除是一个动态的过程
father.removeChild(father.children[0]);
father.removeChild(father.children[1]);
father.removeChild(father.children[2]);
删除多个节点的时候，children是在时刻变化的， 删除节点的时候一定要注意~
21.创建和插入DOM节点
假设节点为空，那么可以通过innerHTML增加元素，但是已经存在的情况下就不可以这么操作，增加元素会覆盖原来所有的元素
所以有元素的时候需要添加
追加操作
<p id="js">JS</p>
<div id="list">
<p id="se">JAVASE</p>
<p id="ee">JAVAEE</p>
<p id="me">JAVAME</p>
</div>
<script !src="">
var js = document.getElementById('js');
var list = document.getElementById('list');
</script>
list.appendChild(js)
list.append(js)
创建节点(append、追加节点)
var newP=document.createElement('p');
newP.id='newP';
newP.innerText='Hello World';
list.append(newP);
创建节点（通用、常用、重要）
var myscript = document.createElement('script');
myscript.setAttribute('type','text/javascript');//括号里面一个是key值，一个是value值
myscript.setAttribute('id','newP');
22.获取和设置表单的值
获取表单输入的值
修改表单输入的值
<form action="post">
<span>用户名：</span> <input type="text" id="username">
</form>
<script !src="">
var inputtext = document.getElementById('username');
</script>
检查表单的输入内容
inputtext.value
'4564564'
inputtext.value='123123'
'123123'
检查单选框是否被选择
<form action="post">
<p>
<span>用户名：</span> <input type="text" id="username">
</p>
<p>
<span>性别：</span>
<input type="radio" name="sex" value="man" id="boy">男
<input type="radio" name="sex" value="woman" id="girl">女
</p>
</form>
<script !src="">
var inputtext = document.getElementById('username');
var radioman = document.getElementById('boy');
var radiowoman = document.getElementById('girl');
</script>
radiowoman.checked
true或者falese
radiowoman.check=true //单选框赋值
23.表单提交验证和前端密码的MD5加密（非常乱）
重点就是下载MD5，然后导入，接着用MD5方法转换input的输入值value，别的不用重点看，很乱。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>提交表单</title>
<script src="../resource/md5.js" type="text/javascript"></script>
</head>
<body>
<form action="#" method="post" onsubmit="aaa()"> <!--表单级别的绑定-->
<p>
<span>用户名：</span> <input type="text" id="username" name="username" required>
<!-- required 属性规定必需在提交之前填写输入字段。-->
</p>
<p>
<span>密码:</span> <input type="password" id="password" id="password" required>
</p>
<!-- <input type="hidden" id="md5-password" name="password"> <!–工作中这么做比较安全稳妥–>-->
<!-- 绑定事件 onclick被点击-->
<button type="button" onclick="aaa()">提交</button>
</form>
<script>
function aaa(){
var uname = document.getElementById('username');
var pwd = document.getElementById('password');
// var md5pwd = document.getElementById('md5-password');
console.log(uname.value);
console.log(pwd.value);
//MD5算法
pwd.value=hex_md5(pwd.value);
console.log(pwd.value);
//可以校验判断,true就是通过校验，false就是阻止提交
return true;
}
</script>
</body>
</html>
24.初识jQuery及公式
jQuery里面存在着大量的JS函数
选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初始jQuery</title>
<!-- <script crossorigin="anonymous" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script>-->
<script src="jquery-3.6.0.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>
25.jQuery选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery选择器</title>
</head>
<body>
<script>
// 原生js，选择器少，麻烦不好记
//标签
document.getElementsByTagNameNS();
//id
document.getElementById();
//类
//jQuery css中的选择器它全部都能用！
document.getElementsByClassName();
$('p').click();//标签选择器
$('#id').click();//id选择器
$('.class').click();//类选择器
</script>
</body>
</html>
26.jQuery事件
事件：键盘、鼠标、其他事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件</title>
<script src="lib/jquery-3.6.0.js"></script>
<style>
#divMove{
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
mouse:<span id="mouseMove"></span>
<div id="divMove">
在这里移动鼠标试试
</div>
<script>
//当网页元素加载之后，响应事件
// $(document).ready(function (){
//
// })
$(function (){
$('#divMove').mousemove(function (e){
$('#mouseMove').text('x'+e.pageX+'y'+e.pageY);
})
});
</script>
</body>
</html>
27.jQuery操作DOM元素
节点文本操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作DOM元素</title>
<script src="lib/jquery-3.6.0.js"></script>
<style>
</style>
</head>
<body>
<ul id="text-ul">
<li class="js">JavaScript</li>
<li name="python">python</li>
<li></li>
</ul>
<script !src="">
//操作DOM，节点文本操作
$('#text-ul li[name=python]').text();//获得值
// $('#text-ul li[name=python]').text('123');//设置值
$('#text-ul').html();
// $('#text-ul').html('<strong>123</strong>');//设置值
// $('#text-ul li[name=python]').css("color","red")
</script>
</body>
</html>
css 的操作
$('#text-ul li[name=python]').css("color","red")
元素的显示和隐藏
display：none
$('#text-ul li[name=python]').show()
$('#text-ul li[name=python]').hide()
