2021年9月8日

回顾

Js用作网页的动态效果的!!!

今天上午会把js的重要知识点讲完!!!

对大家的要求,能看懂别人写的JS代码,如果微调或者修改一下更好!!!

因为咱们以后都是使用别人封装好的js

以后写特效的话,你找我我帮你写!!!,绝不不会让你写的额!!!

因为懂语法格式,后面jQuery,这个jQuery是对js的封装。咱们js十行代码搞定的活,jQuery有可能一行代码就可以搞定!你说你用哪一个?肯定jQuery。而且后面的react vue layui bootstrap等这些前端框架,人家的js又自己封装了一下,要重写学,语法都不一样的

学习思路:

1.学习js的基本语法格式

引入方式(修饰html)

变量的声明

数据类型

运算符

分支结构(和咱们java特别象)

循环结构 for(in) 遍历对象

函数

dom操作

js可以把一个页面看成一个对象,一个页面里面都是可以看成一个对象的!!!

js可以把一个标签转为对象,转为对象以后js提供了一些属性和一些方法共咱们操作对象

这个对象就是标签,就是在操作标签!!!

动态的创建标签也是dom操作!!!

 

今天的内容

js

XML

扩展

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div1"></div>
<button >点一下</button>
</body>
<script>
var div1 = document.getElementById("div1")
var btns = document.getElementsByTagName("button")//数组
//要去点击button 对象.属性(事件属性) = 匿名函数
//这个对象进行某一个操作onclick 单击事件,执行后面匿名函数
// btns[0].onclick = function () {
// div1.style.width = "500px"
// div1.style.height = "300px"
// div1.style.backgroundColor = "red"
// }
//ondblclick 是双击事件属性
// btns[0].ondblclick = function () {
// div1.style.width = "500px"
// div1.style.height = "300px"
// div1.style.backgroundColor = "red"
// }
//onmouseenter鼠标移入的事件
btns[0].onmouseenter = function() {
div1.style.width = "500px"
div1.style.height = "300px"
div1.style.backgroundColor = "red"
}
</script>
</html>

1.JS的内容

1.1window对象

所有浏览器都支持 window 对象。它代表浏览器的窗口。

所有全局 JavaScript 对象,函数和变量自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

写很多代码的时候没有写window

alert() 弹框效果,全写 window.alert()

1.1.1window下面有一个属性叫onload

onload是浏览器只要被启动,就会执行onload这个属性

onclick是鼠标点击之后就会执行

首先找到标签对象,拿标签对象调用属性或者调用方法(匿名函数)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body id="b1">
<div id="div1"></div>
</body>
<script>
//只要浏览器加载,就会执行onload方法 onload Function(event)
// window.onload = function () {
// var div1 = document.getElementById("div1")
// div1.style.width = "50px"
// div1.style.height = "40px"
// div1.style.backgroundColor = "green"
// }
//window.onload写不写都可以 因为scrit代码在咱们的页面肯定要执行的
var div1 = document.getElementById("div1")
div1.style.width = "50px"
div1.style.height = "40px"
div1.style.backgroundColor = "green"
</script>
</html>
1.1.2window获取电脑窗体的宽高
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

</body>
<script>
//如果这样写的话,ie 5,6,7不行的 不兼容的
// var h = window.innerHeight
// var w = window.innerWidth
// window.document.write(h +":"+ w)
//所有浏览器都兼容的 || 或,如果
//兼容的写法,所以js台乱了,用谷歌火狐行吗,但是ie,360等非主流浏览器不行
//很尴尬!!!
var w = window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth;

var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
window.document.write(h +":"+ w)
</script>
</html>
1.1.3window提示框

弹框

确认框

输入框

垃圾!!!太他妈的难看了,不要自己写,用比人封装好的,代码都有!!!这就是开发。

开发是效率高(复制别人的代码)而且还要好看

讲课咱们自己写的效率低,还难看

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button type="button" id="btn1">提示框</button>
<button type="button" id="btn2">确认框</button>
<button type="button" id="btn3">输入框</button>
</body>
<script>
var btn1 = document.getElementById("btn1")
var btn2 = document.getElementById("btn2")
var btn3 = document.getElementById("btn3")
btn1.onclick = function () {
window.alert("你好java")//提示框
}
btn2.onclick = function() {
//确认框
var ret = window.confirm("你是单身狗吗?")
console.log(ret)
if (ret) {
window.alert("这样我就放心了!!!")
} else {
window.alert("祝你百年好合!!!")
}
}
btn3.onclick = function() {
//输入框
var ret = window.prompt()
console.log(ret)
if (ret > 10) {
window.alert("土豪")
} else {
window.alert("穷")
}
}
</script>
</html>
1.1.4window的返回前进效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="7window前进和后退按钮.html">走你</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button>返回</button>
</body>
<script>
var btn = document.getElementsByTagName("button")
btn[0].onclick = function () {
window.history.back()
}

