js知识点清单
js知识点清单
javaweb的js部分
自己总结的知识点清单,如果转发请注明出处,尊重原创,虽然写的不怎么样吧,哈哈 ,内容中有些时候是不连贯的,那是本人做的笔记,或者写的感想,不影响阅读。有错误的地方还请批评指正。
Js部分
Document.write(“ ”) 可以往HTML里面写文字或者标签也可以
对大小写敏感
Alert(内容) 弹出一个对话框
Js事件
1. 事件
事件是可以被javascript检测到的行为
2. 主要事件
属性 描述
onClick 单击事件
onMouseOver 鼠标胫骨事件
onMouseOut 鼠标移出事件
onChange 文本内容改变事件
onSelect 文本框选中事件
onFocus 光标聚集事件
onBlur 移开光标事件
onload 网页加载事件
onUnload 关闭网页事件
js的DOM对象
1. DOM简介
DOM操作HTML
1) JavaScript能改变页面中的所有HTML元素
2) JavaScript能够改变页面中的所有HTML属性
3) JavaScript能够改变页面中的所有css样式
4) JavaScript能够对页面中的所有事件作出反应
2. DOM操作HTML
1.1、 改变HTML输出流
注意。绝对不要在文档加载完成之后使用document.write()。这会覆盖该文档
1.2、 寻找元素
通过id寻找HTML元素
通过标签名找到HTML元素
1.3、 改变HTML内容
使用属性:innerHTML
1.4、 改变HTML属性
使用属性:attribute
2. DOM操作css
2.1、 通过DOM对象改变css
语法:document.getElementById(id).style.property=new style;
3. DOM-EventListener:
方法:addEventListener();
removeEventListener();
addEventListener(“事件比如click”,”方法名或者匿名函数”); 用于向指定元素添加事件句柄
removeEventListener(); 移除方法添加的事件句柄
js事件详解
1. 事件流
描述的是在页面中接受事件的顺序
1.1、 事件冒泡
由最具体的元素接受,然后逐级向上传播至最不具体的节点(文档)
1.2、 事件捕获
最不具体的节点先接受事件,而最具体的节点应该是最后接受事件
2. 事件处理
2.1、 HTML事件处理
直接添加到HTML结构中,比如直接添加到button中的onclick属性
2.2、 DOM的0级事件
把一个函数赋值给一个事件处理程序属性
Document.getElementById(id).onclick=function (){ }
弊端:当拥有多个事件的时候,那么脚本前面的事件会被覆盖掉
2.3、 DOM的2级事件
addEventListener(“事件名”,”事件处理函数”,”布尔值”);
true:事件捕获
false:事件冒泡
removeEventListener();
2.4、 IE事件处理程序小于等于IE8的
attachEvent
detachEvent
3. 事件对象
在触发DOM事件的时候,都会产生一个对象。
3.1、 事件对象event:
1):type:获取事件类型
2):target:获取事件目标
3):stopPropagation():阻止事件冒泡
不然会由小到大的范围执行一次
4):preventDefault():阻止事件的默认行为
Js内置对象
JavaScript中所有事物都是对象:字符串、数值、数组、函数、日期……
每个对象带有属性和方法
JavaScript允许自定义对象
1. 自定义对象
1):定义并创建实例对象
People = new Object();
2):使用函数来定义对象。然后创建新的对象实例
Functionpeople(age,name){
This.name=name;
This.age=age;
}
JsDOM对象控制HTML
1. 方法
getElementsByName()-------获取name
getElementsByTagName()-----------获取元素
getAttribute()----------------------获取元素属性
setAttribute()----------------------设置元素属性
childNodes()-----------------------访问子节点
parentNode()----------------------访问子节点
createElement()--------------------创建元素节点
createTextNode--------------------创建文本节点
insertBefore()----------------------插入节点
removeChild-----------------------删除节点
offsetHeight-----------------------网页尺寸(不包含滚动条)
scrollHeight------------------------网页尺寸(包含滚动条)
appendChild()---------------------添加到父节点的子节点
document.body.offsetHeight----------高度
document.body.offsetWidth----------宽度
js的浏览器对象
1. window对象
window对象是BOM的核心,window对象是指当前的浏览器窗口,所有的JavaScript全局对象、函数以及变量均自动成为window对象的成员
全局变量是window的属性,
全局函数是window对象的方法
甚至HTML DOM的document也是window对象的属性之一。
1.1, window尺寸
window.innerHeight------浏览器窗口的内部高度
window.innerWidth---------浏览器窗口的内部高毒
不包含工具栏和滚动条的
1.2, window方法
window.open(“新的网页”.”网页名字”,”属性,比如width =100”)---打开新窗口
window.close()----关闭当前窗口
2. 计时器
2.1、计时事件:
通过JavaScript,我们有能力做到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行,我们称之为计时事件。
2.2、计时方法:
1):setInterval(函数,毫秒)----------间隔指定的毫秒数不停地执行指定的代码
Vara= setInterval(…………)
clearInterval(a)
clearInterval()-----用于停止setInterval()执行的函数代码
2)setTimeout()—暂停指定的毫秒数执行指定的代码
clearTimeoutl()-----用于停止setTimeout ()执行的函数代码
参数位置和上面的一样,可以通过调用自己的函数来重复执行代码,来达到不断刷新的目的
3. history对象
3.1、history对象
Window.history对象包含浏览器的历史(url)的集合
3.2、 history方法
history.back()------------与浏览器的后腿按钮相同
history.forward()---------与浏览器中的点击按钮向前相同
history.go(数字)--------------进入历史中某个页面
4. location对象
window.location对象用于获取当前页面页面的地址(URL),并把重定向到新的页面
4.1,location的属性
Location.hostname 返回web主机的域名
Location.pathname 返回当前页面的路径和文件名
Location.port 返回web主机的端口
Location.protocol 返回所使用的web协议
Location.href 属性返回当前页面的url
Location.assign() 方法加载新的文档。跳转到某个页面
5. Screen对象
Window.screen对象包含有关用户屏幕的信息
属性:
Screen.availWidth------可用的屏幕的宽度
Screen.availHeight------可用屏幕的高度
Screen.Height----------屏幕高度
Screen.width--------屏幕宽度
Js面向对象
,面向对象函数名字,既可以当成对象,函数也可以当成
this它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用
随着函数使用场合的不同,this的值会发生变化。但是有一个总的原则,那就是this指的是,调用函数的那个对象
定义方式:
Function People(name){
This._name=name;
}
People.prototype.say= function(){
Alert(“hello”);
}
这是一个js的面向对象
用函数模拟一个类 prototype 原型链
第二种方式
FunctionPerson(name){
Var_this={}----------相当于创建一个对象承载了构造器
_this._name=name;
_this.sayHello=function(){
Alert(“hello”);
}
Return _this;
}
继承:
FunctionStudent(){
}
Student.prototype = new People();--------继承
Vars = new Student();
s.say();
第二种方式
FunctionTeacher(){
Var _this =Person();
VarsuperSay = _this.sayHello;
_this.sayHello= function(){
superSay,call(_this);
alert(“THello”);
}
Return_this;
}
封装:
{function(){
Function People(){
}
People.prototype.say= function(){
Alert(“hello”);
}
Window.People= People;------------如果想要调用内部的用window对象
}()
};--------------要加一个分号
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
C#温故而知新系列 -- 闭包
闭包的由来 要说闭包的由来就不得不先说下函数式编程了。近几年函数式编程也是比较火热,我们先来看看函数式编程的一些基本的特性这个有助于我们理解闭包的由来。 函数式编程 函数式编程是一种编程模型,他将计算机运算看做是数学中函数的计算,并且避免了状态以及变量的概念。这里很明显的指出了函数式编程中最重要的就是函数而且是数学中的函数,比如f(x),数学中的函数最大的特点就是只要是同样的参数x那么我的结果必定是相等的,也就是说我们函数的返回值只是依赖于参数而不依赖于其他状态(比如js中的全局变量就是一个干扰因素);后一句中说避免变量的概念,这句话如果从函数式编程来说不太恰当,因为这句话中的函数意思还是我们在编程语言中所使用的变量也就是一个存储单元,而在函数式编程中变量却是数学中变量的定义是一个值得名称。比如,我们最基本的赋值等式 x = x+1,让我们程序员看这是一个简单的赋值代码,而让学数学的人来说这个等式是根本不成立的。 所以我们在函数式编程中是不允许多次赋值的。而这一句话也是讲述了函数式编程好处的最主要的原因: 第一点、函数的结果只依赖于参数而不依赖其他状态,这样写的代码很容易进行...
- 下一篇
Java学习--Ajax与数据库连接池
Java学习--Ajax与数据库连接池 概述 数据库连接池 Ajax简介 JavaScript实现Ajax jQuery实现Ajax 一:数据库连接池 数据库连接是一种关键的有限的昂贵的资源,对数据库连接的管理能显著影响到整个应用程序的性能。数据库连接池正是针对这个问题提出来的。 常见的数据库连接池有哪些: C3p0、DBCP、 Tomcat Jdbc Pool、 Druid 1. 数据库连接池的原理: 连接池基本的思想是在系统初始化的时候,将数据库连接作为对象存储在数据库连接池中,当用户需要访问数据库时,并非建立一个新的连接,而是从连接池中取出一个已建立的空闲连接对象。使用完毕后,用户也并非将连接关闭,而是将连接放回连接池中,以供下一个请求访问使用。而连接的建立、断开都由连接池自身来管理。 2. C3P0连接池的使用: a. 导入相关jar包 b. 在项目src目录下新建一个名叫 c3p0-config.xml,并配置连接池的相关信息 c. 在代码中使用ComboPooledDataSource对象的getConnection()方法获取数据库连接对象 二:Ajax简介 Ajax ...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Docker安装Oracle12C,快速搭建Oracle学习环境
- Windows10,CentOS7,CentOS8安装MongoDB4.0.16
- CentOS8编译安装MySQL8.0.19
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS8安装Docker,最新的服务器搭配容器使用
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- SpringBoot2整合Redis,开启缓存,提高访问速度
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- CentOS关闭SELinux安全模块