文章目录

JavaScript

JavaScript

基础

js引入

1.内部标签

<script type="text/javascript">
    alert("hello");
</script>

2.外部引入

<script src="js/fi.js" type="text/javascript" charset="utf-8"></script>

基本语法

<script type="text/javascript">
    //定义变量
    var score = 80;
    alert(score);
    //条件控制
    if (score >= 90) {
    
    
        alert("优秀");
    }else if(score >= 80){
    
    
        alert("良好");
    }else{
    
    
        alert("凑合");
    }
    console.log("你好");//在浏览器的控制台打印变量
</script>

数据类型（简述）

number

js不区分整数和小数

123//整数
123.12//浮点数
-12//负数
1.123e3//科学计数法
NAN//not a number
infinity//表示无穷


console.log((1/3) === (1-(2/3)));//false   尽量避免使用浮点数进行运算，存在精度问题
console.log(Math.abs(1/3 -  (1-(2/3))) < 0.000001);//true   判断相等

string

"123"  '123'

boolean

true false

null和undefined

null//空
undefined//未定义

逻辑运算符

&&//两个都为真，结果为真
||//只要一个为真，结果为真
!//真即假，假即真

比较运算符重要！！！

==//等于（只要值一样就会返回true）
===//绝对等于（值和类型都要一样，才会返回true）一般用这个
    
console.log(NaN === NaN);//false    NaN与所有数值都不相等，包括自己
console.log(isNaN(NaN));//true

数组

//建议使用这种方法进行数组定义
var arr = [1, 2, 'hello', null, true];
console.log(arr[0]);

new Array(1, 2, 'hello', null, true);

如果下标越界，会提示undefined

对象

var person = {
    
    
    name:"www",
    age:10,
    hobby:["play","sleep","eat"]
}
console.log(person.hobby[0]);

严格检查模式

use strict

<script type="text/javascript">
    'use strict';//可以预防js随意性导致的问题，前提是支持es6语法
    i = 1;
    console.log(i);//"Uncaught ReferenceError: i is not defined"
</script>

数据类型（详述）

字符串

请不要把字符串创建为对象，它会拖慢执行速度。new 关键字使代码复杂化。

1.用 ‘ ’ “ ”包裹

2.注意转义字符

\n       //新行
\'
\t
\r       //回车
\u4e2d   //unicode
\x41     //ascii

3.多行字符串编写(用着重号包裹 ``)

var s = `hi
		hello  wa`;
console.log(s);

4.模板字符串

var name = "www";
var msg = `name:${
      
      name}`;//el表达式
console.log(msg);
>name:www

5.字符串长度

var str = "hello";
console.log(str.length);

//下标取值
console.log(str[0]);
>h

str[1] = 'l';//字符串中的值不能改变
>"l"
str
>"hello"

6.常见方法

console.log(str.toUpperCase())//变大写
>HELLO 

console.log(str.toLowerCase());//变小写
>hello

console.log(msg);
>name:${
    
    name}
console.log(msg.substring(2,4));//截取[2,4)
>me

console.log(msg.indexOf(':'));//找元素首次出现的索引
>4

数组

1.定义

var arr = [1,2,3,4,5];

2.长度

可以改变长度，变长会用undefined填充，变短会丢失；也可以改变数组中的值

console.log(arr.length);
>5

arr.length= 8;//可以改变数组的长度
>8
arr
>Array(8) [ 1, 2, 3, 4, 5, <3 empty slots> ]
arr[7];
>undefined

arr[3] = 33;//可以改变数组的值
>33
arr
>Array(8) [ 1, 2, 3, 33, 5, <3 empty slots> ]

3.二维数组

var arr2=[[1,2,3],['1','2','3'],['hello','hi']];
arr2[2][0];
"hello"

4.常见方法

var arr = [1,2,3,4,5];
console.log(arr.indexOf(3));//找对应元素的下标
>2

