jQuery(简介、特点、使用方法、【重点】jQuery的选择器：是jQuery的灵魂、jQuery的属性：操作标签的属性)

已于 2022-11-08 09:25:09 修改
阅读量493 收藏
点赞数 3
分类专栏： js 文章标签： jquery javascript 前端 html
于 2022-11-03 17:43:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44892365/article/details/127672148
版权
本文详细介绍了jQuery的核心概念，包括如何引入库、选择器的使用，如基本选择器、过滤选择器，以及如何操作元素属性。jQuery的选择器是其灵魂，包括基本过滤选择器如:first、:last等。此外，还讲解了如何通过CSS样式、属性、内容、可见性和属性过滤选择器来筛选DOM元素。同时，文章涵盖了jQuery的属性操作，如attr、css和val函数，以及自定义动画和事件处理。
摘要由CSDN通过智能技术生成

https://www.jq22.com/chm/jquery/index.html

一.jQuery

1.简介：是一个对JavaScript进行了封装的库，简化了用户使用javascript

2.特点：写得少、做的多

3.使用方法：

（1）在页面中引入jQuery库：引入外部的js文件

<script src="./js/jquery-3.4.1.js"></script>

（2）'$':是jQuery的全局对象，代表jQuery

（3）$(function(){})：jQuery代码的入口函数。

原始写法：$(document).ready(function(){})----window.onload

简写为：$(function(){})

<head>
    <script src="./js/jquery-3.4.1.js"></script>
</head>
<style>
    #box{
        width: 200px;
        height: 200px;
        background-color: pink;
    }
</style>
<body>
    <button id="show">显示</button>
    <button id="hide">隐藏</button>
    <br>
    <div id="box"></div>
    <script>
        $(document).ready(function(){})
        // document.querySelector('#hide').addEventListener('click',function(){
        //     document.querySelector('#box').style.display = 'none'
        // })
        // 可以将$换成jQuery
        $(function(){
            // 隐藏 hide()
            $('#hide').click(function(){
                $('#box').hide(2000)//hide(2000)过渡时间为2秒
            })
            // 显示 show()
            $('#show').click(function(){
                $('#box').show(2000)//show(2000)过渡时间为2秒
            })
        })

    </script>
</body>

二.jQuery的选择器：是jQuery的灵魂 

1.基本选择器

（1）id选择器：$('#id')

（2）类选择器：$('.class')

（3）标签名选择器：$('标签名')

（4）通配符选择器：$('*')

（5）合并选择器：$('#id,.class')

强调：css()函数的作用：是jQuery中用于设置元素CSS样式的函数

a.css('样式属性名','属性值')：设置单个样式   

<head>
    <script src="./js/jquery-3.4.1.js"></script>
</head>
<body>
    <p id="one">八百里秦川</p>
    <script>
        $(function(){
            $('#one').css('background-color','red')
        })
    </script>
</body>

b.css({'属性名1'：'属性值1'，'属性名2'：'属性值2'……})

eq(index):匹配一个给定索引值的元素。页面中元素的索引值从0开始

<head>
    <script src="./js/jquery-3.4.1.js"></script>
</head>
<body>
    <p id="one">八百里秦川</p>

    <p>钟楼</p>
    <p>鼓楼</p>
    <p>回民街</p>

    <h1>会计</h1>
    <h2>出纳</h2>
    <script>
        // $(function(){
        //     $('#one').css('background-color','red')
        // })
        $(function(){
            $('p').css({'backgroundColor':'yellow','color':'pink'})

            // 改变第一个p背景色和字体颜色
            $('p').eq(0).css({'backgroundColor':'red','color':'black'})
            // 改变最后一个p的字体颜色
            $('p').eq(2).css({'color':'skyblue'})

            // 改变所有<h1>
            $('h1,#one').css({'backgroundColor':'red'})
        })
    </script>
</body>

2.过滤选择器：是通过特定的过滤规则来筛选出所需的DOM元素。

2.1基本过滤选择器

(1):first---选择第一个元素

(2):last---选择最后一个元素

(3):not(select)---去除所有与给定选择器相匹配的元素

<head>
    <script src="./js/jquery-3.4.1.js"></script>
