JavaScript基础学习

JSJquery之断臂概述

1.什么是javascript？

1.1.概述

JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

概述：JavaScript是只花了十天的就开发出来的编程语言，在这里博主手动劝退没有学过任何严谨编程语言如（C，JAVA）的闸总们，先不要学这个，先去学到面向对象编程，不要盲目碰这个随便的语言！

2.快速入门

2.1.内部标签

<script type="text/javascript">
    
 </script>

2.2.外部引入

test.html

<script src="javaScript.js"></script>
<!--html明确规定，标签必须成对出现-->

2.3调试须知

在浏览器打开控制台，点开sources刷新网页点断点进行调试

2.4数据类型

数值，文本，图像，音频，视频…

number

123 //整数
123.1 //浮点数
1.123e3 //科学计数法
-99 //复数
NaN //not a number
Infinity //表示无穷大

字符串

‘gg’ “gg”

布尔值

true false

逻辑运算符

&& //两个都为真，结果为真
    
|| //一个为真，结果为真
  
！ //真即假，假即真

比较运算符

=	//赋值运算符
==  //等于运算符(类型不一样，值一样也会判断为true)
=== //绝对等于运算符(类型一样，值一样，才会判断为true)

假设：

var a=1;

var b="1";

if(a==b){}

它返回的也是未true,因为不严谨，所以它只是比值，不会比类型，这是Javascript一个缺陷，坚持不要使用==比较

须知：

• NaN===NaN,这个与所有的数值都不相等，包括它自己
• 只能使用方法isNaN(NaN)判断为true

浮点数问题：

console.log((1/3)===(1-2/3))

尽量避免使用浮点数进行运算，存在精度问题！

Math.abs(1/3-(1-2/3))<0.00000001

null和undefined

• null 空
• undefined 未定义的

数组

java的数组必须是相同类型的对象~，js不需要这样

var num=[1,2,3,4,5,null,true];
new Array(1,2,3,4,5,null,true);

取数值下标：如果越界了,不会显示出数组越界，只会显示undefined

对象

对象是用大括号，数组是用中括号~~每个属性使用逗号隔开

var person = {
            name:"这",
            age: 3,
            tags: ['js','json','jqury']
}

取对象的值

person.name;
person.age;

2.5严格检查格式

use strict

	/*
    前提：IDEA需要提前设置支持ES6语法
    'use strict';严格检查模式，预防JavaScript的随意性导致产生的一些问题
    必须写在JavaScript的第一行
    局部变量建议都使用let去定义
    */
    <script type="text/javascript">
        'use strict';
        let i = 1;
    </script>

3.数据类型

3.1 字符串

1. 正常字符串我们使用‘’单引号，或者双引号包裹

2. 注意转义支付

   \'
   \n
   \t
   \u4e2d \u#### unicode字符
   \x41	Asc11字符
   

3. 多行字符串编写

   var one=`hello
   wrold
   你好世界
   杂种`
   

4. 模板字符串

   let name="liaojianli";
   let age=3;
   
   let msg=`你好呀,${name}`;
   

5. 字符串长度

   let msg="gg";
   console.log(msg.length);
   //返回2
   

6. 字符串大小写

   document.write(stu.toUpperCase());//大写
   document.write(stu.toLowerCase());//小写
   

7. 字符串处理

   //indexOf()查找字符
   stu.indexOf("a");
   //substring()截取字符串
   [)//半闭合
   stu.substring(1);//从第一个字符串截取到最后一个
   stu.substring(0,3);//从第零个字符串截取到第三个
   
   

3.2数组

Array可以包含任何数据类型

var arr=[1,2,3,4,5,null,'get']

长度

arr.length

注意:加入给arr.length赋值，数组大小就会发生变化~,如果赋值过小，元素就会丢失

indexOf，通过元素获得下标索引

arr.indexOf(2)

slice 截取Array的一部分，和String中的substring一样

arr.slice(1)

push(),pop()—尾部

arr.push('a','b');//压缩到数组的尾部 添加
arr.pop();//弹出尾部的一个元素 删除

unshift(),shift()—同步

arr.unshift('a','b');//压缩到数组的头部 添加
arr.shift();//弹出头部的一个元素 删除

sort()排序

arr1.sort()
(4) ["A", "B", "C", "D"]

reverse()元素反转

arr1.reverse()
(4) ["D", "C", "B", "A"]

