首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JavaScript -基于1或2个选定标签返回所有项目的设置函数(无jQUERY)

JavaScript是一种广泛应用于前端开发的编程语言,它可以通过操作HTML和CSS来实现动态网页的交互效果。在这个问题中,我们需要基于1或2个选定标签返回所有项目的设置函数,而且不能使用jQuery。

首先,我们可以使用JavaScript的DOM操作来获取选定的标签。可以使用document.querySelector方法来选择一个标签,或者使用document.querySelectorAll方法来选择多个标签。这两个方法都接受一个选择器作为参数,返回匹配的元素。

接下来,我们可以使用addEventListener方法来为选定的标签添加事件监听器。事件监听器可以在特定事件发生时执行相应的函数。在这个问题中,我们需要为选定的标签添加点击事件监听器。

然后,我们可以编写一个设置函数,用于处理选定标签的设置。这个函数可以根据需要进行各种操作,例如修改标签的样式、添加或删除类名、修改标签的内容等。

最后,我们将设置函数作为事件监听器的回调函数,当选定的标签被点击时,设置函数将被调用。

以下是一个示例代码:

代码语言:txt
复制
// 获取选定的标签
var tags = document.querySelectorAll('标签选择器');

// 定义设置函数
function setFunction() {
  // 在这里编写设置函数的具体逻辑
}

// 为选定的标签添加点击事件监听器
tags.forEach(function(tag) {
  tag.addEventListener('click', setFunction);
});

在这个示例中,我们使用querySelectorAll方法选择了所有匹配的标签,并使用forEach方法为每个标签添加了点击事件监听器。当标签被点击时,setFunction函数将被调用。

请注意,这只是一个示例代码,具体的设置函数逻辑需要根据实际需求进行编写。另外,腾讯云提供了一系列与前端开发相关的产品和服务,例如云函数、云开发、CDN加速等,可以根据具体需求选择适合的产品。你可以访问腾讯云官方网站了解更多详情:腾讯云

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

jQuery选择器、Dom操作、样式、事件处理

