关于jQuery

最新推荐文章于 2022-04-10 09:27:54 发布

VIP文章 m0_61073208

最新推荐文章于 2022-04-10 09:27:54 发布

阅读量446

点赞数

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

本文链接：https://blog.csdn.net/m0_61073208/article/details/119860794

版权

1、jQuery简介

1.1 JavaScript库：

JavaScript库，是一个封装好的特定的集合（方法和函数）。

1.2 jQuery 的概念：

jQuery 是一个快速、简洁的 JavaScript 库，即倡导写更少的代码，做更多的事情。

jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。
学习jQuery 就是学习调用这些函数（方法），jQuery 出现的目的是加快前端开发速度，可以非常方便的调用和使用它，从而提高开发效率。

1.3 jQuery 的优点

轻量级。核心文件才几十kb，不会影响页面加载速度。
跨浏览器兼容。基本兼容了现在主流的浏览器
链式编程
对事件、样式、动画支持，大大简化了DOM操作
支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等
免费、开源
查找元素的方法多种多样，非常灵活
拥有隐式迭代特性，因此不再需要手写for循环了。
完全没有兼容性问题。
实现动画非常简单，而且功能更加的强大。
代码简单、粗暴。

2、jQuery 的基本使用

2.1 jQuery 的下载

官网地址：https://jquery.com/

版本：

1.x版本：能够兼容IE678浏览器
2.x版本：不兼容IE678浏览器
1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本。
3.x版本：不兼容IE678，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678）

国内多数网站还在使用1.x的版本，主要是为了兼容IE678浏览器。

各个版本的下载：https://code.jquery.com/

2.3 引入jQuery文件

2.4 入口函数

// 第一种写法
$(document).ready(function() {
   
	
});
// 第二种写法
$(function() {
   
	
});

jQuery入口函数与window.onload的对比

JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。
jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。

2.5 jQuery 的顶级对象 $

1.$ 是 jQuery 的别称，在代码中可以使用 jQuery 代替 $，为了方便，通常都直接使用 $ 。
2.$ 是jQuery 的顶级对象，相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。

<script>
        // 1. $ 是jQuery的别称（另外的名字）
        // $(function() {
   
        //     alert(11)
        // });
        jQuery(function() {
   
            // alert(11)
            // $('div').hide();
            jQuery('div').hide();
        });
        // 2. $同时也是jQuery的 顶级对象
</script>

2.6 jQuery对象和DOM对象

2.6.1 jQuery对象和DOM对象的区别

*DOM对象

用原生JavaScript获取的DOM对象，通过document.getElementById() 反馈的是元素(DOM对象)
通过document.getElementsByTagName()获取到的是什么？
伪数组(集合)，集合中的每一个对象是DOM对象

*jQuery对象

jQuery对象用$()的方式获取的对象
jQuery对象又可以叫做包装集(包装的DOM对象的集合)

jQuery对象不能使用DOM对象的成员，DOM对象不能使用jQuery对象的成员

2.6.2 jQuery对象和DOM对象的相互转换

jQuery对象转换成DOM对象：
jQuery对象是包装集(集合)，从集合中取数据可以使用索引的方式

jQuery对象.get(索引值); 
jQuery对象[索引值]

DOM对象转换成jQuery对象：

$(DOM对象) //只有这一种方法

3、jQuery选择器

3.1 基本选择器

名称	用法	描述
全选择器	`$('*')`	获取所有元素
ID选择器	`$('#id')`	获取指定ID的元素
类选择器	`$('.class')`	获取同一类class的元素
标签选择器	`$('div')`	获取同一类标签的所有元素
并集选择器	`$('div,p,li')`	使用逗号分隔，只要符合条件之一就可。
交集选择器	`$('div.redClass')`	获取class为redClass的div元素

3.2 层级选择器

名称	用法	描述
子代选择器	`$('ul > li');`	使用-号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器	`$('ul li');`	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

3.3 jQuery过滤选择器

名称	用法	描述
: first	`$('li:first')`	获取第一个li元素
: last	`$('li:last')`	获取最后一个li元素
:eq（index）	`$('li:eq(2)').css('color', 'red');`	获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
:odd	`$('li:odd').css('color', 'red');`	获取到的li元素中，选择索引号为奇数的元素
:even	`$('li:even').css('color', 'red');`	获取到的li元素中，选择索引号为偶数的元素

3.4 jQuery筛选选择器(方法)

筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。

名称	用法	描述
children(selector)	`$('ul').children('li')`	相当于$(‘ul-li’)，子类选择器
find(selector)	`$('ul').find('li');`	相当于$(‘ul li’),后代选择器
siblings(selector)	`$('#first').siblings('li');`	查找兄弟节点，不包括自己本身。
parent()	`$('#first').parent();`	查找父亲
parents()	`$('.box').parents('.main');`	查找.box的父亲，父亲为.main
eq(index)	`$('li').eq(2);`	相当于$(‘li:eq(2)’),index从0开始
next()	`$('li').next()`	找下一个兄弟
nextAll([expr])	`$(".first").nextAll()`	查找当前元素之后所有的同辈元素
prev()	`$('li').prev()`	找上一次兄弟
prevtAll([expr])	`$(".last").prevAll()`	查找当前元素之前所有的同辈元素
hasClass(class)	`$('div').hasClass("protected")`	检查当前的元素是否含有某个特定的类，如果有，则返回true

3.5 jQuery隐式迭代

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

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

<body>
    <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>

</body>

3.6 排他思想&链式编程

<body>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <script>
        $(function() 
            $("button").click(function() {
                                
               // 当前元素设置样式，其余的兄弟元素清除样式。
               $(this).css("color", "red").siblings().css("color", "");
            });
        })
    </script>
</body>

4 、jQuery样式操作

4.1 修改CSS样式

1、参数只写属性名,则返回属性值

$(this).css("color");

2、参数是属性名,属性值,逗号分隔,是设定一组样式。

属性需要加引号,值是数字可不加单位和引号

$(this).css("color",300);

3、参数可以是对象形式,方便设置多组样式。

属性名和属性值用冒号隔开,属性可以不用加引号

$(this).css({
   
    "color":"red",
    "width": 400,
    "height": 400,
    // 如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号
    backgroundColor: "red"    
})

4.2 设置类样式方法

作用等同于classList，可以操作类样式，不会影响到其他类的存在，只对指定类操作。

里面的参数不要加点

// 1.添加类
$("div").addClass("current");

// 2.移除类
$("div").removeClass("current");

// 3.切换类
$("div").toggleClass("current");

jQuery类操作和className区别

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

最低0.47元/天解锁文章

m0_61073208

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于jQuery

1、jQuery简介1.1 JavaScript库：JavaScript库，是一个封装好的特定的集合（方法和函数）。1.2 jQuery 的概念：jQuery 是一个快速、简洁的 JavaScript 库，即倡导写更少的代码，做更多的事情。jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。学习jQuery 就是学习调用这些函数（方法），jQuery 出现的目的是加快前端开发速度，可以非常方便的调用和使用它，从而提高开发效率。
复制链接

扫一扫