</script>
</html>

2.综合案例

表单验证

非常垃圾,记住以后用框架,非常好!!!今天也演示了一下layui element-ui 人家的表单验证比咱们的好

讲的就是给大家补充一点知识的!!!

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- onsubmit="return infoConfirm()"
写这个目的是如果你处输入的东西错误的东西,不让你提交数据到
另外一个页面。如果是对的让你提交。
返回值是true或者false
如果是true是可以跳转到下一个页面的,如果是false不可以跳转到下一个页面的
-->
<form action="7test.html" method="get" onsubmit="return infoConfirm()">
<!-- onfocus="" input输入框获取焦点的时候,会执行这个属性onfocus -->
姓名:<input type="text" name="name" id="nid"/ onfocus="clearAttr()"><span id="nameAttr" class="attr"></span><br>
手机:<input type="text" name="phone" id="pid" onfocus="clearAttr()"/><span id="telAttr" class="attr"></span><br>
<input type="reset" value="重置"/>
<input type="submit" value="提交"/>
</form>

</body>
<script>
function infoConfirm() {//这个方法的返回值是true或者是false t
var nameInput = document.getElementById("nid")
//验证用户是否为空?input输入框对象有一个属性叫value 值。
//获取input输入框中的值使用value属性
var name = nameInput.value
console.log(name)
//姓名的合法性判断
if (name ==null || name == "") {
//name不合法不能跳转
var spa1 = document.getElementById("nameAttr")
spa1.innerText = "用户不能为空"
spa1.style.color = "red"
return false
}
//手机号码的合法验证
//1.判断手机号码是否为空
var telInput = document.getElementById("pid")
var tel = telInput.value
if (tel == null || tel == "") {
var sp2 = document.getElementById("telAttr")
sp2.innerText = "手机号码不能为空"
sp2.style.color = "red"
//不合法不能跳转
return false
}
//2.手机号码如果输入错了的手机号 111111111
//验证手机号码的格式 正则表达式
//正则表达百度搜一下即可,不要想着自己写,因为你也不会写!!!
var reg = /^1[3456789]\d{9}$/
//reg.test(tel) input输入框中的数和reg进行模糊匹配,如果可以匹配上就返回true
//如果匹配不上就返回false
if (!reg.test(tel)) {
//tel格式有问题
var sp2 = document.getElementById("telAttr")
sp2.innerText = "手机格式不正确"
sp2.style.color = "red"
//不合法不能跳转
return false
}

}
//获取焦点以后才执行这个方法
function clearAttr() {
var attrs = document.getElementsByClassName("attr")
for (var i = 0; i < attrs.length; i++) {
attrs[i].innerText = ""
}
}
</script>
</html>

2.xml

XML 指可扩展标记语言

XML 被设计用来传输和存储数据。

在我们的 XML 教程中,你将了解什么是 XML,以及 XML 与 HTML 之间的差异。

XML 很重要,也很容易学习。

之前见过xml文件吗?见过 c3p0-config.xml

以后开发中比如ssm框架 写的xml相当多!!!慢慢自然而然就会。写多了

xml就是用来存储数据的

html w3c组织定义好的标签

xml 自己定义的标签,全部是双边的标签

ct_nodetree1

<?xml version="1.0" encoding="utf-8"?>
<bookstore>
<book category="science">
<title lang="jpm">红楼梦</title>
<author>老邢</author>
<year>2021</year>
<price>13.38</price>
</book>

<book category="文学">
<title lang="jpm">三国</title>
<author>骚磊</author>
<year>2020</year>
<price>10.22</price>
</book>
<!-- 例子中的根元素是 <bookstore>。只能有一个根。文档中的所有 <book> 元素都被包含在 <bookstore> 中。

<book> 元素有 4 个子元素:<title>、< author>、<year>、<price> -->
</bookstore>
<?xml version="1.0" encoding="utf-8"?>
<!-- xml文件的声明 
	告诉解析器当前版本是1.0的版本
	编码集是utf-8
	
	
	【注意事项】:
		1.只能那个有一个根元素
		2.标签必须是成双成对的
		3.一定要见名知意
