欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

day 48

程序员文章站 2022-08-03 15:50:09
[TOC] js BOM(浏览器对象模型) 由上图可知,window对象是 BOM 的核心对象,所有对象都是通过它延伸出来的,也可以称为window的子对象。 DOM是BOM的一部分 window对象 所有浏览器都支持window对象,它表示浏览器的接口。 常用window方法 ::浏览器窗口的内部 ......

js

bom(浏览器对象模型)

day 48

  • 由上图可知,window对象是bom的核心对象,所有对象都是通过它延伸出来的,也可以称为window的子对象。
  • dom是bom的一部分

window对象

所有浏览器都支持window对象,它表示浏览器的接口。

常用window方法

  • window.innerheight::浏览器窗口的内部高度
  • window.innerwidth :浏览器窗口的内部宽度
  • window.open:打开新窗口
  • window.close:关闭当前窗口

window子对象

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元素而制定的一个规范

day 48

由上图可知,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.插件扩展开发

jquery初识