JS基础2

qq_52772066

已于 2022-08-14 15:53:50 修改

阅读量558

点赞数

文章标签： javascript 前端开发语言

于 2022-08-07 15:49:38 首次发布

本文链接：https://blog.csdn.net/qq_52772066/article/details/126202021

版权

文章目录

一、数据类型（续上）
二、函数
三、内部对象
四、面向对象编程
五、操作BOM对象
六、操作表单

一、数据类型（续上）

1.对象

若干个键值对

var 对象名 = {
属性名：值，
属性名：值，
属性名：值
}

var pep ={
	name:"sk",
	age:19,
	number: 1899999
}//js中{...}表示一个对象，键值对描述属性xxx：xxx，多个属性用逗号隔开，最后一个不用

1.1对象赋值

pep.name = "sk"
"sk"
pep.name
"sk"

1.2 使用一个不存在的对象属性不会报错，undefined

pep.fff
nudefined

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

delete pep.name
ture
pep

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

pep.score=999
999
pep

1.5判断属性值是否在这个对象里面

‘age’ in pep
ture
//继承
‘toString’ in pep
ture

1.6判断一个属性是否是这个对象自身拥有的hasOwnPropetry()

pep.hasOwnProperty('toString')
false
pep.hasOwnProperty('age')
ture

2.流程控制

if判断
循环

while循环
for循环
forEach循环
for…in

    let arr = [1,2,3,4,5];
    for (let key in arr) {
      console.log('索引为：' + key + '，值为：' + arr[key]);
    }/*遍历数组拿到的是索引*/

    let person = {
      name:'Tony',
      age:22,
      job:'程序员'
    };
    for (let key in person) {
      console.log(key);
    }/*遍历对象是属性名*/

for of

    let arr = [1,2,3,4,5];
    for (let number of arr) {
      console.log(number);
    }/*遍历数组*/

3.Map和Set

var map = new Map(l['tom',100], ['jack ' ,90], [ 'haha' ,80]]);
var name = map . get( 'tom '); //通过key获得value !
map.set( 'admin ' ,123456);//新增或修改!
map. delete("tom");//删除!

set：无序不重复集合

set.add (2);//添加!
set.delete(1);//删除!
console.1og(set.has(3));//是否包含某个元素!

    var set = new Set([1,1,2,2,2,3,3,4]);
    set.add(5);//新增
    console.log(set);
    set.delete(1);//删除
    console.log(set);
    console.log(set.has(3));//判断是否包含某个元素

4.iterator迭代器（遍历）

ES6才有新特性

4.1遍历数组

    var arr = [10,20,30,40];
    for (let number of arr) {
      console.log(number);
    }

4.2 遍历Map

    var map = new Map([['Tom',100],['Tony',90],['Jerry',80]]);
    for (let x of map) {
      console.log(x);
    }

4.3遍历Set

    var set = new Set([110,120,119,911,119]);
    for (let x of set) {
      console.log(x);
    };

二、函数

1. 定义

定义方式一

function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}
/*如果没有执行到return函数会返回undefined*/

定义方式二

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

2.参数

2.1形参和实参不匹配

实参个数等于形参个数正确//多于取到形参个数
小于多的形参定义为undefined 结果为NaN

        function abs(num){
            if(num >= 0){
                return num;
            }else{
                return -num;
            }
        }
        console.log(abs(-10));//实参个数等于形参个数
        console.log(abs(-10,10,20));//实参个数多于形参个数	
        console.log(abs());//实参个数小于形参个数
/*10
10
NaN
*/

2.2 arguments

作用：arguments中存储了传递的所有实参，可以实现按索引方式储存数据对的特点，还有length属性
利用arguments求任意个数的最大值

        function maxValue(){
            let max = arguments[0];
            for (let i = 0; i < arguments.length; i++) {
                if(max < arguments[i]){
                    max = arguments[i];
                }
            }
            return max;
        }
        console.log("最大值为："+ maxValue(1,5,0,100));
        console.log("最大值为："+ maxValue(8,5,17));

2.3 rest

ES6新特性

