原生js总结(干货)
1.js基本数据类型
number string boolean underfined null
2.查找文档中的特定元素
document.getElementById("id");
document.getElementByTagName("div");
document.getElementByClassName("aa"); //有兼容问题
document.getElementByName("username"); //有兼容问题
3.定时器
setTimeout(function(){
执行代码
},time); //time为定时几秒
4.js获取块元素宽高
var oDiv = document.getElementById("id"); //获取元素id
oDiv.offsetWidth //offsetWidth = content + padding + border
oDiv.offsetHeight
oDiv.offsetLeft
oDiv.offsettop
oDiv.offsetParent
5.事件冒泡与事件捕获
事件冒泡:从触发的事件开始,自下而上的触发事件,默认为false // 我 -->爸爸 -->爷爷
事件捕获:从document到触发事件的节点,自上而下的触发事件,第三个参数为true // 爷爷-->爸爸-->我
然后,上代码
HTML:
<div id="div1">
<div id="div2" class="div2"> </div>
</div>
js:
事件冒泡(结果:div1 div2)
var oDiv1 = document.getElementById("div1");
var oDiv2 = document.getElementById("div2");
oDiv1.addEventListener("click",function (){
alert("div1被触发");
});
oDiv2.addEventListener("click",function (){
alert("div2被触发");
});
事件捕获(结果:div2 div1)
var oDiv1 = document.getElementById("div1");
var oDiv2 = document.getElementById("div2");
oDiv1.addEventListener("click",function (){
alert("div1被触发");
});
oDiv2.addEventListener("click",function (){
alert("div2被触发");
},true);
ps:阻止事件冒泡的函数:
jq: e.stopPropagation 可以实现到当前被触发元素为止,不再向上冒泡
原生js总结(干货)的更多相关文章
- 原生JS实战:分享一个首页进度加载动画!
本文是苏福的原创文章,转载请注明出处:苏福CNblog:http://www.cnblogs.com/susufufu/p/5871134.html 该程序是本人的个人作品,写的不好,可以参考,但未经 ...
- 【面试篇】寒冬求职季之你必须要懂的原生JS(中)
互联网寒冬之际,各大公司都缩减了HC,甚至是采取了“裁员”措施,在这样的大环境之下,想要获得一份更好的工作,必然需要付出更多的努力. 一年前,也许你搞清楚闭包,this,原型链,就能获得认可.但是现在 ...
- 原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
- 常用原生JS方法总结(兼容性写法)
经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventU ...
- 原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...
- 再谈React.js实现原生js拖拽效果
前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前
思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...
- 原生js实现autocomplete插件
在实际的项目中,能用别人写好的插件实现相关功能是最好不过,为了节约时间成本,因为有的项目比较紧急,没充分时间让你自己来写,即便写了,你还要花大量时间调试兼容性.但是出于学习的目的,你可以利用闲暇时间, ...
随机推荐
- ajax_表单提交+tp5ajax
======================================================= 判断squery导入的是否正确? $(function(){ alert('1'); } ...
- 邓_phpcms_二次开发_留言板
================================================================= •在 phpcms/modules 目录下创建文件夹,并将其命名为g ...
- Core Graphics框架是Quartz的核心,也是内容描画的基本接口。
Core Graphics框架是Quartz的核心,也是内容描画的基本接口.
- Java通配符解惑
T 有类型 ? 未知类型 一.通配符的上界 既然知道List<Cat>并不是List<Anilmal>的子类型,那就需要去寻找替他解决的办法, 是AnimalTrianer ...
- JS中数组的常用方法
首先,在开始前我们先了解一下什么是数组. 1.什么是数组? 数组就是一组数据的集合,其表现形式就是内存中的一段连续的内存地址,数组名称其实就是连续内存地址的首地址.说白了它就是将一堆数据按照一定的顺序 ...
- Windows核心编程&内存管理
1. 每个进程都有自己的虚拟地址空间,对于32位机器而言,这个地址空间的大小为4GB(2^32 / 1024^3),这个虚拟地址空间只不过是一个内存地址空间, 为了能够正常读/写数据,我们还需要把物理 ...
- Python初识 - day5
一.装饰器(decorator) 1.定义:本质是函数(装饰其它函数),就是为了其它函数添加附加功能. 2.原则:一是不能修改被装饰函数的源代码:二是不能修改被装饰函数的调用方式. 3.装饰器包含的知 ...
- WebSphere--安全性
WebSphere应用服务器具有很好的安全性支持.安全性简单地说就是确定谁可访问重要的系统资源,这些系统资源包括文件.目录.程序.连接和数据库.以独立模式运行WebSphere应用服务器比作为 Web ...
- zabbix图形乱码
毕竟是中文为主,特别是有些香项目最好以中文命名,容易区分,也方便识别 环境: centos7.3安装zabbix3.2 问题: 图文乱码问题 原理上只要找到对应的字符集,在修改配置文件 windows ...
- Mysql高可用架构(主从同步)
做高可用的优势 1.成本低 2.解决单点故障 3.不容易遇到性能瓶颈 一 .Mysql主从同步架构搭建案例 优点如下:·在业务繁忙阶段,在从服务器上可以执行查询工作(即我们常说的读写分离),降低主服务 ...