jQuery总结（1）

最新推荐文章于 2024-07-22 15:13:59 发布
最新推荐文章于 2024-07-22 15:13:59 发布
阅读量246 收藏
点赞数
分类专栏： 前端 文章标签： jquery javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/F14867/article/details/125891568
版权

这里写自定义目录标题

jQuery

jQuery：JavaScript库

是JS的一个仓库，对DOM做一个封装，用来储存js封装好的特定的集合（方法和函数）。从封装一大推函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate,hide,show,获取元素等。

下载安装

官网：https://jquery.com/
在这里插入图片描述
点击下载，选择压缩的版本使用
在这里插入图片描述
点击压缩版本进入：ctrl+A 全选，ctrl+C复制，在写js软件中进行新建一个js文件，在html页面对其进行外部引入即可
在这里插入图片描述
其余版本下载: https://code.jquery.com/

入口函数

// 第一种方法 
$(function(){
    ...   // 此处是页面DOM加载完成的入口 
})

// 第二种方法
$(document).ready(function(){
    ... //此处是页面DOM加载完成的入口
})

jQuery的顶级对象$

  • $ 是 jQuery 的别称，在代码中可以使用 jQuery 代替$
  • $ 是 jQuery 的别称，在代码中可以使用 jQuery 代替$
    (当$与别处重复时可以选择其他的方法，在后处进行讲解)
<script>
        // 1. $ 是jQuery的别称（另外的名字）
        // $(function() {
        //     alert(11)
        // });
        jQuery(function() {
            // alert(11)
            // $('div').hide();
            jQuery('div').hide();
        });
    </script>

jQuery对象和DOM对象

  • DOM对象：用原生js获取过来的对象
  • jQuery对象: 用jQuery方式获取过来的对象是jQuery对象。
    本质：通过$把DOM元素进行了包装(伪数组形式存储)
  • jQuery对象只能使用jQuery方法，DOM对象则使用原生的JavaScript的属性和方法
<script>
        // 1. DOM 对象:  用原生js获取过来的对象就是DOM对象
        var myDiv = document.querySelector('div');   // myDiv 是DOM对象
        var mySpan = document.querySelector('span'); // mySpan 是DOM对象
        console.dir(myDiv);
        // 2. jQuery对象:用jquery方式获取过来的对象是jQuery对象。 
		//    本质:通过$把DOM元素进行了包装
        $('div'); 		// $('div')是一个jQuery 对象
        $('span'); 		// $('span')是一个jQuery 对象
        console.dir($('div'));
        // 3. jQuery 对象只能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 属性和方法
        // myDiv.style.display = 'none';
        // myDiv.hide(); myDiv是一个dom对象不能使用 jquery里面的hide方法
        // $('div').style.display = 'none'; 这个$('div')是一个jQuery对象不能使用原生js 的属性和方法
    </script>

对象转化

原生js比jQuery更大，原生的一些属性方法jQuery没有给我们封装，要想使用这些属性和方法需要把jQuery对象转换未DOM对象才能使用

  • DOM对象转换未jQuery对象： $(DOM对象) $(‘div’)
  • jQuery对象转换未DOM对象（两种方式）
    $(‘div’)[index] index是索引号 $(‘div’).get(index) index是索引号
<body>
    <video src="mov.mp4" muted></video>
    <script>
        // 1. DOM对象转换为 jQuery对象
        // (1) 我们直接获取视频，得到就是jQuery对象
        // $('video');
        // (2) 我们已经使用原生js 获取过来就是DOM对象
        var myvideo = document.querySelector('video');
        // $(myvideo).play();  jquery里面没有play 这个方法
        // 2.  jQuery对象转换为DOM对象
        // myvideo.play();
        $('video')[0].play()
        $('video').get(0).play()
    </script>
</body>

常用API

基础选择器

语法：$(“选择器”) 里面选择器直接写CSS选择器即可，但是要加引号
在这里插入图片描述

层级选择器

在这里插入图片描述

  <div>我是div</div>
    <div class="nav">我是nav div</div>
    <p>我是p</p>
    <ol>
        <li>我是ol 的</li>
        <li>我是ol 的</li>
    </ol>
    <ul>
        <li>我是ul 的</li>
        <li>我是ul 的</li>
    </ul>
    <script>
        $(function() {
            console.log($(".nav"));
            console.log($("ul li"));
        })
    </script>

样式操作

jQuery可以使用css方法来修改简单元素样式，也可以操作类，修改多个样式。

  • 参数只写属性名，则是返回属性名
$(this).css("color");
  • 参数是属性名，属性值，逗号分隔，是一组设置样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css("color","red");
  • 参数可以是对象形式，方便设置多组样式，属性名和属性值用冒号隔开，属性可以不用加引号
$(this).css({"color":"white","font-size":"20px"});

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

