jQuery总结

2022-06-27 本文已影响0人 paterL

jQuery

把我们经常进行的操作进行了封装

jquery的下载

jquery的基本使用

jQuery的引入

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入jquery文件 -->
    <script src="开发jquery.js"></script>
</head>

<body>

</body>

</html>

jQuery的入口函数

等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完成了封装。

相当于原生js中的DOMContentLoaded

不同于原生js中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码。

<script>
        // 等页面加载完再执行
        // 1.传统写法
        $(document).ready(function() {
                // 需要执行的代码
                $('div').hide();
            })
            // 2.现在常用的
        $(function() {
            // 需要执行的代码
            $('div').hide();
        })
    </script>

jQuery的顶级对象$

1. $是jquery的别称，在代码中可以使用jQuery代替$ ，但一般为了方便，通常都直接使用$

2. $是jQuery的顶级对象，相当于原生JavaScript中的window，把元素利用$ 包装成jQuery对象，就可以掉用jQuery的方法

jQuery对象和DOM对象

DOM对象：用原生js获取过来的对象就是DOM对象

var DOMdiv = document.querySelector('div');

jQuery对象：用jQuery获取过来的对象就是jQuery对象。本质：通过$把DOM元素进行了包装(伪数组形式存储)

$('div');

jQuery对象只能使用jQuery方法，DOM对象则使用原生的js属性和方法

jQuery对象与DOM对象之间的相互转换

<img src="房子.png" alt="">
    <script>
        // DOM对象
        var myVideo = document.querySelector('img');
        // jQuery对象
        $('img');
        // DOM对象转为jQuery对象
        $(myVideo);
        // jQuery对象转换为DOM对象
        $('img')[0];
        $('img').get(0);
    </script>

jQuery常用API

jQuery选择器

jQuery封装后，使获取元素统一标准，格式为：

$("选择器") //里面选择器直接写css选择器即可，但是要加引号。

jQuery对象不能使用style，所以要用css方法修改style样式

<div class="111">我i很帅</div>
    <div class="111">我i很帅</div>
    <div class="111">我i很帅</div>
    <div class="111">我i很帅</div>
    <script>
        $(function() {
            $(".111").css("background", "pink");
        })
    </script>

隐式迭代

遍历内部DOM元素（伪数组形式存储）的过程就叫做隐式迭代。

简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。

重点记住：parent() children() find() siblings() eq()

jQuery的排他思想

<button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <script>
        $(function() {
            // 隐式迭代 给所有按钮绑定点击事件
            $("button").click(function() {
                // 当前元素变化背景颜色
                $(this).css("background", "pink");
                // 其余兄弟去掉背景颜色 隐式迭代
                $(this).siblings().css("background", "");
            })
        })
    </script>

jQuery样式操作

1.使用css方法来修改简单元素样式

如果只写属性名，则返回属性的值

$(this).css("background", "pink");// 修改属性值，如果值是数字可以不用跟单位和引号

参数可以是对象形式，方便设置多组样式，属性名和属性值用冒号隔开，属性可以不用加引号

如果是复合属性则必须采取驼峰命名法，如果值不是数字则需要加引号

2.操作类来修改样式

添加类:

$("div").addClass("类名");

删除类：

$(this).removeClass("类名")

切换类：

$(this).toggleClass("类名")

如果有就去掉，如果没有就加上。

类操作与className区别

原生JS中的className会覆盖元素原先里面的类名。

jQuery里面类操作只是对指定类进行操作，不影响原先的类名。

jQuery效果

jQuery给我们封装了很多动画效果，最为常见的如下：

1.显示隐藏效果

show([speed],[easing],[fn])

参数都可以省略，无动画直接显示。

speed：三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒数值（如：1000）。

easing：(Optional)用来指定切换效果，默认是"swing",可用参数"linear"。

fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

hide([speed],[easing],[fn])

参数都可以省略，无动画直接显示。

speed：三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒数值（如：1000）。

easing：(Optional)用来指定切换效果，默认是"swing",可用参数"linear"。

fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

toggle([speed],[easing],[fn])