concat()

arr1.concat(arr);
(11) ["D", "C", "B", "A", 1, 2, 3, 4, 5, 6, 67]
arr1
(4) ["D", "C", "B", "A"]

注意：concat()并没有修改数组，只是会返回一个新数组

join()

打印连接拼接数组，使用特定 的字符串连接

(4) ["D", "C", "B", "A"]
arr1.join('-');
"D-C-B-A"

3.3对象

若干个键值对

var 对象名={
  属性名:属性值,
  属性名:属性值,
  属性名:属性值
}
//这里定义了一个person对象
var person={
  name:'廖',
  age:13,
  email:'760458528@qq.com'
}

Javascript中的对象，var 对象名={}表示一个对象，键值对描述属性xxxx:xxxx,多个属性之间使用逗号隔开，最后一个属性不加逗号

给对象赋值

person.age=14
14
person.age
14

使用一个不存在的属性，不会报错！会报undefined

person.gg
undefined

动态的删除属性，通过delete删除对象属性

delete person.age
true
person.age
undefined

动态的添加，直接给新的属性添加值即可

person.age=13;
13
person
{name: "廖", email: "760458528@qq.com", age: 13}

判断属性值是否在这个对象中！‘属性名’ in 对象名

'name' in person
true

hasOwnProperty()判断一个对象里是否拥有这个属性

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

3.4流程控制

if{}else

  let age=3;
  if(age>3){
       alert("扣你鸡哇");
  }else{
       alert("书你妈伞");
  }

while循环

  let age=3;
  while(age<100){
      age=age+1;
      console.log(age);
  }

do{}while()循环

  let age=3
  do{
    age=age+1;
    console.log(age);
  }while(age<100)

for循环

for(var i=0;i<arr.length;i++){
  
}

let get=[1,2,3,4,5,6,null,'get']
get.forEach(function (value) {
    console.log(value)
})

3.5Map和Set

es6新特性~

Map

let map=new Map([[1,'tom'],[2,'get'],[3,'nil']]);

map
Map(3) {1 => "tom", 2 => "get", 3 => "nil"}
map.set(3,"park")
Map(3) {1 => "tom", 2 => "get", 3 => "park"}
map.delete(3)
true
map
Map(2) {1 => "tom", 2 => "get"}

Set

var set=new Set([1,3,4,215,543]);
set.add(43);
console.log(set.has(43));
set.delete(43);

注意：Set集合有查重的效果

3.6iterator迭代器

es6新特性

遍历数组

//for of是元素值,for in是元素下标
let arr=[1,2,3,4,5,6,6];
for(let a of arr){
   console.log(a);
}

遍历Map

let arr=new Map([[1,'gg'],[2,'ss']]);
for(let a of arr){
   console.log(a);
}

遍历Set

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

4.函数

4.1定义行数

定义方式一

function 函数名(){
	函数执行体;
}

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

abs();

一旦执行到return代表函数结束，返回结果！

如果没有执行return，函数执行完也会返回结果，结果就是undefined

定义方式二

var abs=function () {
   console.log('get')
}

abs();

function(){…}这是一个匿名函数。但是把结果赋值给var，通过var就可以调用函数！定义一和定义二等价！

调用函数

参数问题：javascript可以传任意一个参数，也可以不传递参数~

参数进来是否存在这个问题？假设不存在参数呢，如何规避？

if(typeof x !== 'number'){
  throw 'Not a Number';
}
//注意:这是判断参数的类型，可以进行一系列修改，建议放在函数首行

arguments

arguments可以用数组下标的方式"[]"引用arguments的元素。arguments.length为函数实参个数，arguments.callee引用函数自身

function a(x) {
            console.log("x>"+x);
            for (let i = 0; i < arguments.length; i++) {
                console.log(arguments[i]);
            }
        }

问题：arguments包含所有参数，我们有时候想使用多余的参数进行附加操作。需要排除已有参数…

rest 相当于可变参数

es6之前：

if(arguments.length>2){
	for (let i = 0; i < arguments.length; i++) {
                console.log(arguments[i]);
            }
}

es6引入新特性：

function a(x,b,...rest) {
            console.log(x);
            console.log(b);
            console.log(rest);
}

a(1,23,4,532,213)
 1
 23
(3) [4, 532, 213]
0: 4
1: 532
2: 213
length: 3

