javaScript

什么是javaScript

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 很容易学习。

快速入门

引入javaScript

内部引入

可以写在标签

也可以写在标签

一般放在body标签结尾

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> 
        <title>内部引入js</title> 
        <script>
            alert("head标签引入javascript")
        </script>
    </head>
    <body>
        <script>
            alert("body标签引入javascript")
        </script>
    </body>
</html>

外部引入

myfrist.js文件

alert("外部引入js")

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> 
        <title>外部引入js</title>
           <!--script标签是成对的，不能写<script/>-->
             <script src="js/myfirst.js"></script>
    </head>
    <body>
    </body>
</html>

数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。

引用数据类型：对象(Object)、数组(Array)、函数(Function)。

字符串

字符串是存储字符（比如 "Bill Gates"）的变量。

字符串可以是引号中的任意文本。您可以使用单引号或双引号：

var carname="Volvo XC60";
var carname='Volvo XC60';

字符串转整数

parseInt() 函数可解析一个字符串，并返回一个整数。

当参数 radix 的值为 0，或没有设置该参数时，parseInt() 会根据 string 来判断数字的基数。

当忽略参数 radix , JavaScript 默认数字的基数如下:

如果 string 以 "0x" 开头，parseInt() 会把 string 的其余部分解析为十六进制的整数。

如果 string 以 0 开头，那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字。

如果 string 以 1 ~ 9 的数字开头，parseInt() 将把它解析为十进制的整数。

语法
```
parseInt(string, radix)
```

参数	描述
string	必需。要被解析的字符串。
radix	可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。

数字

JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：

var x1=34.00;      //使用小数点来写
var x2=34;         //不使用小数点来写

极大或极小的数字可以通过科学（指数）计数法来书写：
```
var y=123e5;      // 12300000
var z=123e-5;     // 0.00123
```

布尔

布尔（逻辑）只能有两个值：true 或 false。

var x=true;
var y=false;

数组

var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";

var cars=new Array("Saab","Volvo","BMW");

var cars=["Saab","Volvo","BMW"];

数组添加、移除、提取元素

splice()增、删、替换元素

⑴可以用来删除数组中的指定元素

⑵使用splice()会影响到原数组，会将指定元素从原数组中删除

并将被删除的元素作为返回值返回

⑶参数：

第一个，表示开始位置的索引

第二个，表示删除的数量

第三个及以后。。。

可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边

⑷splice( ) 方法是一个多功能的方法：可以删除元素，可以替换元素，可以在数组的指定位置插入（添加）元素

删除功能，第一个参数为第一项位置，第二个参数为要删除几个。

用法：array.splice(index,num)，返回值为删除内容，array为结果值。
插入功能，第一个参数（插入位置），第二个参数（0），第三个参数（插入的项）。

用法：array.splice(index,0,insertValue)，返回值为空数组，array值为最终结果值。
替换功能，第一个参数（起始位置），第二个参数（删除的项数），第三个参数（插入任意数量的项）。

用法：array.splice(index,num,insertValue)，返回值为删除内容，array为结果值。

slice()提取元素

⑴可以用来从数组提取指定元素

该方法不会改变元素数组，而是将截取到的元素封装到一个新的数组中返回

⑵语法：
arrayObject.slice(start,end)
⑶参数：

1.截取开始的位置的索引，包含开始索引

2.截取结束的位置的索引，不包含结束索引
     - 第二个参数可以省略不写，此时会截取从开始索引往后的所有元素
⑷索引可以传递一个负值，如果传递一个负值，则从后往前计算

-1 ：倒数第一个

-2 ：倒数第二个

shift() 删除数组第一个元素

用于把数组的第一个元素从其中删除，并返回第一个元素的值。

unshift() 添加元素

unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。

语法

arrayObject.unshift(newelement1,newelement2,....,newelementX)

参数	描述
newelement1	必需。向数组添加的第一个元素。
newelement2	可选。向数组添加的第二个元素。
newelementX	可选。可添加若干个元素。