设置类样式方法

作用等同于以前的classList,可以操作类样式，注意操作类里面的参数不要加点。

  • 添加类
$("div").addClass("current");
  • 移除类
$("div").removeClass("current");
  • 切换类
$("div").toggleClass("current");

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

<body>
    <div class="one two"></div>
    <script>
        // var one = document.querySelector(".one");
        // one.className = "two";
        // $(".one").addClass("two");  这个addClass相当于追加类名 不影响以前的类名
        $(".one").removeClass("two");
    </script>
</body>

jQuery隐式迭代

遍历内部元素DOM元素（伪数组形式存储）的过程就叫做隐式迭代
简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便调用
在这里插入图片描述

 <div>惊喜不，意外不</div>
    <div>惊喜不，意外不</div>
    <div>惊喜不，意外不</div>
    <div>惊喜不，意外不</div>
    <ul>
        <li>相同的操作</li>
        <li>相同的操作</li>
        <li>相同的操作</li>
    </ul>
    <script>
        // 1. 获取四个div元素 
        console.log($("div"));
        // 2. 给四个div设置背景颜色为粉色 jquery对象不能使用style
        $("div").css("background", "pink");
        // 3. 隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法
        $("ul li").css("color", "red");
    </script>

jQuery筛选选择器

// 选取 ul 里面的 第一个 li
$("ul li:first").css("color","red");

在这里插入图片描述

<body>
    <ul>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
    </ul>
	<!-- 有序列表 -->
    <ol>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
    </ol>
    <script>
        $(function() {
    		// 获取第一个li元素
            $("ul li:first").css("color", "red");
    		// 获取索引号为2的li
            $("ul li:eq(2)").css("color", "blue");
    		// 获取索引号为奇数的li
            $("ol li:odd").css("color", "skyblue");
    		// 获取索引号为偶数的li
            $("ol li:even").css("color", "pink");
        })
    </script>
</body>

jQuery排他思想

想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。

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

jQuery效果

在这里插入图片描述

显示与隐藏效果

显示效果

  • 参数都可以省略， 无动画直接显示。
  • speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
  • easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
  • fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
// 显示语法规范
show([speed,[easing],[fn]])       //中括号表示参数都可以省略
$("div").show();

隐藏效果

// 隐藏语法规范
hide([speed,[easing],[fn]])
$("div").hide();

切换效果

// 切换语法规范
toggle([speed,[easing],[fn]])
$("div").toggle();

jQuery滑动效果与事件切换

下滑动

// 下滑动
slideDown([speed,[easing],[fn]]) 
$("div").slideDown();

上滑动

// 滑动切换效果
slideToggle([speed,[easing],[fn]]) 
$("div").slideToggle();

<button>下拉滑动</button>
    <button>上拉滑动</button>
    <button>切换滑动</button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                // 下滑动 slideDown()
                $("div").slideDown();
            })
            $("button").eq(1).click(function() {
                // 上滑动 slideUp()
                $("div").slideUp(500);


            })
            $("button").eq(2).click(function() {
                // 滑动切换 slideToggle()

                $("div").slideToggle(500);

            });

        });
    </script>

事件切换

hover([over,]out)
  • over: 鼠标移到元素上要触发的函数(相当于mouseenter)
  • out: 鼠标移出元素要触发的函数(相当于mouseleave)
  • 如果只写一个函数，则鼠标经过和离开都会触发它

jQuery动画队列及其停止排队方法

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

stop()
  • stop()方法用于停止动画或者效果
  • 注意: stop() 写到动画或者效果的前面，相当于停止结束上一次的动画
$(".nav>li").hover(function(){
    // stop 方法必须写到动画的前面
    $(this).children("ul").stop().slideToggle();
})

jQuery淡入淡出以及突出效果

淡入淡出切换

// 淡入
fadeIn([speed,[easing],[fn]])
$("div").fadeIn();

// 淡出
fadeOut([speed,[easing],[fn]])
$("div").fadeOut;

// 淡入淡出切换
fadeToggle([speed,[easing],[fn]])

渐进方式调整到指定的不透明度

// 修改透明度   这个速度和透明度必须写
fadeTo(speed,opacity,[easing],[fn])
  • opacity ：透明度必须写，取值 0~1 之间
  • speed：三种预定速度之一的字符串(“slow”,“normal”, or“fast”)或表示动画时长的毫秒数值(如1000)。必须写
$("div").fadeTo(1000,0.5)

jQuery自定义动画animate方法

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

jQuery属性操作

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

所谓元素固有属性就是元素本身自带的属性，比如 元素里面的 href ，比如 元素里面的 type。
语法：prop(“属性”)

prop("属性")
$("a").prop("href");

设置元素固有属性值

语法：prop(“属性”,“属性值”)

