jQuery 3-1 · 基础篇

409 阅读3分钟

诞生:
2006年1月jQuery正式发布,jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。

版本:
1.X:兼容 IE6/7/8,是工作中最常使用的,学习 1.12 版本。
2.X:不兼容 IE6/7/8,多用于 jQuery 官方调整 bug 使用。工作中不使用。
3.X:不兼容 IE6/7/8,只能在高版本浏览器中使用,是现在 jQuery 官方主要的维护升级的版本。

jQuery 对原生js进行了大量的封装,极大地简化了对DOM的操作。

$() 方法

操作 DOM 从获取元素开始,jQuery中封装了 $() 方法用来获取HTML元素。

在 jQuery 中,只有一个全局变量 $,这是 jQuery 的一大特点,避免了全局变量的污染。最开始变量不叫做 $,叫做 jQuery() 方法,在库中两个名字是并存的,都可以使用。如果 jQuery 文件引用错误就会造成报错:$ 未定义。

概述

jQuery 中封装了更强大的获取元素的方法:$()jQuery(),将要获取的元素包裹在 $() 内部

参数

$() 方法内部参数为字符串格式

示例

获取标签元素

    // 方式 1:使用 $() 方法获取元素
    $("p");
    // 方式 2:使用 jQuery() 方法获取元素
    jQuery("p");
    
    // 通过 id 获取元素
    $("#myDiv");
    jQuery("#myDiv");
    
    // 通过 class 获取元素
    $(".myDiv");
    jQuery(".myDiv");
    
    // 使用高级选择器获取标签子元素
     $("div ul li");

jQuery 对象

$() 方法获取到的内容叫做jQuery对象,jQuery对象内部封装了大量的属性和方法,比如 .css() 和 .html() 和 .animate() 等方法,使用方法可以通过jQuery 对象打点直接调用该方法;也可以通过连续打点调用不同的方法,这种形式叫做:链式调用

示例

    $(".demo").css("color","red");

注意:通过$() 方法获取到的元素是页面所有符合的元素,进行的操作是批量操作。

jQuery对象和原生js对象相互转换

jQuery 对象得到后,只能使用 jQuery 对象的方法,不能使用原生 js 元素对象的方法。
原生 jS 对象也不能使用 jQuery 的方法。

jQuery 对象实际是一个类数组对象,内部包含所有的获取的原生 js 对象,以及大量的jQuery 的方法和属性。

转换方法:

  • jQuery 转原生:直接利用数组下标方式,得到 jQuery 封装的原生对象。
  • 原生转 jQuery:将原生对象用 $() 方法包裹即可。

示例

// 1. 使用 jQuery 转原生对象:通过下标获取到原生对象,就可以打点调用原生 js 的方法。
let $p = $("p");
$p[0].innerHTML = '文案1';

// 2. 原生对象转jQuery对象:使用 $() 包裹原生对象,然后打点调用jQuery方法
let p = document.getElementById("demo");
$(p).css("color","red");

jQuery 选择器

jQuery 中获取元素,可以通过不同的选择器来实现,包括基础选择器和css3中的高级选择器。

概述

使用 $() 或 jQuery() 函数获取元素

参数

字符串格式的选择器

语法

参数中选择器的的书写方式与css选择器书写格式一致

示例

    // 基础选择器
    $("*");
    $("div");
    $(".myDiv");
    $("#myDiv");
    
    // 高级选择器
    $("div ul li");

过滤选择器

除了基础选择器和高级选择器之外还有筛选选择器,也叫过滤选择器,jQuery中新增的自己的选择器。

使用方法:和基础选择器搭配使用

常见选择器

选择器描述
$(":first")获取第一个
$(":last")获取最后一个
$(":eq(index)")获取下标为 index 的项
$(":gt(index)")获取下标大于 index 的项
$(":lt(index)")获取下标小于 index 的项
$(":odd")获取下标为奇数的项
$(":even")获取下标为偶数的项
$(":not(selector)")去除所有与给定选择器匹配的元素 ( 就是排除这项 )

示例

    // 筛选选择器
    $("p:first").css("color","red");
    $("p:last").css("color","blue");
    $("p:eq(2)").css("color","#ccc");
    $("p:gt(2)").css("color","#ccc");
    $("p:lt(2)").css("color","#ccc");
    $("p:odd").css("color","red");
    $("p:even").css("color","blue");
    $("p:not(:first)").css("color","#ccc");

筛选方法

除了上面的选择器获取元素之外,jQuery还封装了大量的筛选方法。在使用选择器选择获取到对象元素之后还可以打点调用筛选方法进一步筛选,效果同过滤选择器

常见方法

函数描述
eq(index|-index)index:当前获取到的对象类数组中的第n项
first()获取第一项
last()获取最后一项

示例

    // 筛选方法
    $("p").first().css("color","red");
    $("p").eq(2).css("color","red");

更多详情见 jQuery API 中文文档