首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

JavaScript中DOM查询封装函数

在JavaScript中可以通过BOM查询html文档中的元素,也就是所谓的在html中获取对象然后对它添加一个函数。...常用的方法有以下几种: ①document.getElementById() 通过元素ID在全局查找元素 ②document.getElementsByTagName() 通过元素标签名字在全局查找元素...className在全局查找元素 element.getElementsByClassName() 通过元素标签的className在指定元素内部查找元素 但是很多实际情况下,用这三种方法不是很方便...,很多时候需要多次调用,就晓得有点麻烦,代码量也有点大,所以这个时候我们就需要将查询函数封装成一个函数。...var result = document.getElementsByTagName("html"); 上面的代码中我们获取了html中最外层的标签标签 然后将接收到的字符串按照空格分隔为一个数组

60740

JavaScript图片库

被调用的JavaScript就会返回一个值,这个值将被传递给那个事件处理函数。...) 但是这个事件只能绑定一个函数,如果再次绑定原先的事件会被覆盖掉.所以这个方法就是将页面加载完毕之后需要的函数创建一个队列,然后将需要执行的函数一个个添加 到队列里面; @param func -需要添加到队列里面的函数...}; } } /* addOnloadEvent的扩展版因为每次添加一个函数都需要调用addOnloadEvent()函数,所以为了节省代码,将需要绑定的函数名写入到一个数组里面...targetElement) { /* 编写逻辑 1、首先找到给出我们需要插入的元素和用来定位的目标元素 2、根据目标元素找到两个元素的父元素 3、判断目标元素是不是父元素内的唯一的元素.... 4、如果是,向父元素执行追加操作,就是appendChild(newElement) 5、如果不是,向目标元素的之后的紧接着的节点之前执行inserBefore()操作 */

3.7K60

前端基础-节点操作

,将其作为最后一个子节点,插入当前节点; node.hasChildNodes() 返回一个布尔值,表示当前节点是否有子节点 node.removeChild() 接受一个子节点作为参数,用于从当前节点移除该子节点...alt="美女" id="im" width="300" height="400" /> //根据id获取按钮,注册点击事件,添加事件处理函数 document.getElementById...p //点击按钮,设置p的内容 //根据id获取按钮,注册点击事件,添加事件处理函数 document.getElementById("btn").onclick...("标签的名字"); //点击按钮,修改所有的p的内容 //根据id获取按钮,注册点击事件,添加事件处理函数 document.getElementById("btn").onclick...("input"); for(var i=0;i<inputs.length;i++){ //判断当前input是不是文本框 if(inputs[i].type=="text

4.2K10

面试官:为什么data属性是一个函数不是一个对象?

一、实例和组件定义data的区别 vue实例的时候定义data属性既可以是一个对象,也可以是一个函数 const app = new Vue({ el:"#app", // 对象格式...} } }) 组件中定义data属性,只能是一个函数 如果为组件data直接定义为一个对象 Vue.component('component1',{ template:`组件...警告说明:返回的data应该是一个函数在每一个组件实例中 二、组件data定义函数与对象的区别 上面讲到组件data必须是一个函数,不知道大家有没有思考过这是为什么呢?...... } 定义data会进行数据校验 源码位置:/vue-dev/src/core/instance/init.js 这时候vm实例为undefined,进入if判断,若data类型不是...(根实例是单例),不会产生数据污染情况 组件实例对象data必须为函数,目的是为了防止多个组件实例对象之间共用一个data,产生数据污染。

3.1K10

JS-获取class类名为某个的元素-【getClass】函数封装

源码 1 1 function getClass(oParent,clsName){ 2    var oParent = document.getElementById(oParent);...boxArr.push(oElements[i]); 8 7 } 9 8 } 10 9 return boxArr; 11 10 } 函数调用...("ul1"); //获取到需要的找class的父元素 var oLi = getByClass(oUL,"li_box"); //让子元素们等于函数返回来的那个数组。...其实直接用getElementsByTagName获取到的也是一个元素集合。现在直接等于一个数组,能用的方法和属性则更多了呢!顺便调用函数并传参。参数是父元素的变量和需要找的类名。...这里,在boxArr.push那里,原来想错了,写的classNameArr[j],后来发现,boxArr最后是一个字符串数组,并不是元素数组,所以改成oElements[i]就可以了。

