javascript自定义属性的应用

你知道吗?JavaScript可以为任何HTML元素添加任意的自定义属性,而且你可能无意中已经使用过自定义属性了,那么自定义属性通常有哪些应用呢? 1.想用“匹配”.对应关系的时候就用索引值 2.同时控制多组元素 3.开关切换,多组元素开关的切换就总结到这里,下面来看看几个例子吧 JavaScript自定义属性索引值: HTML: <input type="button" value="btn1"> <input type="butto…

让 JavaScript 与 CSS 和 Sass 对话

JavaScript 和 CSS 已经并存超过了 20 年.但是在它们之间共享数据非常困难.当然也有大量的尝试.但是我所想到的是一些简单而直观的内容——不涉及结构更改,而是使用 CSS 自定义属性甚至 Sass 变量. CSS 自定义属性和 JavaScript 自定义属性在这里应该不会令人感到惊讶.自浏览器提供支持以来,他们一直在做的一件事就是与 JavaScript 协同工作以设置和操作值. 不过具体来说,我们可以通过几种方式使 JavaScript 与自定义属性一起工作.可以使用 setP…

javascript:DOM自定义属性的妙用

虽然HTML元素的属性已经十分丰富,但在某些场合下,元素固有的属性无法完成我们的需求: 这个时候,自定义属性就会让问题解决起来比较方便. 比如,下面的栗子: 多张图片点击变化事件:当背景图片为a.jpg时,点击图片时,切换成b.jpg; HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义属性</…

javaScript数组的三种属性—数组索引、数组内置属性、数组自定义属性

JS数组也是一种对象. 我们用JavaScript处理的所有东西,都可以视为是一种对象. JavaScript中有两种数据类型,基本类型数对象类型,但是基本类型基本都是包括在对象类型之中的. 数组.函数.Date在JavaScript中都是预定义的对象,它们内部都包含了方法.属性和各自的标准化句法. JavaScript数组有以下三种不同的属性:1 数组的索引也是其属性2 内置属性3 你可以自己添加自定义属性前两种属性是大家比较熟知的,你可能每天都在使用,但是我还是想在这里简单的多说两句,然后再…

JavaScript: 高级技巧: window 对象也可以添加自定义属性

JavaScript: 高级技巧: window 对象也可以添加自定义属性例如 window.ntName = 'a';例如 window.ntXw = top; 优点是, window 无须等加载完毕, 任何时候都可以调用, 如果是页面元素和变量, 就需要小姐加载完毕才能使用例如在 lhg: 中父页面dlg_XXX.ShowDialog(); dlg_XXX.inwin.nt调用父窗口 = window; 子页面alert( window.nt调用父窗口.location.href );…

javaScript 对象的hasOwnProperty方法打印window自定义属性

