javascript学习笔记_1
1、JSON的遍历
for(var i in json){
alert(json[i];
}
2、arguments 可以理解为是一个数组,并且建有json的部分能力
css(obj,attr,value){
obj.attr = value;
}
3、字符串的单字符获取方法
str.charAt(index); // 兼容全部浏览器
str[index]; // 低版本浏览器不兼容
附记：
1、获取元素在样式表中定义的属性值
var getStyle = function(node, property){
if (node.style[property]) {
return node.style[property];
}
else if (node.currentStyle) {
return node.currentStyle[property];
}
else if (document.defaultView && document.defaultView.getComputedStyle){
var style = document.defaultView.getComputedStyle(node, null);
return style.getPropertyValue(property);
}
return null;
};
2、常用JS工具
var utils = {
// 创建固定ID的标签
createE:function(nodeName,id){var newEl = document.createElement(nodeName);if(id&&id!==""&&!document.getElementById(id)){newEl.id = id;}return newEl;},
// 根据class Name获取元素集合
getByC:function(className){return document.getElementsByClassName(className);},
// 根据ID获取标签
getById:function(id){return document.getElementById(id);},
// 根据DOM对象和属性名获取属性值，解决获取样式时的兼容问题，
// 兼容各种浏览器和行间样式与CSS样式
getStyle:function(el,name){
var stl = '';
try{
stl = el.style[name];
if(stl==''){throw false;}
}catch(e){
try{
stl = el.currentStyle[name];
}catch(e1){
try{
stl = window.getComputedStyle(el,null)[name];
}catch(e2){
}
}
}finally{
return stl;
}
},
// 渐变效果，通常用于width\height\left\right\top\bottom等
huadong:function(el,name,target,timer){var old=utils.getStyle(el,name);if(!el||!name||!target||!/^-?\d+/.test(target)||!/^-?\d+/.test(old)){return;}
clearInterval(timer);var o=parseInt(old),t=parseInt(target),c=t-o,step=c>0?2:c<0?-2:0;timer=window.setInterval(function(){o+=step;utils.setStyle(el,name,o+'px');if((c>0&&o>=t)||(c<=0&&o<=t)){clearInterval(timer);}},10);},
};
3、小工具：
获取鼠标点击的“目标对象”：event.target, IE下为event.srcElement
示例代码：
<html>
<head>
<script type="text/javascript">
function whichElement(e) // 获取鼠标点击对象的方法
{
var targ
if (!e) var e = window.event // 如果e不存在
if (e.target) targ = e.target // 事件目标节点（不兼容IE）
else if (e.srcElement) targ = e.srcElement // IE下为event
if (targ.nodeType == 3) // 当点击了文本节点Text
targ = targ.parentNode // 文本节点的父节点
var tname
tname=targ.tagName // 元素类型
alert("You clicked on a " + tname + " element.")
/* 简写：
e = e ? e : window.event;var targ = e.target ? e.target : e.srcElement ? e.srcElement : null;targ = targ.nodeType == 3 ? targ.parentNode:targ;
*/
}
</script>
</head>
<body onmousedown="whichElement(event)">
<p>在文档中点击某个位置。消息框会提示出您所点击的标签的名称。</p>
<h3>这是标题</h3>
<p>这是段落。</p>
<img src="/i/eg_mouse2.jpg" />
</body>
</html>
4、延伸扩展：如何判断当前浏览器是什么浏览器？
简而言之，每个浏览器的独有属性的一个罗列：
总所周知：当下比较常用的有Firefox（火狐浏览器）、Opera（欧鹏浏览器）、Safari（苹果公司的网络浏览器）、
Chrome（谷歌浏览器）；下面一一对各个浏览器相对独有的特性进行一个描述（暂时不谈论内核的差距，主要是从相关函数进行分析）。
Firefox中的DOM元素都有一个getBoxObjectFor函数，用来获取该DOM元素的位置和大小
IE对应的中是getBoundingClientRect函数）。这是Firefox独有的，判断它即可知道是当前浏览器是Firefox。
Opera提供了专门的浏览器标志，就是window.opera属性。
Safari浏览器中有一个其他浏览器没有的openDatabase函数，可做为判断Safari的标志。
Chrome有一个MessageEvent函数，但Firefox也有。不过，好在Chrome并没有Firefox的getBoxObjectFor函数，
根据这个条件还是可以准确判断出Chrome浏览器的。
javascript学习笔记_1的更多相关文章
- Java程序猿的JavaScript学习笔记（汇总文件夹）
最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...
- Java程序猿的JavaScript学习笔记（8——jQuery选择器）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿JavaScript学习笔记（2——复制和继承财产）
计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...
- Java程序猿的JavaScript学习笔记（3——this/call/apply）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿JavaScript学习笔记（4——关闭/getter/setter）
计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...
- Java程序猿JavaScript学习笔记（14——扩大jQuery UI）
计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...
- javascript学习笔记(四) Number 数字类型
数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数 toExponential() 方法 用科学 ...
- JavaScript学习笔记之数组（二）
JavaScript学习笔记之数组(二) 1.['1','2','3'].map(parseInt) 输出什么,为什么? ['1','2','3'].map(parseInt)//[1,NaN,NaN ...
- JavaScript学习笔记[0]
JavaScript学习笔记[0] 使用的是廖雪峰JavaScript教程. 数据类型 Number 表示数字,不区分浮点整形. === 比较时不转化数据类型. == 反之. NaN与任何值都不想等, ...
随机推荐
- c语言程序操作
- SpringBoot和druid数据源集成Jpa
1.pom文件 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="htt ...
- java基础学习之"堆" "栈" "静态存储区" "方法区"
引用部分 java中堆栈(stack)和堆(heap)(还在问静态变量放哪里,局部变量放哪里,静态区在哪里.....进来) Java堆.栈和常量池以及相关String的讲解 等我看完"深入理 ...
- windows系统如何查看端口被占用、杀进程
1.首先启动windows的命令窗口 2.进入windows命令窗口之后,输入netstat -ano,就可以看到系统当前所有的端口使用情况 3.通过命令查找某一特定端口,在命令窗口中输入命令中输入n ...
- 雷林鹏分享：Composer 安装
下午在安装 Laravel 框架过程中,遇到了不少问题,因为 Laravel 的安装依赖于 composer,这里就先介绍一下 composer 的安装方法: 安装方法: #下载 sudo curl ...
- UML入门学习
在UML类图中,常见的有以下几种关系: 泛化(Generalization), 实现(Realization),关联(Association),聚合(Aggregation),组合(Composit ...
- C++（实验二）
实验结论 1.函数重载编程练习: 编写重载函数add(),实现对int型,double型,Complex型数据的加法.在main( )函数中定义不同类型 数据,调用测试. #include <i ...
- Sublime Text3安装evernote插件
关键字 Markdown编辑器.Evernote.Sublime Text3 正文 Sublime Text3安装evernote插件方法如下: 1.使用Package Control安装ever ...
- Oracle DB管理内存
• 描述SGA 中的内存组件• 实施自动内存管理• 手动配置SGA 参数• 配置自动PGA 内存管理 内存管理:概览DBA 必须将内存管理视为其工作中至关重要的部分,因为:• 可用内存空间量有限• ...
- JAVA写接口傻瓜（？）教程（一）
当一个安卓开发人员/微信小程序开发者想做点什么的时候,如果他发现没有合适的接口,那么单机安卓.本地数据库emmm.没了接口就好像老人没了拐杖.盲人没了墨镜,完全可以称得上是举步维艰.生活艰难到需要自己 ...