push()末尾添加元素

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

语法

arrayObject.unshift(newelement1,newelement2,....,newelementX)

参数	描述
newelement1	必需。向数组添加的第一个元素。
newelement2	可选。向数组添加的第二个元素。
newelementX	可选。可添加若干个元素。

pop()删除数组的最后一个元素

pop() 方法用于删除并返回数组的最后一个元素。

语法
```
arrayObject.pop()
```

对象

对象定义

你可以使用字符来定义和创建 JavaScript 对象

var person={
    firstname: "John",
    lastname: "Doe",
    id: 5566
};

对象属性

可以说 "JavaScript 对象是变量的容器"。

但是，我们通常认为 "JavaScript 对象是键值对的容器"。

键值对通常写法为 name : value (键与值以冒号分割)。

键值对在 JavaScript 对象通常称为对象属性。

访问对象属性对象

属性有两种寻址方式：

name=person.lastname;
name=person["lastname"];

对象方法

对象的方法定义了一个函数，并作为对象的属性存储。

对象方法通过添加 () 调用 (作为一个函数)。

该实例访问了 person 对象的 fullName() 方法:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
<p>创建和使用对象方法。</p>
<p>对象方法作为一个函数定义存储在对象属性中。</p>
<p id="demo"></p>
<script>
var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566,
    fullName : function() 
	{
       return this.firstName + " " + this.lastName;
    }
};
document.getElementById("demo").innerHTML = person.fullName();
</script>
</body>
</html>
//输出：
创建和使用对象方法。
对象方法作为一个函数定义存储在对象属性中。
John Doe

Undefined 和 Null

Undefined 这个值表示变量不含有值。

可以通过将变量的值设置为 null 来清空变量。

NaN

not a number，isNaN()方法判断是否为number

如果isNaN函数的参数不是Number类型， isNaN函数会首先尝试将这个参数转换为数值，然后才会对转换后的结果是否是NaN进行判断。因此，对于能被强制转换为有效的非NaN数值来说（空字符串和布尔值分别会被强制转换为数值0和1），返回false值也许会让人感觉莫名其妙。

循环

For...in 循环

for...in 语句用于对数组或者对象的属性进行循环操作。

for ... in 循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作。

语法：
for (变量 in 对象)
{
 在此执行代码
}
“变量”用来指定变量，指定的变量可以是数组元素，也可以是对象的属性。

for(x in 对象)中，x的值(数组输出索引，对象输出对象属性)

<script type="text/javascript">
    var x;
    var y;
    var car=["大众","福特","宝马"];
    var my = {
        name:"小米",
        age:20,
        sex:"男"
    };
    for (x in car)
    {
        document.write(x+" ") //输出:0 1 2
    }
    for (y in my)
    {
        document.write(y+" ") //输出:name age sex
    }
</script>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>点击下面的按钮，循环遍历对象 "person" 的属性。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x;
	var txt="";
	var person={fname:"Bill",lname:"Gates",age:56}; 
	for (x in person){
		txt=txt + person[x];
	}
	document.getElementById("demo").innerHTML=txt;
}
</script>
</body>
</html>

forEach

<script>
    var a=[1,2,3,4,5]
    var b= {
        my:{
            name: "小米",
            age: 20,
            sex: "男"
        },
        you:{
            name: "小米",
            age: 20,
            sex: "男"
        }
    }
    a.forEach(function (value){
        document.write(value+" ") //输出:1 2 3 4 5
    })
    Object.keys(b).forEach((a)=>{
        document.write(a+" ") //输出:my you
    })
</script>

变量的作用域

使用var关键字声明的全局作用域变量属于window对象。

使用let关键字声明的全局作用域变量不属于window对象。

使用var关键字声明的变量在任何地方都可以修改。

在相同的作用域或块级作用域中，不能使用let关键字来重置var关键字声明的变量。

