javaweb（基础五）

1. 显式win10时间秒数

1.1 打开注册表

win+r

regedit

1.2 赋值地址到注册表地址栏

HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\Advanced

注册表的key为:

ShowSecondsInSystemClock

值:

1.3 重启电脑生效

2. javascript的核心

• EcmaScript(标准)===>基础语法
• BOM(浏览器对象模型)
• DOM(文档对象模型)

3. BOM

浏览器对象模型

我们需要学习js中对浏览器对象的抽象的api

//window.alert("hello uplooking")
//window.console.log("hello");
// console.log(window.location);
//网页重定向
//window.location.href = "http://www.baidu.com";

//js中的延时任务
window.setTimeout(function () {
console.log("hello");
}, 3000);


//周期性的执行任务
window.setInterval(function () {
console.log("uplooking....");
}, 3000);

4. DOM是什么?

文档对象模型

• DOM(Document **Object Model, **文档对象模型)。它是跨平台的，并且与编程语言无关。

• DOM 给浏览器中的网页文档（结构树）提供了一个结构化的表述，将文档作为一个结构化的节点组以及包含属性和方法的对象。-

• 我们把对dom对象的操作映射到网页中

5. js中的节点(Node)

• 元素节点
• 属性节点
• 文本节点

6. 初体验js操作dom

//通过document对象获取网页元素对象
var myh = document.getElementById("myh");
myh.innerText="java web开发"

7. js获取网页元素的方式

7.1 基本方式

//根据id获取元素
var p = document.getElementById("id1");
//根据class来获取元素,返回集合
var elements = document.getElementsByClassName("c1");
//根据标签名称获取元素,返回集合
var h1s = document.getElementsByTagName("h1");

7.2 选择器方式

//使用选择器获取一个元素,如果选择器选择到多个元素,则返回第一个元素
var element = document.querySelector(".c1");
//使用选择器选择多个元素
var elements = document.querySelectorAll(".c1")
console.log(elements);

8. Dom常见的属性

document.title	 	 //设置文档标题。head的title标签

9. Dom对html的操作

document.write("hello uplooking");

10. dom的常用操作

//创建一个元素节点
var h1Element = document.createElement("h1");

//创建文本节点
var textNode = document.createTextNode("java大数据");

//追加子节点
h1Element.appendChild(textNode)

//添加属性节点
h1Element.setAttribute("name","admin")

var box = document.getElementById("box");

//追加子节点
box.appendChild(h1Element)

//创建元素节点
var h1 = document.createElement("h1");

//追加文本节点
h1.appendChild(document.createTextNode("python开发"))

//获取元素节点
var id2 = document.getElementById("id2")

//获取元素节点
var box = document.getElementById("box");
//在box之前添加节点
//box.before(h1)

//box: 父节点   h1: 新节点   id2: 参照节点
//box.insertBefore(h1, id2)

//在同级之后添加节点
box.after(h1)

//获取元素
var box = document.getElementById("box");

var h2 = document.getElementById("id2");

//获取属性
console.log(h2.getAttribute("id"));

//设置属性
h2.setAttribute("name","admin")

var h2 = document.getElementById("id2");

//js对样式的操作
h2.style.color = "#ff0"
h2.style.backgroundColor = "pink"

var h2 = document.getElementById("id2")
//添加类名
h2.className = "v1"
//追加类名
h2.className += " " + "v2"
console.log(h2);

11. js的事件

事件: 用户触发的一些列的操作,我们编程对这些操作给出的响应就是事件;

任何的事件都有两种添加方式:

• 侵入式添加
• 单独添加

11.1 点击事件

侵入式添加事件

<!--点击事件的第一种添加方式(侵入式添加)-->
<button onclick="btClick()">点我呀</button>

<script>
        function btClick() {
        console.log("hello");
    }
</script>

单独添加事件

<button id="bt">点我呀</button>

<script>
    var btn = document.getElementById("bt");
    <!--点击事件的第二种添加方式(独立添加)-->
    btn.onclick = function () {
        console.log("点击了我");
    }
</script>

11.2 双击事件

<button ondblclick="alert('双击事件被触发了')">点我呀</button>

11.3 页面加载完成事件

<script type="text/javascript">
    //页面加载完成的触发事件
    window.onload = function () {
    var btn = document.querySelector("button");
    console.log(btn);
}
</script>

11.4 鼠标事件

//获取box元素
var box = document.getElementById("box");
//给box添加鼠标的事件

//鼠标放上去的事件
box.onmouseover = function () {
    console.log("onmouseover...");
}

//鼠标移动的事件
box.onmousemove = function () {
    console.log("onmousemove...");
}


//鼠标按下(左键)触发
box.onmousedown = function () {
    console.log("onmousedown...");
}

//鼠标松开触发
box.onmouseup = function () {
    console.log("onmouseup...");
}

//鼠标离开触发
box.onmouseout = function () {
    console.log("onmouseout...");
}

11.5 聚焦和失焦事件

var input = document.getElementsByTagName("input")[0];

input.onfocus = function () {
    console.log("聚焦事件");
}

input.onblur = function () {
    console.log("失焦事件...");
}

11.6 键盘事件

var input = document.getElementsByTagName("input")[0];
input.onkeydown = function () {
    console.log("onkeydown");
}
input.onkeyup = function () {
    console.log("onkeyup");
}

11.7 onchange事件

11.8 onSelect事件(了解)

<input onselect="console.log('文本框的内容被选中了');"></input>

11.9 表单提交事件

<form action="#" onsubmit="console.log('表单提交触发...');">
    <input type="text"  placeholder="请输入用户名"> <br>
    <input type="text" placeholder="请输入密码">
    <input type="submit" value="确认登录">
</form>

11.10 事件中的this关键字