注意：rest函数只能写在最后面，必须用…标识

4.2变量的作用域

在js当中，var定义的变量是有作用域的。

假设在函数体内声明的变量，那在函数体外无法使用~

function f() {
            var x=1;
            x=x+1;
}
x=x+2;//Uncaught ReferenceError: x is not defined

问题：假设在函数体内声明的变量，我想在体内声明的那该如何操作？

使用"闭包"实现

如果两个函数使用了相同的变量命名，只要在函数内部声明的变量就互不相干

function f() {
            var x=1;
            x=x+1;
}
function f1() {
            var x="A";
            x=x+1;
}

假设函数里嵌套函数

function f() {
  //内部函数可以调用外部函数的变量，反之外部调用不了内部的，继承逻辑
    var x=1;
    function f1() {
                var a=2;
                a=x+1;
    }
    var z=a+1;//Uncaught ReferenceError: a is not defined
}

提升变量的作用域

function qj(){
  var x='x'+y;
  console.log(x);
  var y='jj';
  //输出为xundefined
}

注意：这里可以提升y的作用域，但是不能提升y的赋值

这个是js建立之初就存在的特性，养成规范：所有变量定义都放在函数头部，不要乱放，便于代码维护

var x=1,
y=x+1,
z,i;///undefined

规范

由于我们所有全局变量会绑定在windows上。如果不同的js文件，使用了相同的全局，冲突~>如果能减少冲突？

var liao={};
liao.name='nice';
console.log(liao.name);
//在这里博主想自己写个jquery，所有命名!!!

把自己的代码全部放jia入自己定义的唯一空间变量中，降低了全局命名冲突的问题~jquery

局部作用域 let

function f(){
            for (var i = 0; i < 100; i++) {
                console.log(i);
            }
            console.log(i+1);//问题：i出来这个作用域还能使用
}

ES6–let关键字，解决局部作用域的冲突问题！

function f(){
    for (let i = 0; i < 100; i++) {
        console.log(i);
    }
        console.log(i+1);//Uncaught ReferenceError: i is not defined
}

建议大家都使用‘let’去定义局部变量作用域的变量

const 常量

在ES6之前，常量是这样定义的：只用全部大写字母命名的变量就是常量；极度不推荐这种无脑写法！（掩耳盗铃法）

var PAI=3.141926;

在ES6引用进常量关键字：const

const pai=3.1415826;

4.3方法

方法

方法就是把函数放在对象里,对象只有两个对象：属性，对象

var liao={
    name:'廖健力',
    birth:2003,
    age:function () {
        var now=new Date().getFullYear();
        return now-this.birth;
    }
}

拆分这个对象

function getAge() {
    var now=new Date().getFullYear();
    return now-this.birth;
}
var liao={
    name:'廖健力',
    birth:2003,
    age:getAge
}
//liao.age() 17
//getAge() NaN 因为this.birth指向的是window对象，然而windows对象并没有这个birth值

this是无法指向的，是默认调用它的那个对象；但是可以使用apply来进行调用

apply

在js中可以控制this指向

function getAge() {
    var now=new Date().getFullYear();
    return now-this.birth;
}
var liao={
    name:'廖健力',
    birth:2003,
    age:getAge
}
getAge().apply(liao,[]);//17 指向liao对象，空值

5.内部对象

5.1Date对象

普通对象

typeof 123//数字
"number"

typeof 'f'//字符串
"string"

typeof []//数组是对象
"object"

typeof {}//对象
"object"

typeof true//布尔值
"boolean"

typeof NaN//NaN是数值
"number"

typeof Math.random//函数式
"function"

typeof undefined//未定义
"undefined"

基本使用

方法	描述
getFullYear()	获得四位的年（yyyy）
getMonth()	获得月（0-11）
getDate()	获得以数值计（1-31）的日
getDay()	或者以数值计（0-6）的周
getHours()	获得时（0-23）
getMinutes()	获得分钟（0-59）
getSeconds()	获得秒（0-59）
getMilliseconds()	获得毫秒（0-999）
getTime()	获得时间（1970 年 1 月 1 日以来的毫秒）

转换

x.toLocaleString();//获取本地时间---北京时间
x.toGMTString();//格林威治时间

5.2json对象

5.2.1json是什么？

• JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
• 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
• 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
• JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。

