day 48

目录

• js
  • BOM(浏览器对象模型)
    • window对象
    • window子对象
    • 弹出框
    • 计时事件
  • DOM(文档对象模型)
    • 查找标签
    • 节点操做
  • 事件
    • 经常使用事件
    • 绑定方式
• jQuery
  • jQuery介绍
  • jQuery的优点
  • jQuery初识

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.插件扩展开发

jQuery初识