在相同的作用域或块级作用域中，不能使用let关键字来重置let关键字声明的变量。

let关键字在不同作用域，或不用块级作用域中是可以重新声明赋值的。

在相同的作用域或块级作用域中，不能使用const关键字来重置var和let关键字声明的变量。

在相同的作用域或块级作用域中，不能使用const关键字来重置const关键字声明的变量

const 关键字在不同作用域，或不同块级作用域中是可以重新声明赋值的:

var关键字定义的变量可以先使用后声明。

let关键字定义的变量需要先声明再使用。

const关键字定义的常量，声明时必须进行初始化，且初始化后不可再修改。

全局变量

在函数体外或代码块外使用 var 和 let 关键字声明的变量也有点类似。它们的作用域都是全局的

var carName = "Volvo";
 
// 这里可以使用 carName 变量
 
function myFunction() {
    // 这里也可以使用 carName 变量
}

let carName = "Volvo";
 
// 这里可以使用 carName 变量
 
function myFunction() {
    // 这里也可以使用 carName 变量
}

局部变量

在函数内声明的变量作用域是局部的（函数内）

// 这里不能使用 carName 变量

function myFunction() {
    var carName = "Volvo";
    // 这里可以使用 carName 变量
}
 
// 这里不能使用 carName 变量

// 使用 let
function myFunction() {
    let carName = "Volvo";   //  局部作用域
}
// 这里不能使用 carName 变量

块级作用域

使用 var 关键字声明的变量不具备块级作用域的特性，它在 {} 外依然能被访问到

let 声明的变量只在 let 命令所在的代码块 {} 内有效，在 {} 之外不能访问。

{ 
    var x = 2; 
}
// 这里可以使用 x 变量

{ 
    let x = 2;
}
// 这里不能使用 x 变量

重新定义变量

使用 var 关键字重新声明变量可能会带来问题，在块中重新声明变量也会重新声明块外的变量.

let 关键字就可以解决这个问题，因为它只在 let 命令所在的代码块 {} 内有效。

