JavaScript

最新推荐文章于 2022-08-30 11:46:59 发布

燃烧i你的梦

最新推荐文章于 2022-08-30 11:46:59 发布

阅读量439

点赞数

分类专栏：前端文章标签： javascript jquery

本文链接：https://blog.csdn.net/rsnmd/article/details/106623800

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、什么是JavaScript

1.1概述

JavaScript世界上最流行的脚本语言

Java、 JavaScript 没有关系

1.2发展史

JavaScript的历史：网景公司的程序员为了应付公司要求耗时十天做出了JavaScript.

一个合格的后端人员，必须要精通JavaScript（进公司要写很多）。

ECMAScript它可以理解是JavaScript的一个标准。

ECMAScript最新版本已经到es6.

但是大部分浏览器还只停留在es5代码上！

导致了开发环境和线上环境版本不一致。

2、快速入门

2.1 引入JavaScript

1、内部标签

<!--   script标签内，写JavaScript代码      -->
    <!--<script>-->
        <!--alert('hello,world');-->
       <!--// </script> -->
       alert标签效果是产生一个弹窗

2、外部引入JS文件

在HTML文件中引入JS文件

使用script src 标签引入文件

<script src="MLJS.js"></script>

2.2 基本语法入门

 1.JS定义变量的方法 ： var
var  num =1111;
var name = malei;
 alert(name)
2.条件控制
if (2>1) {
    alert('mlxg')
}
// console.log(ssss) 在浏览器的控制台打印变量 相当于JAVA 中的 SOUT

2.3 数据类型

数值，文本，图形，音频，视频…等等

变量

所有的变量用var定义

数值类型Number

JS不区分小数和整数，统一用Number表示

1、123// 整数123

2、123.1// 浮点数123.1

3、1.123e3// 科学计数法

4、-44 //负数

5、NaN// not a number 非数字型

6、Infinity //表示无限大

字符串

‘abc’ “aaa”

布尔值

ture, false

逻辑运算

1.&& 与运算

2.| | 或运算

3.! 非运算

比较运算符

1 = 赋值运算符

2 == 等于运算符（类型不一样，值一样也会判断为true）

3 ===绝对等于 ( 要求类型一样值一样 )

JS的缺陷：不要使用==运算

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

null和undefined

null :空

undefined:未定义

数组

JS 的数组中可以有不同类型的元素

var  aaa = [1,2,3,'ss','xxx',333 ,null ,true]

new Array(1,2,3,4,5,xx ,ccc);

对象

对象是大括号，数组是中括号

每个属性之间用逗号隔开，最后一个不需要逗号
var person={
 name: "ml",
 age:3,
  sex : man
}

2.4 严格检查模式

在JS中假如你输入

i=1;它默认定义了一个全局变量

为了预防JS的随意性产生的问题

我们在代码前需加入 ‘use strict’ 进入严格检查模式

 //全局变量
 i =1；
'use strict'
 i =1 ；（会报错）
 let i=1;（不会报错）
 //
 // use strict ：严格检查模式 预防JavaScript的随意性产生的问题了（必须写在第一行）

 //局部变量建议使用let去定于i

3、数据类型详解

3.1 字符串

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

2、注意转义字符 \

1 \' 代表一个字符串
2 \n  :换行
3 \t ： 大小写

3、多行字符串编写

//   多行字符串编写  使用这个符号：tab上面 esc下面的那个符号

     var msg =`
     你好
     这个世界
     你好 该死的生活
     `
     console.log(msg)
 </script>

4、字符串长度

1 str.length
var studeng ="eaeaeaeae"
undefined
console.log(studeng.length)
undefined
9

5、字符串的可变性：不可变

6、大小写变换

console.log(studeng.toUpperCase())
undefined
EAEAEAEAE
//这里是方法，不是属性
.toUpperCase() 变大写
.toLowerCase() 变小写

7、截取字符串

.substring()  
var studeng ="eaeaeaeae"
console.log(studeng.substring(1,3))