作用：获取除了已定义的参数外所有参数

        function fn(a,b,...rest){//rest必须放在最后并用...标记
            console.log('a = ' + a);
            console.log('b = ' + b);
            console.log(rest);
        }
        console.log(fn(2,5,6,9,10));
        console.log(fn(-1,-10,63,432));

3.作用域

3.1全局变量

在全局作用域下的变量

        var num = 10086;
        console.log(num);
        function fn(){
            num1 = 10000;
            console.log(num);
        }
        fn();
        console.log(num1);
/*
10086
10086
10000
*/

3.2 局部变量

var定义变量实际是有作用域的在函数体内声，在函数体外不可以调用

        function fn(num){
            var num1 = 10;
            console.log(num1);
            console.log(num);
        }
        fn(100);
        console.log(num);
        console.log(num1);
/*
10
100
报错
*/

3.3对比

全局变量只要当页面关闭时才会释放，占用资源时间长
局部变量当函数执行完毕后会自动释放，相对比较节约资源

3.4let关键字

ES6
用来解决局部冲突问题

        function fn(){
            for (var i = 0; i < 5; i++) {
            }
            console.log(i);
        }
        fn();
        function fn1(){
            for (let i = 0; i < 5; i++) {
            }
            console.log(i);
        }
        fn1();//Uncaught ReferenceError: i is not defined
/*5*/

3.5const关键字

ES6常量不能被修改

        var PI = 3.14;
        console.log(PI);
        PI = 666;
        console.log(PI);

        const PRICE = 100;
        console.log(PRICE);
        PRICE = 999;//Uncaught TypeError: Assignment to constant variable.
        console.log(PRICE);
/*3.14
666
100*/

4.方法

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

4.1定义方法

调用方法格式：类似java

定义在外部

var sk = {
name : '秦疆'，
bitrh : 2000,
//方法
age: function （） {
//今年–出生的年
var now = new Date().getFullYear();
return now-this.bitrh;
	}
}
//属性
sk.name
//方法,一定要带()
sk. age()

定义在内部
不需要阔号

    function getAge(){
      var now = new Date().getFullYear();
      return now - this.birth;
    }
    function eat(){
      console.log("好好学习，天天向上");
    }
    var Person = {
      birth:2000,
      age:getAge,
      eat:eat
    }
/*
Person.age();
22
Person.eat();
好好学习，天天向上
undefined
*/

4.2 apply(obj,args)方法

obj：对象
args 数组、类数组，apply方法把这个集合中的元素传递给被调用的函数

    function getAge(){
      var now = new Date().getFullYear();
      return now - this.birth;
    }
    function eat(){
      console.log("人是铁饭是钢，一顿不吃饿得慌");
    }
    var Person = {
      birth:2000,
      age:getAge,
      eat:eat
    }
    var Tony = {
        birth:1999,
        age:getAge,
        eat:eat
    }
    getAge.apply(Person,[]);
    getAge.apply(Tony,[]);
/*
getAge.apply(Person,[]);
22
getAge.apply(Tony,[]);
23

*/

三、内部对象

1. Date

创建对象

var d = new Date();
var d = new Date(milliseconds); // 参数为毫秒
var d = new Date(dateString);
var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);

1.1 常用方法

对象方法

      var date = new Date();
      console.log(date.getFullYear());
      console.log(date.getMonth());
      console.log(date.getDate());
      console.log(date.getHours());
      console.log(date.getMinutes());
      console.log(date.getSeconds());
      console.log(date.getMilliseconds());
      console.log(date.getTime());
	.....

1.2 时间格式

      var date = new Date(1644689821512212);
      console.log(date);
      var localeDateString = date.toLocaleDateString();
      console.log(localeDateString);
      var toDateString = date.toDateString();
      console.log(toDateString);

2. JSON

什么是JSON
JSON(Javascript Object Notation,JS对象简谱)是一种轻量级的数据交换格式。
简洁和清晰的层次结构使得JSON成为理想的数据交换语言。
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
格式：

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

2.1 JSON字符串和JS对象的转化