var x = 10;
// 这里输出 x 为 10
{ 
    var x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 2

var x = 10;
// 这里输出 x 为 10
{ 
    let x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 10

循环作用域

在第一个实例中，使用了 var 关键字，它声明的变量是全局的，包括循环体内与循环体外。

在第二个实例中，使用 let 关键字，它声明的变量作用域只在循环体内，循环体外的变量不受影响。

var i = 5;
for (var i = 0; i < 10; i++) {
    // 一些代码...
}
// 这里输出 i 为 10

let i = 5;
for (let i = 0; i < 10; i++) {
    // 一些代码...
}
// 这里输出 i 为 5

重置变量

使用 var 关键字声明的变量在任何地方都可以修改

var x = 2;
 
// x 为 2
 
var x = 3;
 
// 现在 x 为 3

在相同的作用域或块级作用域中，不能使用 let 关键字来重置 var 关键字声明的变量

var x = 2;       // 合法
let x = 3;       // 不合法

{
    var x = 4;   // 合法
    let x = 5   // 不合法
}

在相同的作用域或块级作用域中，不能使用 let 关键字来重置 let 关键字声明的变量:

let x = 2;       // 合法
let x = 3;       // 不合法

{
    let x = 4;   // 合法
    let x = 5;   // 不合法
}

在相同的作用域或块级作用域中，不能使用 var 关键字来重置 let 关键字声明的变量:

let x = 2;       // 合法
var x = 3;       // 不合法

{
    let x = 4;   // 合法
    var x = 5;   // 不合法
}

let 关键字在不同作用域，或不同块级作用域中是可以重新声明赋值的:

let x = 2;       // 合法

{
    let x = 3;   // 合法
}

{
    let x = 4;   // 合法
}

变量提升

JavaScript 中，var 关键字定义的变量可以在使用后声明，也就是变量可以先使用再声明

let 关键字定义的变量则不可以在使用后声明，也就是变量需要先声明再使用。

// 在这里可以使用 carName 变量
 
var carName;

// 在这里不可以使用 carName 变量

let carName;

Javascript基础

直接写入 HTML 输出流

document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");

对事件的反应(onclick)

<button type="button" onclick="alert('欢迎!')">点我!</button>

改变 HTML 内容(innerHTML)

x=document.getElementById("demo");  //查找元素
x.innerHTML="Hello JavaScript";    //改变内容

改变 HTML 图像(.src)

以上实例中代码 element.src.match("bulbon") 的作用意思是：检索 < img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">里面 src 属性的值有没有包含bulbon这个字符串，如果存在字符串* bulbon，图片 src 更新为 bulboff.gif，若匹配不到 bulbon 字符串，src 则更新为 bulbon.gif

<script>
function changeImage()
{
    element=document.getElementById('myimage')
    if (element.src.match("bulbon"))
    {
        element.src="/images/pic_bulboff.gif";
    }
    else
    {
        element.src="/images/pic_bulbon.gif";
    }
}
</script>
<img loading="lazy" id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">

改变 HTML 样式

点击改变字体颜色

x=document.getElementById("demo")  //找到元素 
x.style.color="#ff0000";           //改变样式

鼠标悬停改变背景颜色

<script>
    let a=new Array(13);
    for(let i=1;i<a.length;i++){
        a[i]="ico_bg"+i.toString();
        //悬停在子列表上面时改变顶列表的背景
        document.getElementById(a[i]).onmouseover=function(){
            document.getElementById(a[i]).style.background="#778899";
        }
        //鼠标离开子列表时恢复顶列表的背景
        document.getElementById(a[i]).onmouseout=function(){
            document.getElementById(a[i]).style.background="#fff";
        }
    }
</script>

验证输入

JavaScript 常用于验证用户的输入

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
	
<h1>我的第一段 JavaScript</h1>
<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction()
{
	var x=document.getElementById("demo").value;
	if(x==""||isNaN(x))
	{
		alert("不是数字");
	}
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
	
</body>
</html>

javascript案例

导航栏

鼠标悬浮导航栏切换

回到顶部

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 10px;
}

#myBtn:hover {
  background-color: #555;
}
</style>
</head>
<body>
<button onclick="topFunction()" id="myBtn" title="回顶部">返回顶部</button>
<script>
// 当网页向下滑动 20px 出现"返回顶部" 按钮
//onscroll监听窗口滑动
window.onscroll = function() {scrollFunction()};
function scrollFunction() {console.log(121);
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }
}
// 点击按钮，返回顶部
function topFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}
</script>
</body>
</html>

获得焦点元素上浮(输入框内提示信息上浮)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉框</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"></script>
</head>
<style>
 .input{
     position: relative;
 }
 .input span:before{
     color: #00BFFF;
     content: attr(data-placeholder);
     display: block;
     position: absolute;
     top:0;
     left: 10px;
     z-index: -1;
 }
 .focusm + span::before{
     color: #00BFFF;
     content: attr(data-placeholder);
     display: block;
     position: absolute;
     top:-30px;
     left: 10px;
     z-index: -1;

 }
input{
    display: block;
    background: none;
    margin-top: 30px;
}
</style>
<body>
<div class="container" style="margin-top: 500px">
    <form>
        <div class="input">
            <input type="email"/>
            <span data-placeholder="username"></span>
        </div>
        <div class="input">
            <input type="password"/>
            <span data-placeholder="password"></span>
        </div>
    </form>
</div>
<script>
    $('.input input').on('focus',function(){
       $(this).addClass("focusm")
    })
    $('.input input').on('blur',function(){
        if($(this).val() === '')
            $(this).removeClass('focusm');
    })
</script>
</body>
</html>

注意：

span元素放在input里的时候要设置优先级z-index:-1

加速视频播放速度

document.querySelector(‘video’) 筛选出播放视频的组件，然后直接设置播放速率就搞定了。