参数都可以省略，无动画直接显示。

speed：三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒数值（如：1000）。

easing：(Optional)用来指定切换效果，默认是"swing",可用参数"linear"。

fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(1).click(function() {
                $("div").hide()
            })
            $("button").eq(0).click(function() {
                $("div").show(2000)
            })
            $("button").eq(2).click(function() {
                $("div").toggle(2000)
            })
        })
    </script>

2.滑动效果

slideDown([S],[e],[fn])//上滑动
slideUp([S],[e],[fn])//下滑动
slideToggle([S],[e],[fn])//滑动切换

参数都可以省略，无动画直接显示。

speed：三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒数值（如：1000）。

easing：(Optional)用来指定切换效果，默认是"swing",可用参数"linear"。

fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

3.淡入淡出效果

fadeLn([speed],[easing],[fn])//淡入
fadeOut([speed],[easing],[fn])//淡出
fadeToggle([speed],[easing],[fn])//相互切换

参数都可以省略，无动画直接显示。

speed：三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒数值（如：1000）。

easing：(Optional)用来指定切换效果，默认是"swing",可用参数"linear"。

fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

<body>
    <button>淡入</button>
    <button>淡出</button>
    <button>切换</button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(1).click(function() {
                $("div").fadeIn(2000)
            })
            $("button").eq(0).click(function() {
                $("div").fadeOut(2000)
            })
            $("button").eq(2).click(function() {
                $("div").fadeToggle(2000)
            })
        })
    </script>
</body>

fadeTO([speed],opacity,[easing],[fn])

opacity透明度必须写，取值0~1之间

speed：三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒数值（如：1000）。必须写

<body>
    <button>touming</button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(3).click(function() {
                $("div").fadeTo(1000, 0.3)
            })
        })
    </script>
</body>

4.自定义动画

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

params:想要更改的样式属性，以对象形式传递，==必须写==。属性名可以不用带引号，如果是复合属性则需采取驼峰命名法，其余参数都可以省略。

speed：三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒数值（如：1000）。

easing：(Optional)用来指定切换效果，默认是"swing",可用参数"linear"。

fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

动画队列

动画或者效果一旦触发就会执行，如果多次触发，就会造成多个动画或者效果排队执行。

停止排队：

stop()

stop方法用于停止动画或效果

stop()写到动画或者效果的前面，相当于停止或结束上一次的动画

事件源.stop().动画或效果

jQuery属性操作

设置或获取元素固有属性值prop()

获取属性值

prop("属性")

设置属性语法

prop("属性","属性值")

设置或获取元素自定义属性值attr()

获取属性值

attr("属性")

设置属性语法

attr("属性","属性值")

数据缓存date()

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

jQuery内容文本值

普通元素内容(相当于原生的innerHTML)

html()      // 获取元素的内容

html("内容")     // 设置元素的内容

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

<div>
        <span>我是文字</span>
    </div>
    <input type="text" name="" id="" value="请输入内容">
    <script>
        console.log($("div").html());
        console.log($("div").text());
        // 获取表单的值
        console.log($("input").val());
    </script>

jQuery元素操作

遍历元素

jQuery隐式迭代是对同一类元素做了同样的操作，如果想要给同一类元素做不同的操作，就需要遍历

要遍历的元素.each(function(index,domEle){xxx;})

index:是每个元素的索引号

demEle:是每个DOM对象，不是jQuery对象

所以要想使用jquery方法，需要给这个DOM元素转换为jquery对象$(domEle)

    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        var arr = ["red", "green", "blue"]
        $('div').each(function(index, domEle) {
            // 可以自己指定索引号名称，index可以换成任何
            $(domEle).css("color", arr[index]);
        })
    </script>

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

$.each()可以遍历任何对象，主要用于数据处理，比如数组、对象。

里面有两个参数：index是每个元素的索引号，element遍历内容。

object：要遍历的对象

创建元素

语法：

$("<li></li>")   //动态创建了一个li标签

添加元素

内部添加

element.append("内容")

把内容放入匹配元素内部最后面，类似原生appendChild。