对象转化为JSON字符串：
JSON.string(对象名)
JSON字符串转化为对象
JSON.parse(‘JSON字符’)

    let Person = {
        name:'SK',
        age:20,
        sex:'男'
    }
    let stringify = JSON.stringify(Person);
    console.log(stringify);//{"name":"SK","age":20,"sex":"男"}
    var parse = JSON.parse('{"name":"SK,"age":20,"sex":"男"}');
    console.log(parse);

四、面向对象编程

原型继承

let Person = {
      name:'Tony',
      age:22,
      eat:function(){
        console.log("好好学习");
      }
    };
    let Bird = {
      fly:function(){
        console.log("天天向上");
      }
    }
    let Jerry = {
      name:'Jerry'
    };
    Jerry.__proto__ = Person;//继承Person
    console.log(Jerry.eat());
    Jerry.__proto__ = Bird;
    console.log(Jerry.fly());
/*
好好学习
undefined
天天向上
undefined

*/

class继承

ES6
定义一个类

    class Person{
      constructor(name){
        this.name = name;
      }
      eat(){
        console.log("好好学习");
      }
    }
    let Tony = new Person('SK');
    let Jerry = new Person('sks');
    console.log(SK);
    console.log(sks);

继承

    class Person{
      constructor(name){
        this.name = name;
      }
      eat(){
        console.log("人是铁饭是钢");
      }
    }
    class Student extends Person{
      constructor(name,grade){
        super(name);
        this.grade = grade;
      }
      eat(){
        console.log("学生需要吃点有营养的东西");
      }
    }
    let Tony = new Person('Tony');
    let Jerry = new Student('Jerry','一年级');
    console.log(Tony);
    console.log(Tony.eat());
    console.log(Jerry);
    console.log(Jerry.eat());

五、操作BOM对象

简介

BOM：浏览器对象模型，使我们可以通过JavaScript来操作浏览器。
常见的BOM对象：
①Window：代表的是整个浏览器的窗口，同时window也是网页中的全局对象
②Navigator：代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
③Location：代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面
④History：代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录，由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，而且该操作只在当次访问时有效
⑤Screen：代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息

1. Window对象

window代表浏览器窗口

window.alert(1)
undefined
window.innerHeight
258
window.innerwidth
919
window. outerHeight
994
window. outerwidth
919

2. Navigator

navigator. appName
“Netscape”"
navigator. appversion
“5.0 (windows NT 10.0; wON64) ApplewebKit/537.36 (KHTML，1ike Gecko)chrome/63.0.3239.132 Safari/537.36"”
navigator.userAgent
“Mozi11a/5.0 (windows NT 10.0; wOw64) App1ewebKit/537.36 (KHTML，1ikeGecko) chrome/63.0.3239.132 safari/537.36”
navigator.platform
“win32”
大多数时候，我们不会使用navigator对象，因为会被人为修改!不建议使用这额属性来判断

3.screen

代表尺寸

screen . wi dth
1920 px
screen.height
1080 px

4.location

location 代表当前页面的URL信息