document.querySelector('video').playbackRate = 5;

javaScript对象

String对象

String 对象

String 对象用于处理文本（字符串）。

String 对象创建方法： new String()。

String 对象属性

属性	描述
constructor	对创建该对象的函数的引用
length	字符串的长度
prototype	允许您向对象添加属性和方法

String 对象方法

方法	描述
charAt()	返回在指定位置的字符。
charCodeAt()	返回在指定的位置的字符的 Unicode 编码。
concat()	连接两个或更多字符串，并返回新的字符串。
fromCharCode()	将 Unicode 编码转为字符。
indexOf()	返回某个指定的字符串值在字符串中首次出现的位置。
includes()	查找字符串中是否包含指定的子字符串。
lastIndexOf()	从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。
match()	查找找到一个或多个正则表达式的匹配。
repeat()	复制字符串指定次数，并将它们连接在一起返回。
replace()	在字符串中查找匹配的子串，并替换与正则表达式匹配的子串。
search()	查找与正则表达式相匹配的值。
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分。
split()	把字符串分割为字符串数组。
startsWith()	查看字符串是否以指定的子字符串开头。
substr()	从起始索引号提取字符串中指定数目的字符。
substring()	提取字符串中两个指定的索引号之间的字符。
toLowerCase()	把字符串转换为小写。
toUpperCase()	把字符串转换为大写。
trim()	去除字符串两边的空白
toLocaleLowerCase()	根据本地主机的语言环境把字符串转换为小写。
toLocaleUpperCase()	根据本地主机的语言环境把字符串转换为大写。
valueOf()	返回某个字符串对象的原始值。
toString()	返回一个字符串。

注意:

1、substring(int index) 从下标为index开始截取到最后··

2、substring(int index,int last) 取值范围：[int index,int last)

var str="student"
console.log(str.substring(1,3)) //输出：tu
console.log(str.substring(1)) //输出:tudnt

Array 对象

数组属性

属性	描述
constructor	返回创建数组对象的原型函数。
length	设置或返回数组元素的个数。
prototype	允许你向数组对象添加属性或方法。

Array 对象方法

方法	描述
concat()	连接两个或更多的数组，并返回结果。
copyWithin()	从数组的指定位置拷贝元素到数组的另一个指定位置中。
entries()	返回数组的可迭代对象。
every()	检测数值元素的每个元素是否都符合条件。
fill()	使用一个固定值来填充数组。
filter()	检测数值元素，并返回符合条件所有元素的数组。
find()	返回符合传入测试（函数）条件的数组元素。

findIndex()	返回符合传入测试（函数）条件的数组元素索引。

forEach()	数组每个元素都执行一次回调函数。
from()	通过给定的对象中创建一个数组。

includes()	判断一个数组是否包含一个指定的值。
indexOf()	搜索数组中的元素，并返回它所在的位置。
isArray()	判断对象是否为数组。
join()	把数组的所有元素放入一个字符串。
keys()	返回数组的可迭代对象，包含原始数组的键(key)。
lastIndexOf()	搜索数组中的元素，并返回它最后出现的位置。
map()	通过指定函数处理数组的每个元素，并返回处理后的数组。
pop()	删除数组的最后一个元素并返回删除的元素。
push()	向数组的末尾添加一个或更多元素，并返回新的长度。

reduce()	将数组元素计算为一个值（从左到右）。

reduceRight()	将数组元素计算为一个值（从右到左）。
reverse()	反转数组的元素顺序。
shift()	删除并返回数组的第一个元素。
slice()	选取数组的一部分，并返回一个新数组。类似于string的substring
some()	检测数组元素中是否有元素符合指定条件。
sort()	对数组的元素进行排序。
splice()	从数组中添加或删除元素。
toString()	把数组转换为字符串，并返回结果。
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。
valueOf()	返回数组对象的原始值。

setInterval函数

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式

setInterval的停止与启动