实现一个目的需要很多步骤,使用原生js,就需要每个步骤都写出来,jQuery就把这些步骤打包封装进一个函数中,做成一个API,用户调用这个API,提供参数,就能一步实现目的,简洁高效。...该方法能够移除所有被选的事件处理程序,或者当事件发生时终止指定函数的运行。ubind() 适用于任何通过 jQuery 附加的事件处理程序。...on() 方法在选定的元素上绑定一个多个事件处理函数,提供绑定事件处理的所有功能。...callback:显示隐藏后执行的函数 opacity:透明度(0~1) $('#btn-box1').on('click',function(){ $('.box')....当该方法用于返回属性值时:返回第一个匹配元素的值。 当该方法用于设置属性值时:为匹配元素设置一个多个属性/值对。

2K30

什么是jQuery

; //如果是#号的话 if("#" == first){ //获取#号之后的所有字符串 var end = str.substring(1,str.length...目的:通过九类选择器,能定位web页面(HTML/JSP/XML)中的任何标签1)基本选择器 直接定位id、类修修饰器、标签 (2)层次选择器 有父子,兄弟关系的标签 (3)增强基本选择器 大于、小于...,true表示有样式,false表示样式 toggleClass():如果标签有样式就删除,否则增加样式 动画效果 往这些方法下设置参数,那么就可以控制它的隐藏、显示时间 show():显示对象 hide...HTMLXML标签之间的值 text(""):设置HTMLXML标签之间的值为""空串 html():得到标签下HTML的值 **attr(name,value):给符合条件的标签添加key-value...: 回调函数中参数一:backData表示返回的数据,它是js对象 回调函数中参数二:textStatus表示返回状态的文本描述,例如:success,error, 回调函数中参数三:xmlHttpRequest

3K70
  • 最常见的 20 个 jQuery 面试问题及答案

    jQuery 代码:$("div"),这样会返回一个包含所有 5 个 div 标签jQuery 对象。更详细的解答参见上面链接的文章。   ...鉴于这个好处,用 jQuery ready() 函数比用 JavaScript window.onload 事件要更好些。   7. 如何找到所有 HTML select 标签的选中?...你可以传一个函数给 each() 方法,被调用的 jQuery 对象会在其每个元素上执行传入的函数。有时这个问题会紧接着上面一个问题,举个例子,如何在 alert 框里显示所有选中。...jQuery 代码:$("div"),这样会返回一个包含所有 5 个 div 标签jQuery 对象。更详细的解答参见上面链接的文章。   ...鉴于这个好处,用 jQuery ready() 函数比用 JavaScript window.onload 事件要更好些。   7. 如何找到所有 HTML select 标签的选中

    13.8K30

    JQuery常用命令

    1. DOM 分为三部分 (1). 核心 DOM:操作任意标签树 (2). HTML DOM:操作 HTML 标签树 (3). XML DOM:操作 XML 标签树 2....JQuery 对象方法的返回值一般还是当前选定的类数组对象,可以实现“链式调用” 7....JQuery 类数组对象的操作: window.$ window.Jquery $()函数 JQuery()返回值是一个“类数组象”— 有点像数组,但不是 Array 类型的实例,其中封装着查找到的所有...JQuery 对象插件函数 JQuery 对象插件函数就是为所有jQuery 对象添加的公共函数,用于操作当前选定的 DOM 元素 声明方式:JQuery.fn.max = function( ){...} 调用方式:$('li').max() JQuery(..) $(..)的返回值是一个类数组对象—“JQuery 对象”,所有JQuery 对象的原型:JQuery.fn; 若想给所有JQuery

    6.4K10

    Juqery就是这么简单

    目的:通过九类选择器,能定位web页面(HTML/JSP/XML)中的任何标签 匹配表单属性具体的值 匹配表单对应的控件属性 匹配父标签下的子标签 与属性的值相关 可见不可见的标签 定义内容为XXX、...,true表示有样式,false表示样式 toggleClass():如果标签有样式就删除,否则增加样式 动画效果 往这些方法下设置参数,那么就可以控制它的隐藏、显示时间 show():显示对象 hide...HTMLXML标签之间的值 text(""):设置HTMLXML标签之间的值为""空串 html():得到标签下HTML的值 **attr(name,value):给符合条件的标签添加key-value...: 回调函数中参数一:backData表示返回的数据,它是js对象 回调函数中参数二:textStatus表示返回状态的文本描述,例如:success,error, 回调函数中参数三:xmlHttpRequest...="java" %> 2 3 4 省份-城市,基于jQuery的AJAX二级联动 5 <script type="text/<em>javascript</em>

    2.3K50

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

    ")选取所有的多选框 $(":file")选取所有的上传按钮 $(":butten")选取所有的按钮 11.过滤器 注意 : jQuery 对象中存储的 DOM 对象顺序与页面标签声明位置关系 jQuery...有参形式调用;对数组中所有 DOM 对象的 value 属性值进行统一赋值 13.1.2 text函数 操作数组中所有 DOM 对象的【文字显示内容属性】 $(选择器).text() : 参数调用,读取数组中所有...选择器).append(" 我动态添加的 div ") 可以增加任意的页面元素 13.2.6 html函数 设置返回被选元素的内容(相当于JS中innerHTML)。...注意:以下设置的内容是书写代码时标签中的在网页显示文本内容,而不是设置网页上显示的内容。...$(选择器).html(值):有参数调用,用于设置 DOM 数组中所有元素的在网页上显示的文本内容。

    5.9K10

    jquery面试题目_高并发面试题

    1. jQuery 库中的 $() 是什么?(答案如下) () 函数jQuery() 函数的别称,乍一看这很怪异,还使 jQuery 代码晦涩难懂。一旦你适应了,你会爱上它的简洁。...jQuery 代码:$(“div”),这样会返回一个包含所有 5 个 div 标签jQuery 对象。更详细的解答参见上面链接的文章。...鉴于这个好处,用 jQuery ready() 函数比用 JavaScript window.onload 事件要更好些。 7. 如何找到所有 HTML select 标签的选中?...你能用下面的 jQuery 选择器获取所有具备 multiple=true 的 标签的选中: $('[name=NameOfSelectedTag] :selected') 这段代码结合使用了属性选择器和...你可以传一个函数给 each() 方法,被调用的 jQuery 对象会在其每个元素上执行传入的函数。有时这个问题会紧接着上面一个问题,举个例子,如何在 alert 框里显示所有选中

    9.4K10

    JavaScript强化教程——jQuery 核心

    找出所有属于 div 元素的子元素的 p 元素,然后设置其边框属性: [code]$("div > p") .css("border", "1px solid gray");[/code] 定义和用法...: jQuery( callback ) 详细用法 jQuery( selector, [ context ] ) 该语法有以下几种用法:用法 1设置选择器环境语法 jQuery([i]selector...jQuery 的核心功能都是通过这个函数实现的。jQuery中的一切都基于这个函数,或者说都是在以某种方式使用这个函数。...用法 4 :返回空的集合语法 jQuery() 对于 jQuery 1.4,调用参数的 jQuery() 方法会返回空的 jQuery 集合。...") $(""),jQuery 会通过内生的 JavaScript createElement() 函数来创建元素。 要确保跨平台兼容性,片段的结构必须良好。

    1.1K20

    jquery的html,text,val

    .html()用为读取和修改元素的HTML标签 .text()用来读取修改元素的纯文本内容 .val()用来读取修改表单元素的value值。...这三个方法功能上的对比 .html(),.text(),.val()三种方法都是用来读取选定元素的内容;只不过.html()是用来读取元素的HTML内容(包括其Html标签),.text()用来读取元素的纯文本内容...,也就是在返回的内容中会包含各种tag,而text()则相当于是依据页面显示返回返回的内容是出去各种tag之间的内容 html属性中有两个方法,一个有参,一个参        1....2.有参text(val):设置所有匹配元素的文本内容,与 html() 类似, 但将编码 HTML (将 "" 替换成相应的HTML实体).返回一个jquery对象 html页面代码: ] 最后,val()属性中也有两个方法,一个有参,一个参。        1.参val():获得第一个匹配元素的当前值。在 jQuery 1.2 中,可以返回任意元素的值了。

    1.9K50

    前端无法让我冷静

    行内标签和块标签有哪些以及都有什么特点 块标签 每一个块属性标签都是从新的一行开始,而且之后的元素也都会从新的一行开始 可以设置宽度、高度,行高,距顶部距离,距底部距离 块属性标签的宽度假如不做设置,会直接默认为父元素宽度的...,prototype是什么,什么时候用 prototype对象是实现面向对象的一个重要机制 在JavaScript中没有类的概念,都是函数 1.原型和原型链是JS实现继承的一种模型。...参数方式是不一样的 各大浏览器的内核总结 JavaScript中split()和join()的区别 split()用于分割字符串,返回一个数组 join()用于连接多个字符字符串 数组方法push(...pop()用于移除数组末尾的最后一,然后返回移除的 unshift:将参数添加到原数组开头,并返回数组的长度 shift():删除原数组第一,并返回删除元素的值 HTTP协议的理解、TCP/IP三次握手...load是当页面所有资源全部加载完成后 2.ready()是当DOM文档树加载完成后执行一个函数 谈谈你对es6箭头函数的理解 在函数被传递后, 如果使用了箭头函数, this 最终将指向其定义处上下文的

    2.5K40

    求职 | 史上最全的web前端面试题汇总及答案2

    null是一个表示""的对象,转为数值时为0;undefined是一个表示""的原始值,转为数值时为NaN。 undefined: (1)变量被声明了,但没有赋值时,就等于undefined。...(2) 调用函数时,应该提供的参数没有提供,该参数等于undefined。 (3)对象没有赋值的属性,该属性的值为undefined。 (4)函数没有返回值时,默认返回undefined。...html代码; ④innerText代表一个元素节点内由所有子文本节点内容组成的文本; 17、在JavaScript中定时调用函数 foo() 如何写?...它最早出自Netscape Navigator2.0,其目的是防止某个文档脚本从多个不同源装载。 这里的同源策略指的是:协议,域名,端口相同,同源策略是一种安全协议。...9、解释jsonp的原理,以及为什么不是真正的ajax ①Ajax与JSONP这两种技术看起来很像,目的也一样,都是请求一个url,然后把服务器返回的数据进行处理,因此jQuery等框架都把JSONP作为

    6.1K20

    awesome-javascript-cn

    官网 JavaScript-Templates:轻量(小于 1KB)、快速且依赖的强大 JavaScript 模版引擎。...官网 accounting.js:对数字、金钱、货币进行格式化的轻量库——完全本地化和依赖。官网 money.js:一个小巧(1kb)的货币转换库,适用于 web 和 nodeJS。...官网 sly:基于导航的、支持单向滚动的 JavaScript 库。官网 vegas:向页面添加漂亮的全屏背景的 jQuery 插件,甚至允许幻灯片。...它基于jQuery,拥有自动完成和键盘感应下拉列表功能,可用于标签、联系人列表等。官网 select2:它基于 jQuery,是选择框(select box)的替代品。支持搜索、远程数据集和无限滚动。...html5media:能在所有主流浏览器播放多媒体标签中定义的多媒体文件。

    10.7K80

    jQuery

    value属性的值 jQueryjavaScript的区别 1.注意事项: 使用jQuery的方式获取的对象称为jQuery对象; jQuery对象本质上是js对象数组; 使用dom的方式获取的对象称为...方式1:jQuery对象[index] 方式2:jQuery对象.get(index) 3.在3.0版本后jQuery的页面加载成功事件顺序,是随机的 jQuery2.0前(不含2.0)如1.11版本用的多...i:j; } }); 3.validate插件 使用方式: 1.导入jquery.jsvalidate是基于jquery写的,所以要先导入jquery的js文件 2.再导入validate.js...八:Ajax&jQuery Ajax 1.原生ajax(javaScript): 1.创建ajax引擎(已被浏览器内置) 2.编写onreadystatechange函数 3.确定请求方式和路径...data:请求参数 | success:请求成功后的回调函数 error:请求失败时调用此函数 | dataType:服务器返回的数据类型 一般不需要自己设置,如果需要设置一般设置为 "json" async

    4.3K20

    前端面试题

    使用空标签清除浮动。这种方法是在所有浮动标签后面添加一个空标签定义css clear:both.弊端就是增加了无意义标签。 使用overflow。...this永远指向函数运行时所在的对象,而不是函数被创建时所在的对象。匿名函数不处于任何对象中的函数指向window 。 1.如果是call,apply,with,指定的this是谁,就是谁。...JavaScript的最初版本是这样区分的:null是一个表示””的对象,转为数值时为0;undefined是一个表示””的原始值,转为数值时为NaN。...null:表示值;undefined:表示一个未声明的变量,已声明但没有赋值的变量,一个并不存在的对象属性。 ==运算符将两者看作相等。如果要区分两者,要使用===typeof运算符。...先熟悉语法,并开始在你的所有Jquery 1.7版本以上的项目使用它吧!

    1.6K10

    前端

    行内标签和块标签有哪些以及都有什么特点 块标签 每一个块属性标签都是从新的一行开始,而且之后的元素也都会从新的一行开始 可以设置宽度、高度,行高,距顶部距离,距底部距离 块属性标签的宽度假如不做设置...,prototype是什么,什么时候用 prototype对象是实现面向对象的一个重要机制 在JavaScript中没有类的概念,都是函数 1.原型和原型链是JS实现继承的一种模型。...image.png JavaScript中split()和join()的区别 split()用于分割字符串,返回一个数组 join()用于连接多个字符字符串 数组方法push()、pop()、unshift...pop()用于移除数组末尾的最后一,然后返回移除的 unshift:将参数添加到原数组开头,并返回数组的长度 shift():删除原数组第一,并返回删除元素的值 HTTP协议的理解、TCP/IP...load是当页面所有资源全部加载完成后 2.ready()是当DOM文档树加载完成后执行一个函数 谈谈你对es6箭头函数的理解 在函数被传递后, 如果使用了箭头函数, this 最终将指向其定义处上下文的

    2K41

    jQuery中常用的函数和属性详细解析

    end()用于返回到调用find() parents() 函数(或者其它遍历函数)之前的 jQuery 对象 例子 $("#div1").find("p").hide().end().hide()...第一个hide()是对于p标签的 然后用end()结束对p标签的引用而返回到#div1标签 所以第二个hide()是对于#div1起作用的 如果不加end() 则两个hide()都是对p标签起作用 filter...label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签所有input标签元素 $("#prev ~ div") 同胞选择器,该选择器返回的为id为prev...( array, callback, [invert] ) 通过一个筛选函数来去除数组中的 $.grep( [0,1,2], function(n,i){ return n > 0; }); jQuery.makeArray...( array, callback ) 使用某个方法修改一个数组中的,然后返回一个新的数组 jQuery.inArray( value, array ) 返回value在数组中的位置,如果没有找到,则返回

    2.6K10

    一个小时学会jQuery

    开发出来的方法就是通过使用选择器—基于元素的属性元素在HTML文档中的位置,简明地表现元素。 例如,选择器:p a 引用所有嵌套于元素之内的超链接(元素)组。...而jQuery方法与CSS相同,指定需要操作的标签名即可操控所有标签。.../遍历一个数组对象,for循环 $.inArray() //返回一个值在数组中的索引位置,不存在返回-1 $.grep()   //返回数组中符合某种标准的节点 $.extend({a:1,b:2}...AJAX应用可以仅向服务器发送并取回必需的数据,它使用SOAP其他一些基于XML的Web Service接口,并在客户端采用JavaScript处理来自服务器的响应。...如果指定为json类型,则会把获取到的数据作为一个JavaScript对象来解析,并且把构建好的对象作为结果返回。为了实现这个目的,他首先尝试使用JSON.parse()。

    18.5K71

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭
      领券