host : "“www.baidu . com”
href : “https : / /www.baidu . com /”
protoco1 : "https : "
reload : f reload(//刷新网页

5.document

document代表当前的页面,HTML DOM文档树
document.title
“百度一下，你就知道”
document.title='sksk"“sksk”

获取具体的文档树节点

<d1 id="app">
<dt>Java</dt>
<dd>3avaSE</dd>
<dd>JavaEE</dd>
</d1>
<script>
var dl = document.getElementById( 'app ' );
</script>=

获取cookie

document.cookie
"__guid=111872281.88375976493059340.1578110638877.133; monitor_count=1"

6. history//不建议使用

代表浏览器的历史记录

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

7.操作DOM节点

当网页被加载时，浏览器会创建页面的文档对象模型DOM（Document Object Model）。
浏览器网页就是一个DOM树形模型。

7.1获取DOM节点

通过元素id查找元素

document.getElementById(id)

通过元素标签查找

document.getElementsByTagName(name)

通过类名查找

document.getElementsByClassName(name)

通过父节点下的所有子节点查找

父节点.子节点

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

</head>
<body>
   <div id="father">
     <h3>三级标题</h3>
     <div id="div1">这是一个块</div>
     <p class="p1">这是一个段落</p>
   </div>

   <script>
     'use strict';
     let tagName = document.getElementsByTagName('h3');
     let byId = document.getElementById('div1');
     let className = document.getElementsByClassName('p1');
     let father = document.getElementById('father');
     let childrens = father.children;
     console.log(tagName);
     console.log(byId);
     console.log(className);
     console.log(childrens)
   </script>
</body>
</html>

7.2更新DOM节点

获取 HTML 元素的 inner Text

元素节点.innerText

获取 HTML 元素的 inner HTML

元素节点.innerHTML

获取 HTML 元素的属性值

元素节点.属性

获取 HTML 元素的行内样式值

元素节点.style.样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h3 id="content">这是一个三级标题</h3>
<script>
    let byId = document.getElementById('content');
    byId.innerText = '你好，hello';
    byId.innerHTML = '<em>你好，hello</em>';
    byId.style.padding = '20px;'
    byId.style.color = 'red';
</script>
</body>
</html>

7.3删除DOM节点

删除时要先获取父节点再通过父节点删除自己
注意：删除多个节点时，字节点在发生变化！！

方法：

返回元素的父元素
元素节点.parentElement
删除 HTML 元素
元素节点.removeChild(element)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="father">
      <h1>标题一</h1>
      <p id="p1">p1</p>
      <p class="p2">p2</p>
    </div>
<script>
    'use strict';
    let child = document.getElementById('p1');
    let father = child.parentElement;
    father.removeChild(child);
</script>
</body>
</html>

7.4获取DOM节点

创建 HTML 元素节点

document.createElement(element);

改变HTML元素的属性值

元素节点.setAttribute(attribute, value)

添加 HTML 元素

元素节点.appendChild(element);

在指定的子节点前面插入新的子节点

元素节点.insertBefore(newNode, targetNode);

移动已经存在的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p id="p1">p1</p>
    <div id="list">
        <p id="se">SK</p>
        <p id="ee">SKK</p>
        <p id="me">SKS</p>
    </div>
<script>
    let p1 = document.getElementById('p1');
    let list = document.getElementById('list');
    list.appendChild(p1);
</script>
</body>
</html>

给主体加背景色

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<script>
    let newStyle = document.createElement('style');
    newStyle.setAttribute('type','text/css');
    newStyle.innerHTML = 'body{background-color:red}';
    let head = document.getElementsByTagName('head')[0];
    head.appendChild(newStyle);
</script>
</body>

insertBefore(newNode, targetNode)使用

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
    <p id="js">JavaScript</p>
</div>
<script>
    let list = document.getElementById('list');
    let ee = document.getElementById('ee');
    let js = document.getElementById('js');
    list.insertBefore(js,ee);
</script>
</body>
</html>

六、操作表单

1.获取要提交的信息

获取表单信息

表单元素.value;

设置表单信息的值

表单元素.value = ‘更改值’;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="#">
    <span>用户名 : </span><input type="text" id="username">
</form>
<script>
    let userName = document.getElementById('username');
</script>
</body>
</html>

2.改变多选框的选定态

选定多选框

表单元素.checked = true;

取消选定多选框

表单元素.checked = false;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="#">
    <span>用户名 : </span><input type="text" id="username"><br>
    <span>性别 : </span><input type="radio" name="sex" id="boy">男
    <input type="radio" name="sex" id="girl" checked>女
</form>
<script>
    let userName = document.getElementById('username');
    let sex_boy = document.getElementById('boy');
    let sex_girl = document.getElementById('girl');
</script>
</body>
</html>

3.MD5加密

引入MD5加密工具类

<script src = "https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"> </script>

表达绑定提交事件
οnsubmit= 绑定一个提交检测的函数，true，false将这个结果返回给表单，使用onsubmit接收

<!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>
<form action="#" method="post" onsubmit="return MD5_check()">
  <p>
    <span>用户名 : </span><input type="text" id="username" name="username">
  </p>
  <p>
    <span>密码 : </span><input type="password" id="password" >
  </p>
  <input type="hidden" id="MD5_psd" name="psd">
  <button type="submit">提交</button>
</form>

<script>
  function MD5_check(){
    let username = document.getElementById('username');
    let psd = document.getElementById('psd');
    let MD5_psd = document.getElementById('MD5_psd');
    MD5_psd.value = mad5(psd.value);
    return true;
  }
</script>
</body>
</html>

七、JQuery

1.JQuery的使用

1.1引入JQuery

js文件引入
https://jquery.com/download下载js文件
CDN外部连接引入

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

1.2JQuery入口函数

DOM结构渲染完成后可以执行内部代码，不用等到所有外部资源加载完成，JQuery帮我们完成了封装

格式

$(function(){…});//推荐

格式

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="../lib/jquery-3.6.0.js"></script>
  <style>
    div{
      width:200px;
      height:200px;
      background:red;
    }
  </style>
</head>
<body>
<div></div>
<script>
  //1、格式一（推荐）：$(function(){.......});
  $(function(){
    $('div').hide();
  });
  //2、格式二：$(document).ready(function(){......});
  // $(document).ready(function(){
  //   $('div').hide();
  // });
</script>
</body>
</html>

1.3JQuery顶级对象$

$是JQuery的别称，同时也是顶级对象

1.4JQuery对象和DOM对象

1.区别：

用原生JS获取来的对象就是DOM对象；jQuery方法获取的就是jQuery对象
jQuery对象只能使用jQuery方法，DOM对象只能使用原生的JS属性和方法

本质

jQuery对象本质是：利用$ 对DOM对象包装后产生的对象（伪数组形式存储）

转换

DOM对象转换为jQuery对象：$(DOM对象)
jQuery对象转换为DOM对象(两种方式)：
$('jQuery对象')[index] , index是索引号
$('jQuery对象').get(index)] , index是索引号

  var myDiv = document.getElementsByTagName('div');
  //DOM对象转换为jQuery对象
  $(myDiv);

  //jQuery对象转换为DOM对象(两种方式)
  //方式一：
  $('div')[0];
  //方式二：
  $('div').get(0);
