JS基础总结

JavaScript早期出现的原因---表单验证
js代表的是行为层,表示的是用户与网页的交互
 
JavaScript是一种直译式脚本语言
java---是编译式语言
 
js只能在浏览器执行,每一款浏览器都有自带的js引擎
 
js的四个核心
ECMAscript---javascript核心代码
dom  document object model--文档对象模型
bom browser object model--浏览器对象模型
事件处理模型---点击按钮出现alert---οnclick="a";
 
定义JavaScript的三种方式:
方式一:定义在标签中style--行内样式
             <p script type="text/JavaScript" >hello hello kitty</p>
方式二:定义在body里面的script --内联样式
               <script type="text/JavaScript">
                    alert("ok")
               </script>
方式三:单独建立一个js文件--外部样式
              <script type="text/JavaScript" " href="my.js></script>
 
javascript定义的最好方式是在结束body前面一句,因为js是堵塞下载的,可以先加载静态html的在加载动态的。
 
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
 
事件 : 用户的动作
鼠标事件:
onclick :点击
onmouseover: 鼠标放上
onmouseout: 鼠标离开
ondbclick: 双击事件
onmousedown: 鼠标按下
onmouseup: 鼠标抬起
onmousemove 鼠标移动
 
表单事件:
onfocus: 获取焦点
onblur: 失去焦点
onsubmit: 提交事件
onchange: 当发生改变的时候
onreset: 重置事件
 
键盘事件:
onkeyup: 键盘抬起
onkeydown: 键盘按下
onkeypress: 键盘按键一次
 
窗口时间:onload事件
页面加载完成之后立刻执行的事件
两种方式 :
1.<script>window.οnlοad=init/* 函数名,不能加括号 */;</script>
2.<body οnlοad="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: 前一个兄弟节点【注意 : 必须是同父级关系】
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值