WEB_Day09(jQuery:操作属性、特殊属性操作、事件机制,Bootstrap,LayUI,拼图,XML,dom4j解析技术)
jQuery操作属性
attr(name|properties|key,value|fn)
获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性。
prop(name|properties|key,value|fn)
获取匹配的元素集中第一个元素的属性(property)值或设置每一个匹配元素的一个或多个属性。
它们两个之间有什么区别?
在jQuery中,attr()函数和prop()函数都用于设置或获取指定的属性,它们的参数和用法也几乎完全相同。
- 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
- 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function () {
var href = $("a").attr("href");
console.log(href);
var hrefp = $("a").prop("href");
console.log(hrefp);
var actionA = $("a").attr("action");
var actionP = $("a").attr("action");
console.log(actionA);
console.log(actionP);
//对于没有设置的属性 attr和prop获取到的值都是undefined
var d1 = $("#name").attr("disabled");
console.log(d1);//disabled
var d2 = $("#name").prop("disabled");
console.log(d2);//true
//设置下拉框的默认选择项
$("select option[value='sz']").prop("selected", true);
$("select").change(function () {
console.log($("select option:selected").text());
})
})
</script>
</head>
<body>
<a href="http://www.baidu.com" target="_blank" title="百度" action="http://localhost:80/">百度</a>
<br />
<input type="text" name="name" id="name" disabled="true">姓名
<br />
<!-- 设置下拉框可以多选 -->
<select multiple>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
<option value="sz">深圳</option>
</select>
</body>
</html>
使用的时候 优先使用prop
案例:相册
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
font-family: "Helvetica", "Arial", serif;
color: #333;
background-color: #ccc;
margin: 1em 10%;
}
h1 {
color: #333;
background-color: transparent;
}
a {
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
ul {
padding: 0;
}
li {
float: left;
padding: 1em;
list-style: none;
}
#imagegallery {
list-style: none;
}
#imagegallery li {
margin: 0px 20px 20px 0px;
padding: 0px;
display: inline;
}
#imagegallery li a img {
border: 0;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function () {
$("li>a").click(function () {
var href = $(this).attr("src");
$("#image").prop("src", href);
var title = $(this).attr("title");
$("#des").text(title);
})
})
</script>
</head>
<body>
<h2>
美女画廊
</h2>
<ul id="imagegallery">
<li><a href="javascript:void(0)" src="imgs/1.jpg" title="美女A">
<img src="imgs/1-small.jpg" width="100" alt="美女1" />
</a></li>
<li><a href="javascript:void(0)" src="imgs/2.jpg" title="美女B">
<img src="imgs/2-small.jpg" width="100" alt="美女2" />
</a></li>
<li><a href="javascript:void(0)" src="imgs/3.jpg" title="美女C">
<img src="imgs/3-small.jpg" width="100" alt="美女3" />
</a></li>
<li><a href="javascript:void(0)" src="imgs/4.jpg" title="美女D">
<img src="imgs/4-small.jpg" width="100" alt="美女4" />
</a></li>
</ul>
<div style="clear:both"></div>
<img id="image" src="imgs/placeholder.png" alt="" width="450px" />
<p id="des">选择一个图片</p>
</body>
</html>
【案例:全选全不选案例】
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
text-align: center;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function () {
//全选
$("#j_cbAll").click(function () {
$("#j_tb input").prop("checked", $(this).prop("checked"));
})
//单独选择
$("#j_tb input").click(function () {
if ($("#j_tb input").length == $("#j_tb input:checked").length) {
$("#j_cbAll").prop("checked", true);
} else {
$("#j_cbAll").prop("checked", false);
}
})
})
</script>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll" />
</th>
<th>菜名</th>
<th>饭店</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox" />
</td>
<td>红烧肉</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>西红柿鸡蛋</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>红烧狮子头</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>日式肥牛</td>
<td>田老师</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
jQuery特殊属性操作
val方法:
val方法用于设置和获取表单元素的值,例如input、textarea的值
//设置值
$("#name").val(“张三”);
//获取值
$("#name").val();
html方法与text方法:
//设置内容
$("div").html(“<span>这是一段内容</span>”);
//获取内容
$("div").html()
//设置内容
$("div").text(“<span>这是一段内容</span>”);
//获取内容
$("div").text()
区别:html方法会识别html标签,text方法会那内容直接当成字符串,并不会识别html标签。
width方法与height方法:
设置或者获取高度
//带参数表示设置高度
$(“img”).height(200);
//不带参数获取高度
$(“img”).height();
获取网页的可视区宽高
//获取可视区宽度
$(window).width();
//获取可视区高度
$(window).height();
scrollTop与scrollLeft:
设置或者获取垂直滚动条的位置
//获取页面被卷曲的高度
$(window).scrollTop();
//获取页面被卷曲的宽度
$(window).scrollLeft();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
height: 8000px;
}
a {
color: #FFF;
}
.actGotop {
position: fixed;
bottom: 50px;
right: 50px;
width: 150px;
height: 195px;
display: none;
z-index: 100;
}
.actGotop a,
.actGotop a:link {
width: 150px;
height: 195px;
display: inline-block;
background: url(imgs/gotop.png) no-repeat;
outline: none;
}
.actGotop a:hover {
width: 150px;
height: 195px;
background: url(imgs/gotop.gif) no-repeat;
outline: none;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function () {
$(window).scroll(function () {
var top = $(window).scrollTop();
if (top > 1000) {
$(".actGotop").stop().fadeIn(200);
} else {
$(".actGotop").stop().fadeOut(200);
}
})
$(".actGotop").click(function () {
$("html,0body").stop().animate({ scrollTop: 0 }, 1000);
$(window).scrollTop(0);
;
})
})
</script>
</head>
<body>
<!-- 返回顶部小火箭 -->
<div class="actGotop"><a href="javascript:;" title="Top"></a></div>
</body>
</html>
jQuery事件机制:
jquery 之所以成为最受欢迎的前端库,很大一部分是得益于它的事件具有良好的语义,优秀的兼容性,并且便于管理和扩展。
JavaScript中已经学习过了事件,但是jQuery对JavaScript事件进行了封装,增加并扩展了事件处理机制。jQuery不仅提供了更加优雅的事件处理语法,而且极大的增强了事件的处理能力。
实现原理:
jquery 事件脱胎于浏览器的 addEventListener (W3) 和 attachEvent (IE) 方法 , 提供了跨浏览器的一致性API。
jQuery事件发展历程(了解):
简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐)
简单事件注册
click(handler) 单击事件
mouseenter(handler) 鼠标进入事件
mouseleave(handler) 鼠标离开事件
缺点:不能同时注册多个事件
bind方式注册事件:
// 使用bind可以绑定多个事件 缺点:只能给元素静态的绑定 而不能为元素动态绑定
$("div").bind("mouseleave mouseenter", function () {
alert("bbbb");
})
delegate注册委托事件 :
将原本需要绑定到某元素上的事件,改为绑定在父元素乃至根节点上,然后委派给当前元素生效;
//将事件有 父类委托给子元素
$("div").delegate("button", "click", function () {
alert("ccc");
})
on注册事件(重点):
jQuery1.7之后,jQuery用on统一了所有事件的处理方法。
最现代的方式,兼容zepto(移动端类似jQuery的一个库),强烈建议使用。
- 使用on进行单事件绑定
$("#btn").on("click", function () {
alert("ddddd");
})
- 使用on同时为多个事件,绑定同一函数
$("#btn").on("click mouseenter", function () {
alert("ddddd");
})
- 调用函数时,传入自定义参数
$("#btn").on("click", { name: "中北大学" }, function (event) {
alert(event.data.name);
})
- 使用on进行多事件多函数绑定
$("#btn").on({
//单击
click: function (event) {
alert("22222");
},
//双击事件
dblclick: function () {
alert("11111")
}
})
- on注册委托事件
//使用on注册委托事件
$("div").on("click", "button", function () {
alert("aaaaa");
})
- 第一个参数:events,绑定事件的名称可以是由空格分隔的多个事件(标准事件或者自定义事件)
- /第二个参数:selector, 执行事件的后代元素(可选),如果没有后代元素,那么事件将有自己执行。
- 第三个参数:data,传递给处理函数的数据,事件触发的时候通过event.data来使用(不常使用)
- 第四个参数:handler,事件处理函数
$("div").click(function () {
$("div").append(" <button>按钮</button>");
})
//使用on注册委托事件
$("div").on("click", "button", function (event) {
alert("aaaaa");
//阻止事件冒泡
event.stopPropagation();
})
- on.(‘click’) 和 .click() 的区别
on 属于 绑定事件处理器(event-handler-attachment) , 而 .click() 属于 jquery包装好的鼠标事件。
事件解绑:
unbind方式(不用)
$(selector).unbind(); //解绑所有的事件
$(selector).unbind("click"); //解绑指定的事件
undelegate方式(不用)
$( selector ).undelegate(); //解绑所有的delegate事件
$( selector).undelegate( “click” ); //解绑所有的click事件
off方式(推荐)
// 解绑匹配元素的所有事件 $(selector).off();
// 解绑匹配元素的所有click事件 $(selector).off("click");
触发事件:
$(selector).click();
//触发 click事件 $(selector).trigger("click");
jQuery事件对象
jQuery事件对象其实就是js事件对象的一个封装,处理了兼容性。
- screenX和screenY 对应屏幕最左上角的值
- clientX和clientY 距离页面左上角的位置(忽视滚动条)
- pageX和pageY 距离页面最顶部的左上角的位置(会计算滚动条的距离)
- event.keyCode 按下的键盘代码
- event.data 存储绑定事件时传递的附加数据
- event.preventDefault() 阻止浏览器默认行为
- return false:阻止浏览器默认行为
【案例:表格删除功能】
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 410px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "΢ÈíÑźÚ";
color: #fff;
}
td {
font: 14px "΢ÈíÑźÚ";
}
td a.get {
text-decoration: none;
}
a.del:hover {
text-decoration: underline;
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
.btnAdd {
width: 110px;
height: 30px;
font-size: 20px;
font-weight: bold;
}
.form-item {
height: 100%;
position: relative;
padding-left: 100px;
padding-right: 20px;
margin-bottom: 34px;
line-height: 36px;
}
.form-item>.lb {
position: absolute;
left: 0;
top: 0;
display: block;
width: 100px;
text-align: right;
}
.form-item>.txt {
width: 300px;
height: 32px;
}
.mask {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: #000;
opacity: 0.15;
display: none;
}
.form-add {
position: fixed;
top: 30%;
left: 50%;
margin-left: -197px;
padding-bottom: 20px;
background: #fff;
display: none;
}
.form-add-title {
background-color: #f7f7f7;
border-width: 1px 1px 0 1px;
border-bottom: 0;
margin-bottom: 15px;
position: relative;
}
.form-add-title span {
width: auto;
height: 18px;
font-size: 16px;
font-family: ËÎÌå;
font-weight: bold;
color: rgb(102, 102, 102);
text-indent: 12px;
padding: 8px 0px 10px;
margin-right: 10px;
display: block;
overflow: hidden;
text-align: left;
}
.form-add-title div {
width: 16px;
height: 20px;
position: absolute;
right: 10px;
top: 6px;
font-size: 30px;
line-height: 16px;
cursor: pointer;
}
.form-submit {
text-align: center;
}
.form-submit input {
width: 170px;
height: 32px;
}
</style>
</head>
<body>
<div class="wrap">
<input type="button" value="清空内容" id="btn">
<input type="button" value="添加" id="btnAdd">
<table>
<thead>
<tr>
<th>课程名称</th>
<th>所属科目</th>
<th>操作</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<!-- <td><input type="checkbox"/></td> -->
<td>JavaScript</td>
<td>WEB前端</td>
<td><a href="#" class="get">DELETE</a></td>
</tr>
<tr>
<!-- <td><input type="checkbox"/></td> -->
<td>css</td>
<td>WEB前端</td>
<td><a href="#" class="get">DELETE</a></td>
</tr>
<tr>
<!-- <td><input type="checkbox"/></td> -->
<td>html</td>
<td>WEB前端</td>
<td><a href="#" class="get">DELETE</a></td>
</tr>
<tr>
<td>jQuery</td>
<td>WEB前端</td>
<td><a href="#" class="get">DELETE</a></td>
</tr>
</tbody>
</table>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
$("#btn").on("click", function () {
//删除匹配的元素集合中所有的子节点。
$("#j_tb").empty();
})
$("#btnAdd").click(function () {
$("#j_tb").append("<tr><td>jQuery</td><td>WEB前端</td><td><a href='#' class='get'>DELETE</a></td></tr>");
$("<tr><td>jQuery</td><td>WEB前端</td><td><a href='#' class='get'>DELETE</a></td></tr>").appendTo($("#j_tb"));
})
$("#j_tb").on("click", "a", function () {
$(this).parent().parent().remove();
});
});
</script>
</body>
</html>
【案例:五角星评分案例.html】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>五角星评分案例</title>
<style>
* {
padding: 0;
margin: 0;
}
.comment {
font-size: 40px;
color: #ff16cf;
}
.comment li {
float: left;
}
ul {
list-style: none;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
//1. 给li注册鼠标经过事件,让自己和前面所有的兄弟都变成实心
var wjx_k = "☆";
var wjx_s = "★";
$(".comment>li").on("mouseenter", function () {
$(this).text(wjx_s).prevAll().text(wjx_s);
$(this).nextAll().text(wjx_k);
});
//2. 给ul注册鼠标离开时间,让所有的li都变成空心
$(".comment").on("mouseleave", function () {
$(this).children().text(wjx_k);
//再做一件事件,找到current,让current和current前面的变成实心就行。
$("li.current").text(wjx_s).prevAll().text(wjx_s);
});
//3. 给li注册点击事件
$(".comment>li").on("click", function () {
$(this).addClass("current").siblings().removeClass("current");
});
});
</script>
</head>
<body>
<ul class="comment">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
</body>
</html>
Bootstrap
https://www.bootcss.com/
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。
基本模板:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<script src="js/jquery-1.12.4.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.js"></script>
</head>
<body>
<div class="container">
</div>
<div class="container-fluid">
...
</div>
</body>
</html>
超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | |
栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的,当大于这些阈值时将变为水平排列C | ||
.container 最大宽度 | None (自动) | 750px | 970px | 1170px |
类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
列(column)数 | 12 | |||
最大列(column)宽 | 自动 | ~62px | ~81px | ~97px |
槽(gutter)宽 | 30px (每列左右均有 15px) | |||
可嵌套 | 是 | |||
偏移(Offsets) | 是 | |||
列排序 | 是 |
layUI
https://www.layui.com/
拼图
https://www.pintuer.com/
xml
什么是xml?
xml 是可扩展的标记性语言。
xml 的主要作用有:
- 用来保存数据,而且这些数据具有自我描述性
- 它还可以做为项目或者模块的配置文件
- 还可以做为网络传输数据的格式(现在JSON 为主)
xml 语法:
- 文档声明。
- 元素(标签)
- xml 属性
- xml 注释
- 文本区域(CDATA 区)
文档说明
<?xml version="1.0" encoding="UTF-8"?>
而且这个<?xml 要连在一起写,否则会有报错
属性
- version 是版本号
- encoding 是xml 的文件编码
- standalone=“yes/no” 表示这个xml 文件是否是独立的xml 文件
<?xml version="1.0" encoding="UTF-8"?>
<books>
<book>
<name>java编程思想</name>
<author>张三</author>
<price>150.63</price>
</book>
<book>
<name>数据结构</name>
<author>李四</author>
<price>50.56</price>
</book>
</books>
xml 注释:
html 和 XML 注释 一样 : <!-- html 注释 -->
元素(标签):
html 标签:
格式: <标签名>封装的数据</标签名>
单标签: <标签名 /> <br />
换行 <hr />
水平线
双标签 <标签名>封装的数据</标签名>
标签名大小写不敏感
标签有属性, 有基本属性和事件属性
标签要闭合(不闭合 , html 中不报错。 但我们要养成良好的书写习惯。 闭合)
XML 命名规则:
XML 元素必须遵循以下命名规则:
- 名称可以含字母、 数字以及其他的字符
- 名称不能以数字或者标点符号开始
- 名称不能以字符 “xml”( 或者 XML、 Xml) 开始 ( 它是可以的)
- 名称不能包含空格
xml 中的元素( 标签) 也 分成 单标签和双标签:
单标签 格式: <标签名 属性=”值” 属性=”值” … />
双标签 格式: < 标签名 属性=”值” 属性=”值” …>文本数据或子标签</标签名>
xml 属性:
xml 的标签属性和 html 的标签属性是非常类似的, 属性可以提供元素的额外信息
在标签上可以书写属性:
- 一个标签上可以书写多个属性。 每个属性的值必须使用 引号 引起来。
- 书写的规则和标签的书写规则一致。
语法规则:
- 所有 XML 元素都须有关闭标签(也就是闭合)
- XML 标签对大小写敏感
- XML 必须正确地嵌套
- XML 文档必须有根元素
- 根元素就是顶级元素,没有父标签的元素, 叫顶级元素。
- 根元素是没有父标签的顶级元素, 而且是唯一一个才行。
- XML 的属性值须加引号
- XML 中的特殊字符(转移字符) > <
- 文本区域( CDATA 区)
CDATA 语法可以告诉 xml 解析器,我 CDATA 里的文本内容,只是纯文本,不需要 xml 语法解析
CDATA 格式:<![CDATA[ 这里可以把你输入的字符原样显示, 不会解析 xml ]]>
<book id="SN202103281213">
<name>oracle数据库</name>
<author>
<![CDATA[
这是一本关于《Oracle》的书。该书的作者为:”王五“。》》》》>>>
]]>
</author>
<price>50.56</price>
</book>
xml 解析技术介绍
document 对象表示的是整个文档(可以是 html 文档, 也可以是 xml 文档)
早期 JDK 为我们提供了两种 xml 解析技术 DOM 和 Sax 简介(已经过时, 但我们需要知道这两种技术)
- dom 解析技术是 W3C 组织制定的, 而所有的编程语言都对这个解析技术使用了自己语言的特点进行实现。Java 对 dom 技术解析标记也做了实现。
- sun 公司在 JDK5 版本对 dom 解析技术进行升级: SAX( Simple API for XML )
- SAX 解析, 它跟 W3C 制定的解析不太一样。 它是以类似事件机制通过回调告诉用户当前正在解析的内容。它是一行一行的读取 xml 文件进行解析的。 不会创建大量的 dom 对象。所以它在解析 xml 的时候, 在内存的使用上。 和性能上。 都优于 Dom 解析。
dom4j 解析技术(重点):
由于 dom4j 它不是 sun 公司的技术, 而属于第三方公司的技术, 我们需要使用 dom4j 就需要到 dom4j 官网下载 dom4j的 jar 包。
dom4j 编程步骤:
- 第一步: 先加载 xml 文件创建 Document 对象
- 第二步: 通过 Document 对象拿到根元素对象
- 第三步: 通过根元素.elelemts(标签名); 可以返回一个集合, 这个集合里放着。 所有你指定的标签名的元素对象
- 第四步: 找到你想要修改、 删除的子元素, 进行相应在的操作
- 第五步, 保存到硬盘上
public class Dom4JDemo {
public static void main(String[] args) throws FileNotFoundException, DocumentException {
//创建文档解析器
SAXReader sax = new SAXReader();
//获取document对象
Document document = sax.read(new FileInputStream(new File("src/books.xml")));
System.out.println("document = " + document);
//获取根元素
Element books = document.getRootElement();
System.out.println("root = " + books);
//获取所有的book节点
List<Element> list = books.elements("book");
for (Element book : list) {
String name= book.element("name").getTextTrim();
String author = book.element("author").getTextTrim();
String price = book.element("price").getTextTrim();
System.out.println(name+"---"+author+"--"+price);
}
}
}
结合xpath来解析xml:
Xpath指的是一种路径解析
package org.lanqiao.dom;
import org.dom4j.Document;
import org.dom4j.DocumentException;
import org.dom4j.Node;
import org.dom4j.io.SAXReader;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.util.List;
public class XPathDemo {
public static void main(String[] args) throws FileNotFoundException, DocumentException {
SAXReader reader = new SAXReader();
Document document = reader.read(new FileInputStream(new File("src/books.xml")));
//选取价格小于100的book的价格
List<Node> list = document.selectNodes("/books/book[price<100]/price");
for(Node node :list){
String name = node.getText();
System.out.println(name);
}
}
}