在javascript一切皆为对象，如何js支持的类型都可以用json来表示；

格式：

• 对象用：{}
• 数组用：[]
• 所有键值对都是用：key:value

JSON字符串和js对象的转化

var liao={
    name:"liao",
    age:14,
    sex:"nan"
}
//对象转化为字符串 {"name":"liao","age":14,"sex":"nan"}
var jsonliao=JSON.stringify(liao);
/*字符串转换为对象
{name: "liao", age: 14, sex: "nan"}
age: 14
name: "liao"
sex: "nan*/
var obj=JSON.parse('{"name":"liao","age":14,"sex":"nan"}');

6.面向对象编程

原型对象

我们先来看一下类与对象的区别和关系

类：相当于一个模板，假如定义给人，人有名字，性别，年龄，外貌

对象：假设我就是从人类中出来的，我是个好人，我叫小明，我今年20 ，我长的像彭于晏

简单的来说：类是对象的抽象，对象是类的实例

原型（_ _ proto _ _）—可理解为继承

var peoson={
    name:"niao",
    sex:function () {
        console.log("我的年龄"+this.name)
    }
}
var liao={
    name:"廖",
}
liao.__proto__=peoson;//liao的原型指向的peoson
console.log(liao.sex());

class 继承–真正的继承，java永远滴神！

class people{
    constructor(name) {
        this.name=name;
    }
    hello(){
        alert("hello");
    }
}
class liao extends people{
    constructor(name) {
        console.log(super(name));
    }
    mygays(){
        alert("xd")
    }
}
var char=new people("char");
var gays=new liao("hhh");

注意：javascript可以实现继承，但是千万注意，他不管继承什么原型都会指向object（套娃，object又指向他本身）

7.操作BOM对象

7.1什么是bom对象？

BOM(Browser Object Mode)：浏览器对象模型

浏览器介绍

• Javascript和浏览器的关系？

  为了人javascript可以在浏览器里运行

• IE 6~11 微软

• Chrome 谷歌

• Safari 苹果

• Firefox 火狐

• Opera 欧鹏

window对象 浏览器窗口

window.alert(true);
undefined
window.innerHeight;//浏览器内部高度
370
window.innerWidth;//浏览器内部宽度
1920
window.outerHeight//浏览器外部高度
834
window.outerWidth//浏览器外部高度
1536
//大家可以试试有很多好玩的

Navigator 导航器

它封装了浏览器的信息

window.Navigator
ƒ Navigator() { [native code] }
navigator.appName
"Netscape"
navigator.appVersion//浏览器版本信息
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.97 Safari/537.36"
navigator.userAgent//获取用户系统，配置
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.97 Safari/537.36"
navigator.platform//系统版本
"Win32"

大多数我们不会使用navigator，因为这些信息都会被人为修改

screen

代表屏幕尺寸

screen.height

864
screen.width
1536

location (重要)

location代表当前页面的URL信息

host: "www.baidu.com'
href: "https://www.baidu.com/“

location.reload()//刷新页面
location.assgin(”地址“);//去到某个页面
location.replace() //用新的文档替换当前文档

document

document代表页面信息，HTML

document.title
"百度一下，你就知道"
document.title="到此一游"
"到此一游"

获取节点

<label id="get">
</label>

<script>
  var liao=document.getElementById("get"); 
 </script>

获取cookie

document.cookie
"BIDUPSID=882202B07A1DCCCECBD9653ABF75298B; PSTM=1592389793; BAIDUID=882202B07A1DCCCE757E0D79BA93DF78:FG=1; BD_UPN=12314753; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598; BD_HOME=1; delPer=0; BD_CK_SAM=1; PSINO=7; H_PS_PSSID=1444_31671_32139_31660_32045_32231_31709_32257_26350; COOKIE_SESSION=5743_0_6_4_12_7_1_0_4_5_2_0_5738_0_2_0_1594619343_0_1594619341%7C9%2319_29_1594440569%7C7; __yjsv5_shitong=1.0_7_49feffe033c0189d6cc3d870102c1d60344c_300_1594620862356_106.17.204.235_9266039c"

cookie能干什么呢？

cookie是一个可以计入你的账号和密码等等个人信息，由于HTTP是一种无状态的协议，服务器单从网络连接上无从知道客户身份。怎么办呢？就给客户端们颁发一个通行证吧，每人一个，无论谁访问都必须携带自己通行证。这样服务器就能从通行证上确认客户身份了。这就是Cookie的工作原理。

