认识jQuery

努力活着吧

已于 2023-09-19 06:34:24 修改

阅读量363

点赞数

文章标签： jquery

于 2021-04-03 16:24:04 首次发布

本文链接：https://blog.csdn.net/weixin_48295713/article/details/115417464

版权

jQuery是一个轻量级的JavaScript库，提供跨浏览器兼容的DOM操作、事件处理、动画等功能，旨在提升前端开发效率。其主要优点包括小巧的体积、链式编程和丰富的插件支持。jQuery的选择器包括基础选择器、层级选择器和筛选选择器等，方便开发者快速定位和操作元素。学习jQuery主要是掌握如何调用封装好的函数，以及DOM对象和jQuery对象之间的转换。

摘要由CSDN通过智能技术生成

jQuery

什么是jQuery

jQuery是一个快速，简洁的JavaScript库
jQuery里面的 j代表的是JavaScript，Query是查询的意思。jQuery的意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。
我们学习jQuery的本质就是：学习调用封装好的函数（方法）
jQuery 出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率。

jQuery的优点

轻量级，核心的文件只有几十kb,不会影响页面的加载速度。
跨浏览器兼容
链式编程，隐式迭代
对事件，样式，动画支持，大大的简化了NOM操作
支持插件扩展开发
免费，开源

jQuery的下载

jQuery的官网地址： https://jquery.com/，官网即可下载最新版本。

中文网：http://jquery.cuishifeng.cn/

jQuery的版本介绍

1x ：兼容 IE 678 等低版本浏览器，官网不再更新

2x ：不兼容 IE 678 等低版本浏览器，官网不再更新

3x ：不兼容 IE 678 等低版本浏览器，是官方主要更新维护的版本

jQuery的人口函数

// 第一种：常用(推荐)
$(function(){
	//所有的需要执行js代码都写在人口函数里面
})


//第二种 ： 繁琐
$(document).ready(function(){
    //所有的需要执行js代码都写在人口函数里面
})

jQuery中的顶级对象$

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

jQuery 对象和 DOM 对象

用原生 JS 获取来的对象就是 DOM 对象
jQuery 方法获取的元素就是 jQuery 对象。
jQuery 对象本质是：利用$对DOM 对象包装后产生的对象（伪数组形式存储）。

jQuery 对象和 DOM 对象转换

DOM 对象与 jQuery 对象之间是可以相互转换的。因为原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。

//1.DOM对象转成jQuery对象，方法只有一种
let box = document.getElementById('box');
let jQueryObject = $(box);

//2.jQuery对象转DOM对象有两种方法：
//jQuery对象[索引值]
let domOBJect1 = $('#box')[0]
//jQuery对象.get(索引值)
let domObject2 = $('#box').get(0)

jQuery选择器

基础选择器
名称	用法	描述
ID选择器	$(’#id’)	获取指定的ID元素
全选选择器	$(‘*’)	匹配所有的元素
类选择器	$(".class")	获取同一类class的元素
标签选择器	$(“div”)	获取同一类标签的所有元素
并集选择器	$(“div,p,li”)	选取多个元素
交集选择器	$(“li.current”)	交集元素

层级选择器
名称	用法	描述
子代选择器	$(“ul>li”)	使用>号，获取亲儿子层级的关系；注意，并不会获取孙子层级的元素
后代选择器	$(“ul li”)	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子元素

筛选选择器
语法	用法	描述
:first	$(“li:first”)	获取第一个li元素
:last	$(“li:last”)	获取最后一个li元素
:eq(index)	$(“li:eq(2)”)	获取到的li元素中，选择器引号为2的元素，索引号index从0开始
:odd	$(“li:odd”)	获取到的li元素，选择索引号为奇数的元素
:even	$(“li:even”)	获取到的li元素，选择索引号为偶数的元素

Query中的筛选方法
语法	用法	描述
parent()	$(‘li’).parent()	查找父级
children(selector)	$(“ul”).children(“li”)	相当于$(“u11i”),最近一级(亲儿子)
find(selector)	$(“u1”).find(“1i”)	相当于$(“ul li”),后代选择器
nextAll([expr])	$(“first”). nextAllo	查找当前元素之后所有的同辈元素
prevAll([expr])	$(".last"). prevAll()	查找当前元素之前所有的同辈元素
hasClass(class)	$(‘div’).hasClass(“protected”)	检查当前的元素是否含有某个特定的类,如果有,则返回true
eq(index)	$(“1i”).eq(2)	相当于$(“1i:eq(2)”), index从0开始
siblings(selector)	$( “.first”).siblings( “li”)	查找兄弟节点,不包括自己本身