js 点击dom包含另一个dom

2024-11-07

js判断一个dom中是否包含另一个dom的方法

首先,比较原始(蠢)的方法 function isChildOf(child, parent) { if(child && parent) { let parentNode = child.parentNode; while(parentNode) { if(parent === parentNode) { return true; } parentNode = parentNode.parentNode; } } return false; } 这里 while 中判断其实在实际情况我们

Jquery 选择器详解 js 判断字符串是否包含另外一个字符串

Jquery 选择器详解在线文档地址:http://tool.oschina.net/apidocs/apidoc?api=jquery 各种在线工具地址:http://www.ostools.net/ 一.基本选择器 1 $("#div1").html("hello world 1"); //根据id匹配元素(a) 2 $(".c1").html("hello world 2"); //根据Yclass匹配元素(b)

js 判断字符串是否包含另外一个字符串

示例代码: <script type="text/javascript"> var str = "测试一个字符串(ehtrzes)是否包含另外一个字符串"; if (str.indexOf("(ehtrzes)") >= 0) { alert('字符串中包含(ehtrzes)字符串'); } else { alert('字符串中不包含(ehtrzes)字符串'); } </script> indexOf用法详解:

关于前端JS判断字符串是否包含另外一个字符串的方法总结

RegExp 对象方法 test() var str = "abcd"; var reg = RegExp(/d/); console.log(reg.test(str)); // true //test() 方法用于检索字符串中指定的值.返回 true 或 false. match() var str = "abcd"; var reg = RegExp(/d/); if(str.match(reg)){ // 包含 console.log(ture); //ma

廖雪峰js教程笔记11 操作DOM(包含作业)

由于HTML文档被浏览器解析后就是一棵DOM树,要改变HTML的结构,就需要通过JavaScript来操作DOM. 始终记住DOM是一个树形结构.操作一个DOM节点实际上就是这么几个操作: 更新:更新该DOM节点的内容,相当于更新了该DOM节点表示的HTML的内容: 遍历:遍历该DOM节点下的子节点,以便进行进一步操作: 添加:在该DOM节点下新增一个子节点,相当于动态增加了一个HTML节点: 删除:将该节点从HTML中删除,相当于删掉了该DOM节点的内容以及它包含的所有子节点. 在操作一个DO

如何判断一个js对象是否一个DOM对象

我们在写js代码时有时需要判断某个对象是不是DOM对象,然后再进行后续的操作,这里我给出一种兼容各大浏览器,同时又算是比较稳妥的一种方法. 要判断一个对象是否DOM对象,首先想到的无非就是它是否具有DOM对象的各种属性或特征,比如是否有nodeType属性,有tagName属性,等等.判断的特征越多,也就越可靠,因为毕竟我们自定义的js对象也可以有那些属性.还有其他方法吗? 在DOM Level2标准中定义了一个HTMLElement对象,它规定所有的DOM对象都是HTMLElement的实例,

JS中的函数、Bom、DOM及JS事件