-->
<students>
	<student>
		<name>骚磊</name>
		<age>68</age>
		<gender>不详</gender>
	</student>
	<student>
		<name>老万</name>
		<age>45</age>
		<gender>男</gender>
	</student>
	
</students>

你发现一个问题,这些都是胡乱写的,只要能存进去数据就行了。

但是真实的开发中不是这样,你的标签不能胡乱写!!!

2.1XML文件约束

1.dtd

文档类型定义(DTD)可定义合法的XML文档构建模块。就意味着你能够胡乱写了标签了

2.schema

XML Schema 是基于 XML 的 DTD 替代者。

XML Schema 描述 XML 文档的结构。

XML Schema 语言也称作 XML Schema 定义(XML Schema Definition,XSD)。

2.2dtd约束

<!--students  根节点,要求根节点存放student根标签-->
<!ELEMENT students (student*) >
<!--student 标签的有哪几个子标签-->
<!ELEMENT student (name, age, sex)>
<!--所有子标签当前的数据都是文本形式存在的-->
<!ELEMENT name (#PCDATA)>
<!ELEMENT age (#PCDATA)>
<!ELEMENT sex (#PCDATA)>
<!--student还想给一个id属性  ATTLIST   属性列表-->
<!ATTLIST student id ID #REQUIRED>
<!--以后记住不用写!!!都是别人封装好的!!!你只需要把人家写好的dtd
引入到你的xml文件中使用即可!!!你没有这个能力写dtd文件ssm都是封装好的。目的
为了程序需要统一化!!
-->
<?xml version="1.0" encoding="utf-8"?>

<!--如果没有引入dtd文件随便写都不会报错!!!-->
<!--但是引入dtd文件以后只能按照别人约束好的来写!!!-->
<!--引入咱们刚才写好的dtd文件-->
<!--<!DOCTYPE 根元素 SYSTEM "文件名">-->
<!--文件名是一个绝对路径!!!-->
<!DOCTYPE students SYSTEM
        "C:\Users\wangbo\Desktop\day38_wb\src\com\qfedu\dtd\student.dtd">
<!--写完dtd约束以后 你还能随便写标签吗?不能!!!-->
<students>
    <student id="ergou">
        <name>骚磊</name>
        <age>67</age>
        <sex>1</sex>

    </student>
</students>

开发并不是用!!!而是去知道有这个东西!!!就是今天我不讲dtd约束你们后面该写代码还是写代码还是很6,因为咱们就就不用去写dtd

2.3schema约束

是DTD的一个替代品,约束的更加严格

1.新建一个xsd文件

<?xml version="1.0"?>
<xsd:schema xmlns="http://www.qfedu.com/xml"
            xmlns:xsd="http://www.w3.org/2001/XMLSchema"
            targetNamespace="http://www.qfedu.com/xml" elementFormDefault="qualified">
<!--    xmlns=url  使用默认的名称空间,后面url随便写
 xmlns:xsd=url  可以引入多个xml  schema文档
 targetNamespace  指定schema元素属于哪个命名空间
-->

    <!-- 根节点名字和包含的内容,内容是自定义studentType -->
    <xsd:element name="students" type="studentsType"/>
    <!-- studentType类型声明   -->
    <xsd:complexType name="studentsType">
        <xsd:sequence>
            <!-- students根节点中存放的是student类型  type="studentType" 要求student的个数从0开始 个数不限制 -->
            <xsd:element name="student" type="studentType" minOccurs="0" maxOccurs="unbounded"/>
        </xsd:sequence>
    </xsd:complexType>
    <!-- studentType声明 -->
    <xsd:complexType name="studentType">
        <xsd:sequence>
            <!-- 要求student标签内有name,age,sex子标签,并且要求对一个对应保存的数据类型是type指定 -->
            <xsd:element name="name" type="xsd:string"/>
            <!-- ageType 和 sexType 是自定义数据约束 -->
            <xsd:element name="age" type="ageType" />
            <xsd:element name="sex" type="sexType" />
        </xsd:sequence>
        <!-- 给予Student标签属性 属性为id,要声明idType, use="required"不可缺少的 -->
        <xsd:attribute name="id" type="idType" use="required"/>
    </xsd:complexType>
    <!-- sexType性别类型声明 -->
    <xsd:simpleType name="sexType">
        <xsd:restriction base="xsd:string">
            <!-- 有且只有两个数据 male female -->
            <xsd:enumeration value="male"/>
            <xsd:enumeration value="female"/>
        </xsd:restriction>
    </xsd:simpleType>
    <xsd:simpleType name="ageType">
        <xsd:restriction base="xsd:integer">
            <!-- 0 ~ 256 要求范围,是一个integer类型 -->
            <xsd:minInclusive value="0"/>
            <xsd:maxInclusive value="256"/>
        </xsd:restriction>
    </xsd:simpleType>
    <xsd:simpleType name="idType">
        <xsd:restriction base="xsd:string">
            <!-- ID类型,要求gp_xxxx(四位数字) -->
            <xsd:pattern value="java_\d{4}"/>
        </xsd:restriction>
    </xsd:simpleType>
</xsd:schema>
<?xml version="1.0" encoding="utf-8" ?>
<!--填写根节点的约束关系   schema约束,外部的xsd文件约束进来-->
<students xmlns="http://www.qfedu.com/xml"
          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xsi:schemaLocation="http://www.qfedu.com/xml student.xsd">
<!--以上的内容是不是需要自己写??你是不是要疯?记住以后都是黏贴复制
不可能让你写的,你再牛逼也不行的
-->
   <student id="java_0001">
       <name>骚磊</name>
       <age>120</age>
       <sex>female</sex>
   </student>
</students>

3.xml解析

java中解析xml四种方案

四种只讲一种。因为这一种在源码有!!!咱们开发中不用去书写解析xml的代码

因为xml保存的是数据,你得把这些数据取出来。这就叫解析

四种:1.DOM解析 2.SAX解析 3.JDOM解析 4.DOM4J解析

只学一种 DOM4J这个,为什么?

以后会学习ssm框架,其中spring里面的底层封装了DOM4J,讲这个不是为了开发

开发的话,就用不到dom4j。因为是底层。我讲这个的目的是为了以后读懂spring

框架的源码。Hibernate也是dom4j这个xml解析工具

动脑子想一下,咱们框架里面很多的xml文件,如何执行的?靠这个dom4j

把xml文件读取出来,变成一个对象,然后去执行方法就可以了。我现在就是再框架的底层

案例

就解析咱们之前bookstore的一个xml

1.创建一个叫book.xml的文件

2.需要导包,dom4j这种方式进行解析的话,需要导一个包

一个是dom4j-1..16.jar

3.写java代码就行了

<?xml version="1.0" encoding="utf-8"?>
<bookstore>
	<book category="science">
		<title lang="jpm">红楼梦</title>
		<author>老邢</author>
		<year>2021</year>
		<price>13.38</price>
	</book>
	
	<book category="文学">
		<title lang="jpm">三国</title>
		<author>骚磊</author>
		<year>2020</year>
		<price>10.22</price>
	</book>
	<!-- 例子中的根元素是 <bookstore>。只能有一个根。文档中的所有 <book> 元素都被包含在 <bookstore> 中。

<book> 元素有 4 个子元素:<title>、< author>、<year>、<price> -->
</bookstore>
package com.qfedu.parsexml;

import org.dom4j.Attribute;
import org.dom4j.Document;
import org.dom4j.DocumentException;
import org.dom4j.Element;
import org.dom4j.io.SAXReader;

import java.io.File;
import java.util.Iterator;
import java.util.List;

public class Demo1 {
    public static void main(String[] args) throws DocumentException {
        //1.创建一个SAXreader
        SAXReader reader = new SAXReader();
        //2.T通过reader对象去读取book.xml文件
        //返回值是一个document对象
        Document document = reader.read(new File("src/xml/book.xml"));
        //3.document对象获取根节点元素
        Element bookstore = document.getRootElement();
        //4.获取迭代器对象,目的是想遍历
        Iterator it = bookstore.elementIterator();
        //5.遍历迭代器获取根节点的信息
        while (it.hasNext()) {
            System.out.println("======开始遍历一本书====");
            Element book = (Element)it.next();
            //获取book的属性及属性值
            List<Attribute> attributes = book.attributes();
            for (Attribute attribute : attributes) {
                System.out.println("属性:"+attribute.getName()+",属性值:"+attribute.getValue());
            }
            Iterator itt = book.elementIterator();
            while(itt.hasNext()) {
                Element bookChild = (Element)itt.next();//获取的是book标签的子标签对象
                System.out.println("节点名:" + bookChild.getName() + "---节点值:" + bookChild.getStringValue());


            }
            System.out.println("========结束遍历一本书========");
        }
    }
}

这个案例不需要记

posted @ 2021-09-08 17:08  张三疯321  阅读(141)  评论(0)    收藏  举报