element.prepend("内容")

把内容放入匹配元素内部最前面

外部添加

element.after("内容")    //把内容放入目标元素的后面

element.before("内容")    //把内容放入目标元素的前面

删除元素

element.remove()       //删除匹配的元素（本身）

element.empty()         //删除匹配的元素集合中所有的子节点

element.html("")        //清空匹配的元素内容

<ul>
        <li>我是原来的</li>
    </ul>
    <div>我是原先的div</div>
    <script>
        $(function() {
            // 创建元素
            var li = $("<li>我是后来的</li>");
            var div = $("<div>我是后来的div</div>")
                // 添加元素
                // 1.内部添加
                // $("ul").append(li);
            $("ul").prepend(li);
            // 2.外部添加
            // $("div").after(div);
            $("div").before(div);
            // 删除元素
            // $("ul").remove(); 简单理解是自杀
            // $("ul").empty();
            $("ul").html("")
        })
    </script>

jQuery事件

jQuery事件注册

jQuery事件处理

事件处理on()绑定事件（多事件处理）

on()方法在匹配元素上绑定一个或多个事件的处理函数

语法：

element.on(eventts,[selector],fn)

events:一个或多个用空格分隔的事件，如“click”或"keydown"

selector:元素的子元素选择器

fn:回调函数，即绑定在元素身上的侦听事件