console.log(arr.slice(2, 4));//截取相当于substring(2, 4)
>Array [ 3, 4 ]

console.log(arr.push('a','b','c'));//从尾部添加元素
>8 
arr;
>Array(8) [ 1, 2, 3, 4, 5, "a", "b", "c" ]

console.log(arr.pop());//从尾部删除元素
>c
console.log(arr.pop());
>b
arr;
>Array(6) [ 1, 2, 3, 4, 5, "a" ]

console.log(arr.unshift('q','w','e'));//从头部添加元素
>9
arr;
>Array(9) [ "q", "w", "e", 1, 2, 3, 4, 5, "a" ]

console.log(arr.shift());//从头部删除元素
>q
arr;
>Array(8) [ "w", "e", 1, 2, 3, 4, 5, "a" ]

console.log(arr.sort()); //排序
>Array(8) [ 1, 2, 3, 4, 5, "a", "e", "w" ]

arr.concat('1');//拼接   会生成新的数组，不会改变原数组，每次拼接基于元数组
.Array(9) [ 1, 2, 3, 4, 5, "a", "e", "w", "1" ]
arr;
>Array(8) [ 1, 2, 3, 4, 5, "a", "e", "w" ]

console.log(arr.join('-'));//连接符  会生成新的数组，不会改变原数组
>1-2-3-4-5-a-e-w
arr;
>Array(8) [ 1, 2, 3, 4, 5, "a", "e", "w" ]

对象

1.定义

属性名都是字符串，属性值可以是任意对象

var 对象名 = {
    
    
    属性名:属性值，
    属性名:属性值，
    属性名:属性值
}
var person = {
    
    
    name:'wj',
    age:21,
    phone:1234567
}

2.赋值

person.name='wwww';
>"wwww"
person;
>Object {
    
     name: "wwww", age: 21, phone: 1234567 }

3.使用一个不存在的属性，不会报错，提示undefined

person.qq;
>undefined

4.删除属性

delete person.name;
>true
person;
>Object {
    
     age: 21, phone: 1234567 }

5.添加属性

person.qq='123456';
>"123456"
person;
>Object {
    
     age: 21, phone: 1234567, qq: "123456" }

6.判断属性是否在对象中

'qq' in person;
>true

'toString' in person;//'toString'在prototype中
true

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O3v5pYz8-1610853023448)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20210114203029553.png)]

7.判断自身是否拥有此属性

person.hasOwnProperty('age');
>true
person.hasOwnProperty('toString');
>false

8.js的对象是易变的

x和person是同一个对象

var person = {
    
    
    name:'wj',
    age:21,
    phone:1234567
}
var x = person;
x.age=10;
>10
person;
>Object {
    
     name: "wj", age: 10, phone: 1234567 }

Map和Set

Map

Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。

Map常用方法

var map = new Map([['Lili',12],['Harry',15],['Jack',34]]);
console.log(map.get('Jack'));//get()
>34

map.set('Lida',22);//set()
>Map(4) {
    
     Lili → 12, Harry → 15, Jack → 34, Lida → 22 }

map.delete('Lili');//删除

var map = new Map([['Lili',12],['Harry',15],['Jack',34]]);
var arr = Array.from(map);//将Map转为Array
arr;
>Array(3) [ (2) […], (2) […], (2) […] ]

Map遍历for…of

for(let[key,val] of map){
    
    //for...of遍历 
  console.log(key+":"+val);
}
>Lili:12 
>Harry:15
>Jack:34 
>Lida:22

for(let[key,val] of map.entries()){
    
    //这个 entries 方法返回一个新的 Iterator 对象
  console.log(key+":"+val);
}

for(let key of map.keys()){
    
    //遍历key（也可以是value）
  console.log(key);
}

map.forEach(function(key,value){
    
    //forEach遍历
  console.log(key+":"+value);
})
>12:Lili 
>15:Harry 
>34:Jack
>22:Lida

Set

Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。