本期博主给大家带来JS的函数.Bom.DOM操作,以及JS各种常用的数据类型的相关知识,同时,这也是JavaScript极其重要的部分,博主将详细介绍各种属性的用法和方法. 一.JS中的函数 [函数的声明及调用] 1.函数声明的格式: function 函数名(参数1,参数2,参数3,--){//函数体 return 结果; } >>>函数的调用格式: 直接调用:函数调用的格式:函数名(参数一的值,参数二的值,--): 事件调用:事件名=函数名( ); 2.函数声明的几点强调: ①函数名

一个DOM元素绑定多个事件时，先执行冒泡还是捕获

绑定在被点击元素的事件是按照代码顺序发生,其他元素通过冒泡或者捕获“感知”的事件,按照W3C的标准,先发生捕获事件,后发生冒泡事件.所有事件的顺序是:其他元素捕获阶段事件 -> 本元素代码顺序事件 -> 其他元素冒泡阶段事件 . 一个DOM元素绑定两个事件,一个冒泡,一个捕获,则事件会执行多少次,执行顺序如何. 首先来了解一下冒泡和捕获是怎么回事: 1.冒泡冒泡是从下向上,DOM元素绑定的事件被触发时,此时该元素为目标元素,目标元素执行后,它的的祖元素绑定的事件会向上顺序执行.如下代码所示,

从零开始的JS生活（二）——BOM、DOM与JS中的事件

上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举起了火把--BOM简介 BOM(Browser Object Model) 是指浏览器对象模型,在JS中BOM是个不折不扣的花心大萝卜,因为它有很多个对象,其中代表浏览器窗口的Window对象是BOM的"正室".也就是最重要的,其他对象都是正室的下手.或者叫侧室也不足为过. 2.细数BOM

随笔一个dom节点绑定事件

以下利用jquery说明: js中,给一个dom节点绑定事件再平常不过了.这里说下,如果dom经常发生变化的话,给这个dom绑定事件的情况. 比如代码如下: li的节点,绑定了事件:点击会打出来里头的html内容. button点击事件:会生成一个li节点. <html> <head> <meta charset="UTF-8"> </head> <body> <ul class="ul"> &

javascript获取dom的下一个节点方法

需求说明: 获取当前节点左节点或者右节点(兄弟节点): css: <style type="text/css"> a:focus { outline: none; } .panel { background: #69C7F7; height: 220px; display: none; } .slide { margin: 0; padding: 0; border-top: solid 4px #F27613; } .btn-slide { background: #F2

javascript中0级DOM和2级DOM事件模型浅析分类： C1_HTML/JS/JQUERY 2014-08-06 15:22 253人阅读评论(0) 收藏

Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用: <input type="button" onclick="alert('Button Click')" /> 当上面的button被点击后,会弹出一个框显示"Button Click". 在javascript中添加事件监听函数有多种方法,比如: 在html元素上 [xhtml] view

检测一个DOM对象是否为空

我们时常要检测一个DOM对象是否为空. var $jObject = $('#btn'); alert($jObject ); 我们会发现,$jObject 永远不会为空.为什么呢?$ 方法查找对象,始终都会返回一个jQuery 对象的. 解决办法: 我们就要把jQuery对象转换成js对象. ①var dom = $jObect[0]; alert(dom); ②if($jObect.length>0) {alert("not null!");}

一个DOM元素同时拥有多个类名时的样式产生冲突时属性取决于css样式表中后读取到的属性

如果一个DOM元素包含多个类名,其中的两个类名的属性产生冲突,并不是根据htnl中类名的顺序来决定DOM元素的属性, 而是根据css样式中的顺序来决定DOM元素的属性,它取决于css样式表中后读取到的属性. 例如: html <div class="function dropdown show"></div> css: .show{ display:block; } .hidden{ display:none; } div元素的display属性最终为block

你不需要 jQuery，但你需要一个 DOM 库

写这篇文章的目的,一方面是介绍一下自己编写的模块化 DOM 库 domq.js,另一方面是希望大家对 jQuery 有一个正确的认识,即使 jQuery 已经逐渐退出历史舞台,但是它的 API 将会以另外一种形式存在下去. GitHub:https://github.com/nzbin/domq 文档:https://nzbin.gitbooks.io/domq-api/usage.html jQuery 不会死去从 GitHub 放弃 jQuery,再到 Bootstrap 5 宣布移除 j

svg矢量图标在html中的使用, （知识点：1.通过h5中的css实现点击变色，2.一个svg文件包含多个图标)

svg矢量文件体积小,不变形,比传统的png先进,比现在流行的icon-font灵活.然而在使用过程中还是遇到了很多坑.今天花了一天时间把经验整理出来,以供后来者借鉴.如果您从本文收益,请留言mark一下. 这里我们要实现的功能是,一个svg文件包含多个图形,这样的好处是,网络请求次数少,加载快速.否则一个网页有10个图标就要请求10次. 一.制作svg 1.用记事本新建一个mysvg.svg , 里面内容如下 <svg xmlns="http://www.w3.org/2000/svg&

jQuary总结5:传递一个dom对象

1 传递一个dom对象 //html <div></div> <p id="p"></p> //js var p = document.getElementById('p'); $('div').append(p); //执行之后的结果 <div> <p></p> </div> //注意:也会有剪切的效果. 2 调用html方法 //html <div> div里面的文本 <

echarts.js:1136 Uncaught Error: Initialize failed: invalid dom.

一:错误描述:echarts.js:1136 Uncaught Error: Initialize failed: invalid dom. 二:错误原因:echarts在用json数据请求时未调用 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="shortcut icon" h

前端每日实战：35# 视频演示如何把 CSS 径向渐变用得出神入化，只用一个 DOM 元素就能画出国宝熊猫

效果预览按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/odKrpy 可交互视频教程此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, safari, edge 打开观看. https://scrimba.com/p/pEgDAM/cV7J6SK 源代码下载每日前端实战系列的全部源代码请从 github 下载: https://github.com/comehope

vue2.0点击其他任何地方隐藏dom

methods: { handleBodyClick(){ if (绿色区域出来了,要判断点击其他地方就要关闭,这样可以避免绿色区域已经关闭还在操作) { let _con = $(目标区域) if (!_con.is(e.target) && _con.has(e.target).length === 0) { // 点击目标区域外的时候关闭绿色区域 } } }, }, mounted () { document.addEventListener('click', this.handle

js 点击dom包含另一个dom

热门专题