undefined

ae
从结果可以看出 截尾不截头

3.2 数组

Array 可以包含任意类型的数据

1、长度

var arr=[1,2,3,4,5,6]
console.log(arr)
//注意 ： 假如给arr.length赋值，数组大小就会发生变化，如果赋值过小 会导致元素丢失
arr.length=10;
console.log(arr)
浏览器控制台输出为：
Array(6) [ 1, 2, 3, 4, 5, 6 ]
Array(10) [ 1, 2, 3, 4, 5, 6, <4 empty slots> ]

2、indexOf 通过元素获得下标索引

 var arr=[1,2,3,4,5,6]
console.log(arr.indexOf(1))
undefined
0

3.slice() 截取Array的一部分，返回一个新数组，类似于String中的substring（）方法

console.log(arr.slice(2,3))

4、push（）pop（）尾部的弹入弹出

push()： 往尾部弹入元素
Array(7) [ 1, 3, 4, 5, 6, 7, 8 ]
arrr.push('a,c')
8
arrr
Array(8) [ 1, 3, 4, 5, 6, 7, 8, "a,c" ]

pop() ：弹出尾部的一个元素
arrr.pop()
"a,c"
arrr
Array(7) [ 1, 3, 4, 5, 6, 7, 8 ]

5、unshift() shifit () 头部的弹入弹出

6、排序 sort()

var aa=[3,4,6,2,1]
undefined
aa.sort()
Array(5) [ 1, 2, 3, 4, 6 ]

7、元素反转 reverse()

aa.reverse()
Array(5) [ 6, 4, 3, 2, 1 ]

8、拼接数组 concat()

aa.concat([1,3,4])
Array(8) [ 6, 4, 3, 2, 1, 1, 3, 4 ]
注意：concat()并没有修改数组 只是返回一个新的数组

9、连接符 join

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

aa.join('a')
"6a4a3a2a1"

数组：存储数据（如何存取数据）

3.3对象

可以理解为若干个键值对

1、定义对象的方法

/* var 对象名={
      属性名： 属性值，
      属性名： 属性值，
      属性名： 属性值，
}*/
//JS中对象， 用键值对 XXXX: XXXX,表示
<script>
    var  preson ={
        ll: 1 ,
        bb: 0
    }

2.使用一个不存在的对象属性不会报错

person.aaaaaa
undefined

3.动态删减对象属性

delete person.mm
true

4.动态添加新的对象属性直接赋值即可

person.aaa="dddd"
"dddd"

3.4 流程控制

JS的流程控制和大致上是JAVA相同的

if() {}

while(){}

for(){}

forEach(function() value) （es5新特性）

var age =3;
if (age<3){
    alert(age)
} else  if (age>3) {

    alert("aaaa")
}
while (true){
    alert('3')
    console.log(age)}

    for (let i = 0; i < 1; i++) {
        console.log(i)
    }
    //forEach循环遍历数组
    var aaa=[3,11,4,331,33]
aaa.forEach(function (value) {
    console.log(value)
})

3.5 Map和Set

  Map:
      'use strict'; //严格检查模式
      var map = new Map([['to',100],['jack',80],['xx',89]]);
      var name =map.get('to');//通过Key获得balue
      map.set('aaa',111)//新增或修改一个元素
      map.delete('jack')//删除一个元素
      console.log(name)
 Set :无序不重复的集合
      var set=new Set([1,3,4,5,5,6,]);
       set.add(2);//添加元素
      // 判断是否包含这个元素 ： set.has()
      console.log(set.has(2))

4、函数及面向对象

方法和函数的区别：

方法：对象（属性，方法） 存在于类中
函数：属于整个文件
函数属于整个文件, 方法属于某一个类， 方法如果离开类就不行
函数可以直接调用, 方法必须用对象或者类来调用
注意: 虽然函数属于整个文件, 但是如果把函数写在类的声明中会不识别
不能把函数当做方法来调用, 也不能把方法当做函数来调用