for (var name in window) { if (window.hasOwnProperty(name)) { window.console.log ( name + " : " + window[name]); } else { //alert(name); // toString or something else }} javaScript 对象的hasOwnProperty方法打印window自定义属性…

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)…

javascript中的自定义属性

标签的自定义属性: 在开发中,有时需要在标签上添加一些自定义属性用来存储数据或状态. 设置了自定义属性的标签,就是在这个标签上添加了这个属性,浏览器中的html结构中可以看到. 使用点语法(如oWrap.mygod="哈哈")设置的自定义属性,在html结构中并不能直接看到,但该属性实际已经存在于该标签的属性集合列表,如下图所示: var oW=document.getElementById('wrap'); oW.mygod="hi"; 利用这个特性,可以很方便的…

JavaScript数组自定义属性

我们可以以json键值对的形式自定义属性. 首先定义一个JS数组JSarray. 然后按json键值对的形式进行赋值. 最后在控制台显示结果. 代码如下: var JSarray = new Array(); for(var i = 0;i<5;i++){ JSarray[i] = { arr1:"text"+i, arr2:"text"+i, arr3:i } console.log(JSarray[i].arr1); console.log(JSarray…

自定义属性--JavaScript

1 - 获取属性值 element.属性获取属性值 element.getAttribute('属性') 区别: element.属性 --获取内置属性(元素本身自带的属性) element.getAttribute('属性'); --主要获得自定义的属性(标准) 程序员自定义的属性 code-1: <div id="demo" index="1" class="nav"></div> <script> va…

JavaScript的自定义属性（事件内获得事件外的变量值）

写轮播图点击下方圆点banBtnLi[i],切换到第i个图片banBtnLi是按钮集合,假设banBtnLi.length是4banImhLi是装图片的li,自然banImgLi.length也是4点击banBtnLi[i]先清空所有banBtnLi和banImgLi 的class,再给相应的banBtnLi和banImgLi加上class因为在function中获取不到外层for中的i值,所以要定义一个banBtnLi的属性banBtnLi.index,把i的值赋给它,在onmouseover…

JavaScript Object对象

目录 1. 介绍:阐述 Object 对象. 2. 构造函数:介绍 Object 对象的构造函数. 3. 实例属性:介绍 Object 对象的实例属性:prototype.constructor等等. 4. 实例方法:介绍 Object 对象的实例方法: hasOwnProperty.isPrototypeOf.propertyIsEnumerable等等. 5. 静态方法:介绍 Object 对象的静态方法:Object.create().Object.defineProperties()等等…

JavaScript权威指南 - 数组

JavaScript数组是一种特殊类型的对象. JavaScript数组元素可以为任意类型,最大容纳232-1个元素. JavaScript数组是动态的,有新元素添加时,自动更新length属性. JavaScript数组元素索引可以是不连续的,它们之间可以有空缺. 1.创建数组调用构造函数Array()创建数组: var a = new Array(); //空数组,等同于数组直接量[] var b = new Array(5); //创建指定长度的数组 var c = new Array(…

javascript运动系列第一篇——匀速运动

× 目录 [1]简单运动 [2]定时器管理 [3]分享到效果[4]移入移出[5]运动函数[6]透明度[7]多值[8]多物体[9]回调[10]函数完善[11]最终函数前面的话除了拖拽以外,运动也是javascript动画的一个基本操作.通过CSS属性transition和animation可以实现运动.但是,要进行更精细地操作,javascript运动是必不可少的.本文将详细介绍javascript运动简单运动让一个元素在页面中运动起来很简单,设置定时器,改变定位元素的left或top值即…

JavaScript面向对象

理解对象对象这个词如雷贯耳,同样出名的一句话:XXX语言中一切皆为对象! 对象究竟是什么?什么叫面向对象编程? 对象(object),台湾译作物件,是面向对象(Object Oriented)中的术语,既表示客观世界问题空间(Namespace)中的某个具体的事物,又表示软件系统解空间中的基本元素. 在软件系统中,对象具有唯一的标识符,对象包括属性(Properties)和方法(Methods),属性就是需要记忆的信息,方法就是对象能够提供的服务.在面向对象(Object Oriented)的…

Javascript不同浏览器差异及兼容方法

原文链接:http://caibaojian.com/js-ie-different-from-firefox.html javascript的各种兼容就是为了解决不同浏览器的差异性,了解其中的差异能够帮助你更快的解决问题,提高代码的使用质量,编写更优秀的javascript代码. 1.window.event 表示当前的时间对象,IE有这个对象,FF没有,FF通过给事件处理函数传递事件对象 2.获取事件源 IE用srcElement获取事件源,而FF用target获取事件源以上两个兼容通常会…

HTML 学习笔记 JavaScript（面向对象）

现在让我们继续跟着大神的脚步前进学习一下JavaScript中的面向对象的思想,其实作为一个iOS开发者,对面向对象还是比较熟悉的,但是昨晚看了一下Js中的面向对象,妈蛋一脸萌比啊.还好有大神.让我们跟着大神的思路在捋一下.(在这里更欢迎大家阅读原博 )原博地址:http://www.cnblogs.com/dolphinX/p/4385862.html 理解对象对象这个词如雷贯耳,同样出名的一句话:XXX语言中一切皆为对象! 对象是什么?什么觉面向对象的编程? 对象(object),台湾…

javascript中一些常见的兼容性问题

下面是一些Javascript的IE和Firefox(火狐)兼容性的常用例子 1. document.formName.item("itemName") 问题说明:IE下,可以使用document.formName.item("itemName")或document.formName.elements["elementName"]; Firefox下,只能使用document.formName.elements["elementNam…

防御CSRF的方法有哪些（一） HTTP 头中自定义属性并验证 CSRF跨站域请求伪造攻击

CSRF (Cross Site Request Forgery, 跨站域请求伪造)是一种网络的攻击方式,该攻击可以在受害者毫不知情的情况下以受害者名义伪造请求发送给受攻击站点,从而在并未授权的情况下执行在权限保护之下的操作,有很大的危害性. CSRF 攻击实例 CSRF 攻击可以在受害者毫不知情的情况下以受害者名义伪造请求发送给受攻击站点,从而在并未授权的情况下执行在权限保护之下的操作. 比如说,受害者 Bob 在银行有一笔存款,通过对银行的网站发送请求 http://bank.example…

EXT.NET 使用总结（2） ---TreePanel(带右键菜单，节点自定义属性)

TreePanel(带右键菜单,节点自定义属性) 其实这个树控件也挺好用的.http://www.ztree.me/v3/main.php#_zTreeInfo html <ext:Panel ID="ContentPanel" runat="server" Width="960" MinHeight="560" Height="560" Border="false" Closab…

Javascript学习记录——原生JS实现旋转木马特效

昨天学习到了JS特效部分,然后老师讲了旋转木马特效的实现,如上图.不过只是讲了通过点击箭头实现图片的切换,对于点击图片本身以及二者联动却是没有讲解. 本着一颗追求完美的心,今天花费了一个中午终于将整个功能全部完善(死了太多脑细胞~~). 接下来直接进入主题哈~(主要讲解JS,所以对其中的HTML及CSS不做详细说明.) 首先是HTML代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset…

常用html、CSS、javascript前端命名规范

无论是从技术角度还是开发视角,对于web前端开发规范文档都有一定规范,本文就css3和html5的发展前景总结了一系列的web开发文档,仅供大家参考. 规范目的: 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改. 基本准则: 符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面,…

javascript中DOM部分基础知识总结

1.DOM介绍 1.1 DOM概念文档对象模型(Document Object Model),它定义了访问和处理HTML文档的标准方法.现在我们主要接触到的是HTML DOM. HTML文档中的每个成分都是一个节点.HTML文档中的所有节点组成了一个文档树(节点树).HTML文档中的每个元素.属性.文本等都代表着树中的一个节点.树起始于文档节点,并由此继续延伸枝条,直到处于这棵树最低级别的所有文本节点为止.学习DOM,就是学习一些操作页面元素的API(方法).下图表示一个文…

JavaScript学习笔记7 之DOM文档对象模型

一.什么是DOMDocument Object Model 文档 -------对象 ----模型-------缩写DOM DOM是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分.DOM树中的所有节点均可通过JS进行访问.所有HTML元素(节点)均可被修改.创建或删除. 二.节点类型1.节点类型 HTML 文档中的所有内容都是节点(node): 整个文档是一个文档节点每个 HTML 元素是元素节点HTML 元素…

HTML5自定义属性之data-*

HTML5 增加了一项新功能是自定义数据属性 ,也就是 data-* 自定义属性.在HTML5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性,来进行一些数据的存放.当然高级浏览器下可通过脚本进行定义和数据存取.在项目实践中非常有用. <input type="button" value="按钮" data-index="10" data-index-color="red" > 在开始之前我们先来…

深入理解javascript原型和闭包（3）——prototype原型

既typeof之后的另一位老朋友! prototype也是我们的老朋友,即使不了解的人,也应该都听过它的大名.如果它还是您的新朋友,我估计您也是javascript的新朋友. 在咱们的第一节(深入理解javascript原型和闭包(1)——一切都是对象)中说道,函数也是一种对象.他也是属性的集合,你也可以对函数进行自定义属性. 不用等咱们去试验,javascript自己就先做了表率,人家就默认的给函数一个属性——prototype.对,每个函数都有一个属性叫做prototype. 这个proto…

javascript和jquey的自定义事件小结

“通过事件机制,可以将类设计为独立的模块,通过事件对外通信,提高了程序的开发效率.” 可以把多个关联但逻辑复杂的操作利用自定义事件的机制灵活地控制好对象之间通过直接方法调用来交互 1)对象A直接调用对象B的某个方法,实现交互:直接方法调用本质上也是属于一种特殊的发送与接受消息,它把发送消息和接收消息合并为一个动作完成: 方法调用方和被调用方被紧密耦合在一起:因为发送消息和接收消息是在一个动作内完成,所以无法做到消息的异步发送和接收: 2)对象A生成消息->将消息通知给一个事件消息处理器(Obs…

偶的《javascript框架设计》终于出版

#cnblogs_post_body p{ text-indent:2em!important; } 历时两年多,我的书终于付梓出版了.应各方面的要求,写软文一篇,隆重介绍一下此书对各位程序员的钱途有什么帮助及阅读顺序等疑问.作为国内第一本讲述前端框架构的书,它里面充斥着许多大家前所未闻的知识,这些知识有50%只见于github的issue,讲述各种隐秘的浏览器兼容性问题及各种神奇的修复方案,或者是某些危险但美丽的黑魔法,另外50%我深夜梦游般在外国某些大牛(不局限于英语,有日语,俄语,韩语等,…

使用javascript实现贪吃蛇游戏

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"&…

如何捕获和分析 JavaScript Error

前端工程师都知道 JavaScript 有基本的异常处理能力.我们可以 throw new Error(),浏览器也会在我们调用 API 出错时抛出异常.但估计绝大多数前端工程师都没考虑过收集这些异常信息.反正只要 JavaScript 出错后刷新不复现,那用户就可以通过刷新解决问题,浏览器不会崩溃,当没有发生过好了.这种假设在 Single Page App 流行之前还是成立的.现在的 Single Page App 运行一段时间后状态复杂无比,用户可能进行了若干输入操作才来到这里的,说刷新就…

【javascript自定义属性的应用】的更多相关文章