Set遍历for…of

var set = new Set([1,2,3,4,4,4]);
for(let x of set){
    
    
  console.log(x);
}

Set常用方法

var set = new Set([1,2,3,4,4,4]);
console.log(set);
>Set(4) [ 1, 2, 3, 4 ]//会去重

set.add('aaa');
>Set(5) [ 1, 2, 3, 4, "aaa" ]//添加

set.delete(4);//删除
>true
set;
>Set(4) [ 1, 2, 3, "aaa" ]

set.has(1);//是否包含
>true

流程控制

条件语句

if(){}

if(){}else{}

if(){}else if(){}else{}

var score = 79;
if (score>80) {
    
    
    console.log("良好");
} else if (score>70) {
    
    
    console.log("凑合");
}else{
    
    
    console.log("努力");
}

循环语句

while(){}

do{}while(){}

var age=0;
while (age<20){
    
    //先判断后执行
    age=age+1;
    console.log(age);
}


var age=0;
do{
    
    //先执行后判断
    age=age+1;
    console.log(age);
}while (age<20)

for( ; ; ){}

forEach(){}

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

注意: forEach() 对于空数组是不会执行回调函数的。

for( in ){} 返回下标【for…of 返回元素[Map和Set中]】

用于遍历对象属性

for (let i = 0;i<20;i++) {
    
    
    console.log(i);
}

array.forEach(function(currentValue, index, arr), thisValue)//forEach语法
var arr = [11,22,33,44,55,66];
arr.forEach(function(value){
    
    
    console.log(value);
})

var person = {
    
    
    name:'wj',
    age:21,
    phone:1234567
}
for(let i in person){
    
    
  console.log(person[i]);
}

函数

定义

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

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

手动抛出异常

var num = function(x){
    
    
            if (typeof num!= 'number') {
    
    
                throw 'num not a number';
            }
            if (x>0) {
    
    
                return x;
            } else{
    
    
                return -x;
            }
        }
abs('a');
>NaN

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

arguments

JS函数有个内置的对象 arguments 对象。

argument 对象包含了函数调用的参数数组,即输入的所有参数(显式声明和隐式声明)

function S(){
    
    
    var i,sum=0;
    for (let i =0;i<arguments.length;i++) {
    
    
        sum +=arguments[i];
    }
    console.log(sum);
}
var numS = S(1,2,3,4,5);
>15

rest

可以直接显示隐式传入的参数

function fu(x,y,...rest){
    
    
    console.log(rest);
}
fu(1,2,3,4,5,6);
>Array(4) [ 3, 4, 5, 6 ]

变量作用域

var定义的变量有作用域

function test(){
    
    
    var x = 2;
}
x=x+1;//x is not defined

内部函数可以使用外部函数的成员，反之不能

function test(){
    
    
    var x = 2;
    function test1(){
    
    
        var y = x+1;
    }
}
var z = y+1;//y is not defined

只要在不同的函数中，即使变量名相同也无所谓

function test2(){
    
    
    var x = 2;
}
function test3(){
    
    
    var x = 2;
}

当变量重名时，内部的变量会覆盖外部的同名变量

function test2(){
    
    
    var x = 1;
    function test3(){
    
    
        var x = 2;
        console.log('inner'+x);
    }
    console.log('outer'+x);
    test3();
}
test2();
>outer1
>inner2

变量声明会提前，赋值不会提前

function test4(){
    
    
    //相当于此处只是声明了var y;
    var x='x'+y;
    var y='y';
    console.log(x);
}
test4();
>xundefined

编写规范：将要用到的变量都提前声明，用的时候直接赋值即可

function test5(){
    
    
    var x,y,z,...;
    //用的时候直接赋值
    x = 2;
    y=x+2;
    //...
}

全局变量

var x = 1;
function test6(){
    
    
    console.log(x);
}
test6();
console.log(x);
>1
>1

全局对象所有的全局变量都是window的对象