prop("属性","属性值")
$("a").prop("title","我们都挺好~");

获取元素自定义属性值

用户自己给元素添加的属性，我们称为自定义属性。 比如给 div 添加 index =“1”。
语法：attr(“属性”)

attr("属性")   // 类似原生getAttribute()
$("div").attr("index");

数据缓存data()

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

附加数据语法

语法：data(“name”,“value”) 向被选元素附加数据

$("span").data("uname","andy");

获取数据语法

如果你想加载一篇你写过的.md文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，
继续你的创作。
语法：date(“name”) 向被选元素获取数据

$("span").data("uname");
// 这个方法获取data-index h5自定义属性，不用写 data- 返回的是数字型(2)
$("div").data("index");

jQuery内容文本值

主要针对元素的内容还有表单的值操作

普通元素内容html()

相当于原生innerHTML
语法：

  • 获取元素的内容：html()
  • 设置元素的内容：html(“内容”)
$("div").html();
$("div").html("123");
// 获取过来的带的标签 <span>123</span>

普通元素文本内容text()

相当于原生innerText
语法：

  • 获取元素的文本内容：text()
  • 设置元素的文本内容：text(“文本内容”)
$("div").text();
$("div").text("123");
// 123  
// 获取过来的不带标签 123

获取设置表单值 val()

语法：

  • 获取表单的的值：val()
  • 设置表单的值：val(“内容”)
$("input").val();
$("input").val("请输入内容~~~");

jQuery元素操作

遍历元素

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

语法一

$("div").each(function(index,domEle){xxx;})
  • each()方法遍历匹配的每一个元素。主要用DOM处理。each每一个
  • 里面的回调函数有2个参数: index是每个元素的索引号,demEle是每个DOM元素，不是jQuery对象
  • 所以想要使用jQuery方法，需要给这个dom元素转换为jquery对象 $(domEle)

语法二

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

  • $.each() 方法可用于遍历任何对象，主要用于数据处理,比如数组,对象

  • 里面的函数有2个参数: index 是每个元素的索引号,element遍历内容

创建元素

$("<li></li>");
// 动态创建一个li标签
var li = $("<li>我是后来创建的li</li>");
var div =$("<div>我是后来的div</div>")

添加元素

内部添加

  • 把内容放入匹配元素内部最后面：element.append(“内容”)
  • 把内容放入匹配元素内部最前面：element.prepend(“内容”)

外部添加

语法：

  • 外部添加把内容放到目标元素后面：element.after(“内容”)
  • 外部添加把内容放到目标元素前面：element.before(“内容”)
    内部添加元素，生成之后，它们是父子关系
    外部添加元素，生成之后，它们是兄弟关系
    内部添加元素，生成之后，它们是父子关系
    外部添加元素，生成之后，它们是兄弟关系

添加元素

语法：

  • 删除匹配的元素(本身)：element.remove()
  • 删除匹配的元素集合中所有的子节点：element.empty()
  • 清空匹配的元素内容：element.html(“”)
1.element.remove()      //删除匹配的元素(本身)
$("ul").remove();
2.element.empty()       //删除匹配元素里面的子结点(孩子)
$("ul").empty();
3.element.html("")      //删除匹配元素里面的子结点(孩子)

remove 删除元素本身
empt() 和 html(“”) 作用等价，都可以删除元素黎曼的内容，只不过 html 还可以设置内容。

jQuery位置

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

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

$(".son").offset();
$(".son").offset().top;
$(".son").offset({
    top: 200,
    left: 200
});

该方法有两个属性 left、top.

  • offset().top用于获取距离文档顶部的距离，
  • offset().left 用于获取距离文档左侧的距离
    可以设置元素的偏移：offset({ top: 10, left: 30 });

position()获取元素偏移

position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，以文档为准

  • position().top 用于获取距离定位父级顶部的距离，
  • position().left 用于获取距离定位父级左侧的距离。
    这个方法只能获取偏移，不能设置偏移
$(".son").position();
// 这个方法只能获取偏移，不能设置偏移

scrollTop() / scrollLeft() 设置或获取元素被卷去的头部和左侧

  • scrollTop()方法设置或返回被选元素被卷去的头部。
  • 不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。