</head>
<body>
    <ul>
        <li>春</li>
        <li>夏</li>
        <li id="n1">秋</li>
        <li>冬</li>
    </ul>
    <script>
        $(function(){
            // 第一个
            $('li:first').css('color','red')
            // 最后一个
            $('li:last').css('fontSize','30px')
            // 除id='n1'之外的其他元素文字都为蓝色
            $('li:not(#n1)').css('color','blue')
        })
    </script>
</body>

(4):even---匹配所有索引值为偶数的元素，从0开始计数

(5):odd---匹配所有索引值为奇数的元素，从1开始计数

(6):eq(index)---匹配一个给定索引值的元素

(7):gt(index)---匹配所有大于给定索引值的元素

(8):lt(index)---匹配所有小于给定索引值的元素

<head>
    <script src="./js/jquery-3.4.1.js"></script>
</head>
<body>
    <ul>
        <li>春</li>
        <li>夏</li>
        <li id="n1">秋</li>
        <li>冬</li>
    </ul>
    <script>
        $(function(){
            // 匹配索引为偶数的元素
            $('li:even').css('fontSize','50px')
            // 匹配索引为奇数的元素
            $('li:odd').css({'fontSize':'10px','color':'purple'})

        })
    </script>
</body>

2.2内容过滤选择器

(1):contains(text)---匹配包含给定文本的元素

(2):empty---匹配所有不包含子元素或者文本的空元素

(3):has(selector)---匹配含有选择器所匹配的元素的元素

(4):parent--- 匹配含有子元素或者文本的元素

<head>
    <script src="./js/jquery-3.4.1.js"></script>
</head>
<body>
    <div>