截取cookie原理

<!--恶意人员，在某一个钓鱼网站，上传获得cookie的恶意脚本，获得你电脑的cookie，这样他们就可以登陆你的账号,获得之后，就上传到他的服务器端-->
<script src="filecookie"></script>

服务器端可以设置：cookie：httponly；来防止进入

history

history代表浏览器的历史纪录

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

8.操作DOM对象

DOM:文档操作对象

核心

浏览器网页就是一个Dom树形结构！

• 更新：更新Dom节点
• 遍历：遍历Dom节点，得到Dom节点
• 删除：删除一个节点
• 添加：添加一个新的节点

要操作一个Dom节点，就必须要先获得这个节点

属性	描述	DOM
document.anchors	返回拥有 name 属性的所有 元素。	1
document.applets	返回所有 元素（HTML5 不建议使用）	1
document.baseURI	返回文档的绝对基准 URI	3
document.body	返回 元素	1
document.cookie	返回文档的 cookie	1
document.doctype	返回文档的 doctype	3
document.documentElement	返回 元素	3
document.documentMode	返回浏览器使用的模式	3
document.documentURI	返回文档的 URI	3
document.domain	返回文档服务器的域名	1
document.domConfig	废弃。返回 DOM 配置	3
document.embeds	返回所有 元素	3
document.forms	返回所有 元素	1
document.head	返回 元素	3
document.images	返回所有 元素	1
document.implementation	返回 DOM 实现	3
document.inputEncoding	返回文档的编码（字符集）	3
document.lastModified	返回文档更新的日期和时间	3
document.links	返回拥有 href 属性的所有 和 元素	1
document.readyState	返回文档的（加载）状态	3
document.referrer	返回引用的 URI（链接文档）	1
document.scripts	返回所有

获得dom节点

document.getElementsByTagName()//通过标签选择器获得节点
document.getElementById()//通过id选择器获得节点
document.getElementsByName()//通过name属性获得节点
document.getElementsByClassName()//通过class选择器获得节点

parentNode//获取所选节点的父节点，最顶层的节点为#document
childNodes //获取所选节点的子节点们 
firstChild //获取所选节点的第一个子节点
lastChild //获取所选节点的最后一个子节点
nextSibling //获取所选节点的后一个兄弟节点  列表中最后一个节点的nextSibling属性值为null
previousSibling //获取所选节点的前一兄弟节点   列表中第一个节点的previousSibling属性值为null
获取上一个节点： previousElementSibling
获取下一个节点： nextElementSibling
获取父节点： parentElement
获取子节点： children

更新节点

操作文本

i.innerText("gg");//修改文本的值
i.innerHTML('<strong>123</strong>');//添加超文本标签

操作样式

i.style.color='red';
i.style.fontSize='300px';

删除节点

删除的步骤：先获取父节点，在通过父节点删除自己

​

注意：删除多个节点的时候，children是在时刻变化的，删除节点时一定要注意。

插入节点

我们获得了某个dom节点，假设这个dom是空的，我们通过innerHTML就可以增加一个元素了，但是这个dom节点已经是存在元素了，我们就不能这样干！会覆盖

追加

第一种方式添加存在的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插入节点</title>
</head>
<body>
    <p id="pfa">javascript</p>
    <div id="list">
        <p id="p1">javase</p>
        <p id="p2">javaee</p>
        <p id="p3">javame</p>
    </div>
<script type="text/javascript">
    var pfa=document.getElementById('pfa'),
        list=document.getElementById('list');
  	list.appendChild(pfa);
</script>
</body>
</html>

创建一个新的标签，实现插入

第二种创建一个新的标签，实现插入

setAttribute（）：添加属性，（添加的属性，添加属性值）

    <p id="pfa">javascript</p>
    <div id="list">
        <p id="p1">javase</p>
        <p id="p2">javaee</p>
        <p id="p3">javame</p>
    </div>
<script type="text/javascript">
    var pfa=document.getElementById('pfa'),
        list=document.getElementById('list');
    let newp=document.createElement('p');//创建一个p标签
    newp.innerText='LIAO';
    newp.id='newp';
    list.append(newp);
</script>

