jQuery的引用和选择器_引用jquery-优快云博客

本文介绍了jQuery的基本概念、如何引用jQuery库，详细阐述了jQuery的选择器，包括基本选择器、层次选择器和过滤选择器，并探讨了jQuery中的DOM操作，如特殊符号处理、内容的获取与设置、事件绑定及样式的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、jQuery

1、jQuery的简介

jQuery是一个优秀的JavaScript库。使程序员从设计和书写繁杂的JS应用中解脱出来，将关注点转向功能需求而非实现细节上，从而提高项目的开发速度。

jQuery 最大的优势，就是特别的方便，最重要的是 jQuery 的代码兼容性非常好。

2、jQuery的引用

本地调用：<script src="./js/jquery-3.6.0.min.js"></script>

远程调用：<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

3、jQuery执行小函数

jQuery有一个用来作为DOM快速载入javascript的得心应手的小函数,那就是ready $(document).ready(function() {}); 可简写为：$(function(){});

window.onload

$(document).ready()

执行时机

必须等待网页全部加载完毕（包括图片等），然后再执行包裹代码

只需要等待网页中的DOM结构加载完毕，

就能执行包裹的代码

执行次数

只能执行一次，如果第二次，

那么第一次的执行会被覆盖

可以执行多次，第N次都不会被上一次覆盖

4、jQuery对象和DOM对象互相转换

  // dom对象转换为jquery
  // $(dom对象)
$("#box") === $(document.getElementById("box"));
  // jquery对象 转换为 dom对象
  // jquery对象[索引]
  // jquery对象.get(索引)
$("div")[1].style.backgroundColor = "red";
$("div").get(0).style.backgroundColor = "red";

二、jQuery选择器

1、基本选择器

选择器	描述	示例
#id	根据指定的id匹配元素	$(“#box”)选择id=box的元素
.class	根据类匹配元素	$(“.box”)选择class=box的元素
Element	根据元素名匹配元素	$(“div”)选择所有的div元素
*	匹配所有元素	$(“*”)选择所有元素
E1,E2,E3	分组匹配元素	$(“div,span,.box”)选择所有div，span,和class为box的元素

2、层次选择器

$("E+F")
        $("E").next()或$("E").next("F")
        往后查找，紧邻E选择器后的那一个F兄弟选择器
        $("E").prev()或$("E").prev("F")
        往前查找，紧邻E选择器前的那一个F兄弟选择器
$("E~F")
        $("E").next()或$("E").next("F")
        往后查找，紧邻E选择器后的所有的F兄弟选择器
$("E").prev()或$("E").prev("F")
        往前查找，紧邻E选择器前的所有的F兄弟选择器
        $("E:eq(索引)")=$("E").eq(索引)

3、过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出需要的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即过滤选择器都是以冒号(:)开头

 $(document).ready(function () {
           $("ul li:first").css("color", "red");//文档里的第一个li元素  唯一
           $("ul li").first().css("color", "blue");
           $("ul li:last").css("color", "red");
           $("ul li").last().css("font-size", "30px");
           $("li:odd").css("background-color", "red"); //文档里[索引为奇数]li
           $("li:eq(0)").css("color", "red");
           $("li").eq(0).css("color", "red");
           $("li:lt(3)").css("color", "green");//索引小于3的li
           $("li:gt(3)").css("color", "green"); //索引大于3的li

           $("ul li:first-child").css("color", "red");//每一组里的第一个li子元素 可能是多个
           $("ul li:last-child").css("color", "red");
           $("ul li:nth-child(odd)").css("background-color", "red"); //每一组里[第奇数]个li

           $("input[id=user]").val(111);
           
    });

    // get() 与 eq() 区别
    // 都是jquery对象调用  jquery对象.get(索引)  jquery对象.eq(索引)

    // 不同点：
    // jquery对象.get(索引)   dom对象
    // jquery对象.eq(索引)    jquery对象

选择器	描述	示例
:first	选择第1个元素	$(“ul li:first”)选择第1个div元素
:last	选择最后1个元素	$(“ul li:last”)选择最后1个div元素
:even	选择索引是偶数的所有元素，索引从0开始	$(“li:even”)选择表格中所有偶数的行
:odd	选择索引是奇数的所有元素，索引从0开始	$(“li:odd”)选择表格中所有奇数的行
:eq(index)	选择索引值是index的元素，index从0开始	$(“li:eq(1)”)选择表格行索引等于1的行
:gt(index)	选择索引值大于index的元素,index从0开始	$(“li:gt(1) ”)选择表格行索引大于1的行
:lt(index)	选择索引值小于index的元素,index从0开始	$(“li:lt(1)”)选择表格行索引小于1的行
[attribute=value]	选择属性值为value的元素	$(“div[id=test]”)选择id属性值为test的div元素
:input	匹配所有<input> <textarea> <select> <button>元素	$(“:input”)匹配所有<input> <textarea> <select> <button>元素

jquery对象.siblings() 选择除了自身之外的其他jquery兄弟对象

三、操作

1、特殊符号

        “.”、”#”、”(“、”]”

            $(“#id#b”)和$(“#id[1]”)程序就会出错

        正确的写法：使用转义符\\将特殊符号转义    $(“#id\\#b”)    $(“#id\\[1\\]”)

2、设置和获取

获取：

jquery对象.text() / jquery对象.html() / jquery对象.val()

如果jquery对象是多个时，jquery对象.html() / jquery对象.val()获取时，

获取的是第一个jquery对象里的内容

jquery对象如果是多个的，jquery对象.text()获取时，

获取多个jquery对象里的内容

设置：

jquery对象.text(内容) / jquery对象.html(内容) / jquery对象.val(内容)

3、增删事件

jquery对象.bind("事件名1 事件名2 ...", function () {});

jquery对象.bind({ 事件名1: function () {}, 事件名1: function () {} });

 $("button").bind("mouseover mouseout", function (ev) {});
 $("button").bind("click", function () {});

4、样式和类

        jquery对象.css("属性名") 通过样式属性名获取属性值
设置一条样式 jquery对象.css("属性名","属性值")
设置多条样式 jquery对象.css({"属性名":"属性值","属性名":"属性值",...})

        增加类可增加/删除多个类

        .addClass(“类名1 类名2 ……”) 多个类名之间用空格隔开

        .removeClass(“”)

        .toggleClass(“”) .toggleClass(“类名”,true/false) 用来判断样式类添加还是移除的布尔值

$(".box").addClass("bg"); //添加类
$(".box").removeClass("bg box"); //删除类
$(".box").removeClass(); //清空
$(".box").toggleClass("fz box");
$(".box").toggleClass(); //removeClass()
$(".box").toggleClass("bg", false);//removeClass()
$(".box").toggleClass("fz", true); //addClass()