var x = 10;
console.log(window.x);
window.console.log(x);
>10
>10

降低全局命名冲突

//唯一全局变量
var www={
    
    };

//定义全局变量
www.name='www';
www.add=function(a,b){
    
    
    return a+b;
}

局部变量 let

function pri(){
    
    
for (let i =0;i<10;i++) {
    
    
    console.log(i);//只能在此处使用
}
console.log(i+1);//Uncaught ReferenceError: i is not defined

常量 const

const PI = 3.14;
PI=3;
console.log(PI);//Uncaught TypeError: invalid assignment to const 'PI'

方法

定义

var Person={
    
    
    name:'wwww',
    birth:0000,
    age:function(){
    
    
        var now=new Date().getFullYear();
        return now-this.birth;
    }
}
Person.age();
>2021


function getAge(){
    
    
    var now=new Date().getFullYear();
    return now-this.birth;//this指的是window,window没有birth属性
};
var Person={
    
    
    name:'wwww',
    birth:0000,
    age:getAge
}
Person.age();//2021
getAge();//NaN

apply() 可以改变this指定的对象方法.apply(要指向的对象,此方法的参数个数)

function getAge(){
    
    
    var now=new Date().getFullYear();
    return now-this.birth;
};
var Person={
    
    
    name:'wwww',
    birth:0000,
    age:getAge
}
getAge.apply(Person,[]);
>2021

内部对象

typeof '123';
>"string"
typeof 123;
>"number"
typeof NaN;
>"number"
typeof true;
"boolean"
typeof undefined;
>"undefined"
typeof null;
>"object"
typeof Math.abs;
>"function"
typeof [];
"object"

Date

var now = new Date();
now.getFullYear();//年
now.getMonth();//月
now.getDate();//日
now.getDay();//星期
now.getHours();//时
now.getMinutes();//分
now.getMilliseconds();//秒
now.getTime();//时间戳

var time = new Date()
var time = new Date('时间戳');//将时间戳转化为标准时间
now.toLocaleString();//转化为当地时间

JSON

概念

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

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

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

定义

数据为键/值对。
数据由逗号分隔。
大括号保存对象
方括号保存数组

键/值对包括字段名称（在双引号中），后面一个冒号，然后是值

'{"name":"www","age":"10"}';//JSON
{
      
      name:"www",age:10};//js对象

转化

var Person = {
    
    
    name:'www',
    age:10,
    hobbies:['play', 'code', 'eat']
}
var json = JSON.stringify(Person);//将对象转化为JSON字符串
console.log(json);
>"{"name":"www","age":10,"hobbies":["play","code","eat"]}"

var obj = JSON.parse(json);//将JSON字符串转化为对象
console.log(obj);
>Object {
    
     name: "www", age: 10, hobbies: (3) […] }

面向对象编程

原型对象

原型 (继承)

var Person = {
    
    
    name:"www",
    age:10,
    run:function(){
    
    
        console.log(this.name + "run...");
    }
}
var s = {
    
    
    name:"xx"
}
s.__proto__ = Person;//可以理解为继承
console.log(s.run());
>xxrun...

var Bird = {
    
    
    name:"bird",
    age:10,
    fly:function(){
    
    
        console.log(this.name + "fly...");
    }
}
s.__proto__ = Bird;//可以理解为继承
console.log(s.fly());
>xxfly...

class

ES6才出现

class继承

class Person{
    
    
    constructor(name){
    
    
        this.name = name;
    }
    play(){
    
    
        console.log("play");
    }
}
class Student extends Person{
    
    
    constructor(name, grade){
    
    
        super(name);
        this.grade = grade;
    }
    say(){
    
    
        console.log("student");
    }
}
var s1 = new Student("www", 1);
console.log(s1);
>Object {
    
     name: "www", grade: 1 }
console.log(s1.say());
>student

本质上都是对prototype的改变

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ogbveNnF-1610853023451)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20210116144425812.png)]

