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 基础知识> 这本书过了一遍,温故知新后,很多知其然不知其所以然的内容 豁然开朗. [1. 用于范围的标签] display :inline or bloc ...
- HTML+CSS+JS基础知识
HTML+CSS+JS基础知识 目录 对HTML+CSS+JS的理解 基础知识 对HTML+CSS+JS的理解 基础知识 插入样式表的三种方式 外部样式表:<link rel="sty ...
- Node.js基础知识
Node.js入门 Node.js Node.js是一套用来编写高性能网络服务器的JavaScript工具包,一系列的变化由此开始.比较独特的是,Node.js会假设在POSIX环境下运行 ...
- 网站开发进阶(十五)JS基础知识充电站
JS基础知识充电站 1.javascript alert弹出对话框时确定和取消两个按钮返回值? 用的不是alert对话框,是confirm confirm(str); 参数str:你要说的话或问题: ...
- NodeJs>------->>第三章:Node.js基础知识
第三章:Node.js基础知识 一:Node.js中的控制台 1:console.log.console.info 方法 console.log(" node app1.js 1> ...
- JS基础知识笔记
2020-04-15 JS基础知识笔记 // new Boolean()传入的值与if判断一样 var test=new Boolean(); console.log(test); // false ...
- js基础知识--BOM
之前说过,在js的 运行环境为浏览器时,js就主要有三部分组成: ECMAScript核心语法.BOM.DOM.今天就和大家详细说一下BOM的一些基础知识. BOM BOM通常被称为浏览器对象模型,主 ...
- js基础知识温习:Javascript中如何模拟私有方法
本文涉及的主题虽然很基础,在很多人眼里属于小伎俩,但在JavaScript基础知识中属于一个综合性的话题.这里会涉及到对象属性的封装.原型.构造函数.闭包以及立即执行表达式等知识. 公有方法 公有方法 ...
- js基础知识总结(2016.11.1)
js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避 ...
随机推荐
- Bootstrap 折叠(Collapse)插件
折叠(Collapse)插件可以很容易地让页面区域折叠起来.无论您用它来创建折叠导航还是内容面板,它都允许很多内容选项. 如果您想要单独引用该插件的功能,那么您需要引用 collapse.js.同时, ...
- eclipse远程调试Hadoop
环境需求: 系统:window 10 eclipse版本:Mars Hadoop版本:2.6.0 资源需求:解压后的Hadoop-2.6.0,原压缩包自行下载:下载地址 丑话前头说: 以下的操作中,e ...
- 利用onNewIntent避免Activity之间的跳转传值多次实体化
onNewIntent 需要注意的是: 1.通过Intent启到一个Activity的时候,就算已经存在一个相同的正在运行的Activity,系统也会创建一个新的Activity实例.为了不让Acti ...
- JS 前端格式化JSON字符串工具
JSON格式化工具,简易实现.作为技术宅,直接上代码,供大家使用.前提:一定要引入jquery哦. <!DOCTYPE html> <html lang="en" ...
- MySQL入门手册
本文内容摘自MySQL5.6官方文档,主要选取了在实践过程中所用到的部分文字解释,力求只摘录重点,快速学会使用MySQL,本文所贴代码地方就是我亲自练习过的代码,凡本文没有练习过的代码都没有贴在此处, ...
- JQuery延时操作
JQuery通过setTimeout函数可以实现延时操作以完成在编程达到某些需要的效果. 使用方法如下: function doSomething() { alert("hello worl ...
- shell选择语句
if语句 1) if ... else 语句 if ... else 语句的语法: if [ expression ] then Statement(s) to be executed if expr ...
- CentOS 6 中安装Node.js 4.0 版本或以上
如果想在CentOS 6 中安装Node.js >4.0,如果通过以往的方式安装: wget http://nodejs.org/dist/v4.0.0/node-v4.0.0.tar.gz t ...
- [LeetCode]436 Find Right Interval
Given a set of intervals, for each of the interval i, check if there exists an interval j whose star ...
- Log4j的ConversionPattern无缝适配到Logback
为了能将log4j的ConversionPattern无缝应用到logback上来,需要对两个Conversion做适配,具体可以参考:Log4j 与 Logback的ConversionPatter ...