4.1定义函数

绝对值函数

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

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

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

定义方式二

  var abs= function(x){
      return -x;
  }

function(x){…} 这是一个匿名函数，但是可以把结果赋值给abs 通过abs可以调用函数

调用函数

//定义方式二
var eee =function (x) {
    return -x;
}
eee(10);
alert(eee(20)

参数问题：js可以传任意个参数也可以不传参数

arguments：用来判断参数的多少

arguments 是一个JS免费赠送的关键词

代表，传递进来的所有的参数，是一个数组。

问题：arguments 包含所有的参数，我们想用其他的参数需要排除已有参数

4.2 变量的作用域

在JavaScript 中 var 定义变量实际是有作用于的。

假设在函数体中声明，则在函数体外不可以使用`（涉及到闭包问题）

function aaa () {
    var x=1;
    x= x+1;
}
x=x+2;// 会报错ReferenceError: x is not defined

如果俩个函数使用了相同而变量名，只要在函数内部没有冲突不会报错。

function aaa () {
    var x=1;
    x= x+1;
}

function aaaa() {
    var x='eee';
     x=x+2;

}

内部函数可以访问外部函数的变量，反之则不行

   //内部函数可以访问外部函数的变量，反之则不行
        function  ml() {
      var x=1;
      var c= y+1;
      function  ml2() {
          var c=x+1;
 var y=2;
      }
        }  function  ml() {
var x=1;
function  ml2() {
    var c=x+1;
    
}
  }

假设内部函数和外部函数变量重名就近原则！先内后外

全局函数

//全局函数
var x=1; //全局变量
function f() {
    console.log(x)
}
f()
console.log(x)

全局对象window

//全局对象 ：window 默认所有的全局变量都会自动绑定在window对象
var x2 ='xxx';
alert(x2);
window.alert(x2)

JS实际上只有一个全局作用域window 如果在window中都没有找到就会报错

规范

由于所有的全局变量都会绑定在window上，如果不同的JS文件使用的相同的全局变量，就会产生冲突

为了避免冲突我们要把全局变量绑定到自己的对象中

//唯一全局变量
  var ml ={};
  //定义全局变量避免冲突
  ml.name='eee'
  ml.add=function (x) {
      return x;
  }

把自己的代码放进自己定义的的唯一空间名字中，降低全局命名冲突的问题

JQuery

局部作用域 let

ES6 LET关键字解决局部作用域冲突问题

        //局部作用域 LET
        function  aaa() {
for (var e=0 ;i<10;i++){
    console.log(e)
}             console.log(e+3)// i出了上面的作用域还可以使用
        }
        function  aaaaa() {
            for (let e=0 ;i<20 ;i++){
                console.log(e)
            } console.log(e+1) //e不能使用了
        }

建议使用let去定义局部作用域的变量；

常量 const

在ES6之前，怎么定义常量：只有用全部大写字母命名的变量就是常量，规定上不允许修改常量（需要大家遵守这个约定）

在ES6引入了常量关键字 const

const ddsd= '3.14'
console.log(ddsd);
ddsd=ddd;(编译器会报错)：ReferenceError: ddd is not define

4.3方法

概念：方法就是把函数放在对象里面，对象只有两个东西：属性和方法

//  方法：定义在对象内部的函数就叫方法
  var ml ={
      name:   "马磊",
      birth:   "1998",
      age:  function () {
         //今年-出生年
         var  now= new Date().getFullYear()
          return now - this.birth
      }
  }
  以上代码可以看出 age（）就是ml对象中的一个方法！
  可以通过ml.age()调用这个方法 获取返回值

this是无法指向的，是默认指向调用它的那个对象。

拆开写法：

      function aa() {
return 1;
      }
        var ml ={
            name:   "马磊",
            birth:   "1998",
            sex :   aa(),
            age:  function () {
               //今年-出生年
               var  now= new Date().getFullYear()
                return now - this.birth
            }}
          console.log(ml.age());
           ml.name
       console.log(ml.sex)
    </script>

4.4 常见对象

标准对象

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

typeof 123

"number"//数字

typeof true

"boolean" 布尔型

typeof {}

"object"  对象

typeof []

"object" 数组对象

typeof Math.abs

"function" 函数类型

4.4.1DATE对象

  var now =   new Date();
  now.getFullYear();//获取年份
  now.getMonth(); //获取月份
  now.getDate();   //获取日
  now.getDay() ;//  获取星期几
  now.getHours() ;//时
  now.getMinutes() ;//分
  now.getSeconds() ;//秒
  now.getTime() ; //时间戳
DATE对象

now.getFullYear();

2020

now.getMonth(); //获取月份

5

now.getDate();   //获取日

6

now.getDay() ;//  获取星期几

6

now.getHours() ;//时

20

now.getMinutes() ;//分

44

now.getSeconds() ;//秒

52

now.getTime() ; //时间戳

1591447492589

4.4.2 JSON

百度百科：

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

它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。

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

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

在JavaScript中一切皆为对象，任何js支持的类型都可以用JSON来表示

格式：

对象都用{}
数组都用[]
所有的键值对都使用 key: value

JSON和JS对象的区别

1. var obj ={a: "ddd" ,b: "ssss"} 这个是JS对象
2.var json='{"a" :"dddd", "b":"ssss"}' 这个是JSON

4.4.3 Ajax

原生的js写法 xhr异步请求
jQeuy 封装好的方法 $（’’#name"）.ajax("")
axios请求

5、面向对象编程

5.1什么是面向对象

javascript 、java 、c# …等语言都是面向对象编程

面向对象编程的特点

类：模板
- 对象：类的实例化集体实现

5.2面向对象原型继承

JS中的继承很简单：你想要获得某个对象的方法，

你就可以继承他把他当作你的父类来继承

具体实例如下：

5.3class继承

//定义一个学生类，属性，方法
class student {
    constructor(name){
        this.name =name ;
    }
    hello(){
        alert("hello")
    }
}
//为这个类新建对象
var xiaoma =new student("xiaoma")
xiaoma.hello();
//class 类继承
class  midstudengt extends  student{
    constructor(name,agee){
        super(name)
        this.agee= agee;
     }
     say(){
        alert("我是中学生")
     }
}
var ml =new midstudengt('ml',13)
ml.say()

原型链

在JS中每创建一个函数，该函数就会自动带有一个 prototype 属性。该属性是个指针，指向了一个对象，我们称之为 原型对象。什么是指针？指针就好比学生的学号，原型对象则是那个学生。我们通过学号找到唯一的那个学生。假设突然，指针设置 null, 学号重置空了，不要慌，对象还存在，学生也没消失。只是不好找了。

原型对象上默认有一个属性 constructor，该属性也是一个指针，指向其相关联的构造函数。

通过调用构造函数产生的实例，都有一个内部属性，指向了原型对象。所以实例能够访问原型对象上的所有属性和方法。

**所以三者的关系是，每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。**通俗点说就是，实例通过内部指针可以访问到原型对象，原型对象通过constructor指针，又可以找到构造函数。

7、操作BOM对象（重点）

浏览器介绍

JavaScript和浏览器的关系

JavaScript 的诞生就是为了在浏览器运行的脚本语言

BOM: 浏览器对象模型

内核浏览器

IE 6-11
Chrome谷歌浏览器
Safarl 苹果浏览器
FireFox 火狐浏览器
Opera

三方

QQ浏览器
360浏览器

window

window代表浏览器窗口

window有好多种方法

window.alert(111)

undefined

window.History

function ()

window.innerHeight

480

window.innerWidth

1536

Navigator

Navagator 封装了浏览器的信息

navigator.appVersion

"5.0 (Windows)"

navigator.buildID

"20181001000000"

navigator.userAgent

"Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:76.0) Gecko/20100101 Firefox/76.0"

navigator.platform

"Win32"

大多数时候，我们不会使用 navigator 对象，因为会被认为修改

screen

screen代表全屏幕属性

screen.width

1536

screen.height

864

location(重要）

location代表当前页面的URL信息


host: "www.bilibili.com"



hostname: "www.bilibili.com"



href: "https://www.bilibili.com/video/BV1JJ41177di?p=19"



origin: "https://www.bilibili.com"
Location https://www.bilibili.com/video/BV1JJ41177di?p=19

assign: function assign()

hash: ""

host: "www.bilibili.com"

hostname: "www.bilibili.com"

href: "https://www.bilibili.com/video/BV1JJ41177di?p=19"

origin: "https://www.bilibili.com"

pathname: "/video/BV1JJ41177di"

port: "" 。。端口号

protocol: "https:" //协议

reload: function reload() //刷新网页

location.assign()//重新定位到某个网址

document

document 代表当前的页面 HTML DOM文档树

可以通过document获取网页节点

<dl id="eee" >
    <dt>JAVA</dt>
    <dd>SE</dd>
    <dd>EE</dd>
</dl>
<script>
   var  d= document.getElementById("eee");
    console.log(d)
</script>

获取具体的文档树节点

就可以动态的修改网页！

获取cookie

document.cookie
"_uuid=BF01A7A2-5059-070E-D282-312DDFF8C6B388494infoc; buvid3=0384035E-5667-4C56-94E7-4B889CA62DDB53931infoc; LIVE_BUVID=AUTO4715771044074660; stardustvideo=1; rpdid=|(k|)Ykkm~RJ0J'ul)ml|mY)|; sid=aftt3oj4; DedeUserID=375063169; DedeUserID__ckMd5=19404c5763e85131; bili_jct=2c86914eb67b40f32c6ce7f88febdcf0; PVID=1; bsource=seo_baidu; CURRENT_FNVAL=16"

劫持cookie 原理

恶意人员获取你的cookie 上传到他的服务器 盗取你的信息

服务器端可以设置 cookie:httpOnly 防止cookie丢失

history ：网页历史浏览记录

history.back（）//后退
history.go() //前进

8、操作DOM对象（重点）

DOM：文档对象模型

核心：

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

更新：更新Dom节点
遍历Dom节点：得到Dom节点
删除：删除一个Dom节点

添加：添加一个新的节点

8.1 获得DOM节点

//先定义三个节点 通过JS获得节点
<div id="sss">
<h1>标题</h1>
<p id="p1"> pi </p>
<p class="p2">p2</p>
</div>

<script>
    //获得以上三个节点
    var h11 =document.getElementsByTagName('h1');//通过标签名获得节点
    var p1=document.getElementById('p1');//通过id获得节点
    var p2=document.getElementsByClassName('p2') ;//通过类选择器获得节点

    var divs =document.getElementById("sss");//获得整个div块的节点
    var childrens =divs.children ; //通过.children方法获得 父节点下的所有节点
   var chile =divs.firstChild; //获得父节点下的第一个子节点
    var child =divs.lastChild ;//获得父节点下的的最后一个子节点

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

//先定义三个节点 通过JS获得节点
<div id="sss">
<h1>标题</h1>
<p id="p1"> pi </p>
<p class="p2">p2</p>
</div>

<script>
    //获得以上三个节点
    var h11 =document.getElementsByTagName('h1');//通过标签名获得节点
    var p1=document.getElementById('p1');//通过id获得节点
    var p2=document.getElementsByClassName('p2') ;//通过类选择器获得节点

    var divs =document.getElementById("sss");//获得整个div块的节点
    var childrens =divs.children ; //通过.children方法获得 父节点下的所有节点
   var chile =divs.firstChild; //获得父节点下的第一个子节点
    var child =divs.lastChild ;//获得父节点下的的最后一个子节点

8.2 更新DOM节点

操作文本

//先获取div节点

    var div = document.getElementById("xxx");//节点获取成功

    //操作文本

    // div.innerText() 修改节点里的文本内容

     div.innerText="dddddd" ; //把abc修改成dddddd

     // div.innerHTML 可以识别HTML标签进行修改

    div.innerHTML= "<strong> dddddd</strong>";

操作CSS

 
    //操作CSS
    //格式： 节点名.style.要修改的东西 
    div.style.color= 'red'  ;//修改字体颜色
    div.style.fontSize='30px'; // 修改字体大小
</script>

8.3 删除DOM节点

删除节点

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

<div>
    <h1 id="h1">h1</h1>
    <p id="p1">p1</p>
    <p  id="p2">p2 </p>
</div>

<script>
    //要删除某节点 必须先获取该节点的父节点 再通过父节点删除该自己点
    //举例删除h1节点
     var div= document.getElementsByTagName("div");//先获得h1的父节点div
     
     
     div.removeChild('h1') ; //通过父节点删除h1
    div.removeChild(div.children[0]); //删除div的第1个子节点
    div.removeChild(div.children[1]); //删除div的第2个子节点
    div.removeChild(div.children[2]); //删除div的第3个子节点
    //这里值得注意的是 删除是一个动态过程 你删除了第一个子节点 他就只剩两个子节点 。然后重新开始删除
</script>

8.4创建和插入DOM节点

插入节点

我们获得了某个DOM节点，假设这个dom节点是空的，我们通过innerHTML可以增加一个元素，但如果这个节点非空就会产生覆盖！

追加：将一个节点加入到另一个节点中去

首先获得两个节点的对象

通过append()进行追加

<p id="javascript">javascript</p>
<div id="list">
<p>javase</p>
    <p>javaee</p>
    <p>javame</p>
</div>
<script>
    //进行追加操作  把javascript加入到 div标签里面去
    //首先获取两个标签的节点
    var
         javascript=document.getElementById('javascript');//获取JS节点
         list=  document.getElementById('list');//获取div的节点
    //通过apped()在一个节点中加入另一个节点
        list.append(javascript );//

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

通过document.createElement() 创建一个新的标签

   //创造一个新的节点
    var news= document.createElement('p');//创建一个p标签
    news.id='xxx';//给新创建的标签设置id
    news.innerText="ssss";//给新标签加入文本
    list.append(news);//把新标签插入list中

创造一个style标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<p id="javascript">javascript</p>
<div id="list">
<p>javase</p>
    <p>javaee</p>
    <p>javame</p>
</div>
<script>
    //进行追加操作  把javascript加入到 div标签里面去
    //首先获取两个标签的节点
    var
         javascript=document.getElementById('javascript');//获取JS节点
         list=  document.getElementById('list');//获取div的节点
    //通过apped()在一个节点中加入另一个节点
        list.append(javascript );//
    //创造一个新的节点
    var news= document.createElement('p');//创建一个p标签
    news.id='xxx';//给新创建的标签设置id
    news.innerText="ssss";//给新标签加入文本
    list.append(news);//把新标签插入list中
    //创造一个style标签
    var css =document.createElement('style');//创造一个style标签
    css.setAttribute("id",'ddd');//给这个标签增加属性 键值对
    css.innerHTML= "p{ color : blue}";//
   var head = document.getElementsByTagName("head")[0];//获得head节点
   head.appendChild(css);// 把css加入到head标签里去
</script>
</body>
</html>

9、操作表单（验证）

表单是什么 :form DOM树组成之一

文本框 text
下拉框
单选框 radion
多选框 check
隐藏域 hidden
密码框 password
…

表单的目的：提交信息

获得要提交的信息

<!--新建一个的表单-->
<form action="sss">
   <!--新建一个文本框-->
   <span>用户名：</span> <input type="text" id="username" >
   <p>
       <!--新疆一个多选框-->
       <span> 性别：</span>
       <input type="radio" name="sex" value="boy"  id="man" > 男
       <input type="radio" name="sex" value="girl"id="woman">女
   </p>
</form>
<script>
   var  user  =   document.getElementById('username');
   // wser.value 可以获得表单中输入的值
   var boy =  document.getElementById('man');
   var  girl =document.getElementById("woman");
   // boy.value girl.value 获取表单的值
</script>

提交表单表单内容可以使用MD5加密

10、jQuery

JavaScript

JQuery库，里面存在大量的javascript函数

就是把大量JS函数封装在JQuery库中导入JQuery库后直接调用即可

获取JQuery

外部导入

<!--外部导入 JQuery-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

也可以内部导入JQ库文件

JQuery基本公式

  <!--公式-->
// $(selector).action() 美元符号（选择器）.动作
//选择器就是CSS选择器

a href="" id="sss">点击</a>
<script>
     <!--公式-->
     // $(selector).action() 美元符号（选择器）.动作

  //选择器就是CSS选择器
$('#sss').click( function () {
    alert("eeee")
})

</script>

JQuery选择器

<script>
    <!--原生的JS选择器非常少-->
  //  document.getElementById(); ID选择器
   // document.getElementsByTagName();标签选择器
    //document.getElementsByClassNam;类选择器
//     JQuery 选择器
    $('p').click() //标签选择器
    $('#id').click() //id选择器
    $('.class').click() //类选择器
    //CSS中的选择器他都可以用
</script>

jQuery事件

鼠标事件、键盘事件、

操作DOM元素

<body>
<ul id="sss" >  Javascript
    <li class="se"> se </li>
    <li id="python">python</li>
</ul>
<script>
    $('#sss li[class-se]').text();//获得值
    $('#sss li[class-se]').text('设置值');//设置值
    $('#sss').html(); //设置HTML
    $('#sss').css();//设置css操作
</script>
</body>

元素的显示和隐藏

本质 display:none

.show()//显示

tElementById(“woman”);

// boy.value girl.value 获取表单的值

提交表单表单内容可以使用MD5加密

10、jQuery

JavaScript

JQuery库，里面存在大量的javascript函数

就是把大量JS函数封装在JQuery库中导入JQuery库后直接调用即可

获取JQuery

外部导入

<!--外部导入 JQuery-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

也可以内部导入JQ库文件

JQuery基本公式

  <!--公式-->
// $(selector).action() 美元符号（选择器）.动作
//选择器就是CSS选择器

a href="" id="sss">点击</a>
<script>
     <!--公式-->
     // $(selector).action() 美元符号（选择器）.动作

  //选择器就是CSS选择器
$('#sss').click( function () {
    alert("eeee")
})

</script>

JQuery选择器

<script>
    <!--原生的JS选择器非常少-->
  //  document.getElementById(); ID选择器
   // document.getElementsByTagName();标签选择器
    //document.getElementsByClassNam;类选择器
//     JQuery 选择器
    $('p').click() //标签选择器
    $('#id').click() //id选择器
    $('.class').click() //类选择器
    //CSS中的选择器他都可以用
</script>

jQuery事件

鼠标事件、键盘事件、

操作DOM元素

<body>
<ul id="sss" >  Javascript
    <li class="se"> se </li>
    <li id="python">python</li>
</ul>
<script>
    $('#sss li[class-se]').text();//获得值
    $('#sss li[class-se]').text('设置值');//设置值
    $('#sss').html(); //设置HTML
    $('#sss').css();//设置css操作
</script>
</body>

元素的显示和隐藏

本质 display:none

.show()//显示

.hidden//隐藏

燃烧i你的梦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript

1、什么是JavaScript1.1概述JavaScript世界上最流行的脚本语言Java、 JavaScript 没有关系1.2发展史JavaScript的历史：网景公司的程序员为了应付公司要求耗时十天做出了JavaScript.一个合格的后端人员，必须要精通JavaScript（进公司要写很多）。ECMAScript它可以理解是JavaScript的一个标准。ECMAScript最新版本已经到es6.但是大部分浏览器还只停留在es5代码上！导致了开发环境和线上环境版本不一致。2、
复制链接

扫一扫