用jQuery实现基于数据属性的DOM元素过滤 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

用jQuery实现元素被点击选中的效果

一、说明页面中存在四个div元素，实现以下效果：当鼠标放置在div元素上面的时候，元素呈现平滑放大效果；鼠标点击任意一个元素，元素变大，周围出现阴影，表现出被选中的效果二、代码实现提前导入jQuery...文件：jquery/3.6.0/jquery.js">1.HTML代码用jQuery...实现元素被点击选中的效果元素1 元素2 元素3 元素4实现鼠标放到元素上的效果*/.box>div:hover {/* 定义变化的效果，盒子的长和宽均变为原来的1.2倍 */transform: scale(1.2...true时，为点击的元素添加"selected"属性 $(this).addClass("selected"); // 同时symbol的值取反

1.2K1 0

vue2 nextTick 改变数据后，基于新创建的DOM元素进行操作

$refs.txt.focus() } }, } 正确写法 onClick() { this.isEdit = true // 使用此函数将在下一次DOM

4633 0

您找到你想要的搜索结果了吗？

是的

没有找到

好久不用 jQuery，来复习一下

jQuery 对象就是经过 jQuery 包装之后的 DOM 对象。jQuery 对象不能使用 DOM 对象的任何方法，同理 DOM 对象也不能使用 jQuery 对象的任何任何方法。...jQuery 选择器基于元素的 id、类、类型、属性、属性值等查找或选择 HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。... 过滤选择器主要是通过特定的规则筛选出 DOM 元素，过滤规则与 CSS 中的伪类选择器语法相同，即选择器都以一个 : 开头。...按照不同的过滤规则，过滤选择器分为：基本过滤选择器，内容过滤选择器，可见性过滤选择器，子元素过滤选择器和表单对象属性过滤选择器 ☞ 基本过滤选择器 ? ☞ 内容过滤选择器 ?...☞ 可见性过滤选择器 ? ☞ 属性过滤选择器 ? ☞ 子元素过滤选择器 ? ☞ 表单对象属性过滤选择器 ?

6.1K4 0

全网最新、最全的jQuery核心知识，你真的不想点开看看嘛？

放的是用js代码写的function() --> (函数) jQuery官网介绍：jQuery是一个快速、小且功能丰富的JavaScript库。...通过 DOM 对 HTML 页面的解析，可以将页面元素解析为元素节点、属性节点和文本节点，这些解析出的节点对象，即 DOM 对象。DOM 对象可以使用 JavaScript 中的方法。...用 JQuery 语法创建的对象叫做 JQuery 对象, jQuery 对象只能调用 jQuery 对象的 API。 jQuery 对象是一个数组。在数组中存放本次定位的 DOM 对象。...,dom2,dom3] 过滤器就是过滤条件，对已经定位到数组中 DOM 对象进行过滤筛选，过滤条件不能独立出现在 jquery 函数，如果使用只能出现在选择器后方。...") 11.2 表单对象属性过滤器 :txet 和 :checkbox 代表的是表单选择器代表的是表单中的type属性选择可用的文本框 $(":text:enabled") var obj=(":text

7.8K1 0

