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实现的图片马赛克后显示并切换加文字功能
Apr 21 Javascript
Js 冒泡事件阻止实现代码
Jan 27 Javascript
Extjs4 类的定义和扩展实例
Jun 28 Javascript
JavaScript实现in-place思想的快速排序方法
Aug 07 Javascript
js导出excel文件的简洁方法(推荐)
Nov 02 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
Nov 25 Javascript
js 获取html5的data属性实现方法
Jul 28 Javascript
angularJS的radio实现单项二选一的使用方法
Feb 28 Javascript
JS实现图片转换成base64的各种应用场景实例分析
Jun 22 Javascript
JS实现仿微信支付弹窗功能
Jun 25 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
Feb 15 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
Thinkphp多文件上传实现方法
2014/10/31 PHP
php关闭warning问题的解决方法
2016/05/17 PHP
PHP sleep()函数, usleep()函数
2016/08/25 PHP
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
鼠标滚轮控制网页横向移动实现思路
2013/03/22 Javascript
jquery动态添加删除一行数据示例
2014/06/12 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
jQuery中DOM操作实例分析
2015/01/23 Javascript
Javascript中拼接大量字符串的方法
2015/02/05 Javascript
jQuery对指定元素中指定字符串进行替换的方法
2015/03/17 Javascript
js控制文本框输入的字符类型方法汇总
2015/06/19 Javascript
深入了解JavaScript中的Symbol的使用方法
2015/07/28 Javascript
ES6新特征数字、数组、字符串
2016/10/01 Javascript
jquery.flot.js简单绘制折线图用法示例
2017/03/13 Javascript
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
小程序自定义单页面、全局导航栏的实现代码
2019/03/15 Javascript
通过jQuery学习js类型判断的技巧
2019/05/27 jQuery
Vue内部渲染视图的方法
2019/09/02 Javascript
layer实现弹出层自动调节位置
2019/09/05 Javascript
layui使用form表单实现post请求页面跳转的方法
2019/09/14 Javascript
VUE 动态组件的应用案例分析
2019/12/02 Javascript
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
[38:31]完美世界DOTA2联赛PWL S3 Magma vs GXR 第一场 12.13
2020/12/17 DOTA
python使用paramiko模块实现ssh远程登陆上传文件并执行
2014/01/27 Python
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
python 使用re.search()筛选后 选取部分结果的方法
2018/11/28 Python
python主线程与子线程的结束顺序实例解析
2019/12/17 Python
CSS3 border-image详解、应用及jQuery插件
2011/08/29 HTML / CSS
HTML5中canvas中的beginPath()和closePath()的重要性
2018/08/24 HTML / CSS
购买英国原创艺术:Art Gallery
2018/08/25 全球购物
英国家居装饰品、户外家具和玻璃器皿购物网站:Rinkit.com
2019/11/04 全球购物
教师个人师德工作总结2015
2015/05/12 职场文书
卢旺达饭店观后感
2015/06/05 职场文书
服务行业标语口号
2015/12/26 职场文书
儿童诗两首教学反思
2016/02/23 职场文书
windows下快速安装nginx并配置开机自启动的方法
2021/05/11 Servers