事件处理程序不同

 div {
            width: 200px;
            height: 200px;
            background-color: rgb(190, 17, 203);
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        // 事件处理on
        $("div").on({
            mouseenter: function() {
                $(this).css("background", "skyblue")
            },
            click: function() {
                $(this).css("background", "pink")
            },
            mouseleave: function() {
                $(this).css("background", "green")
            }
        })
    </script>

on()可以事件委派操作

事件委派就是把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。

<ul>
        <li>我是子元素</li>
        <li>我是子元素</li>
        <li>我是子元素</li>
        <li>我是子元素</li>
        <li>我是子元素</li>
    </ul>
    <script>
        $("ul").on("click", "li", function() {
            $("li").css("color", "pink");
        })
    </script>

动态创建元素，on()可以给动态生成的元素绑定事件

    <ul>
        <li>我是子元素</li>
        <li>我是子元素</li>
        <li>我是子元素</li>
        <li>我是子元素</li>
        <li>我是子元素</li>
    </ul>
    <ol>

    </ol>
    <script>
        $(function() {
            $("ol").on("click", "li", function() {
                alert("11")
            })
            var li = $("<li>我是li</li>")
            $("ol").append(li)
        })
    </script>

one()绑定事件

事件只触发一次

自动触发事件trigger()

有些事件希望自动触发，比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发

第三种不会触发元素的默认行为，例如：默认事件：input输入框获得焦点光标会一闪一闪

第三种不会触发这种事件

jQuery事件对象

事件被触发就会有事件对象产生

element.on(events,[selector],function(event){})

jQuery拷贝对象

如果想要把某个对象拷贝（合并）给另外一个对象使用，此时可以使用$.extend()方法。

$.extend([deep],target,object1,[objectN])

1.deep：如果设为true为深拷贝，默认为false浅拷贝

2.target：要拷贝的目标对象

3.object：待拷贝到第一个对象的对象

即把object拷贝给target

浅拷贝是把被拷贝的对象==复杂数据类型==中的地址拷贝给目标对象，修改目标对象会影响被拷贝的对象

深拷贝，前面加true，完全克隆（拷贝的对象，而不是地址），修改目标对象不会影响被拷贝对象

<script>
        $(function() {
            var targetobj = {};
            var one = {
                id: 1,
                name: "aanday"
            }
            var obj = {
                    id: 2,
                    age: 23
                }
                // 会覆盖以前原来的数据
            $.extend(obj, one)
            console.log(obj);
            // $.extend(targetobj, one);
            // console.log(targetobj);
            // 会把对象内部的对象也拷贝过来
            var obj1 = {
                id: 2,
                age: 23,
                mag: {
                    name: "anday"
                }
            }
            $.extend(targetobj, obj1);
        })
    </script>

jQuery多库共存

问题概述

jQuery使用$作为标识符，随着jQuery的流行，其他js库也会作为标识符，这样一起使用会引起冲突

客观需求

需要一个解决方案，让jQuery和其他的js库不存在冲突，可以同时存在，这就叫多库共存

jQuery解决方案

1.统一把$符号改为jQuery

2.jQuery变量规定新的名称：

$.noConflict()
var xx = $.noConflict()

jQuery插件

jQuery常用插件网站

jQuery插件库 http://www.jq22.com

jQuery之家http://www.htmleaf.com/

图片懒加载

只显示用户看到的页面的图片

全屏滚动（fullpage.js）

gitHub:https://github.com/alvarotrigo/fullPage.js

中文翻译网站：http://www.dowebok.com/demo/2014/77/

bootstrap JS 插件

bootstrap框架也是依赖于jQuery开发的，因此里面的js插件使用，也必须引入jQuery文件

jQuery尺寸、位置操作

jQuery尺寸

语法	用法
width()/hight()	取得匹配元素宽度和高度值只算width/height
innerWidth()/innerHeigth()	取得匹配元素宽度和高度值包含padding
outerWidth()/outerHeight()	取得匹配元素宽度和高度值包含padding、border
outerWidth(true)/outerHeight(true)	取得匹配元素宽度和高度值包含padding、border、margin

jQuery位置

offset()设置或获取元素的偏移

offset()方法设置或返回被选元素相对于==文档==的偏移坐标，跟父级没有关系

jQuery的常见方法

1.show()展示元素

2.hide()隐藏元素

3.css()修改元素属性

4.$(this).index()得到当前元素索引号

5.hover()事件切换，切换的是鼠标经过和离开这两个事件

事件源.hover(function(){
鼠标经过
},function(){
鼠标离开
});

如果只写一个函数，那么鼠标经过和离开都会触发这个函数

6.:checked选择器 :checked查找被选中的表单元素

7.scroll:页面滚动事件

todolist存储

本地存储里面只能存储字符串的数据格式

可以通过JSON.stringify()把数组对象转换为字符串格式

[图片上传失败...(image-80927d-1656316061113)]

[图片上传失败...(image-10236a-1656316061113)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="开发jquery.js"></script>
    <style>
        li{
            background-color: rgb(11, 179, 231);
            display: flex;
            width: 700px;
            border-bottom: 2px solid rgb(150, 147, 147);
        }
    </style>
</head>
<body>
    <input type="text">
    <ol class="dolist"></ol>
    <ul class="donelist"></ul>
    <script>
        $(function(){
            // 每次打开重新渲染页面
            load();
            $("input").on("keydown",function(event){
                // 按下回车键把数据存到本地
                if(event.keyCode === 13){
                    var todolist = [{age:23,sex:"男"}]
            // 先读取本地存储原来的数据
            var local = getDate();
            // 把local数组进行更新数据,把最新的数据追加给local数组
            local.push({title:$(this).val(),age:20,sex:"女",done:false})
            // 把local存储给本地存储
            saveDate(local)
            $("input").val("")
            // 把本地存储渲染加载到页面
            load();
                }
            })
            // 删除本地
            $("ol").on("click","a",function(){
                // 先获取本地存储
                var data = getDate();
                // 修改数据
                var index = $(this).attr("id");
                data.splice(index, 1);
                // 保存到本地存储
                saveDate(data);
                // 重新渲染页面
                load();
            })
            // 封装一个函数读取本地数据
            function getDate(){
                var date = localStorage.getItem("todolist");
                if(date !==null){
                    // 本地存储里面的数据是字符串格式，我们需要对象格式的
                    // 将字符串格式数据转为对象格式数据
                    return JSON.parse(date);
                }else{
                    return [];
                }
            }
            // 保存本地存储数据
            function saveDate(date){
                localStorage.setItem("todolist",JSON.stringify(date));
            }
            // 渲染加载页面函数
            function load(){
                // 先读取本地存储的数据
                var shuju = getDate();
                // 遍历之前要先清空ol里面的内容
                $("ol").empty();
                // 遍历这个数据
                $.each(shuju,function(i,n){
                    $("ol").prepend("<li> <input type='checkbox'> <p>"+n.title+"</p> <a href='javascript:;' id= "+i+">删除</a> </li>");
                })
            }
        })
    </script>
</body>
</html>

JSON

JSON: JavaScript Object Notation(JavaScript 对象表示法)

JSON 是存储和交换文本信息的语法

什么是JSON

JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
JSON 是轻量级的文本数据交换格式
JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。
JSON 具有自我描述性，更易理解

JSON转换为JavaScript对象

JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。

由于这种相似性，无需解析器，JavaScript 程序能够使用内建的 eval() 函数，用 JSON 数据来生成原生的 JavaScript 对象。

JSON语法

JSON 语法是 JavaScript 对象表示语法的子集。

数据在名称/值对中
数据由逗号分隔
大括号 {} 保存对象
中括号 [] 保存数组，数组可以包含多个对象

JSON 文件的文件类型是 .json

==JSON与XML最大的不同是：XML需要使用XML解析器来解析，JSON可以使用标准的JavaScript函数来解析==

JSON对象

JSON 对象中可以包含另外一个 JSON 对象

删除对象属性

使用delete关键字来删除JSON对象的属性

delete myObj.sites.site1;

delete myObj.sites["site1"];

JSON数组

JSON 数组在中括号中书写。

可以使用索引值来访问数组

x = myObj.sites[0];

JSON 对象中数组可以包含另外一个数组，或者另外一个 JSON 对象

myObj = {
    "name":"网站",
    "num":3,
    "sites": [
        { "name":"Google", "info":[ "Android", "Google 搜索", "Google 翻译" ] },
        { "name":"Runoob", "info":[ "菜鸟教程", "菜鸟工具", "菜鸟微信" ] },
        { "name":"Taobao", "info":[ "淘宝", "网购" ] }
    ]
}

使用delete关键字删除数组元素

delete myObj.sites[1];

JSON.parse()

可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象

JSON.parse(text[, reviver])

text:必需，一个有效的 JSON 字符串。
reviver: 可选，一个转换结果的函数，将为对象的每个成员调用此函数。

JSON.stringify()

使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串

JSON.stringify(value[, replacer[, space]])

value:

必需，要转换的 JavaScript 值（通常为对象或数组）。
replacer:

可选。用于转换结果的函数或数组。

如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。

如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时，将忽略 replacer 数组。
space:

可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。

jQuery总结

jQuery

jquery的下载

jquery的基本使用

jQuery的引入

jQuery的入口函数

jQuery的顶级对象$

jQuery对象和DOM对象

jQuery对象与DOM对象之间的相互转换

jQuery常用API

jQuery选择器

隐式迭代

jQuery的排他思想

jQuery样式操作

1.使用css方法来修改简单元素样式

2.操作类来修改样式

类操作与className区别

jQuery效果

1.显示隐藏效果

2.滑动效果

3.淡入淡出效果

4.自定义动画

动画队列

jQuery属性操作

设置或获取元素固有属性值prop()

设置或获取元素自定义属性值attr()

数据缓存date()

jQuery内容文本值

普通元素内容(相当于原生的innerHTML)

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

jQuery元素操作

遍历元素

创建元素

添加元素

内部添加

外部添加

删除元素

jQuery事件

jQuery事件注册

jQuery事件处理

事件处理on()绑定事件（多事件处理）

on()可以事件委派操作

one()绑定事件

自动触发事件trigger()

jQuery事件对象

jQuery拷贝对象

jQuery多库共存

jQuery插件

图片懒加载

全屏滚动（fullpage.js）

bootstrap JS 插件

jQuery尺寸、位置操作

jQuery尺寸

jQuery位置

offset()设置或获取元素的偏移

jQuery的常见方法

todolist存储

JSON

什么是JSON

JSON转换为JavaScript对象

JSON语法

JSON对象

删除对象属性

JSON数组

JSON.parse()

JSON.stringify()

猜你喜欢

热点阅读