JavaWeb04-jQuery(Java真正的全栈开发)

Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷 2.jQuery介绍 jQuery是继prototype之后又一个优秀的Javascript...标签的src属性导入即可二.jQuery基本操作 1.获得jQuery对象语法：$(选择器或者DOM对象) 或 jQuery(选择器或者DOM对象) $ == jQuery 属性的值 alert($obj.val()); 2.DOM对象和jQuery对象之间的转换注意:jQuery对象使用jquery的api（方法、函数）。...> 三.选择器基本,层次,基本过滤,内容过滤,可见性过滤,属性,子元素过滤,表单过滤,表单对象属性过滤 1.基本 id选择器，语法：$("#id值") 元素(标签)...：parent 不为空，（有子节点的元素） 5.可见性过滤：hidden 所有隐藏的(存在浏览器兼容问题) ：visible 所有可见的 6.属性 [attribute] 有此属性的元素 [attribute

3K9 0

前端学习笔记—JavaScript和jQuery

jQuery是围绕DOM树设计的，它是一个集JavaScript、CSS、DOM、AJAX于一体的强大框架，能够处理 HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步 AJAX...通过DOM对象的接口，js可以在任何时候访问HTML文档中的任何数据，利用DOM的接口可以无限制的控制HTML页面，可以动态的创建文档，遍历文档结构，对页面结构上的元素进行增、删、改等操作，改变文档的显示方式等...属性选择器 jQuery 使用 XPath 表达式来选择带有给定属性的元素。 ("[href]") 选取所有带有 href 属性的元素。("[href!...='#']") 选取所有带有 href 值不等于 "#" 的元素。过滤选择器（用的场景较多）对已经定位到数组中的DOM对象再进行过滤筛选，再次定位选择。...内容过滤选择器属性过滤选择器子元素过滤选择器表单对象属性过滤选择器表单选择器 //$(":type属性名") type必须是下表中的值 $(":checkbox").

7751 0

尚能饭否｜技术越来越新，我对老朋友jQuery还是一如既往热爱

公众号：「浅羽的IT小屋」 1、了解jQuery 「背景：」 Query查询的意思，jQuery就是用javascript更方便的查询和控制页面组件「宗旨：」设计宗旨：Write Less，Do...ID、Class、元素名、多个选择符组成，通过基本选择器可以实现大多数页面元素的查找案例：通过不同的选择器来控制页面元素的展示 ?...「过滤选择器：」过滤选择器根据某类过滤规则进行元素的匹配，书写时都以冒号（:）开头简单过滤器是使用最广泛的一种，ps：隔行变色 ?...属性过滤选择器，根据元素的某个属性获取元素，如ID号或匹配属性值的内容，并以“[”号开始，以“]”结束，ps：最后一个是复合属性选择器 ? 子元素过滤选择器，注意：nth-child索引从1开始 ?...表单对象属性过滤选择器，通过表单中的某对象属性特征获取该类元素，如：enabled、disabled、checked、selected属性 ? 「选择器综合案例：」整体如下： ? ? 代码如下 <!

1K5 0

脚本语言知识总结.

获得返回数据 Ø 通过Dom查找获得元素 Ø 调用元素的innerHTML进行操作 ?...对象的方法 // 通过访问jQuery对象下标0 元素，获得DOM对象 var dom1 = $jQueryObject[0]; // 转换jQuery对象为DOM对象 var dom2 = $jQueryObject.get...DOM对象属性方法，DOM对象也无法使用jQuery对象属性方法。...选取表单元素属性的过滤选择器 :enabled 选取所有可用元素 :disabled 选取所有不可用元素 :checked 选取所有被选中的元素，如单选框、复选框 :selected ...具体选中元素 l 表单操作 :checked :selected 选中表单选中元素配合基本过滤选择器，缩小选中的范围 4.jQuery的DOM操作使用jQuery的九种选择器可以基本选中需要操作的对象

6.6K13 0

JQuery常用命令

JQuery 对象方法的返回值一般还是当前选定的类数组对象，可以实现“链式调用” 7....基本过滤选择器 — 重点基本过滤选择器把所有满足选中的元素放在一个大集合中进行排序，不论是否在同一个父元素中与否，下标从 0 开始 (1). :first 第一个 (2)....内容过滤选择器 (1). :contains(txt) 文本中包含“txt”字的元素 (2). :has(selector) 包含选择器所匹配的元素的元素 (3)....JS 对象的 disabled、readyonly、selected、checked 等 Boolean 类型属性 data() 操作的是 HTML 元素对应的 JS 对象的扩展数据属性（对象缓存数据...JQuery 中的函数第三部分：动画函数 — 隐藏和显示动画隐藏和显示函数通过使用定时器修改目标元素的 width / height / opcaity 三个样式的值来实现动画 (1). $(..).

7.4K1 0

JQuery选择器和JQuery包装集

（本文年代久远，请谨慎阅读）今天学习了JQuery的一些基本用法，包括JQuery选择器和JQuery包装集；从现在开始，要慎重区分DOM对象和JQuery对象，两种对象的方法不同，属性不同，在使用中要特别注意...JQUERY选择器包括以下几种： 1、基础选择器 2、层次选择器 3、基本过滤器 4、内容过滤器 5、可见性过滤器 6、属性过滤器 7、子元素过滤器 8、表单选择器 9、表单过滤器下面列出几种重要的选择器...属性过滤器 $("div[id]")匹配包含给定属性的元素 $("input[name='...']") 匹配给定的属性是某个特定值的元素 name='...' $("input[name!...’+i);//arrDivp[i]是DOM对象，直接用$()转为JQuery对象后调用html方法； JQUERY包装集转DOM对象通过索引访问到的JQUERY包装集中的单个元素是DOM对象通过包装集的某些遍历函数...(htm|element|fnl)将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来，举例如上，将全部字符加粗；

4.3K2 0

jQuery 教程

jQuery 选择器基于元素的 id、类、类型、属性、属性值等”查找”（或选择）HTML 元素。...jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。...） width() 设置或返回被选元素的宽度 wrap() 在每个被选元素的周围用 HTML 元素包裹起来 wrapAll() 在所有被选元素的周围用 HTML 元素包裹起来 wrapInner() 在每个被选元素的内容周围用...AJAX 简介 AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。...CSS属性的对象 jQuery 杂项方法方法描述 data() 向被选元素附加数据，或者从被选元素获取数据 each() 为每个匹配元素执行函数 get() 获取由选择器指定的 DOM 元素 index

20.8K2 0

jQuery 选择器

jQuery网页脚本语言核心之一概述： 1. 选择器是jQuery的基础 2. 对事件处理，遍历DOM和Ajax操作都依赖于选择器 3. 可简化代码什么是jQuery选择器？...通过过滤选择呢亲选择元素 (1) 基本过滤选择器 (2) 可见性过滤选择器详解：通过css选择器选取元素 jQuery支持大多数css选择器最常用的有：基本选择器，层次选择器和属性选择器在jQuery...通过DOM之间的层次关系来获取元素 2. jQuery有四种常用的层次选择器： (1) 后代选择器 (2) 子选择器 (3) 相邻选择器 (4) 同辈选择器 ?..."的元素的情况通过条件过滤选取元素过滤：把不要的滤掉，留下需要的语法标识：（：）主要通过特定的过滤规则来筛选出所有的DOM元素同样：过滤规则与css中伪类语法相同，即选择器都以一个冒号（:）...冒号前是需要过滤的元素栗子：（1）a:hover 表示当鼠标指针移过元素时（2）Tr:visited 表示当鼠标指针访问过元素后经典栗子：实现列表隔行变色注意：奇偶过滤选择器

3.5K9 0

总结19道出现率高达98.9%的Vuejs面试题

说一下 Vue 的双向绑定数据的原理 vue 实现数据双向绑定主要是：采用数据劫持结合“发布者 - 订阅者”模式的方式，通过 Object.defineProperty() 来劫持各个属性的 setter...组件通信父组件向子组件通信子组件通过 props 属性，绑定父组件数据，实现双方通信。子组件向父组件通信将父组件的事件在子组件中通过 $emit 触发。...对比 jQuery ，Vue 有什么不同 jQuery 专注视图层，通过操作 DOM 去实现页面的一些逻辑渲染；Vue 专注于数据层，通过数据的双向绑定，最终表现在 DOM 层面，减少了 DOM 操作。...Vue 中怎么自定义过滤器可以用全局方法 Vue.filter() 注册一个自定义过滤器，它接收两个参数：过滤器 ID 和过滤器函数。过滤器函数以值为参数，返回转换后的值。...如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

3.5K2 1

Python全栈之jQuery笔记

DOM对象: 使用JS的方式获取的元素就是JS对象(DOM对象). jQuery对象: 使用jQuery的方式获取的元素就是jQuery对象....它们返回的是前面的同胞元素(在DOM树中沿着同胞之前元素遍历,而不是之后元素遍历). 4.jQuery遍历-过滤缩小搜索元素的范围: 三个最基本的过滤方法是:first(),last()和eq()....它们允许您基于其在一组元素中的位置来选择一个特定的元素....,不能给子元素注册,其实现原理为冒泡原理. 2.2 on注册事件(重点) jQuery1.7之后,jQuery用on统一了所有事件的处理方法....1.jQuery load()方法: load() 方法从服务器加载数据,并把返回的数据放入被选元素中.

6.6K4 0

谈谈我这些年对前端框架的理解

物理层依然是 dom，只是实现了数据到 dom 的自动映射之后，我们只需要在逻辑层写组件就可以了。...但是也不是说完全不需要 jquery，前端框架主要解决的是数据到 dom 的绑定，可以变化以后自动更新 dom。...如果不需要更新，那么直接操作 dom 即可，比如各种活动页，没啥数据更新，用 jquery 操作 dom 还是很方便。...而 vue 是实现了一套 template 的 DSL，引入了插值、指令、过滤器等模版语法，相对于 jsx 来说更简洁，template 的编译器由 vue 实现。...vue 就是基于数据的 watch 的，组件级别通过 Object.defineProperty 监听对象属性的变化，重写数组的 api 监听数组元素的变化，之后进行 dom 的更新。

1.2K1 0

JQuery最全常用方法指南

”) 匹配所有可见的元素属性过滤选择器 $(”div[id]”) 匹配所有具有指定属性的元素 $(”input[name =’newsletter’]”) 匹配所有具有指定属性值的元素 $(”input...2、jQuery对象与dom对象的转换只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是 jquery对象。...对于jquery对象只能使用jquery的方法，而dom对象只能使用dom的方法，如要获取第三个元素的内容。...有如下两种方法： $("div").eq(2).html(); //调用jquery对象的方法 $("div").get(2).innerHTML; //调用dom的方法属性 4、同一函数实现set和...这是jquery实现的继承方式。

13.1K3 1

谈谈我这些年对前端框架的理解

物理层依然是 dom，只是实现了数据到 dom 的自动映射之后，我们只需要在逻辑层写组件就可以了。...但是也不是说完全不需要 jquery，前端框架主要解决的是数据到 dom 的绑定，可以变化以后自动更新 dom。...如果不需要更新，那么直接操作 dom 即可，比如各种活动页，没啥数据更新，用 jquery 操作 dom 还是很方便。...而 vue 是实现了一套 template 的 DSL，引入了插值、指令、过滤器等模版语法，相对于 jsx 来说更简洁，template 的编译器由 vue 实现。...vue 就是基于数据的 watch 的，组件级别通过 Object.defineProperty 监听对象属性的变化，重写数组的 api 监听数组元素的变化，之后进行 dom 的更新。

1.1K2 0

Web前端JQuery面试题（二）

DOM对象，DOM为文本对象模型，DOM的每一个页面都是一个DOM对象。通过JavaScript方法获取页面元素的对象，就是DOM对象。...通过jquery自身的方法获取页面元素的对象，就是jquery对象。...jquery选择器有：基本选择器，层次选择器，过滤选择器，表单选择器四大类。...过滤选择器分6种：简单过滤选择器，内容过滤选择器，可见性过滤选择器，属性过滤选择器，子元素过滤选择器，表单对象属性过滤选择器。...wrap(elem): 将所有选择的元素用其他Dom元素包裹起来 wrap(fn) unwrap() 移除所选元素的父元素或包裹的标记 wrapAll(html),wrapAll(elem) wrapInner

2.7K3 0

01-老马jQuery教程-jQuery入口函数及选择器

install jquery 2.入口函数介绍 2.1window.onload事件的问题在之前DOM课中咱们已经说过用window的onload事件作为JS代码的入口，时机并不好。...* @return {undefined} 返回undefined */ document.myReady = function(callback) { // jQuery实现文档加载完成后...jQuery的1.x版本支持ie6~8浏览器，而且还支持丰富的CSS选择器选择元素。 3.2 id选择器 id选择器就是根据标签的id获取dom的包装对象。...这里简单说一点： jQuery包装对象本身是一个伪数组，选择器返回的所有的DOM元素都会存在jQuery的包装对象中，并且还有很多其他的jQuery特有的api。...ul下的所有li元素，包括孙子等 3.6 过滤选择器过滤选择器都带冒号语法用法描述 :first $('li:first'); 获取第一个元素 :last $('li:last'); 获取最后个元素

3.2K10 0

java学习与应用（4.6）--过滤器、监听器、JQuery、AJAX、JSON等

过滤选择器中，根据索引，过滤器等进行过滤。过滤器选中的元素后加的冒号进行过滤，表单转转等。...JQuery的DOM操作内容操作方法如：html获取标签体内容，text获取存文件内容，val获取属性value值。可以获取并修改其内容。...元素固有属性（手册中存在的属性）使用prop，操作自定义属性使用attr。...remove方法移除元素，empty清空所有元素的子元素。其他方法见jquery手册如clone方法。 JQuery的动画 JQuery的动画，遍历方法，事件绑定。动画使用见图片。...JSON基本规则：数据由键值对构成，键值用单引号或双引号也可以不使用引号，值类型为数字/字符串/逻辑值/数组/对象/null等。

6.9K1 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