</script>

2.JQuery选择器

$('选择器'):里面选择器直接写CSS选择器即可，但是要加引号，单双引号都可。

2.1基本选择器

id选择器 $(‘#id’) 获取指定ID的元素
全选选择器 $(‘*’) 匹配所有元素
类选择器 $(‘.class’) 获取同一类class的元素
标签选择器 $(‘div’) 获取同一类标签的所有元素
并集选择器 $(‘div,p,li’) 获取多个元素
交集选择器 $(‘li.current’) 交集元素

2.2 层次选择器

子代选择器 $(‘ul > li’) 使用>号，获取亲儿子层级的元素；注意：并不会获取孙子层级的元素
后代选择器 $(‘ul li’) 使用空格，代表后代选择器，获取ul下的所有li元素与，包括孙子等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/jquery-3.6.0.js"></script>
</head>
<body>
    <div>我是div</div>
    <div class="box">我是box div</div>
    <p id="p">我是p</p>
    <ol>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
    </ol>
    <ul>
        <li>我是ul 的li</li>
        <li>
            <li>我是li的li</li>
            <li>我是li</li>
            <li>我是li</li>
        </li>
        <li>我是ul 的li</li>
        <li>我是ul 的li</li>
    </ul>

    <script>
        $(function(){
           console.log($('.box'));
           console.log($('#p'));
           console.log($('ol > li'));
           console.log($('ul li'));
        });
    </script>
</body>
</html>

2.3隐式迭代

便利内部DOM元素（伪数组形式存储）的过程叫做隐式迭代。
理解：给匹配到的所有元素循环遍历，执行相应的方法，而不用再进行循环，简化操作，方便调用
jQuery设置样式：$('div').css('属性','值')

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="../lib/jquery-3.6.0.js"></script>
</head>
<body>
<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<ul>
  <li>相同的操作</li>
  <li>相同的操作</li>
  <li>相同的操作</li>
  <li>相同的操作</li>
</ul>

<script>
  $('div').css('background','red');
  $('li').css('color','blue');
</script>
</body>
</html>

2.4筛选选择器

:first $(‘li:first’) 获取第一个li元素
:last $(‘li:last’) 获取最后一个li元素
:eq(index) $(‘li:eq(2)’) 获取到的li元素中，选择索引号为2的元素，索引号indexcong0开始
:odd $(‘li:odd’) 获取到的li元素中，选择索引号为奇数的元素
:even $(‘li:even’) 获取到的li元素中，选择索引号为偶数的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="../lib/jquery-3.6.0.js"></script>
</head>
<body>
<ul>
  <li>ul的第一个li</li>
  <li>ul的第二个li</li>
  <li>ul的第三个li</li>
  <li>ul的第四个li</li>
  <li>ul的第五个li</li>
  <li>ul的第六个li</li>
</ul>
<ol>
  <li>ol的第一个li</li>
  <li>ol的第二个li</li>
  <li>ol的第三个li</li>
  <li>ol的第四个li</li>
  <li>ol的第五个li</li>
  <li>ol的第六个li</li>
</ol>

<script>
  $(function(){
    $('ul li:first').css('color','red');
    $('ul li:last').css('color','blue');
    $('ul li:eq(2)').css('color','pink');
    $('ol li:odd').css('color','green');
    $('ol li:even').css('color','gray');
  })
</script>
</body>
</html>

2.5筛选方法

parent() $(‘li’).parent(); 查找父级
children(selector) $(^{'} u l^{'}) . c hi l d re n (^{'} l i^{'}) 相当于$ (‘ul>li’)，子类选择器
find(selector) $(^{'} u l^{'}) . f in d (^{'} l i^{'}); 相当于$ (‘ul li’),后代选择器
siblings(selector) $(‘.first’).siblings(‘li’); 查找兄弟节点，不包括自己本身。
nextAll([expr]) $(‘.first’).nextAll() 查找当前元素之后的所有元素
prevAll([expr]) $(‘.last’).prevAll() 查找当前元素之前的所有元素
hasClass(class) $(‘div’).hasClass(‘protected’) 检查当前元素是否包含某个特定的类，如果有，则返回true
eq(index) $(“ l i ”) . e q (2); 相当于$ (“li:eq(2)”),index从0开始

重点：parent() children() find() siblings() eq()
得到当前元素索引号 $(this).index()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="../lib/jquery-3.6.0.js"></script>
</head>
<body>
<div id="grandFather">grandFather
  <div id="father">father
    <div id="son">
      son
    </div>
  </div>
</div>
<ul>
  <li>ul的第一个li</li>
  <li>ul的第二个li</li>
  <li>ul的第三个li</li>
  <li>ul的第四个li</li>
  <li>ul的第五个li</li>
  <li>ul的第六个li</li>
</ul>

<ol>
  <li>ol的第一个li</li>
  <li>ol的第二个li</li>
  <li class="item">ul的第三个li</li>
  <li>ol的第四个li</li>
  <li>ol的第五个li</li>
  <li>ol的第六个li</li>
</ol>

<script>
  $(function(){
    console.log($('#son').parent());
    $('ul').children('li').css('color','red');
    $('body').find('div').css('background','green');
    $('ol .item').siblings('li').css('color','blue');
    $('ol li').eq(2).css('color','pink');
  })
</script>
</body>
</html>

3.JQuery样式操作

3.1操作CSS方法

参数只写属性名，则是返回属性值
参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可不加单位引号
参数可以使对象形式，属性名和属性值用冒号隔开，属性不用加引号，复合属性名用驼峰命名法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="../lib/jquery-3.6.0.js"></script>
  <style>
    div{
      width:200px;
      height:200px;
      background:red;
    }
  </style>
</head>
<body>
<div></div>

<script>
  $(function(){
   console.log($('div').css('width'));
   $('div').css('width','300px');
   $('div').css({
     height:300,
     backgroundColor:'blue'
   });
  })
</script>
</body>
</html>

3.2类样式设置方法

添加类

$(this).addClass('current');

删除类

$(this).removeClass('current');

切换类

$(this).toggleClass('current');

类操作和className的区别

原生JS会覆盖元素原先里面的类名；
jQuery里面类操作只是对指定类进行操作，不影响原先的类名

4.JQuery效果

4.1显示隐藏效果

语法：show([speed,[easing],[fn]]);
显示参数:
①参数都可以省略，无动画直接显示；
②speed：三种预定速度之一的字符串（“slow”,“normal”,“fast”）或表示动画时长的毫秒数值（如1000）
③easing:(Optional)用来指定切换效果，默认"swing",可用参数"linear";
④fn：回调函数，在动画完成时执行的函数，每个元素执行一次。
隐藏hide()和切换toggle()同show()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="../lib/jquery-3.6.0.js"></script>
  <style>
    div{
      width:200px;
      height:400px;
      background:red;
    }
  </style>
</head>
<body>
  <button>隐藏</button>
  <button>显示</button>
  <button>切换</button>
  <div></div>

  <script>
    $(function(){
      $('button').eq(0).click(function(){
        $("div").hide(1000,'linear',function (){
          alert(1);
        })
      })
      $('button').eq(1).click(function(){
        $("div").show('slow','swing',function (){
          alert(1);
        })
      })
      $('button').eq(2).click(function(){
        $("div").toggle('normal','swing')
      })
    })
  </script>
</body>
</html>

4.2 滑动效果

语法：slideDown([speed,[easing],[fn]]);
显示参数:
①参数都可以省略，无动画直接显示；
②speed：三种预定速度之一的字符串（“slow”,“normal”,“fast”）或表示动画时长的毫秒数值（如1000）
③easing:(Optional)用来指定切换效果，默认"swing",可用参数"linear";
④fn：回调函数，在动画完成时执行的函数，每个元素执行一次。
滑出slideUp()和切换滑入滑出slideToggle()同滑入slideDown()

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../lib/jquery-3.6.0.js"></script>
  <style>
    div{
      width:200px;
      height:400px;
      background:red;
    }
  </style>
</head>
<body>
<button>滑入</button>
<button>滑出</button>
<button>切换滑入滑出</button>
<div></div>

<script>
  $(function() {
    $('button').eq(0).click(function () {
        $('div').slideDown(2000,'swing',function(){
          alert(1);
        });
    })
    $('button').eq(1).click(function () {
        $('div').slideUp('normal','linear')
    })
    $('button').eq(2).click(function () {
        $('div').slideToggle('fast','linear')
    })
  });
</script>
</body>
</html>

4.3事件切换

语法格式：hover(function(){}, function(){})
第一个函数鼠标经过触发，相当于 mouseenter;第二个离开触发，mouseleave
如果只写一个函数，那么鼠标经过离开都会触发这个函数，和切换函数搭配使用

4.4 动画队列及其停止方法

动画或效果队列
动画或者效果一旦触发就会执行，如果多次触发，就会造成多个动画或者效果排队执行
停止排队：stop()
写到动画或者效果的前面，相当于停止上一次的动画。

4.5 淡入淡出动画

淡入动画
fadeIn([speed],[easing],[fn])
淡出动画
fadeOut([speed],[easing],[fn])
淡入淡出切换
fadeToggle([speed,[easing],[fn]])
透明度改变
fadeTo([[speed],opacity,[easing],[fn]])
参数说明：

①speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
②easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
③fn:在动画完成时执行的函数，每个元素执行一次。
④opacity:一个0至1之间表示透明度的数字。

4.6自定义动画

语法：

animate(params,[speed],[easing],[fn])

参数说明

①params:想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采用驼峰命名法backgroundColor。其余参数都可以省略。
②speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
③easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 “swing”.
④fn:在动画完成时执行的函数，每个元素执行一次。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../lib/jquery-3.6.0.js"></script>
  <style>
    div{
      position:absolute;
      width:200px;
      height:300px;
      background:red;
    }
  </style>
</head>
<body>
<button>自定义动画</button>
<div></div>

<script>
  $(function() {
    $('button').click(function () {
      $('div').animate({
        left:300,
        top:300,
        opacity:0.5
      },2000)
    });
  });
</script>
</body>
</html>

5.JQuery属性

5.1获取/设置元素固定值

元素固有属性就是元素本身自带的属性，比如< a >元素里面的href，比如< input > 元素里面的type

获取属性

prop('属性')

设置属性

prop('属性','属性值')

5.2获取/设置元素自定义属性值

获取属性

attr('属性')

设置属性

attr('属性','属性值')

5.3数据缓存

data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据都将被移除

符加数据

data('name', 'value');给选定的元素符加数据

获取数据

data('name');获取选定元素的数据

HTML5获取到的data-index是数字型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/jquery-3.6.0.js"></script>
</head>
<body>
<a href="http://www.baidu.com" title="百度">百度一下</a>
<div index="1" data-index="10"></div>
<span></span>

<script>
    $(function (){
        //元素固有属性
        console.log($('a').prop('href'));
        $('a').prop('title','百度一下你就知道');
        //元素自定义属性
        console.log($('div').attr('index'));
        $('div').attr('index',4);
        console.log($('div').attr('index'));
        //数据缓存data()
        $('span').data('username','tony');
        console.log($('span').data('username'));
        console.log($('div').data('index'));
    })
</script>
</body>
</html>

6.JQuery内容文本

6.1普通元素内容 html() //相当于原生 innerHtml

获取元素的内容

html()

设置元素的内容

html('内容')

6.2 普通元素文本内容 text() //相当于原生innerText

获取文本内容
.text()
设置文本内容
text(‘内容’)

6.3获取表单值 .val()

val方法用于设置和获取表单元素的值，例如input、textarea的值

获取值

val()

设置值

val('内容‘)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="../lib/jquery-3.6.0.js"></script>
</head>
<body>
<div>
  <span>span内容</span>
</div>
<input type="text" value="请输入内容">

<script>
  //1、获取设置元素内容
  console.log($('div').html());
  $('div').html('123');
  //2、获取设置元素文本内容
  console.log($('div').text());
  // $('div').text('123456')
  //3、获取设置表单值
  console.log($('input').val());
  $('input').val('123');
</script>
</body>
</html>

7.JQuery元素操作

7.1遍历元素

语法1

$(selector).each(function(index,element){});

注：①each()方法遍历匹配的每一个元素。主要用DOM处理
②里面的回调函数有两个参数：index是每个元素的索引号。element是每个DOM元素对象，不是jQuery对象
③要想使用jQuery方法，需要给这个dom元素转换为jQuery对象$(element)

语法2

$.each(object, function(index, element){})

注：①$.each()方法可用于遍历任意对象。主要用于数据处理，比如数组，对象
②index是每个元素的索引号；element遍历内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="../lib/jquery-3.6.0.js"></script>
</head>
<body>
  <div>1</div>
  <div>2</div>
  <div>3</div>

<script>
  $(function (){
    var colors = ['red','green','blue'];
    $('div').each(function(index, element){
      console.log(index);
      $(element).css('color',colors[index]);
      console.log(element);
    });
  })
</script>
</body>
</html>

7.2创建元素

语法：$('<li></li>');

7.3添加元素

内部添加

将内容放入匹配元素最后面：

element.append('内容')

将内容放入匹配元素最前面：

element.prepend('内容')

外部添加

将内容放入目标元素后面

element.after('内容')

将内容放入目标元素前面

element.before('内容')

7.4删除元素

删除匹配的元素（本身）

element.remove()

删除匹配的元素集合中的所有的子节点

element.empty()

清空匹配的元素内容

element.html('')

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="../lib/jquery-3.6.0.js"></script>
</head>
<body>
<ul>
  <li id="former_li">我是原来的li</li>
</ul>
<div id="former_div">我是原来的div1</div>

<script>
  $(function (){
    //1、创建元素
    var li = $('<li>我是新来的li</li>')
    var div = $('<div>我是新创建的div</div>')

    //2、添加元素
    //内部添加
    $('ul').prepend(li);

    //外部添加
    $('#former_div').before(div);

    //3、删除元素
    $('#former_li').remove();
    // $('#former_div').empty();
    // $('#former_div').html('');
  })
</script>
</body>
</html>