// 页面滚动事件
$(window).scroll(function(){
    $(document).scrollTop();
})
哎呦喂这
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery学习
weixin_44552307的博客
04-10 1224
1. jQuery入门 1.1 jQuery概述 1.1.1 jQuery的概念 jQuery是一个快速、简洁的JavaScript库，其设计的宗旨是“write Less , Do More”，即倡导写更少的代码，做更多的事情。 j就是JavaScript;Query查询;意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。 jQuery封装了JavaScript常用的功能代码，优化了DOM操作、事件处理、动画设计和Ajax交互。 1.1.2 jQuery的优点
jQuery总结1
08-03
6、总结jQuery是一个强大的JavaScript库，它极大地简化了DOM操作、事件处理和动画制作。它的核心优势在于提高了开发效率，降低了代码复杂性，同时具有良好的浏览器兼容性。jQuery通过其独特的选择器语法，使得选取...
玩明白了吗-- ＞ jQuery(四)
张浔CSDN
12-03 229
关于明天的事，我们后天就知道了前言一、`jQuery` 属性操作1.1 元素固有属性值 `prop()`1.2 元素自定义属性值 `attr()`1.3 数据缓存 `data()`1.4 `jQuery` 文本属性值二、`jQuery` 元素操作2.1 遍历元素2.2 创建、添加、删除三、`jQuery` 尺寸 & 位置操作3.1 `jQuery` 尺寸操作3.2 `jQuery` 位置操作 前言   学完 javaScript 语言再学习 jQuery ，用起来是真的又方便，又舒服，想要学习 ja
十一、jQuery（下） - 章节课后练习题及答案
熊先森的博客
06-28 9825
jQuery（下） - 章节课后练习题及答案，使用的是人民邮电出版社出版的《JavaScript+jQuery 交互式 Web 前端开发》书籍。
jQuery 第二弹
weixin_45988242的博客
09-01 390
目录jQuery的属性操作设置和获取元素固有的属性值 prop()设置和获取元素自定义属性值attr()数据缓存data()购物车模块--全选用.length获取元素个数jQuery内容文本值获取设置元素内容普通元素文本内容text()获取设置表单值 val() jQuery的属性操作 设置和获取元素固有的属性值 prop() <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl
jquery（一）
msn131420的博客
03-01 582
jQuery 入门 一、jQuery 概述 1.1 JavaScript 库 仓库： 可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找到就可以了。 JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。 简单理解： 就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能
JQuery总结1
qq_67507026的博客
10-24 409
JQuery入门1总结
jQuery技巧总结
10-28
随着WEB2.0及ajax思想在互联网上的快速发展传播，陆续出现了一些优秀的Js框架，其中比较著名的有Prototype、YUI、jQuery、mootools、Bindows以及国内的JSVM框架等
JQuery入门，JQuery总结
01-05
**jQuery入门与总结** jQuery是一个深受开发者喜爱的JavaScript库，它的出现极大地方便了JavaScript的编程，使得HTML元素的选择、操作和隐藏等任务变得更加简单。jQuery的核心理念是"write less, do more"，即用更...
jQuery学习总结
12-05
jQuery是一个JavaScript函数库。 jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
jquery基础知识总结
06-02
详细的jquery基础知识总结 jQuery
jQuery第二天
黑白两客
03-30 195
课程回顾： ​ jQuery：JavaScript库 ​ 入口函数：$(function () {}); ​ jQuery：jQuery对象，DOM对象 ​ jQuery转成DOM：$(‘元素’)[索引值] ​ DOM转成jQuery：$(DOM对象); ​ 筛选方法：parent，children，find，siblings，eq ​ 样式操作：css方法 ​ 类名操作：addClass，...
【web前端 | jQuery】jQuery操作
小赵不忙的博客
12-28 184
一：jQuery 属性操作 二：jQuery 内容文本值 三 ：jQuery 元素操作 四：jQuery 尺寸、位置操作
获取元素相对于文档的偏移量以及元素相对于父元素的偏移量
热门推荐
高山上的鱼
12-22 1万+
问题1：如果获取元素距离文档顶部的距离? var rect=$('#elem')[0].getBoundingClientRect(); //获取元素距离文档顶部的距离 var top=rect.top+(window.pageYOffset||document.documentElement.scrollTop)-(document.documentElement.client
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 272
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
VUE中的重点*
最新发布
qq_61132537的博客
07-22 663
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
jquery-选择器常见用法
随笔
07-18 210
jquery-选择器，对象下有多个子元素时如何选择
Vue3企业级项目开发实战课-笔记记录
tuku0801的专栏
07-20 939
实践 Vue 3 自研组件库开发、Node.js 服务端开发、Vue 3 结合 Node.js 的全栈项目开发以及全栈项目的单元测试等大厂常见的项目技术场景
vue3 vxe-grid修改currentPage，查询数据的时候，从第一页开始查询
jwbabc的专栏
07-18 242
vxe-grid查询数据的时候，从第一页开始查询，并且清空选中，清空复选框状态等，查询数据查询。
"jQuery总结1：入门函数、优势及基本介绍
总结： 本文主要介绍了jQuery的...最后总结了本文的内容，再次强调了jQuery的优势，并鼓励读者继续深入学习和使用jQuery框架来提高开发效率。同时也提到了jQuery的开源特性，任何人都可以参与贡献代码或使用该框架。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值