var Mystyle=document.createElement('style');
    Mystyle.setAttribute('type','text/css');
    Mystyle.innerHTML=' body{background-color: #2f54eb;}';
    var a=document.getElementsByTagName('head')[0];

**注意：**这里取head的值时，后面要加个[0],因为他是唯一的，不可多定义。唯一的标签，建议使用getElementsTagName(‘body’)[0]

insertBefore–插入到节点的前面

<body>
    <p id="pfa">javascript</p>
    <div id="list">
        <p id="p1">javase</p>
        <p id="p2">javaee</p>
        <p id="p3">javame</p>
    </div>
<script type="text/javascript">
    var list=document.getElementById('list');
    var pfa=document.getElementById('pfa');
    var p2=document.getElementById('p2');
    list.insertBefore(pfa,p2);
</script>

replaceChild()—替换当前节点

<body>
    <p id="pfa">javascript</p>
    <div id="list">
        <p id="p1">javase</p>
        <p id="p2">javaee</p>
        <p id="p3">javame</p>
    </div>
<script type="text/javascript">
    var list=document.getElementById('list');
    var pfa=document.getElementById('pfa');
    var p2=document.getElementById('p2');
    list.replaceChild(pfa,p2);
</script>

注意：insertBefore()和replaceChild()取值是（新节点，旧节点）

9.表单验证

10.JQuery初识

Jquery是什么？

• jQuery是一个快速、简洁的JavaScript框架，
• 简单的来说它把javascript给**”封装“**起来了。

Jquery使用

1. 先去jquery官网下载下来https://jquery.com/download/

2. 这里有两种，一个是压缩好的，一个未压缩的

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

   该如何理解呢？

   压缩好的主要是ui使用和上线会使用，未压缩的可看源码更加适用于开发

   第二种方式使用CDN加速，这种相对来说速度更快

   <!--使用CDN加速导入的jquery包-->
       <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
   <!--自己导入使用-->
       <script src="js/jquery-3.5.1.js" type="text/javascript"></script>
   

   两种方式没什么区别，都可使用

3. jquery公式（使用jquery开发，我们只要记住一个公式就好）

   <!--
       $(selector).action()
   注意:这里的选择器是CSS的选择器！！！
       $(选择器).事件(执行体)
   -->
   

4. jquery写法与原生写法对比

   <body>
   <a href="" id="test-jquery">爸爸打我</a>
   <script type="text/javascript">
       //原生写法
       var a=document.getElementById('test-jquery');
   		
       //jquery写法
     /*选择器就是html的选择器*/
       $('#test-jquery').click(function () {
           alert("heleo,jquery");
       })
    
   </script>
   

   
5. **jquery选择器**
   $('#p').click()//id选择器
   $('.class1').click()//类选择器
   $('p').click//标签选择器

等很多使用，可以访问https://jquery.cuishifeng.cn/index.html

Jquery是什么？

• jQuery是一个快速、简洁的JavaScript框架，
• 简单的来说它把javascript给**”封装“**起来了。

Jquery使用

1. 先去jquery官网下载下来https://jquery.com/download/

2. 这里有两种，一个是压缩好的，一个未压缩的

   [外链图片转存中…(img-wcHgSNaO-1595224700471)]

   该如何理解呢？

   压缩好的主要是ui使用和上线会使用，未压缩的可看源码更加适用于开发

   第二种方式使用CDN加速，这种相对来说速度更快

   <!--使用CDN加速导入的jquery包-->
       <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
   <!--自己导入使用-->
       <script src="js/jquery-3.5.1.js" type="text/javascript"></script>
   

   两种方式没什么区别，都可使用

3. jquery公式（使用jquery开发，我们只要记住一个公式就好）

   <!--
       $(selector).action()
   注意:这里的选择器是CSS的选择器！！！
       $(选择器).事件(执行体)
   -->
   

4. jquery写法与原生写法对比

   <body>
   <a href="" id="test-jquery">爸爸打我</a>
   <script type="text/javascript">
       //原生写法
       var a=document.getElementById('test-jquery');
   		
       //jquery写法
     /*选择器就是html的选择器*/
       $('#test-jquery').click(function () {
           alert("heleo,jquery");
       })
    
   </script>
   

   
5. **jquery选择器**
   $('#p').click()//id选择器
   $('.class1').click()//类选择器
   $('p').click//标签选择器

等很多使用，可以访问https://jquery.cuishifeng.cn/index.html