JavaScript笔记
1.基本使用及helloworld
- 引入JavaScript
- 内部标签
- 引入外部JavaScript文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- script标签内写javascript代码 -->
<script>
alert('hello world');
</script>
<!--外部引入-->
<!--script标签必须是双标签-->
<!--不用显示定义type-->
<script src="js/zcz.js"></script>
</head>
<body>
<!-- body内也可以存放JavaScript代码 -->
</body>
</html>
alert('helloworld');
2.基本语法入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--JavaScript严格区分大小写-->
<script>
// 1.定义变量 变量类型 变量名 = 变量值;
var num = 13;
var score = 90;
// alert(num);
// 2.条件控制
if (score > 60 && score < 70) {
alert("60~70");
} else if (score >= 70) {
alert("other");
}
//console界面内
//console.log(score) 在浏览器的控制台打印变量
//System.out.println();
</script>
</head>
<body>
</body>
</html>
2.1 数据类型
- 数值、文本、图片、音频、视频......
变量
- 用var定义，不能以数字开头
var $a
var _sp
number：js不区分小数和整数
123 // 整数123
123.1 // 浮点数
1.23e3 // 科学计数法
-12 // 负数
NaN // not a number
Infinity // 无穷大
字符串
‘abc' "abcd"
布尔值与逻辑运算
true or false
a && b // 两个都为真，结果为真
a || b // 一真即真
!a // 布尔值取反
- 比较运算符
== // 等于(类型不一致时值一样也会判断为true)
=== // 绝对相等(类型一致的前提下值判断值是否相等)
不要使用 == 比较
须知：
- NaN===NaN 结果为false,这个数与所有的数值都不相等，包括自己
- 只能通过isNaN(NaN)来判断这个数是否是NaN
浮点数问题：
console.log((1/3)===(1-2/3)) false
避免使用浮点数进行运算，存在精度问题
Math.abs((1/3)-(1-2/3))<0.00000001
null和undefined
- null 空
- undefined 未定义
数组
- 数组不需要相同类型
var array = [1,2,3,4,null,'hello',false];
//对象数组
new Array(1,2,3,4,null,'hello',false);
- 取数组下标如果越界了会显示undefined
对象
- 数组都是中括号[]，对象是大括号()
- 每个属性之间使用逗号隔开
var person = {
name: "zcz";
age: 3;
tags: ['js','java','web','...']
}
- 取对象的值
person.name
>"zcz"
person.age
>3
分支和循环详解
- if判断
var age = 3.9;
if (age < 3) {
alert("age < 3");
} else if (age > 5) {
alert("age > 5");
} else {
alert("3 <= age <= 5");
}
- while循环，避免死循环
while (age < 100) {
age += 1;
//控制台输出
console.log(age);
}
- for循环
for (let i = 0; i < 100; i++) {
console.log(i);
}
- forEach遍历数组
//函数
var age = [1232,123123,34234,2323];
age.forEach(function (value) {
console.log(value);
})
- for...in遍历数组下标
for(let num in age) {
console.log(age[num]);
}
Map和Set
Map：键值对
var map = new Map([['tom',98],['sam',88],['sandy',99]]);
//通过key获得value
var person_name = map.get('tom');
//新增或修改
map.set('admin',12344);
//删除
map.delete('tom');
console.log(person_name);
console.log(map.get('admin'));
Set：无序不重复的集合
//Set可以去重
var set = new Set([3,3,3,2,1]);
console.log(set);
//3,2,1
set.add(4);//新增
set.delete(1);//删除
console.log(set.has(3));//判断是否包含某个元素
iterator
- 使用迭代器遍历 for (let x of ...){}
- 遍历数组
var arr = [3,4,5];
for (let x of arr) {
console.log(x);
}
- 遍历map
var map = new Map(["tom",99],["jackson",99]);
for (let m of map) {
console.log(m);
}
- 遍历set
var set = new Set([5,6,7]);
for (let x of set) {
console.log(x);
}
2.2 严格检查模式
- 预防JavaScript的随意性导致的一些问题
<!--使用前提:IDEA需要设置支持ES6语法-->
<!--局部变量建议用let去定义-->
<!--必须写在script第一行-->
<script>
'use strict';
i = 3;
</script>
2.3 数据类型详解
字符串
- 字符串使用单引号或双引号包裹
- 注意转义字符
\' 单引号
\n 换行
\t 制表
\u4e2d \u#### unicode字符
\x14 Ascll字符
- 多行字符串编写 使用tab键上的引号包裹字符串
<script>
'use strict';
var msg = `
hello
world
nihao
`;
</script>
- 模板字符串
let name = "zcz";
let msg = `nihao,${name}`;
- 字符串长度
console.log(str.length)
- 字符串不可变性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B994KCO1-1659830846364)(C:\Users\16339\AppData\Roaming\Typora\typora-user-images\image-20220803092556390.png)]
- 大小写转换的方法
//方法不是属性
student.toUpperCase()
student.toLowerCase()
- 获取指定下标
student.indexOf('t') //1
- substring截取字符串
[) //包头不包尾
student.substring(1) //从第一个字符串截取到最后一个
student.substring(1,3) //[1,3)
数组
- 数组中可以包含任意的数据类型
var arr = [1,2,3,4,5,6];
arr[0] = 1;
- 长度
arr.length
注意：假如给arr.length赋值，数组大小就会发生变化。如果赋值过小，元素就会丢失
- indexOf：通过元素或者下标索引
arr.index0f(2)
1 //字符串的1与数值1不同
- slice(int a,int b)：截取数组的一部分，返回一个新数组，类似于字符串截取substring
arr.slice(3,5);//[4,5] 包头不包尾
- push pop 尾部
push：将元素压入数组尾部
pop：将元素从数组弹出
- unshift shift 头部
unshift：压入到头部
shift：弹出头部的一个元素
- 排序 sort()
arr
(3) ['C', 'B', 'A']
arr.sort();
(3) ['A', 'B', 'C']
- 数组反转 reverse()
arr
(3) ['A', 'B', 'C']
arr.reverse();
(3) ['C', 'B', 'A']
- concat() 连接数组
- 返回一个新数组
arr
(3) ['C', 'B', 'A']
arr.concat([2,3,4]);
(6) ['C', 'B', 'A', 2, 3, 4]
arr
(3) ['C', 'B', 'A']
- 连接符 join
- 打印拼接数组，使用特定的字符串连接
arr
(3) ['C', 'B', 'A']
arr.join('-');
'C-B-A'
- 多维数组
arr = [[1,2],[4,5],[null,2342,'avx']];
arr[2][1];
2342
对象
- 若干个键值对
var 对象名 = {
属性名:属性值，
属性名:属性值，
属性名:属性值
}
// 定义了一个拥有四个属性的person对象，
var person = {
name:'zzcczz',
age:19,
email:'1234@163.com',
score:99
}
- js中的对象，{……}表示一个对象，键值对描述属性xxxx:xxxx，多个属性之间使用逗号隔开，最后一个属性不加逗号。
- JavaScript中的所有键都是字符串，值是任意对象。
- 对象赋值
person.name = 'zcz';
'zcz'
person.name
'zcz'
- 使用一个不存在的对象属性不会报错
person.hh
undefined
- 动态删除属性，通过delete删除对象的属性
delete person.name
- 动态的添加属性：直接给新的属性添加值
person.hh = "haha"
- 判断属性值是否在这个对象中
'age' in person
true
//继承的属性也会显示true
'toString' in person
true
- 判断一个属性是否是这个对象自身拥有的 hasOwnProperty(String str)
person.hasOwnProperty('toString');
false
person.hasOwnProperty('age');
true
3.函数及面向对象
3.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可以传任意个参数，也可以不传参数
arguments
- arguments是js自带的参数，代表传递进来的所有参数，是一个数组
var abs = function (x) {
console.log("x=>" + x);
for (let i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
}
- arguments包含所有参数，使用多余的参数进行附加操作，需要排除已有参数
rest
-
ES6引入的新特性，获取除了已定义参数外的所有参数
-
rest参数只能写在最后面，必须用...标识。
function a (a,b,...rest) {
console.log("a=>" + a);
console.log("b=>" + b);
console.log(rest);
}
3.2 变量的作用域
- 在JavaScript中，var定义的变量是有作用域的
function z() {
var x = 1;
x += 1;
}
x += 2;
//Uncaught ReferenceError: x is not defined
- 内部函数可以访问外部函数的成员，反之则不行
- 内部函数变量与外部函数变量重名时
function f_outer() {
var x = 1;
function f_inner() {
var x = 'A';
console.log('inner'+x);
}
f_inner();
console.log('outer'+x);
}
f_outer();
自动提升变量的作用域
可以先使用后定义
function z() {
var x = "x" + y;
console.log(x);
var y = "y";
}
//结果：xundefined
- 说明js执行引擎自动提升了y的声明，但没有提升y被赋的值
- 养成规范：所有变量定义都放在函数头部，便于代码维护
全局函数
'use strict'
//全局变量
x = 1;
function f() {
console.log(x);
}
f();
console.log(x);
//1
//1
全局对象window
var x = "xx";
alert(x);
//默认所有全局变量都绑定在window对象下
window.alert(window.x);
var old_alert = window.alert;
old_alert('abc');
alert('1234');
//“重写”alert
window.alert = function() {
};
//alert失效
window.alert(1222);
//恢复
window.alert = old_alert;
window.alert(444556);
- JavaScript只有一个全局作用域，任何变量（函数也可以称为变量），如果没有在函数作用范围内找到，就会向外查找，如果在全局范围内没有找到，就会报错
RefrenceError
规范
由于全局变量都绑定到window对象中，如果不同的js文件使用了相同的全局变量就会引发冲突。
//唯一全局变量
var ZApp = {};
//定义全局变量
ZApp.name = 'zcz';
ZApp.add = function(a,b) {
return a + b;
}
- 将自己的代码全部放入自己定义的唯一空间，降低全局命名冲突的问题
局部作用域 let
function aa() {
for (var i = 0; i < 100; i++) {
console.log(i);
}
//101 问题：i在作用域外还能使用
console.log(i+1);
}
- 使用let关键字，解决局部作用域冲突问题
function aa() {
for (let i = 0; i < 100; i++) {
console.log(i);
}
//Uncaught ReferenceError: i is not defined
console.log(i+1);
}
- 建议使用
let去定义局部变量
常量
- ES6之前，大写字母都表示常量，建议不要修改这样的值
- ES6引入了关键字
const
const PI = '3.14';
console.log(PI);
//TypeError: Assignment to constant variable
PI = '123';
3.3 方法
定义方法
- 方法就是把函数放在对象的内部，对象只有两个东西：方法和属性
var zcz = {
name:'zcz',
birth: 2000,
//定义方法
age: function() {
let now = new Date().getFullYear();
return now - this.birth;
}
}
//调用方法一定要加（）
//zcz.age()
function getAge() {
var now = new Date().getFullYear();
return now - this.birth;
}
var zcz = {
name:'zcz',
birth: 2000,
age: getAge
}
//zcz.age() ok
//getAge() NaN window对象中没有birth属性
- this默认指向调用它的那个对象
apply
在js中可以控制this指向
//this指向了zcz，参数为空
getAge.apply(zcz,[]);
//console
getAge()
NaN
zcz.age()
22
getAge.apply(zcz,[]);
22
4. 内部对象
标准对象
typeof 123
'number'
typeof '12331sfa'
'string'
typeof true
'boolean'
typeof NaN
'number'
typeof []
'object'
typeof {}
'object'
typeof Math.abs
'function'
typeof undefined
'undefined'
4.1 Date
var now = new Date();//Sat Aug 05 2022 08:44:37 GMT+0800 (中国标准时间)
now.getFullYear();//年
now.getMonth();//0~11月
now.getDate();//日
now.getDay();//星期几
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
//时间戳 全世界统一自1970.1.1 00:00:00
//1659747082467
now.getTime();
new Date(now.getTime());//将时间戳转为日期时间
//标准时间转为本地时间
now.toLocaleString();
'2022/8/6 08:45:42'
4.2 JSON对象
JSON是什么
- json的全称为：JavaScript Object Notation，**是一种轻量级的数据交互格式。**它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
- 简洁和清晰的层次结构使得json称为理想的数据交换语言
- 易于阅读和编写，同时也易于 机器解析和生成，并有效地提升网络传输效率。
在JavaScript中一切皆为对象，任何js支持的类型都可以用JSON表示；
格式：
-
对象都用{}
-
数组都用[]
-
所有键值对都是用key:value
- JSON字符串 和 JS对象的转化
var user = {
name:'zcz',
age:19,
sex:'male'
}
//对象转化为json字符串 {"name":"zcz","age":19,"sex":"male"}
var jsonUser = JSON.stringify(user);
//json字符串转化为对象 参数为json字符串
var obj = JSON.parse('{"name":"zcz","age":19,"sex":"male"}');
- JSON 和 JS对象的区别
var obj = {a:'hello',b:'hellob'};
var json = '{"a":"hello","b":"hellob"}'
4.3 Ajax
-
原生的js写法， xhr异步请求
-
jQuey 封装好的方法 $("#name").ajax("")
-
axios 请求
5.面向对象编程
5.1 什么是面向对象
- 类：模板 原型对象
- 对象：具体的实例
原型：
__ proto __
var student = {
name: 'student',
age: 19,
run: function() {
console.log(this.name+' run...');
}
};
var xiaoming = {
name: 'xiaoming'
};
//小明的原型是student
xiaoming.__proto__ = student;
var bird = {
fly: function() {
console.log(this.name + ' fly...')
}
}
//小明的原型是bird
xiaoming.__proto__ = bird;
class继承
ES6之前
function student(name) {
this.name = name;
}
//给student新增一个hello方法
student.prototype.hello = function() {
alert('hello');
};
class关键字是ES6引入的
- 定义一个类：属性+方法
//ES6后 引入class
class Student {
constructor(name) {
this.name = name;
}
hello() {
alert('hello ' + this.name);
}
}
var xiaoming = new Student('xiaoming');
var xiaohong = new Student('xiaohong');
xiaoming.hello();
xiaohong.hello();
- 继承
class Primary extends Student {
constructor(name,grade) {
super(name);
this.grade = grade;
}
myGrade() {
alert(this.name + ' is a primary school student');
}
}
var xiaoming = new Student('xiaoming');
var xiaohong = new Primary('xiaohong','primary');
xiaoming.hello();
xiaohong.hello();
xiaohong.myGrade();
- 本质：查看对象原型
原型链
6. 操作BOM对象(重点)
BOM：操作浏览器对象模型
-
javascript是能在浏览器中运行的语言
-
edge
-
Chrome
-
Safari
-
FireFox
-
Opera
window
- window代表浏览器窗口
window.alert(1)
undefined
window.innerHeight
258
window.innerwidth
919
window.outerHeight
994
window.outerwidth
919
navigator
- navigator封装了浏览器的信息
navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.134 Safari/537.36 Edg/103.0.1264.77'
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.134 Safari/537.36 Edg/103.0.1264.77'
navigator.platform
'Win32'
- 不建议使用
navigator对象，因为会被认为修改
screen
代表屏幕尺寸
screen.width
1494
screen.height
934
location(重点)
location代表当前页面的URL信息
host: "www.bilibili.com"
href: "https://www.bilibili.com/"
protocol: "https:"
reload: ƒ reload() // 刷新网页
// 设置新的地址
location.assign('https://...')
document
document代表当前的页面，HTML DOM文档树
document.title
'哔哩哔哩 (゜-゜)つロ 干杯~-bilibili'
可以获取具体的文档树结点
<dl id="app">
<dt>web</dt>
<dd>html</dd>
<dd>css</dd>
<dd>javascript</dd>
</dl>
<script>
var dl_info = document.getElementById('app');
</script>
可以获取cookie
document.cookie
服务器端可以设置 cookie: httpOnly保证cookie的安全
history
history代表浏览器的历史记录
history.back() //后退
history.forward() //前进
7.操作DOM对象(重点)
核心
浏览器网页就是一个DOM属性结构
- 更新：更新DOM节点
- 遍历DOM结点：得到DOM节点
- 删除：删除一个DOM节点
- 添加：添加一个新的节点
要操作一个Dom节点，就必须要先获得这个Dom节点
获得DOM节点
<body>
<div id="father">
<h1>h1标题</h1>
<p id="p1">段落1</p>
<p class="p2">段落2</p>
</div>
<script>
//对应css选择器
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
//获取父节点
var father = document.getElementById('father');
//获取父节点下的所有子节点
var childrens = father.children;
//获取父节点下的指定子节点,添加下标
var children = father.children[0];
//father.firstChild
//father.lastChild
</script>
</body>
这是原生代码，之后我们尽量都使用jQuery();
更新节点
<div id="id1">
</div>
<script>
var id1 = document.getElementById('id1');
</script>
操作文本
id1.innerText = '123'修改文本的值id1.innerHTML = '<strong>abc</strong>'可以解析HTML标签
操作js
id1.style.color = 'red';
id1.style.fontSize = '18px';
id1.style.padding = '4em';
删除节点
- 先获取父节点，再通过父节点删除自己
- father.removeChild(child)
<body>
<div id="father">
<h1>h1标题</h1>
<p id="p1">段落1</p>
<p class="p2">段落2</p>
</div>
<script>
//获取父节点
var father = document.getElementById('father');
var self = document.getElmentById('p1');
father.removeChild(self);
//删除是一个动态的过程
father.removeChild(father.children[2]);
father.removeChild(father.children[1]);
father.removeChild(father.children[0]);
</script>
</body>
注意：删除多个节点的时候，children数组是在时刻变化的，删除节点的时候要注意！
插入节点
-
使用innerText会覆盖原本的html元素
-
使用追加元素 xxx.appendChild(var xxx)
<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'),
list = document.getElementById('list');
//将js追加到list后
list.appendChild(js);
</script>
创建一个新的标签，实现插入
//通过js创建一个新的节点
var newP = document.createElement('p');
newP.id = 'newp';
newP.innerText = 'hellozcz';
list.appendChild(newP);
//创建一个标签节点（通过这个属性可以设置任何值）
var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript');
<script>
var
//已经存在的节点
js = document.getElementById('js'),
list = document.getElementById('list');
//将js追加到list内
list.appendChild(js);
//通过js创建一个新的节点
var newP = document.createElement('p');
newP.id = 'newp';
newP.innerText = 'hellozcz';
list.appendChild(newP);
//创建一个标签节点（通过这个属性可以设置任何值）
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}';//设置标签内容
//先获取head元素，
document.getElementsByTagName('head')[0].appendChild(myStyle);
</script>
insertBefore插入节点
var list = document.getElementById('list');
var js = document.getElementById('js');
var ee = document.getElementById('ee');
//函数参数内包含的节点insertBefore(newNode,targetNode)
list.insertBefore(js,ee);
8.操作表单（验证）
表单（form）
input标签中的type属性：
- 文本框 text
- 下拉框 select
- 单选框 radio
- 复选框 checkbox
- 密码框 password
- 隐藏域 hidden
- ......
表的目的：提交信息
获取要提交的信息
<body>
<form action="" method="post">
<p>
<span>用户名：</span> <input type="text" id="username">
</p>
<!--多选框的值就是定义好的value-->
<p>
<span>性别：</span>
<input type="radio" name="sex" value="male" id="male">男
<input type="radio" name="sex" value="female" id="female">女
</p>
</form>
<script>
var inputText = document.getElementById('username');
var boyRadio = document.getElementById('male');
var girlRadio = document.getElmentById('female');
//得到text输入框的值
inputText.value;
//修改输入框的值
inputText.value = '111';
//对于选择框类的type属性值，.value只能取到当前的值
//使用.checked查看是否被选中，返回true false 也可修改这个值
boyRadio.checked;
</script>
</body>
提交表单 使用md5加密密码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--MD5工具类-->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--onsubmit=""绑定一个检测密码的函数
将这个函数的返回值true or false返回给表单，用onsubmit接收-->
<form action="https://www.baidu.com" method="post" onsubmit="return a()">
<p>
<span>用户名：</span> <input type="text" id="username" name="username">
</p>
<p>
<span>密 码：</span> <input type="password" id="inputPassword">
</p>
<input type="hidden" id="md5Password" name="password">
<!--绑定按钮被点击事件 onclick="a()"-->
<button type="submit">提交</button>
</form>
<script>
function a() {
var name = document.getElementById('username');
var password = document.getElementById('inputPassword');
var md5Password = document.getElementById('md5Password');
md5Password.value = md5(password.value);
//可以校验表单内容，返回true和false
if (password.value === 'z12345')
return true;
else
return false;
}
</script>
</body>
</html>
9.jQuery
- jQuery库中存在大量的JavaScript函数
- 公式：$(selector).action() 选择器+事件
获取jQuery
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--通过CDN引用jQuery-->
<!--<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>-->
<!--导入下载的jQuery-->
<script src="./lib/jquery-3.6.0.js"></script>
</head>
<body>
<a href="" id="testJQuery">click</a>
<script>
//jquery中的选择器就是css选择器
$('#testJQuery').click(function () {
alert('hello')
})
</script>
</body>
选择器
//原生s,选择器少，麻烦不好记
//标签
document.getElementsByTagName(;
//id
document.getElementById();
//类
document.getElementsByclassName(;
//jQuery css中的选择器它全部都能用
$('p').c1ick();//标签选择器
$('#id1').c1ick(O;//id选择器
$('.c1ass1').c1ick)//c1ass选择器
事件
鼠标、键盘等其他事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>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>
操作DOM元素
节点文本操作
$('#testUl .python').text();//获得值
$('#testUl .python').text(112221112);//设置值
$('#testUl').html()//获得值
$('#testUl').html('<p>zzcczz</p>');//设置值
css的操作
$('.js').css('color','red');
元素的显示和隐藏(本质：display:none)
//隐藏元素
$('.js').show();
$('.js').hide();
