这个阶段有点拖沓了,因为事情比较多,耽搁了一段时间,学习的主要内容为JQuery和XML,因为vue的出现,JQuery技术现在已经不流行了,但是不流行不代表我不会,JQuery最最最最核心的就是他的$()核心函数,也是JQuery两把利剑中的其中一把,另外一把是JQuery核心对象,即JQuery核心函数返回的对象,JQuery对象内部包含的是dom元素对象的伪数组(可能只有元素),还有各种选择器操作。
JQuery函数使用时需要等页面加载完成,则就需要将选择器操作写在$(function (){ })内,其与$(document).ready((function (){ })相同,前者是后者的语法糖。
一些JQuery选择器操作
<script src="jquery-3.5.1.min.js"></script>
<script type="text/javascript">
//等待dom 页面加载和显示
$(function (){
/*$("#btn").click(function (){
$(":file").css("background","red");
})*/
/* $("#btn").click(function (){
//val()方法可以获取表单项的值 也可以 将括号中的参数进行对表单项的赋值
$(":text:disabled").val("I am your father!");
})*/
/* $("#btn").click(function (){
$(":file").css("background","red");
}) */
$("#btn").click(function (){
//这个input可以省略 因为:file就是默认表单选择器
$("input:file").css("background","red");
})
})
</script>
<script src="jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function (){
/*
$("#btn1").click(function (){
$("h1[id]").css("background","red");
})*/
/* $("#btn1").click(function (){
$("h1[id$='2']").css("background","red");
})*/
/*$("#btn1").click(function (){
$("h1[id^='0']").css("background","red");
})*/
/*
$("#btn1").click(function (){
$("h1[id^='0'][id!='02']").css("background","red");
})*/
$("#btn1").click(function (){
$("h1[id!='01']").css("background","red");
})
})
</script>
<script src="jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
/*$("#btn1").click(function (){
$("h1:contains(3333)").css("background","red");
})*/
/* $("#btn1").click(function (){
$("div:empty").css("background","red");
})*/
$("#btn1").click(function (){
$("h1:has(.div01)").css("background","red");
})
//选择非空元素
/* $("#btn1").click(function (){
$("h1:parent").css("background","red");
})*/
})
</script>
XML
“XML” 通常指的是 “eXtensible Markup Language”,它是一种用于标记电子文件使其具有结构性的标记语言。XML 被设计用来传输和存储数据。XML 文件以 .xml 扩展名结尾,并通常包含 <?xml> 声明,以及一系列的标签,这些标签用于定义数据的内容和结构。
<?xml version="1.0" encoding="utf-8" ?>
<books>
<book sn="SN123441232">
<name>牛马玩意</name>
<price>0.2</price>
<author>蓝少龙</author>
</book>
<![CDATA[纯文本内容,不需要解析]]>
<book sn="SN123441231">
<name>撒比东西</name>
<price>0.6</price>
<author>蓝少龙</author>
</book>
</books>
XML解:解析前需添加三种jar包(dom4j,hamcrest-core,junit)
package com.atmxb.pojo;
import org.dom4j.Document;
import org.dom4j.DocumentException;
import org.dom4j.Element;
import org.dom4j.io.SAXReader;
import org.junit.Test;
import java.util.List;
public class dom4j {
@Test
public void test1() throws DocumentException {
//创建SAXReader流 去读取xml配置文件 生成document对象
SAXReader saxReader=new SAXReader();
Document document = saxReader.read("D:\\Program Files\\JavaWeb_mxb\\xml\\src\\book.xml");
System.out.println(document);
}
/*
* 读取books.xml文件生成book类
* */
@Test
public void test02() throws DocumentException {
//1.读取book.xml文件
SAXReader reader=new SAXReader();
//在junit测试中 相对路径是从模块名开始算
Document document = reader.read("src/book.xml");
//2.通过document对象获取根元素
Element rootElement = document.getRootElement();
//System.out.println(rootElement);
//3.通过根元素获取book标签对象 element()和elements()都是通过标签名查找子元素
//如果标签名有多个 则需要复数形式
List<Element> books = rootElement.elements("book");
//4.遍历 处理每个book标签转换为book类
System.out.println(" 书名 "+"价格 "+"作者");
for (Element book : books) {
String name = book.element("name").asXML(); //asXML()把标签对象转化为标签字符串
//System.out.println(name);
//elementText()可以直接获取标签中的内容
String nametext = book.elementText("name");
String pricetext = book.elementText("price");
String authortext = book.elementText("author");
System.out.println(nametext+" "+pricetext+" "+authortext);
//获取标签属性
String sn = book.attributeValue("sn");
System.out.println(sn);
}
}
}
笔记