初识 jQurey

jQurey的作用:快速获取dom元素,减少js代码,提高码代码的效率。write less, do more

官方网站:https://jquery.com/

菜鸟教程:https://www.runoob.com/jquery/jquery-tutorial.html

什么是jQuery?

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它使HTML文档遍历和操作,事件处理,动画和Ajax等功能变得更加简单,它具有易于使用的API,可跨多种浏览器运行。凭借多功能性和可扩展性的结合,jQuery改变了数百万人编写JavaScript的方式。

jq安装引入

安装:官网安装

版本之间的区别:

  • 1x :兼容 IE 678 等低版本浏览器, 官网不再更新
  • 2x :不兼容 IE 678 等低版本浏览器, 官网不再更新
  • 3x :不兼容 IE 678 等低版本浏览器, 是官方主要更新维护的版本

两种引用方式:

  • 通过本地的js文件引入
  • 通过外部的链接引入 https://code.jquery.com/jquery-3.6.0.min.js

jq对象与dom对象

1
2
3
4
var id1 = document.getElementById("id");	// dom对象
console.dir(id1);
var id2 = $("#id"); // jq对象
console.dir(id2);

通过原生JS获取的dom对象 与 jq方法获取的对象并不相同,jq对象实质上是dom对象包装后的对象,以伪数组的形式存放。这就造成dom对象不能使用jq对象的方法,jq对象也不能使用dom对象的方法。

对象之间转化:

  • dom对象转换为 jq对象: $(DOM对象)
  • jq对象转换为 dom对象:$(‘div’)[index]

jq选择器

基本选择器

名称 用法
ID选择器 $(“#id”)
类选择器 $(“.class”)
标签选择器 $(“div”)
全选择器 $(“*”)
同时选择多个 $(“div,li”)
子代选择器 $(“ul>li”)
后代选择器 $(“ul li”)

筛选选择器

语法 描述
selector:first 获取所有已选择到的元素中的第一个元素
selector:last 获取所有已选择到的元素中的最后一个元素
selector:eq(index) 获取所有已选择到的元素中的索引为index的元素
selector:odd 获取所有已选择到的元素中的索引为奇数的元素
selector:even 获取所有已选择到的元素中的索引为偶数的元素
selector:lt(num) 获取所有已选择到的元素中的索引值小于num的元素
selector:gt(num) 获取所有已选择到的元素中的索引值大于num的元素
selector1:not(selector2) 获取所有已选择到的元素中的除了selector2的元素
更新于

请我喝[茶]~( ̄▽ ̄)~*

boW 微信支付

微信支付

boW 支付宝

支付宝

boW 贝宝

贝宝