day 48
js
bom(浏览器对象模型)
- 由上图可知,window对象是bom的核心对象,所有对象都是通过它延伸出来的,也可以称为window的子对象。
- dom是bom的一部分
window对象
所有浏览器都支持window对象,它表示浏览器的接口。
常用window方法
-
window.innerheight
::浏览器窗口的内部高度 -
window.innerwidth
:浏览器窗口的内部宽度 -
window.open
:打开新窗口 -
window.close
:关闭当前窗口
window子对象
navigator对象
navigator.appname // web浏览器全称 navigator.appversion // 文本浏览器厂商和版本的详细字符串 navigator.useragent // 客户端绝大部分信息 navigator.platform // 浏览器运行的操作系统
开头window可不写,bom默认window开头
screen对象
screen.avallwidth // 可用的屏幕宽度 screen.avallheight // 可用的屏幕高度
history对象
window.history
对象包含浏览器的历史,浏览历史对象
history.forward() // 前进一页 history.back() // 后退一页
location对象
location.href // 获取url location.href="url" // 跳转到指定页面 location.reload // 重新加载页面
弹出框
可以在js中创建三种消息框,分别是:警告框确认框和提示框
警告框
用于确保用户可以得到某些信息
当警告框出现时,用户需要点击确定按钮才能继续操作
例:
alert("hello world");
确认框
用于使用户可以验证或者接受某些信息
当确认框出现时,用户需要点击确定或者取消按钮才能继续操作
confirm("are you sure")
提示框
用于提示用户进入页面前输入某个值
当提示框出现时,用户需要输入某个值,用户需要点击确定或者取消按钮才能继续操作
如果用户点击确认,那么返回值为输入的值,如果用户点击取消,那么返回的值为null
prompt("请输入","答案")
计时事件
settimeout(定时器,异步运行)
var t = settimeout('js语句','毫秒')
setinterval(实时刷新)
// 在指定时间之后执行一次相应函数 var t = setinterval('js语句',毫秒)
注意:如果要求在每隔一个固定的时间间隔后就精确地执行某动作,最好使用setinterval
;如果不想连续调用产生互相干扰的问题,而且需要进行复杂计算的时候,推荐使用settimeout
dom(文档对象模型)
dom是一套对文档内容进行结构化展示,并让js操作html元素而制定的一个规范
由上图可知,dom规定html文档的每个成分都是一个节点
- 文档节点(
document
对象):代表整个文档 - 元素节点(
element
对象):代表一个元素(标签) - 属性节点(
attribute
对象):代表一个属性
查找标签
直接查找
document.getelementbyid 根据id获取一个标签 document.getelementsbyclassname 根据class属性获取 document.getelementsbyname 根据标签名获取标签合集
间接查找
parentelement 父节点标签元素
节点操作
创建节点
createelement(标签名)
var divele = document.createelement("div")
插入节点
//追加一个子节点(作为最后的子节点) somenode.appendchild(newnode) //把增加的节点放到某个节点的前边 somenode.insertbefore(newnode,某个节点) 例: var imgele = document.createelement("img"); imgele.setattribute("src", https://ss3.bdstatic.com/70cfv8sh_q1ynxgkpowk1hf6hhy/it/u=1906254523,3408854892&fm=26&gp=0.jpg); var d1ele = document.getelementbyid("d1"); d1ele.appendchild(imgele);
删除节点
获得要删除的元素,通过父元素调用该方法删除
somenode.removechild(要删除的节点)
替换节点
somenode.replacechild(newnode,某个节点)
属性节点
获取文本节点的值
var divele = document.getelementbyid('d1') diveele.innertext divele.innerhtml
设置文本节点的值
var divele = document.getelementbyid('d1') diveele.innertext='<p>1<p>' divele.innerhtml='<p>2<p>'
注意:
diveele.innertext
设置文本节点值只会把代码写出来,无法识别js代码,而divele.innerhtml
可以做到
attribute操作
var divele = document.getelementbyid('d1'); divele.setattribute("age","18") divele.getattribute("age") divele.removeattribute("age") // 自带的属性还可以直接.属性名来获取和设置 imgele.src imgele.src="..."
事件
js是以事件驱动为核心的一门语言
常用事件
onclick 当用户点击某个对象时调用的事件句柄。 ondblclick 当用户双击某个对象时调用的事件句柄。 onfocus 元素获得焦点。 // 练习:输入框 onblur 元素失去焦点。 应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证. onchange 域的内容被改变。 应用场景:通常用于表单元素,当元素内容被改变时触发.(select联动) onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交. onkeypress 某个键盘按键被按下并松开。 onkeyup 某个键盘按键被松开。 onload 一张页面或一幅图像完成加载。 onmousedown 鼠标按钮被按下。 onmousemove 鼠标被移动。 onmouseout 鼠标从某元素移开。 onmouseover 鼠标移到某元素之上。 onselect 在文本框中的文本被选中时发生。 onsubmit 确认按钮被点击,使用的对象是form。
绑定方式
方式一
<div id='d1' onclick='changecolor(this);'>click me <script> function changecolor(ths) { ths.style.background-color='green' } </script> </div>
注意:
this
是实参,表示触发事件的当前元素
函数定义过程中的ths
为形参
方式二:
<div id='d2'>click me <script> var divele2 = document.getelementbyid('d2') divele2.onclick=function() { this.innertext='啊~' } </script> </div>
jquery
jquery介绍
1.jquery是一个轻量级的,可兼容多浏览器的javascript库
2.jquery是用户能更方便地处理html document、events、实现动画效果、方便与ajax交互,能够极大的简化javascript编程。
jquery的优势
1.jquery核心的js文件才几十kb,不会影响页面的加载
2.有丰富的jquery选择器,用起来非常方便
3.可进行链式操作,jquery可以把多个操作写在一个代码里,更加简洁
4.事件、样式、动画支持,jquery简化了js操作css的代码
5.ajax操作支持
6.跨浏览器兼容
7.插件扩展开发