5K80

统计函数与通配符相爱,不是意外!

但是统计函数和通配符相爱,却是一种必然! 统计函数何许人也:Sumif、Countif、AverageIf、Sumifs、Countifs、Averageifs,概括一下他们的用法!...我有一个手机型号的销售列表,想统计红米手机的销售数量!怎么实现呢? ?...就是可以变身为任何一个你想要的植物的那个东东! 通配符可以让两个不等的文本假装相等! 比如 文本一:小编最帅啦 文本二:小编最帅 两个文本少了一个“啦”字 原本不等,如何变得相等呢?...文本一:小编最帅啦 文本二:小编最帅&“*” 一个是原始文本,一个是文本后面加上了通配符,则两个文本就变得相等了! 通配符星号,问号用法相同,只不过一个是有长度限制,一个没限制,各位灵活应用即可!...因为前面一个“*”可以变身为“Xiaomi/小米 ” 后面一个“*”变身为“Note2 千元旗舰” 所以两者相等了! 就酱紫! 统计函数与通配符的搭配使用,可以大大拓展统计函数的应用场景!

2.6K60

js动画效果大全_jquery 动画

在这里我们定义一个JavaScript中一个实用的函数以便今后的设置。 动画基础 (1)定时器setTimeout 动画的设置是在一个连续间隔的时间内,变换关键帧,在人眼的视觉暂留下连续起来。...第一个参数是要执行函数的名字,第二个参数则是一个数值,表示间隔的时间长短: 使用方法:setTimeout(“function()”,interval) window.onload=setTimeout...我们要注意一个问题,就是elem.style属性是elem标签的内联样式,而不是css中的id,class中的属性。... (2)DOM初始化 我们定义一个初始化的函数,用这个函数给style属性初始化,或者直接在moveElement函数内部初始化...document.getElementsByTagName) return false; if(!document.getElementById) return false; if(!

12.2K10

JavaScript绑定事件的三种方式

= document.getElementsBytagname("input")[0]; bt.onclick = function(){ alert(2) } bt.onclick =...以下是W3C官网的一个话 ? 三个参数: 事件类型,不需要添加上on 事件函数 是否捕获(布尔值),默认是false,即不捕获,那就是冒泡。 那么捕获和冒泡又是什么呢?...如果要取消一个使用addEventListener绑定的事件函数,使用removeEventListener可以移除事件。 ? 与添加事件一致。不过如果使用这个,最好把这个函数给单离拿出来。...li标签添加一个点击事件,弹出每一个li的索引值,初学者可能会使用for循环的方式来添加: var oLis = document.getElementsByTagName("li"); for...oLis.length; i++) { (function(i){ addEvent(oLis[i],"click",function(e){ alert(i) }) })(i) } 但是以上两种都不是一个最好的方法

58930

JavaScript 学习总结

全局变量:不定义在任何一个函数里,可以在任何地方使用(尽量不要使用全局变量) 什么是闭包 子函数可以使用父函数中的局部变量 实例:隔行变色(aLi相当于数组,aLi.length是表示数组里面有多少元素...  ()      (.js) 文本转换为数字的方法     parseInt     parseFloat 原理:从最左侧的字符开始,到第一个不是数字的字符为止...(即使文本中包含非数字,也可以转化)     当不能转化时,返回一个NaN 判断NaN的方法: 使用isNaN()函数 第二章,程序流程控制,数组,函数 1,什么是真、什么是假: 真:true、非零数字...shift:从数组头部删除一个元素 unshift:向数组头部添加一个元素 sort:排序 排序规则:字母序对字符串进行排序 比较函数 concat:连接两个数组 split:解析字符串为数组 join...函数的返回值 没有return/return ;:undefined 规则:令一个函数只返回一种类型的值 函数的参数 一般的参数: 参数类型 参数个数 arguments:参数数组,可变参,不定参 例子

1.4K40
领券