本文已参与「新人创作礼」活动，一起开启掘金创作之路
概述
JavaScripts是一门世界上最流行的脚本语言
Java, JavaScript
一名合格的后端人员，必须要精通JavaScript
历史
(29条消息) JavaScript的起源故事_杨校的博客-CSDN博客_javascript历史
ECMAScript它可以理解为是一个javaScript的一个标准
最新版本已经到es6版本~
但是大部分浏览器只停留在支持es5代码上！
开发环境-------线上环境， 版本不一致
快速入门
内部标签
<scripts>
//....
</scripts>
外部引入
abs.js
//...
test.html
<scrip src="abc.js"></scrip>
<title>Title</title>
<!--<!– script标签内， 写JavaScript代码–>-->
<!-- <script>-->
<!-- alert("hello world");-->
<!-- </script>-->
<!--注意: script标签，必须成对出现-->
<script src="js/qj.js"></script>
<!-- 不用显示定义type, 也默认就是 javaScript-->
<script type="application/javascript">
</script>
</head>
<body>
<!--<script src="js/qj.js"></script>-->
<!--这里也可以存放-->
</body>
<!--<script src="js/qj.js"></script>-->
浏览器入门
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- javaScript严格区分大小写-->
<script>
// 定义变量 变量类型 变量名 = 变量值;
const score = 78;
// alert(num);
// 条件控制
if (score>60 &&score<70){
alert("60~70")
}else if (score>70 && score<80){
alert("70~80");
}else {
alert("other");
}
/**
*console.log(score) 在浏览器的控制台打印变量！ System.out.println();
*
*/
</script>
</head>
数据类型
数值，文本，图形，音频，视频......
变量
var $1 //合法
var 王者荣耀 = "倔强青铜";
number js不区分小数和整数
123 //整数 1123
123.1 //浮点数 123.1
1.123e1 //科学计数法
NaN // not a number
Infinity //表示无限大
字符串 ‘abc' "abc"
布尔值 true, false
逻辑运算
&& 两个都为真
|| 一个为真，结果为真
！ 真为假，假为真
比较运算符
=
== 等于 (类型不一样， 值一样， 也会判断为true)
=== 绝对等于（类型一样，值一样，结果为true）
须知
- NaN === NaN 这个与所有的数值都不相等，包括自己
- 只能通过isNaN(NaN)来判断这个数是不是NaN
浮点数问题：
console.log((1/3) === (1-2/3))
尽量避免使用浮点数进行运算，存在精度问题
Math.abs(1/3-(1-2/3))<0.00000001
null和undefined
- null 空
- undefined 未定义
数组
java的数值必须是一些相同类型的对象~，JS中不需要这样！
var arr = [1, 2, 3, 4, 5, 'hello', null, "cea"];
取数组下标：如果越界了，就会
undefined
对象
对象使用大括号，数组是用中括号~~
每个属性之间使用逗号隔开，最后一个不需要添加。
var person = {
name: "liu",
age:9,
tags:['js','java','web','...']
}
取对象的值
person.name
>"liu"
person.age
>9
严格检查模式
<!-- 全局变量-->
// i = 1;
//ES6 let 局部变量
// let i = 9
//严格检查模式
// 'use strict'; 必须放在变量上面
// i = 9;
// 预防JavaScript的随意问题
数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
'use strict';
// console.log('\'');
// console.log('a\nb');
// console.log('a\tb');
// console.log('\u4e2d');// \u#### Unicode字符
// console.log("a");
// console.log('\x41') //Ascll字符
//多行字符串编写
// let msg =
// `你好啊
// 未来的你自己
// 希望你成功
// `
// //模板字符串
// let name = "liu";
// let age = 3;
// let msg = `你好呀, ${name}`
// 字符串长度
let student = "abj";
console.log(student.length)
// 字符串可变性，不可变
student[0] = 1;
// 结果依然不变
// 大小写转化
// 注意这里是方法不是属性
console.log(student.toUpperCase());//大写
console.log(student.toLowerCase())//小写
console.log(student.indexOf('s'))//获取下标为
console.log(student.substring(1))//从第一个往后全部截取
console.log(student.substring(1,3))//[)
</script>
</head>
<body>
</body>
</html>
数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var arr = [1,2,3,4,5,6];
console.log(arr);
//数组内容可变
arr[0] = 0;
console.log(arr);
//数组长度可变
arr.length = 10;
console.log(arr);
// 如果赋值过小 元素就会丢失
var arr1 = [1,2,3,"1","2"];
arr1.indexOf(1);
arr1.indexOf("1");
// 两者不一样，下标不同
// slice() 截取Array的一部分，返回一个新数组，类似于String中的substring
arr1.slice(1,5);
arr1.push("1")
// push 压入尾部
// pop 弹出尾部的一个元素
// unshift() 压入头部的一个元素
// shift() 弹出头部的一个元素
arr1.sort();
// sort排序
// reverse()反转
arr1.concat(["1","2"]);
// 拼接没有干掉原数组，只是返回一个新数组
arr1.join('-')
// 链接符号join
// 打印拼接数组，使用特定的字符串链接
//多维数组
arr2 = [[1,2,3],[8,9],["2","0"]]
arr2[1][1]
</script>
</head>
<body>
</body>
</html>
对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
'use strict';
var person = {
name : "liu",
age : 3,
email:"1234323@qq.com",
score:0
}
// person.age
// 3
// 使用一个不存在的对象属性，不会报错！undefined
// person.haha
// 不会报错！ undefined
// 动态的删减属性，通过 delete 删除对象的属性
// delete person.age
// true
// 动态的添加属性,直接给新的属性添加值即可
// person.haha = "haha";
// // "haha"
// 判断属性值是否在对象中
// ‘age’ in person
// true
// 判断一个属性是否是这个对象自身所拥有的hasOwnProperty('age')
</script>
</head>
<body>
</body>
</html>
数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
'use strict';
// //if判断
// var age = 3;
// if (age>3){
// alert("haha");
// }else {
// alert("jdjc")
// }
// while循环
// var age =4;
// while(age<100){
// age =age+1
// console.log(age);
// }
// // for循环
// var age = 1;
//
// for (let i = 0; i < 100; i++) {
// console.log(i)
// }
// 数组循环
var ages = [12,3,4,6,6,78,8,2,46];
// age.forEach(function (value){
// console.log(value)
// })
for (var num in ages){
if (age.hasOwnProperty(num)){
console.log("存在");
console.log(ages[num])
}
}
</script>
</head>
<body>
</body>
</html>
Map和Set
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
'use strict'
//ES6
// new Map();
// new Set();
// var names = ["tom","jack","hha"];
// var scores = [100,90,80];
// Map
// let map = new Map([['TOM', 90], ['jack', 80], ['liu', 78]]);
// let name = map.get('TOM');
// map.set('admin',123456);
// console.log(name)
// Set 无序不重复集合
var set = new Set([3,1,1,2,1]);
set.add(2);
set.delete(1);
console.log(set.has(3))//是否包含某个元素
</script>
</head>
<body>
</body>
</html>
Iterator迭代器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
'use strict';
let arr = [3,4,5];//遍历数组
//in是下标， of是值
// var map = new Map([["tom",100],["jack",90],["liu",89]]);//遍历Map
// var set = new Set([5,6,7]);//遍历Set
// for (let x of map){
// console.log(x)
// }
// arr.name = "lcddc"//错误
for (let x in arr){
console.log(x);
}
</script>
</head>
<body>
</body>
</html>
函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 一旦执行到return代表函数结束,返回结果
// 如果没有执行return, 函数执行完也会返回结果, 结果就是 undefined
// function abs(x){
// if (x>=0){
// return x;
// }else {
// return -x;
// }
// }
// var abs = function (x){
// //可以传递多个参数，所以要手动抛出异常
// if (typeof x !== 'number'){
// throw 'No a number'
// }
// if (x>=0){
// return 0;
// }else {
// return -x;
// }
// }
var abs = function (x){
//可以传递多个参数，所以要手动抛出异常
// arguments 是一个JS免费赠送的关键字
// 代表传递进来的所有参数是一个数组
console.log("x=>"+x);
for (var i = 0;i<arguments.length;i++){
console.log(arguments[i]);
}
if (x>=0){
return 0;
}else {
return -x;
}
}
</script>
</head>
<body>
</body>
</html>
rest用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// function aaa(a,b){
// console.log("a=>"+a);
// console.log("b=>"+b);
// if (arguments.length>2){
// for (var i = 2;i<arguments.length;i++){
// // 判读多的情况
// }
// }
// }
// 多个参数除了第一个之外的所有参数
function aaa(a,b,...rest){
console.log("a=>"+a);
console.log("b=>b"+b);
console.log(rest)
}
</script>
</head>
<body>
</body>
</html>
变量作用域
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();
function qj(){
//变量y提到前面，默认的
var x = "x" +y;
console.log(x);
var y = 'y';
}
qj();
function qj2(){
var x = 1;
y = x+1;
z,i,a;
}
全局函数
//全局变量
var x = 1;
function f(){
console.log(x);
}
f()
console.log(x)
//全局对象 window alert()这个函数本身也是一个window 变量
var x = "xxx";
window.alert(x);
window.alert(window.x);
var x = 'xxx';
window.alert(x);
var old_alert = window.alert;
window.alert = function (){
}
//发现 alert() 失效了
window.alert(123);
// 恢复
window.alert = old_alert;
window.alert(456);
//把自己的代码全部放入自己定义的唯一空间名字, 降低全局命命冲突
// 唯一全局变量
var liu = {};
// 定义全局变量
liu.name = "ko";
liu.add = function (a,b){
return a+b;
}
局部作用域 let
function aaa(){
for (let i = 0;i <100;i++){
console.log(i);
}
console.log(i+1);
// i可以被全局使用，解决这个问题出现了局部变量 let
}
var PI = '3.14';
//改变了常量，所以引入了const
console.log(PI);
PI = "123";
console.log(PI)
方法
var liu = {
name : 'jiu',
bitrh :2021,
age: function (){
var now = new Date().getFullYear();
return now -this.bitrh
}
}
function getAge(){
var now = new Date().getFullYear();
return now -this.bitrh
}
var liu = {
name : 'jiu',
bitrh :2021,
age: getAge
}
// 使用liu.age调用不然调用的是本地的
getAge().apply(liu,[]);//this指向liu这个对象，参数为空
内部对象
标准对象
typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"
JSON
-
JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式
-
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
-
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
在JavaScript一切皆对象，任何js支持的类型都可以用JSON来表示；
格式
- 对象都用 {}
- 数组都用 []
- 所有的键值对 都是用 key: value
Ajax
- 原生的js写法 xhr异步请求
- JQuery封装好的方法 $("#name").ajax("")
- axios请求
面向对象
- 类： 模板
- 对象 ： 具体的实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var student = {
name : "liu",
age : 3,
run:function (){
console.log(this.name+" run....")
}
};
var liu1 = {
name: liu1
};
var Bird = {
fly :function (){
console.log(this.name+"fly...");
}
}
// 原型父类
liu1.__proto__ = student;
</script>
</body>
</html>
// 不用记住这种方法
function Student(name){
this.name = name;
hello : function f(){
}
}
Student.prototype.hello = function (){
alert("hello")
}
class继承
class关键字，实在ES6引入的
//es6之后
class Student{
constructor(name) {
this.name = name;
}
hello(){
alert("hello")
}
}
var xiaoming = new Student("xiaoming");
继承
class Student{
constructor(name) {
this.name = name;
}
hello(){
alert("hello")
}
}
class xiaoxuesheng extends Student{
constructor(name,grade) {
super(name);
this.grade = grade;
}
myGrade(){
alert("xiaoxuesheng")
}
}
var xiaoming = new Student("xiaoming");
var xiaohong = new xiaoxuesheng("xiaohong",1);
原型链
操作BOM对象
浏览器介绍
JavaScript 和 浏览器关系？
JavaScript 诞生就是为了能够让他在浏览器中运行
BOM: 浏览器对象模型
- IE 6~11
- Chrome
- Safari
- FireFox
- Opera
第三方浏览器
- QQ浏览器
- 360浏览器
window
window 代表浏览器窗口
window.alert(1)
window.innerHeight
window.innerwidth
window.outerHeight
window.outerwidth
window.innerHeight
Navigator, 封装了浏览器的信息
navigator.appName //当前应用名字
navigator.appVersion //当前浏览器的版本
navigator.userAgent //用户的信息
navigator.platform //系统版本
Navigator 是一个类，navigator小写是对象
navigator 会被人为的修改掉
screen
代表屏幕信息
screen.width
1920px
screen.height
1080px
location
location 代表当前页面的IURL信息
host："www.baidu.com" //主机
herf: "https://www.baidu.com/" //当前网页的位置
protocol: "https" //协议
reload: f reload() //重新加载
document (当前文档信息)
document.title //当前页面标题
document.title = "liu" //可以改变标题
<dl id="app">
<dt>Java</dt>
<dd>JavaSE</dd>
<dd>JavaEE</dd>
</dl>
<script>
var dl = document.getElementById('app');//或取当前结点
</script>
获取cookie
客户端的本地信息
document.cookie
'SRCHUID=V=2&GUID=0BA89A2920DD4329AFDC4DEA42773F6A&dmnchg=1; SRCHD=AF=NOFORM; _EDGE_V=1; MUID=168A9ED797A26A6D3857915D96E16B63; PPLState=1; _tarLang=default=zh-Hans; _TTSS_IN=hist=WyJlbiIsImF1dG8tZGV0ZWN0Il0=; _TTSS_OUT=hist=WyJ6aC1IYW5zIl0=; ANON=A=E81E12D553FDC4474E1FBAB0FFFFFFFF&E=1a21&W=1; NAP=V=1.9&E=19c7&C=t-1AelOnhz3Ybv3Dp7GBvvWgufbBuyVTZ2rviS3Yc9anECoHWHnfCg&W=1; _U=1JXOSJjbMO4MhaqucFOkoMO15z_XS2D5bIsN6RMrU8U_Nw1yEs6507ZoqoRi6Qiiqeg0EDG9LHMX2BQuBbmer2vc7BPwldPuQspUx9gNvbuxkTLw3ahQBKTpRHUNTvrz8knkwkrfc6EOkZhbWwAkOY8dREfDRqrgSSw2psU44QTAdd-egyyz79k3z6D8C81U6; ABDEF=V=13&ABDV=11&MRNB=1635472969642&MRB=0; WLS=C=77ff6fbd11361f7e&N=kan; _SS=SID=2A14994E67026B3C1E9789AE66646A78; SRCHUSR=DOB=20201122&T=1635563493000&POEX=W; SNRHOP=I=&TS=; ipv6=hit=1635567086670&t=4; SRCHHPGUSR=SRCHLANGV2=zh-Hans&IPMH=d8fa6bd7&IPMID=1620955997173&BZA=0&BRW=NOTP&BRH=M&CW=339&CH=722&DPR=1.25&UTC=480&DM=0&EXLTT=31&HV=1635566984&WTS=63770901338&PLTL=450&PLTA=743&PLTN=4&SRCHLANG=zh-Hans&SW=1536&SH=864'
服务器端可以设置 cookie : httpOnly
history
history.back() //前进
history.forward() //后退
操作DOM对象
核心
浏览器网页就是一个DOM树形结构
- 更新： 更新Dom结点
- 遍历dom结点： 得到Dom结点
- 删除： 删除一个Dom结点
- 添加: 添加一个新的结点
要操作一个结点，就必须要先获得这个Dom结点
<title>Title</title>
</head>
<body>
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
<!--对应css选择器-->
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p2');
var p2 = document.getElementsByClassName('p2');
var father= document.getElementById('father');
var childrens = father.children; //获取所有父节点下的所有子结点
father.firstChild;//获取第一个结点
father.lastChild; //获取最后一个结点
</script>
</body>
</html>
更新结点
- id1.innerText = '456'
- id1.innerHTML='123' 加粗 可以解析HTML文本标签
<div id="id1">
</div>
<script>
var id1 = document.getElementById('id1')
</script>
改变css
id1.style.color = 'red'
id1.style.fontSize = '200px' //驼峰命名
id1.style.padding = '2em'
删除节点
删除节点步奏： 先获取父类节点，在通过父类节点删除自己
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
<!--对应css选择器-->
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p2');
var p2 = document.getElementsByClassName('p2');
var father= document.getElementById('father');
var childrens = father.children; //获取所有父节点下的所有子结点
// father.firstChild;//获取第一个结点
// father.lastChild; //获取最后一个结点
p1.parentElement; //获得父类元素
father.removeChild(p1)//删除子节点
father.removeChild(father.children[0])
//删除一个节点就会删除下面的所有结点
插入结点
我们获得了某个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');
var newp = document.createElement('p');
newp.id = 'newp1';
newp.innerText = "hello liu"
//创建一个标签结点
var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript');
var myStyle = document.createElement('script');
myStyle.setAttribute('type','text/css');
myStyle.innerHTML = 'body{background-color: chartreuse;}';
document.getElementsByTagName('head')[0].appendChild(myStyle)
</script>
操作表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<from action="post">
<p>
<span>用户名: </span> <input type="text" id="username" required>
</p>
<p>
<span>性别: </span>
<input type="radio" name="sex" value="man" id="boy"> 男
<input type="radio" name="sex" value="women" id="girl"> 女
</p>
<input type="submit">
</from>
<script>
var input_text = document.getElementById('username');
var boy_radio =document.getElementById('boy');
var girl_radio =document.getElementById('girl');
input_text.value;
input_text.value = '123';
boy_radio.value;
// 获得单选框的值
boy_radio.checked;//查看返回结果，是否为true， 如果为true则被选中
girl_radio.checked = true; //赋值
</script>
</body>
</html>
提交表单
<form action="post">
<p>
<span>用户名: </span> <input type="text" id="username" required>
</p>
<p>
<span>性别: </span>
<input type="radio" name="sex" value="man" id="boy"> 男
<input type="radio" name="sex" value="women" id="girl"> 女
</p>
<input type="submit">
</form>
<script>
var input_text = document.getElementById('username');
var boy_radio =document.getElementById('boy');
var girl_radio =document.getElementById('girl');
input_text.value;
input_text.value = '123';
boy_radio.value;
// 获得单选框的值
boy_radio.checked;//查看返回结果，是否为true， 如果为true则被选中
girl_radio.checked = true; //赋值
</script>
//md5加密
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form action="#" method="post">
<p>
<span>用户名: </span> <input type="text" id="username" name="username">
</p>
<p>
<span>密码: </span> <input type="password" id="password" name="password">
</p>
<button type="submit" onclick="aaa()">提交</button>
</form>
<script>
function aaa(){
var uname = document.getElementById('username');
var pwd = document.getElementById('password');
console.log(uname.value);
console.log(pwd.value);
//Md5算法
pwd.value = md5(pwd.value)
console.log(pwd.value);
// pwd.value = '***'
}
</script>
最优
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form action="https://www.baidu.com/?tn=02003390_13_hao_pg" method="post" onsubmit="return aaa()">
<p>
<span>用户名: </span> <input type="text" id="username" name="username">
</p>
<p>
<span>密码: </span> <input type="password" id="input-password">
</p>
<input type="hidden" id="md5-password" name="password">
<button type="submit" onclick="aaa()">提交</button>
</form>
<script>
function aaa(){
alert(1)
var uname = document.getElementById('username');
var pwd = document.getElementById('input-password');
var md5pwd = document.getElementById('md5-password');
md5pwd.value = md5(pwd.value)
return true;
}
</script>
</body>
</html>
jQuery
JQuery库，里面存在大量的JavaScript函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<a href="" id="test-jquery">点我</a>
<script>
// document.getElementById('id'); 多余
// 选择器就是css选择器
// 选择器 一个事件
// $(selector).action()
$('#test-jquery').click(function (){
alert('hello jquery');
});
</script>
</body>
</html>
选择器
<script>
//标签
document.getElementsByTagName()
document.getElementsByTagNameNS()
//id
document.getElementById();
//类
document.getElementsByClassName();
//jQuery css 中的选择器它全部都能用！
$('p').click();//标签选择器
$('#id1').click();//id选择器
$('.class').click();//类选择器
</script>
jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm (cuishifeng.cn)
事件
鼠标事件，键盘事件，其他事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.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>
$(function (){
$('#divMove').mousemove(function (e){
$('#mouseMove').text('x: '+e.pageX + 'y: '+e.pageY)
})
});
</script>
</body>
</html>
操作DOM元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<ul id="test-ul">
<li class="js">JavaScript</li>
<li name="python">python</li>
<!-- <li>JavaScript</li>-->
</ul>
<script>
$('#test-ul li[name=python]').text();
$('#test-ul').html();
</script>
</body>
</html>
css操作
$('#test-ul li[name=python]').css("color","red");
元素的显示和隐藏
$('#test-ul li[name=python]').show()
$('#test-ul li[name=python]').hide()
$('#test-ul li[name=python]').toggle();//相反操作
