JS中的事件、数组、节点对象处理
在JS代码中编写事件一定要保证页面在浏览器中加载时会把事件加载进页面
事件:在代码中可以通过一个动作来触发另一个行为的总称
A:事件的编写方式1
HTML标签中添加 onxxxx = "函数";
B:JS代码中获取事件源对象,更好的解耦合
对象.onxxxx = function(){}
本质就是为某个对象赋值函数
事件类型:
1.获得焦点事件 ---- onfocus
2.失去焦点事件 ---- onblur
3.鼠标移入 onmouseover
4.鼠标移除 onmouseout
5.下拉列表改变事件 onchange
关键字:this
this是当前对象,就是和当前方法绑定谁谁就是this对象
HTML代码中哪个标签中有绑定事件,哪个就是当前对象
JS代码中 对象.onxxxx = function(){
函数中的this就是这个对象}
DOM:
所有的标签型文档都可以看成一个DOM对象,有一颗DOM树,里面的所有元素,属性,文本都可以看成一个节点
获取标签对象的方式:
1.document.getElementById("id值");
2.document.getElementsByTagName("标签名");
3.document.getElementsByClassName("类名");
4.document.getElementsByName("name值");
在HTML文档中,只承认了ID是一个唯一属性,所以其它的都是返回数组
数组:
创建数组
var arr1 = new Array();//创建一个空数组
var arr2 = new Array(3);//创建一个指定长度的数组
var arr3 = new Array("a","b","c");
var arr4 = [1,2,3];
使用:
arr.length //长度
arr[索引] = "新值"; //使用和赋新值
1.不存在越界:undifind
2.长度可变
3.数组的元素数据类型可以不一致
创建使用二维数组:大盒子嵌套小盒子
var out = new Array();
out[0] = new Array("a","b");
out[1] = new Array(1,2,3);
out[2] = "3";
event对象:event.clientX event.clientY 得到对象的坐标
在JS的代码中可以直接给文本值赋值标签,可以直接解析
对象.innerHTML = "<font id="id1" color="red">这是JS设置的文本和CSS组合</font>"
创建标签对象节点:createElement("标签名");
创建文本节点:createTextNode("文本内容");
appendChild:为标签添加子节点(移动节点)
对象.children 返回一个数组,存储的是此节点下面的子节点元素
JS中的事件、数组、节点对象处理的更多相关文章
- JS中的事件&对象
一.JS中的事件 (一)JS中的事件分类 1.鼠标事件 click/dblclick/onmouseover/onmouseout 2.HTML事件 onload/onscroll/onsubmit/ ...
- JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象
前 言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...
- js中的事件,内置对象,正则表达式
[JS中的事件分类] 1.鼠标事件: click/dbclick/mouseover/mouseout/mousemove/mousedown/mouseup 2.键盘事件: keydown: 键盘按 ...
- JS中如何判断对象是对象还是数组
JS中如何判断对象是对象还是数组 一.总结 一句话总结:typeof Array.isArray === "function",Array.isArray(value)和Objec ...
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
- DOM 以及JS中的事件
[DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document. ...
- 细看JS中的BOM、DOM对象
DOM对象模型 DOM(Document Object Model),是指文档对象模型,是W3C组织推荐的处理可扩展标志语言的 ...
- 从零开始的JS生活(二)——BOM、DOM与JS中的事件
上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举 ...
- JS中的事件以及DOM 操作
[DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document. ...
- 怎么理解js中的事件委托
怎么理解js中的事件委托 时间 2015-01-15 00:59:59 SegmentFault 原文 http://segmentfault.com/blog/sunchengli/119000 ...
随机推荐
- Backdoor CTF 2013 :电子取证250
0x00题目 h4x0r厌烦了你对他的城堡的所有攻击,所以他决定报复攻击你,他给你发来一封带有图片的邮件作为警告,希望你能找出他的警告消息:-) 消息的MD5值就是flag. 图片如下: 0x01解题 ...
- Leetcode_415字符串相加
给定两个字符串形式的非负整数 num1 和num2 ,计算它们的和. 注意: ①num1 和num2 的长度都小于 5100.②num1 和num2 都只包含数字 0-9.③num1 和num2 都不 ...
- 类的私有private构造函数 ,为什么要这样做
通常我们都将构造函数的声明置于public区段,假如我们将其放入private区段中会发生什么样的后果?没错,我也知道这将会使构造函数成为私有的,这意味着什么? 我们知道,当我们在程序中声明一个对象时 ...
- 现在就去100offer 参加互联网人才拍卖! 现在登录现在注册 为什么整个互联网行业都缺前端工程师?
现在,几乎整个互联网行业都缺前端工程师,不仅在刚起步的创业公司,上市公司乃至巨头,这个问题也一样存在.没错,优秀的前端工程师简直比大熊猫还稀少. 每天,100offer的HR群都有人在吐槽招不到前端工 ...
- git清理工作区
git clean -f 这将删除所有未被追踪的文件 git rev-list
- ng-repeat如何限制循环次数
如果items 里有20条数据,如果你要循环 items, 只想循环5条 你可以这么做: ng-repeat="item in items|limitTo:5"
- neo4j简单学习
阅读更多 背景 最近在一些论坛或者新闻里看到了neo4j,一种擅长处理图形的数据库. 据说非常适合做一些join关系型的查询,所以抽空也看了下相关文档,给自己做个技术储备. 过程 深入学习之前,先在网 ...
- 微信小程序のwxs语言
一.wxs介绍 wxs是微信小程序自身的脚本语言,用来过滤和计算.wxs可以通过文件可模块标签来定义 文件需要.wxs后缀文件 二.实例 <wxs module="test1" ...
- 微信小程序の模板
一.什么是模板 模板顾名思义就是可以复用的代码块.减少编码工作量. 二.例子 <template name="templateTest"> <view>th ...
- openses机制
openses 大体结构解读 页面html与相关php文件的定位 点击界面,查看出现的url 例如: http://localhost/opensns/index.php?s=/people/inde ...