最低0.47元/天 解锁文章
m-TT
关注
专栏目录
jQuery-选择器
ImmortalSYM的博客
11-13 976
jQuery-选择器 jQuery选择器 —选择器本身只是一个有特定语法规则的字符串，没有实质用处；用于查找页面中特定元素； —他的基本语法规则为CSS选择器语法，并进行扩展； —只用调用$()，并将选择器作为参数传入才能起作用； —$(selector)：根据选择器规则在整个文档中查找所有匹配的标签的伪数组，并封装jQuery对象返回； —选择器分类：基本选择器、层次选择器、过滤选择器、表单选择器； 基本选择器 id选择器：$('#id名')； 元素选择器：$('元素名') 属性选择器：$
jquery选择器和属性对象的操作实例分析
10-15
通过这些实例，我们可以看到jQuery选择器和属性对象的实用性，它们让开发者能够快速、高效地操作页面元素，大大提升了开发效率。无论是简单的选取元素还是复杂的筛选操作，jQuery都能提供简洁、直观的API。在实际...
jQuery选择器的使用
hyd6666的博客
03-25 127
前言 jQuery的选择器大部分还是沿用了CSS的选择器，在这些选择器当中增添了一些其他选择器。 1.ID选择器 特点：根据标签的ID属性值进行选择，只能选中一个元素。 示例代码如下： 将ID值为box的标签设置为红色的背景颜色，ID值唯一 $(function() { $('#box').css('background', 'red'); }) 2.class选择器（类名选择器） 特点：根据标签的class属性值进行选择，类名可重复选择多个元素。 示例代码如下： 将class类名为.on
jQuery选择器总结以及用法介绍
前端-阿来
09-21 324
jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。
JQ 简介
qq_35187942的博客
02-22 1394
什么是JQ？ •一个优秀的JS库，大型开发必备 lJQ的好处？ •简化JS的复杂操作 •不再需要关心兼容性 •提供大量实用方法 l如何学习JQ？ •www.jquery.com •JQ只是辅助工具，要正确面对 •需要分阶段学习 ======================================= lJQ设计思想？ •选择网页元素 –模拟CSS选择元素   ...
JQ简介
西红柿不会炒鸡蛋的博客
08-01 417
jq用了很长时间刚开始有些蒙蔽，慢慢的感觉功能很强大，于是想记录下自己的感受下面先介绍下jq的好处。 jq不是第一个javascript库，在此之前还有很多比如：Prototype，Scriptaculous和DWR等等。 与这些库相比jq最大的优势在于简洁实用。 下面将举几个例子感受一下： 选区页面中所有的div>元素进行操作，使用$("")可以获取到很多
jQuery属性选择器用法示例
10-21
综上所述，jQuery属性选择器是实现基于属性选择元素的高效方法，它使我们能够进行精确的DOM操作，并且可以灵活地结合各种选择器实现复杂的元素选择需求。通过本文的实例，相信读者已经对jQuery属性选择器有了较深入...
JQUERY的属性选择符和自定义选择符使用方法（二）
12-08
在jQuery中，选择器是用于定位DOM元素的关键工具，它极大地增强了我们操作页面元素的能力。在本篇讨论中，我们将深入探讨属性选择符和自定义选择符的使用方法。 属性选择符是jQuery提供的一种功能，允许我们根据...
jquery选择器-根据多个属性选择示例代码
10-26
jQuery选择器是Web开发中广泛使用的工具，它...总而言之，使用jQuery选择器根据多个属性选择元素是一种非常实用的技能，通过上述知识点的学习和理解，开发者可以更精确地操作DOM，从而开发出更加丰富和互动的网页应用。
jQuery选择器及jQuery基本操作
01-08
jQuery选择器及基本操作是jQuery库的核心组成部分，它极大地简化了JavaScript中DOM元素的选取和操作。jQuery选择器允许开发者使用CSS1至CSS3的选择器语法来定位HTML元素，使得代码更加简洁、高效。 1. **jQuery选择...
JQuery选择器的分类详解说明
上善若泪
09-05 2568
目录 1 基本选择器 1.1 CSS选择器 1.1.1 标签选择器 1.1.2 ID选择器 1.1.3 类选择器 1.1.4 通用选择器 1.1.5 群组选择器 1.2 层级选择器 1.2.1 子元素选择器 1.2.2 后代选择器 1.2.3 紧邻同辈选择器 1.2.4 相邻同辈选择器 1.3 表单域选择器 1.3.1 :input选择器 1.3.2 :text选择器...
jQuery支持的属性选择器
生活中的思索
04-28 455
英文解释： 中文解释： E [A] 匹配具有标签名称E的所有具有任何属性A的元素值 E [A =’V’] 匹配具有属性A的所有具有标签名称E的元素值正好是V E [A ^ =’V’] 匹配具有属性A的所有标签名称为E的元素值从V开始 E [A $ =’V’] 匹配具有属性A的所有标签名称为E的元素值以V结尾 E [A！=’V’]
一、jq简介
qq_44799466的博客
06-27 1183
一、jq的书写 1、在导入jq源码的时候，就可以用jq的方法了 <script src="./01-jquery简介/js/jquery-3.4.1.js"></script> 用jq的方法必须在前面加上jQuery，我们可以试试打印出jQuery,得到的结果为 当然为了简化，我们用$来代替，我们也可以试试Jquery是否等于$结果为true，所有为了简写我们通常写成$ console.log(jQuery===$)//结果为true 2、jq的简化历程 在没有使用jq之间，我
jQuery简介
zzulp的专栏
02-20 9541
jQuery 是一个JavaScript函数库。支持HTML元素选取和操作、CSS操作、JS特效与动画、DOM处理、Ajax等。 导入jQuery就像导入一段外部js代码一样简单，可以使用MS或Google的CDN进行加载。 1 jQuery基础 jQuery采用了CSS选择器的语法来选择HTML元素，基础语法为$(selector).action() 示例 $(document)
JQ介绍
RenOuQ的博客
05-18 345
JQ介绍 jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。 jQuery的引入方式有两种： 直接下载文件到本地（最常用），从本地中导入 使用文件的网络地址，就像我们img标签里面的那个src的用法差不多。 <script src="js/jquery-2.1.0.js"></script> 引入完之后，就可以直
JQ（一）--JQ简介
-_^汪洸*的博客
05-03 1819
jQuery的介绍 一、什么是jQuery jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操...
JQ简单介绍
hepengyu_java的博客
08-31 305
小宇给您简单描述 大神勿喷 请多多提示
jQuery选择器分类
weixin_45753617的博客
08-19 1205
jQuery选择器分类
JQuery选择器用法详解
刘远的编程技术博客
09-04 1054
jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。 选择器允许您对 HTML 元素组或单个元素进行操作。 在 HTML DOM 术语中： 选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。 Jquery选择器分为基本选择器、层次选择器、过滤选择器。 基本选择器：直接根据id、css、类名、元素名返回匹配的dom元素。 层次选择器：也...
jQuery选择器详解：属性篇
jQuery选择器是jQuery库中的核心功能之一，用于在DOM（文档对象模型）中精准地选取我们需要操作的元素。在属性篇中，我们将深入理解以下几种属性选择器的使用： 1. `[attribute]`：这种选择器用来选取具有特定属性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值