javascript根据元素自定义属性获取元素,操作元素
写在前面:给某个或多个元素自定义属性data-tar,想获取data-tar='123'的元素来进行进一步的操作,如何实现?
function getElementByAttr(tag,attr,value)
{
var aElements=document.getElementsByTagName(tag);
var aEle=[];
for(var i=0;i<aElements.length;i++)
{
if(aElements[i].getAttribute(attr)==value)
aEle.push( aElements[i] );
}
return aEle;
}
window.onload=function()
{
var aDiv=getElementByAttr('div','data-id','123456');//返回data-id为123456的div集合
for(var i=0;i<aDiv.length;i++){
aDiv[i].style.backgroundColor='#ccc'; }}
1.定义函数getElementByAttr,该函数有三个参数tag,attr,value分别是标签 自定义属性 属性值
2.找出和目标元素同类型的元素存放在变量aElements中
3.定义个数组存放即将筛选出的元素
4.遍历同标签的元素,获取元素的自定义属性并进行判断
5.如果值等于目标元素的值,意味着元素找到
6.将符合条件的元素存放在数组中
7.如果没找到,直接return退出
8.函数调用,存放在另一个变量里,遍历循环,进行进一步操作
javascript根据元素自定义属性获取元素,操作元素的更多相关文章
- 从零开始学 Web 之 jQuery(二)获取和操作元素的属性
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- Robotium源码解读-native控件/webview元素的获取和操作
目前比较有名的Uitest框架有Uiautomator/Robotium/Appium,由于一直对webview元素的获取和操作比较好奇,另外Robotium代码量也不是很大,因此打算学习一下. 一. ...
- [Web 前端] 023 js 的流程控制、循环和元素的获取、操作
1. Javascript 流程控制 用于"基于不同条件执行不同的动作"的场合 1.1 if 语句 三种形式 // 第一种 if... // 第二种 if... else ... ...
- jquery1.11 操作checkbox:全选、取消全选、获取选择元素、获取取消选择元素(总结)
jquery1.11.1版本完成对checkbox的操作 1. 使用属性prop设置选中状态 2.使用:checked和:not(:checked)获取选中的元素 源码: <!DOCTYPE h ...
- JQ 获取下一个元素和获取下一个元素的[指定]子元素
<script type="text/javascript"> $(function () { $("#div1").next().addClass ...
- javascript 操作元素属性的方法
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 前端JavaScript入门——JavaScript变量和操作元素
变量JavaScript 是一种弱类型语言,javascript的变量类型由它的值来决定. 定义变量需要用关键字 ‘var’: var a = 123; var b = 'asd'; //同时定义多个 ...
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...
- jQuery学习笔记---兄弟元素、子元素和父元素的获取
我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...
随机推荐
- .9 png图片的制作
在android开发的过程中我们经常因为没有好的美工图片失真,这样使界面看起来要逊色很多,有的时候可能我们会想在drawable-hdpi,ldpi,mdpi下放不同分辨率的图片,这样虽然可以有效避免 ...
- 自己写RTPserver——大约RTP协议
自己写RTPserver--大约RTP协议 本文将带领你一步一步地实现一个简单的手RTP变速器server,旨在了解RTP流媒体传输协议以及有关多媒体编解码器的一些知识. RTP协议的必备知识 要动手 ...
- .NET Framework和C#版本历史概览
发布日期 .Net版本 C#版本 CLR版本 开发工具 功能介绍 2002 1.0 1.0 初始版本 Visual Studio .Net 初始版本 .NET框架结构,详见: 2003 1.1 ...
- Event notifications
SQL Server 事件通知(Event notifications) 2013-12-13 17:21 by 听风吹雨, 333 阅读, 3 评论, 收藏, 编辑 一. 背景 SQL Server ...
- windows下搭建Cygwin环境
windows下搭建Cygwin环境 在上一篇博文<Android学习——windows下搭建NDK_r9环境>中,我们详细的讲解了在windows下进行Android NDK开发环境的配 ...
- c# UDP/TCP协议简单实现(简单聊天工具)
长时间没有摸这两个协议,写个代码温习下 下面是界面 [服务器界面] [登陆界面] [好友列表界面(我登陆了2个)] [聊天界面] 下面大致讲解下用到的内容 1.用户登陆于服务器通信用到的tcp协议,服 ...
- ASP.NET网站单独
解决ASP.NET网站单独发布指定页面问题 目录 前提 开始 aspx.cs文件放到单独的类库项目 一个可选择勾选页面的发布工具:LimusicAddin 前提 Asp.net 发布分为:动态编译和预 ...
- 关于Jquery 序列化表单的注意事项
在JQuery 的serialize方法序列化表单的过程中,如果表单的name值最后有空格,会出现“+”号,查源码可见原因.这一小问题就浪费了半小时的时间,记录下来,备忘.
- touch事件分发
touch事件分发 IOS事件分发 我们知道,如果要一个view(就是view,不是UIControl控件)能够响应事件操作,通常的做法是给该View加上相应的手势,或者重写和touch(当然也可以是 ...
- poj1269
基础题,直线间关系 #include <iostream> #include <math.h> #include <iomanip> #define eps 1e- ...