Javascript基础知识(一)核心基础语法与事件模型


Posted in Javascript onSeptember 29, 2014

一.Javascript核心基础语法

1.Javascript是一门增加交互效果的编程语言,它最初由网景公司发明,最后提交给ECMA(欧洲计算机制造商协会),ECMA将Javascript标准化,其命名为Javascript。

2.Javascript是一门解释性语言,无需编译就可以直接在浏览器下运行。

3.Javascript的用途?

 1.可以控制网页中所有元素,增加.删除.修改元素的属性。

 2.可以在html中放入动态文本。

 3.响应用户在使用网页时产生的事件。

 4.校验用户输入的数据。

 5.检测用户的浏览器。

 6.用于创建cookie。

4.Javascript在html网页中创建的三种方式

1.外部样式:

创建一个文件名为:xx.js的文件通过<script src="xx.js"><script>来链接

2.内嵌样式:

在html中head或body里使用<script type="text/javascript"></script>或直接使用<script></script>载入

3.内联样式:

直接在标签中添加事件:<input onclick="alert('helloworld!')">载入

5.Javascript的数据类型:

它的数据类型有两大类:1.原始性数据类型2.引用性数据类型(对象)

原始性数据类型:1.typeof 2.number 3.string 4.boolean 5.null 6.undefined

引用性数据类型:(预定义的对象有三种)1.原生对象(Object,number,string,boolean,function,Array,Date等)2.内置对象:不需要显示初始化(math,Global)3.宿主对象(主要有BOM和DOM)

6.BOM和DOM

BOM:浏览器对象模型Browser Object Model

DOM:文档对象模型Document Object Model

二.Javascript的事件模型

1.Javascript事件模型:1.冒泡类型: <input type="button">当用户点击按钮时:input-body-html-document-window(从下往上冒泡)IE浏览器只是用冒泡

    2.捕获类型: <input type="button">当用户点击按钮时:window-document-html-body-input (从上往下)

经过ECMA标准化后,其他浏览器都支持两种类型,捕获先发生。

2.传统事件书写的三种方式:

1.<input type="button" onclick="alert('helloworld!')">

2.<input type="button onclick=name1()">======<script>function name1(){alert('helloword!');}</script> //有名函数

3.<input type="button" id="input1">  //匿名函数

<script>

 Var button1=document.getElementById("input1");

 button1.onclick=funtion(){

 alert('helloword!')

 }

</script>

3.现代事件书写方式:

<input type="button" id="input1">  //IE中添加事件

<script>

 var fnclick(){

 alert("我被点击了")

 }

 var Oinput=document.getElementById("input1");

 Oinput.attachEvent("onclick",fnclick);

 --------------------------------------

 Oinput.detachEvent("onclick",fnclick);//IE中删除事件

</script>

<input type="button" id="input1">  //DOM中添加事件

<script>

 var fnclick(){

 alert("我被点击了")

 }

 var Oinput=document.getElementById("input1");

 Oinput.addEventListener("onclick",fnclick,true);

 --------------------------------------

 Oinput.removeEventListener("onclick",fnclick);//DOM中删除事件

</script>

<input type="button" id="input1"> //兼容IE和DOM添加事件

<script>

 var fnclick1=function(){alert("我被点击了")}

 var fnclick2=function(){alert("我被点击了")}

 var Oinput=document.getElementById("input1");

 if(document.attachEvent){

 Oinput.attachEvent("onclick",fnclick1)

 Oinput.attachEvent("onclick",fnclick2)

 }

 else(document.addEventListener){

 Oinput.addEventListener("click",fnclick1,true)

 Oinput.addEventListener("click",fnclick2,true)

 }

</script>
Javascript 相关文章推荐
获取网站跟路径的javascript代码(站点及虚拟目录)
Oct 20 Javascript
Javascript 面向对象 重载
May 13 Javascript
入门基础学习 ExtJS笔记(一)
Nov 11 Javascript
Js动态添加复选框Checkbox的实例方法
Apr 08 Javascript
javascript的创建多行字符串的7种方法
Apr 29 Javascript
原生js实现数字字母混合验证码的简单实例
Dec 10 Javascript
chrome浏览器如何断点调试异步加载的JS
Sep 05 Javascript
微信小程序表单验证功能完整实例
Dec 01 Javascript
详解swipe使用及竖屏页面滚动方法
Jun 28 Javascript
JS实现可视化文件上传
Sep 08 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
May 16 Javascript
关于layui表单中按钮自动提交的解决方法
Sep 09 Javascript
Javascript表单验证要注意的事项
Sep 29 #Javascript
使用phantomjs进行网页抓取的实现代码
Sep 29 #Javascript
Javascript获取CSS伪元素属性的实现代码
Sep 28 #Javascript
js获取元素相对窗口位置的实现代码
Sep 28 #Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
Sep 28 #Javascript
浏览器缩放检测的js代码
Sep 28 #Javascript
排序算法的javascript实现与讲解(99js手记)
Sep 28 #Javascript
You might like
PHILIPS D1835/D1875的电路分析与打理
2021/03/02 无线电
php抓取页面与代码解析 推荐
2010/07/23 PHP
php ci框架中加载css和js文件失败的原因及解决方法
2014/07/29 PHP
[原创]ThinkPHP中SHOW_RUN_TIME不能正常显示运行时间的解决方法
2015/10/10 PHP
PHP通过GD库实现验证码功能示例
2019/02/23 PHP
prototype Element学习笔记(篇二)
2008/10/26 Javascript
JavaScript伸缩的菜单简单示例
2013/12/03 Javascript
浅谈 javascript 事件处理
2015/01/04 Javascript
javascript定时器完整实例
2015/02/10 Javascript
JS HTML5实现拖拽移动列表效果
2020/08/27 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
详解jquery插件jquery.viewport.js学习使用方法
2017/09/08 jQuery
jQuery+ajax实现动态添加表格tr td功能示例
2018/04/23 jQuery
基于Angular中ng-controller父子级嵌套的相关属性详解
2018/10/08 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
详解node登录接口之密码错误限制次数(含代码)
2019/10/25 Javascript
layui清除radio的选中状态实例
2019/11/14 Javascript
写一个Vue loading 插件
2020/11/09 Javascript
[57:16]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第二场
2014/05/26 DOTA
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
Python 正则表达式的高级用法
2016/12/04 Python
Python简单计算文件MD5值的方法示例
2018/04/11 Python
使用Python做垃圾分类的原理及实例代码附源码
2019/07/02 Python
Python使用sklearn实现的各种回归算法示例
2019/07/04 Python
python框架flask表单实现详解
2019/11/04 Python
介绍一下XMLHttpRequest对象的常用方法和属性
2013/05/24 面试题
入党积极分子自我鉴定范文
2014/03/25 职场文书
幼儿园新年寄语
2014/04/03 职场文书
金融保险专业求职信
2014/09/03 职场文书
国际政治学专业推荐信
2014/09/26 职场文书
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
2014-2015学年工作总结
2014/11/27 职场文书
修辞手法有哪些?
2019/08/29 职场文书
导游词之广州陈家祠
2019/10/21 职场文书
Vue3如何理解ref toRef和toRefs的区别
2022/02/18 Vue.js
配置Kubernetes外网访问集群
2022/03/31 Servers