function func(){console.log("print")} //定时任务
var interval = setInterval(func, 2000); //启动,func不能使用括号
clearInterval(interval );//停止
interval = setInterval(func, 2000); //重新启动即可

延时跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../resources/bootstrap-4.2.1-dist/css/bootstrap.css"/>
</head>
<body>
<h3 class="text-center"><span id="time">5</span>秒后跳转到</h3>
   <script>
     function load(){
         var time=document.getElementById("time");
         if(time.innerHTML==0){
             window.location.href("");
         }else{
             time.innerHTML--;
         }
     }
     window.setInterval("load()",1000);
   </script>
</body>
</html>

Jquery

原生Js和jquery的区别

入口函数加载模式不同

原生js要等到DOM元素加载完毕，并且图片加载完毕才会执行

jquery会等到DOM元素加载完毕，但不会等到图片加载完毕就会执行

入口函数覆盖问题

原生Js如果编写了多个入口函数，后面的会覆盖前面的

jquery后面的不会覆盖前面的，按先后顺序运行

Jquery入口函数

$(document).ready(function(){});
jQuery(document).ready(function(){});
$(function(){});
jQuery(function(){});

释放$使用权

var jq=jQuery.noConflict();
jq(function(){
    alert("123")
});

forEach

原生js和jquery的forEach不同之处：

原生js的forEach不能遍历对象

jquery的$.each()既可以遍历数组又可以遍历对象

index(遍历到的索引)

value(遍历到的元素)

js：function(value,index) 先value后index
jquery：function(index,value) 先index后value

    var a = ["1", 2, 3, 4]
    var b = {
        my: {
            name: "小明",
            age: 20,
            sex: "男"
        },
        you: {
            name: "小李",
            age: 20,
            sex: "男"
        }
    }
    a.forEach(function (value,index) {
        console.log(value);
        输出结果：1 2 3 4
    })

    $.each(b, function (index, value) {
        console.log(index);
        输出结果：my you
         console.log(value);
        输出结果：
        {name: "小明",age: 20,sex: "男"}
        {name: "小李",age: 20,sex: "男"}
    })

jquery常用方法

siblings()

用于筛选同辈元素的表达式

<p>Hello</p>
<div>
    <span>Hello Again</span>
</div>
<p>And Again</p>
找到每个div的所有同辈元素。
$("div").siblings()
结果:[ <p>Hello</p>, <p>And Again</p> ]

posted @ 2021-06-07 20:06 xcz1998 阅读(134) 评论(0) 收藏举报

刷新页面返回顶部

xcz1998

javaScript

什么是javaScript

快速入门

引入javaScript

内部引入

外部引入

数据类型

字符串

字符串转整数

数字

布尔

数组

数组添加、移除、提取元素

splice()增、删、替换元素

slice()提取元素

shift() 删除数组第一个元素

unshift() 添加元素

push()末尾添加元素

pop()删除数组的最后一个元素

对象

对象定义

对象属性

访问对象属性对象

对象方法

Undefined 和 Null

NaN

循环

For...in 循环

forEach

变量的作用域

全局变量

局部变量

块级作用域

重新定义变量

循环作用域

重置变量

变量提升

Javascript基础

直接写入 HTML 输出流

对事件的反应(onclick)

改变 HTML 内容(innerHTML)

改变 HTML 图像(.src)

改变 HTML 样式

点击改变字体颜色

鼠标悬停改变背景颜色

验证输入

javascript案例

导航栏

鼠标悬浮导航栏切换

回到顶部

获得焦点元素上浮(输入框内提示信息上浮)

加速视频播放速度

javaScript对象

String对象

String 对象属性

String 对象方法

Array 对象

数组属性

Array 对象方法

setInterval函数

setInterval的停止与启动

延时跳转

Jquery

原生Js和jquery的区别

入口函数加载模式不同

入口函数覆盖问题

Jquery入口函数

释放$使用权

forEach

jquery常用方法

siblings()

公告