操作BOM对象重点

BOM浏览器对象模型

window

window代表浏览器窗口

window.innerHeight;
>472
window.innerWidth;
>1536
window.outerHeight;
>838
window.outerWidth;
>1550

Navigator(不建议使用)

Navigator,封装了浏览器的信息

navigator.appVersion;
>"5.0 (Windows)"
navigator.appName;
>"Netscape"
navigator.platform;
>"Win32"
navigator.userAgent;
>"Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:84.0) Gecko/20100101 Firefox/84.0"

大多数时候不会使用这个对象,因为可以认为修改,不建议使用这些属性来判断和编写代码

screen

代表屏幕尺寸

screen.width;
>1536
screen.height;
>864

location 重要

代表当前页面的URL信息

host: "home.firefoxchina.cn"
hostname: "home.firefoxchina.cn"
href: "https://home.firefoxchina.cn/"
protocol: "https:"

//设置新地址
location.assign("https://blog.csdn.net/weixin_45734378?spm=1000.2115.3001.5343");

document

代表当前页面,DOM

document.title;
>"百度一下，你就知道"
document.title='www';
>"www"

<script>
    var c = document.getElementById("co");
    console.log(c);
</script>
</head>
<body>
    <dl id="co">
        <dt>color</dt>
        <dd>pink</dd>
        <dd>green</dd>
    </dl>
</body>

获取cookie

document.cookie;

history(不建议使用)

代表浏览器历史记录

history.back(); //后退
history.forward();//前进

操作DOM对象重点

浏览器网页就是一个DOM树

更新:更新DOM节点

遍历:得到DOM节点

删除:删除DOM节点

添加:添加新节点

获得DOM节点

</head>
<body>
    <div id="d1">
        <h1>标题1</h1>
        <p id="p1">p标签</p>
        <p class="p2">p标签</p>
	</div>
	<script type="text/javascript">
        var d1 = document.getElementById('d1');//Id
        var p2 = document.getElementsByClassName('p2');//ClassName
        var h1 = document.getElementsByTagName('h1');//TagName
    </script>
</body>

操作文本

d1.innerText='111';//修改文本的值
>"111"
d1.innerHTML='<p style="color: red">haha</p>';//可以解析html标签
>haha

操作css

d1.style.color='red';
d1.style.border='1px solid black';
d1.style.fontSize='30px';

删除节点

<script type="text/javascript">
    var fa = document.getElementById("d1");
    var c1 = document.getElementsByTagName('h1');
    var c2 = document.getElementById('p1');
    var c3 = document.getElementsByClassName('p2');
    fa.removeChild(c2);//方法一

	fa.removeChild(fa.children[0]);//方法二    注意节点的下标动态更新
</script>

追加节点 append()

已有标签进行追加

<body>
    <p id="r">red</p>
    <div id="d">
        <p id="y">yellow</p>
        <p id="p">purple</p>
    </div>
    <script type="text/javascript">
        var r = document.getElementById('r');
        var d = document.getElementById('d');
        d.appendChild(r);
    </script>
</body>

创建标签进行追加

<script type="text/javascript">
    var newE = document.createElement('p');
    newE.id = 'new';//newE.setAttribute('id','new');
    newE.innerText = 'brown';
    var d = document.getElementById('d');
    d.appendChild(newE);
</script>

insert

<body>
    <div id="d">
        <p id="y">yellow</p>
		<p id="p">purple</p>
	</div>
    <script type="text/javascript">
        var newE = document.createElement('p');
        newE.setAttribute('id','new');
        newE.innerText='grey';
        var pu = document.getElementById('p');
        var d = document.getElementById('d');
        d.insertBefore(newE,pu);//insertBefore(newNode,targetNode)
    </script>
</body>

操作表单

获值

<form action="#" method="post">
    <span>用户名：</span><input type="text" /><br />
    <span>性别：</span>
    <input type="radio" name="gender" id="gender" value="woman" />女
    <input type="radio" name="gender" id="gender" value="man" />男
