js基础知识点总结
如何在一个网站或者一个页面,去书写你的js代码:
1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)
2.js的规划():避免全局变量和方法(命名空间,闭包,面向对象),模块化(seaJs,requireJs)
常用内部类:Data Array Math String
HTML属性,CSS属性
HTML:属性.HTML属性="值";
CSS:对象.style.CSS属性="值";
class和float
1.class:className
2.float:cssFloat
获取对象
id:document.getElementById("id 名")
事件:用户的动作
鼠标事件:
onclick:点击
onmouseover: 鼠标放上
onmouseout:鼠标离开
ondbclick:双击事件
onmousedown:鼠标按下
onmouseup:鼠标抬起
onmousemove鼠标移动
表单事件:
onfocus:获取焦点
onblur:失去焦点
onsubmit:提交事件
onchange:当发生改变的时候
onreset:重置事件
键盘事件:
onkeyup:键盘抬起
onkeydown:键盘按下
onkeypress:键盘按键一次
窗口时间:onload事件
页面加载完成之后立刻执行的事件
两种方式:
1.<script>window.onload=init/*函数名,不能加括号*/;</script>
2.<body onload="init()"></body>
event:保存事件发生时的相关的信息
当事件发生的时候,event
event.clientX:事件发生时的X的坐标
event.clientY:事件发生时的Y的坐标
event.target:事件源
event:必须通过实际参数的形式传递给函数才可以用
<input type = "button" value = "点击" onclick = "fn(event)" >
修改div中的内容
innerHTML:对象中所有的内容(文本内容和标签内容),一般指的是双标签或者容器标签
innerText:对象中所有的文本内容
document.createElement("标签名");
document.body.appendChild(对象);
removeChild(对象)
document.body是body标签对象
document.documentElement是html标签对象
ECMAscript,BOM,DOM
1.window:对象最高级
2.BOM:浏览器对象: brower object model
3.DOM:文档对象模型:document object model
4.BOM:网页一打开就会存在
5.DOM:去操作的代码
6.document是链接DOM和BOM
document有下级,其他的都没有下级【多窗口】
window.open("链接","name","设置");
1.width:设置窗口宽度
2.height:设置窗口高度
3.left:新窗口到左端距离
4.top:新窗口到顶部的距离
5.srollbars:滚动条【yes,no,1,0】
6.toolbar:工具类【yes,no,0】
7.location:地址栏
window.close: 关闭窗口
window.close()
创建定时器:
一次性计时器:window.setTimeout("函数()",时间t)
执行:是在时间t之后执行js代码【只会执行一次】
时间:以毫秒为单位
反复性计时器:window.setInterval("函数()",时间t)
时间:以毫秒为单位
执行:是每过时间t就会执行一次js代码【n次】
清楚定时器:
清除一次性定时器:window.clearTimeout(定时器名)
清除反复性定时器:window.clearInterval(定时器名)
注意:要想清除定时器,必须给定时器名字,匿名定时器无法清除
找对象的方法:
di:document.getElementById("id名");
标签:document.getElementsByTagName("标签名")//获取的是对象的集合(数组)
对象.getElementByTagName(标签名)
name:document.getElementByName("name名");//form集合(数组)
className:document.getElementByClassName("class名");//集合(数组)【firefox】
document.images;//获取img对象(数组)
document.links;//获取链接对象(数组)
document.forms;//获取表单对象(数组)
document.body;//body标签对象
document.documentElement;//HTML对象
event:事件信息对象
this:当前对象
location对象
location.href:返回url信息【可以获取url信息,也可以给其赋值,实现跳转页面】
location.assign():加载新的文档【跳转页面】
location.reload():重新加载当前的文档【刷新页面】
location.replace():用新的文档替代当前的文档【跳转页面】
location.assign和location.replace的区别:
location.assign:会产生历史记录
location.replace:不会产生历史记录
history对象:
history.length:浏览过的url数量
history.back():返回历史记录的前一个页面
history.forward():加载历史记录中的下一个页面
history.go(n):跳转到历史记录中指定的页面,如果是-1实际上就是history.back()的功能
screen对象
screen.height:获取屏幕的高度
screen.width:获取屏幕的宽度
screen.availHeight:获取除去任务栏的高度
screen.availWidth:获取除去任务栏的宽度
navigator对象
navigator.appName:浏览器名
navigator.appCodeName:浏览器代码名
navigator.appVersion:浏览器的版本号和平台信息
navigator.userAgent:浏览器信息
DOM:描述网页各个组成部分的关系
var obj = document.getElementById("id名")
火狐浏览器中空白处也算一个节点
parentNode:父节点
childNodes:子节点
firstChild:第一个子节点
lastChild:最后一个子节点
nextSibling:下一个兄弟节点【注意:必须是同父级关系】
previousSiblind:前一个兄弟节点【注意:必须是同父级关系】
登录验证:
onsubmit:表单提交事件
onsubmit="return 函数()"
js基础知识点总结的更多相关文章
- js基础知识点收集
js基础知识点收集 js常用基本类型 function show(x) { console.log(typeof(x)); // undefined console.log(typeof(10)); ...
- JS基础知识点(一)
原始类型 null undefined boolean number string symbol 注意 原始类型存储的都是值,是没有函数可以调用的,但实际上除null和undefined外,其他类型使 ...
- js基础知识点(只有点)
转自:2015年12月的文章 http://blog.csdn.net/u014326381/article/details/50176339 JavaScript: 作用域链.闭包.运行时上下文.t ...
- 前端新人学习笔记-------html/css/js基础知识点(二)
4月7日学到的知识点: 一:<img src="1.png" alt="美女"/> alt是给图片添加介绍,当图片没加载出来时,会直接显示a ...
- 前端新人学习笔记-------html/css/js基础知识点
即将毕业的软件工程大学生一枚,秋季招聘应聘的是Android,今年来到公司实习,要求做前端开发,所以一切只有现学,现在根据视频来学习,然后开这个博客记录一下自己的学习过程,废话不多说,开写. 4月6日 ...
- JS 基础知识点
最近发现一个好东西,掘金小册,觉得里面的东西挺不错的,准备仔细阅读一下,提升下自己. 记录一下,随便加深点儿印象,主要内容源自于小册. 原始类型 原始类型也成为基本数据类型 boolean null ...
- JS基础知识点——原始类型和对象类型的区别
1.js类型 1.1 JavaScript语言规定了7种语言类型,他们分别是: Number(数字) Boolean(布尔值) String(字符串) Null (空) Undefined (未定义) ...
- 前端新人学习笔记-------html/css/js基础知识点(三)
这断时间家里有点事,上班也有点任务,所以几天没看视频没来更新了.今天来更新一下了. 一:默认样式重置 但凡是浏览默认的样式,都不要使用. body,p,h1,h2,h3,h4,h5,h6,dl,dd{ ...
- JS基础知识点(二)
== 与 === 对于 == 来说,如果对比双方的类型不一样的话,就会进行类型转换,就会进行如下判断流程: 1.首先会判断两者类型是否相同,相同则会进行严格相等比较=== 2.判断是否在对比null和 ...
随机推荐
- eclipse连接外部tomcat进行debug
首先,在tomcat/bin目录下找到编辑catalina.bat,在 rem $Id: catalina.bat 1344732 2012-05-31 14:08:02Z kkolinko $rem ...
- 问题1:Mybatis 中 Signature中的参数args 问题2:MetaObject中 forObject方法中的参数
1.@Intercepts({@Signature(type =StatementHandler.class, method = "prepare", args ={Connect ...
- datetimepicker一个不错的日历android特效
datetimepicker一个不错的日历效,选中和选择日历效果都很不错, 实用的时候直接可以把datetimepicker-library这个引入到项目,调用的地方在实现 TimePickerDia ...
- VS2010中没有ado.net entity data model实体数据模型这一选项-解决办法
前提先安装VS2010 SP1包. 解决办法: 1.从VS2010的安装盘目录下面的WCU\EFTools找到ADONETEntityFrameworkTools_chs.msi和ADONETEnti ...
- python之路-Day7
编程范式 编程是 程序 员 用特定的语法+数据结构+算法组成的代码来告诉计算机如何执行任务的过程 , 一个程序是程序员为了得到一个任务结果而编写的一组指令的集合,正所谓条条大路通罗马,实现一个任务的方 ...
- Spring Web应用的最大瑕疵
众所周知, 现在的Spring框架已经成为构建企业级Java应用事实上的标准了,众多的企业项目都构建在Spring项目及其子项目之上,特别是Java Web项目,很多都使用了Spring并且遵循着We ...
- Linux下如何查看系统启动时间和运行时间
1.uptime命令输出:16:11:40 up 59 days, 4:21, 2 users, load average: 0.00, 0.01, 0.002.查看/proc/uptime文件计算系 ...
- R作图
R一般的散点图:plot() 折线图:plot() lines() 柱状图 barplot() 箱子图 boxplot() 直方图:hist() 热力图:heatmap 画地图的:拓展包 m ...
- 国内最给力五大免费VPN商家
国内有很多提供免费VPN的商家,水平也是参差不齐,有的用心服务,为客户提供优质免费VPN线路,进而赢得客户的信任.有的则对免费线路敷衍了事,只对付费线路“尽职尽责”,从而流失大量潜在VIP客户. 笔者 ...
- JSP(include指令与<jsp:include>动作的区别)
<%@ page language= "java" contentType="text/html;charset=UTF-8" %><html ...