</form>
		
var un=document.getElementsByTagName('input')[0];
un.value;//获取表单提交的值
>"123"

var w =document.getElementsByTagName('input')[1];
w.value;
>"woman"

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v5oI4PF0-1610853023452)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20210116204914046.png)]

w.checked;
>true

var m=document.getElementsByTagName('input')[2];
m.checked=true;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gFNbMul2-1610853023454)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20210116205045654.png)]

md5加密

https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js" type="text/javascript

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <form action="#" method="post" onsubmit="return sub()"><!--表单级别提交-->
        <p>
            <span>用户名：</span><input type="text" name="un" id="u"/>
        </p>
        <p>
            <span>密码：</span><input type="password" id="p"/>
        </p>
        <input type="hidden" name="pwd" id="md5_pwd"  />
        <button type="submit" onclick="sub()">提交</button>
    </form>
    <script type="text/javascript">
        function sub(){
     
     
            var un = document.getElementById('u');
            var pwd = document.getElementById('p');
            var md5_pwd = document.getElementById('md5_pwd');
            console.log(un.value);
            md5_pwd.value=md5(pwd.value);//解决了密码框中输入变长的现象
            //可以校验表单内容，true通过提交  false阻止提交
            //return false;
        }
    </script>
</body>

JQuery

公式:$(selector).action()

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <a href="#" id="cli">点击</a>
    <script type="text/javascript">
        $('#cli').click(function(){
     
     
            alert('成功弹出');
        })
    </script>
</body>

选择器

$('p')//标签选择器
$('#d1')//id选择器
$('.c1')//类选择器
....

事件

移动

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
        .d1{
     
     
            width: 200px;
            height: 200px;
            border: 1px solid rosybrown;
        }
    </style>
</head>
<body>
    mouse:<span id="s"></span>
    <div class="d1">
        移动看看
    </div>
    <script type="text/javascript">
        //元素加载完毕后相应事件，也可以省略直接写function(){}
        $(document).ready(function(){
     
     
            $('.d1').mousemove(function(e){
     
     
                $('#s').text('x:'+e.pageX+',y:'+e.pageY)
            })
        });

    </script>
</body>

操作DOM

节点文本操作

<body>
    <ul class="u">
        <li id="li1">red</li>
        <li id="li2">yellow</li>
    </ul>
    <script type="text/javascript">
        //$('.u').text('haha');设置值
        $('.u').text();//获得值
        //$('.u').html('haha');设置值
        //$('.u').html();//获得值
        //$('.u').append('<li>brown</li>');	追加li
    </script>
</body>


$('.u li[id="li1"]').text();
>"red"

操作css

<script type="text/javascript">
    $('.u li[name="li1"]').css({
    
    'color':'red','fontSize':'30px'});
</script>

显示和隐藏元素

$('.u li[name="li1"]').hide();
$('.u li[name="li1"]').show();

window

$(window).height();
>335
$(window).width();
>1536

JavaScript小汇

文章目录

JavaScript

基础

js引入

基本语法

数据类型（简述）

number

string

boolean

null和undefined

逻辑运算符

比较运算符 重要！！！

数组

对象

严格检查模式

数据类型（详述）

字符串

数组

对象

Map和Set

Map

Set

流程控制

条件语句

循环语句

函数

变量作用域

方法

内部对象

Date

JSON

面向对象编程

原型对象

class

操作BOM对象 重点

window

Navigator(不建议使用)

screen

location 重要

document

history(不建议使用)

操作DOM对象重点

获得DOM节点

操作文本

操作css

删除节点

追加节点 append()

已有标签进行追加

创建标签进行追加

insert

操作表单

获值

md5加密

JQuery

选择器

事件

操作DOM

操作css

显示和隐藏元素

window

猜你喜欢

比较运算符重要！！！

操作BOM对象重点