JAVA JQUERY DAY01
1 jQuery使用示例
1.1 问题
1）页面上增加一个[+]按钮
2）点击该按钮时将页面内的段落字体放大
1.2 方案
jQuery使用步骤
- 引入jQuery的js文件
- 使用选择器定位要操作的节点
- 调用jQuery的方法进行操作
1.3 步骤
步骤一：创建HTML
创建WEB项目jQuery，引入jquery的js文件，结构如下图：
图-1
在day01下创建demo1.html，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>jQuery使用示例</title>
<meta charset="utf-8" />
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
function big() {
var font_size = $("p").css("font-size");
var size = parseInt(font_size.replace("px",""));
$("p").css("font-size", (size+1) + "px");
}
</script>
</head>
<body>
<input type="button" value="+" onclick="big();"/>
<h1>使用jQuery的步骤</h1>
<p>1.引入jQuery</p>
<p>2.使用jQuery选择器定位节点</p>
<p>3.调用jQuery方法操作节点</p>
</body>
</html>
步骤二：测试
打开demo1.html，效果如下图：
图-2
1.4 完整代码
demo1.html完整代码如下：
<!DOCTYPE html>
<html>
<head>
<title>jQuery使用示例</title>
<meta charset="utf-8" />
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
function big() {
var font_size = $("p").css("font-size");
var size = parseInt(font_size.replace("px",""));
$("p").css("font-size", (size+1) + "px");
}
</script>
</head>
<body>
<input type="button" value="+" onclick="big();"/>
<h1>使用jQuery的步骤</h1>
<p>1.引入jQuery</p>
<p>2.使用jQuery选择器定位节点</p>
<p>3.调用jQuery方法操作节点</p>
</body>
</html>
2 jQuery对象使用示例
2.1 问题
1）获取jQuery对象，并输出对象中各元素的内容
2）单击图片时改变图片的宽高
2.2 方案
- 获取jQuery对象：$(“p”)
- DOM对象转换为jQuery对象：$(obj)
2.3 步骤
步骤一：创建HTML
创建demo2.html，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>jQuery对象使用示例</title>
<meta charset="utf-8" />
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
function f1() {
var ps = $("p");
//alert(ps.length);
for(var i=0;i<ps.length;i++) {
var p = ps.get(i);
alert(p.innerHTML);
}
}
function f2(img) {
$(img).width("300px").height("300px");
}
</script>
</head>
<body>
<h1>jQuery对象</h1>
<p>1.jQuery统一封装的对象</p>
<p>2.jQuery选择器选择的结果是jQuery对象</p>
<p>3.jQuery对象本质上是一个DOM对象数组</p>
<input type="button" value="按钮一" onclick="f1();"/>
<p>
<img src="../images/01.jpg" onclick="f2(this);"/>
<img src="../images/02.jpg" onclick="f2(this);"/>
<img src="../images/03.jpg" onclick="f2(this);"/>
</p>
</body>
</html>
步骤二：测试
打开demo2.html，效果如下图：
图-3
2.4 完整代码
demo2.html完整代码如下：
<!DOCTYPE html>
<html>
<head>
<title>jQuery对象使用示例</title>
<meta charset="utf-8" />
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
function f1() {
var ps = $("p");
//alert(ps.length);
for(var i=0;i<ps.length;i++) {
var p = ps.get(i);
alert(p.innerHTML);
}
}
function f2(img) {
$(img).width("300px").height("300px");
}
</script>
</head>
<body>
<h1>jQuery对象</h1>
<p>1.jQuery统一封装的对象</p>
<p>2.jQuery选择器选择的结果是jQuery对象</p>
<p>3.jQuery对象本质上是一个DOM对象数组</p>
<input type="button" value="按钮一" onclick="f1();"/>
<p>
<img src="../images/01.jpg" onclick="f2(this);"/>
<img src="../images/02.jpg" onclick="f2(this);"/>
<img src="../images/03.jpg" onclick="f2(this);"/>
</p>
</body>
</html>
3 购物车
3.1 问题
1）修改购物数量后，计算金额
2）计算合计金额
3.2 方案
- 创建节点$(“节点内容”)
- 插入节点
- parent.append(obj) 做为最后一个子节点添加进来
- parent.prepend(obj) 做为第一个子节点添加进来
- brother.after(obj) 做为下一个兄弟节点添加进来
- brother.before(obj) 做为上一个兄弟节点添加进来
- 删除节点
- obj.remove() 删除节点
- obj.remove(selector) 只删除满足selector的节点
- obj.empty() 清空节点
3.3 步骤
步骤一：创建HTML
创建demo3.html，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>购物车</title>
<meta charset="utf-8" />
<style type="text/css">
h1 {
text-align:center;
}
table {
margin:0 auto;
width:60%;
border:2px solid #aaa;
border-collapse:collapse;
}
table th, table td {
border:2px solid #aaa;
padding:5px;
}
</style>
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
function add_shoppingcart(btn) {
var tds = $(btn).parent().siblings();
var name = tds.eq(0).text();
var price = tds.eq(1).text();
var new_tr =
$('<tr>' +
'<td>'+name+'</td>'+
'<td>'+price+'</td>'+
'<td align="center">'+
'<input type="button" value="-" onclick="change(this, -1);"/> '+
'<input type="text" size="3" readonly value="1"/> '+
'<input type="button" value="+" onclick="change(this, 1);"/> '+
'</td>'+
'<td>'+price+'</td>'+
'<td align="center"><input type="button" value="x" onclick="del(this);"/></td>' +
'</tr>');
$("#goods").append(new_tr);
total();
}
function del(btn) {
$(btn).parent().parent().remove();
total();
}
function total() {
var trs = $("#goods tr");
var sum = 0;
for(var i=0;i<trs.length;i++) {
var td = trs.eq(i).children().eq(3);
var m = td.text();
sum += parseFloat(m);
}
$("#total").text(sum);
}
function change(btn, n) {
var t = $(btn).next().length==0? $(btn).prev() : $(btn).next();
var amount = parseInt(t.val());
if(amount<=1 && n<0) {
return;
}
t.val(amount+n);
amount = t.val();
var tds = $(btn).parent().siblings();
var price = tds.eq(1).text();
var m = price*amount;
tds.eq(2).text(m);
total();
}
</script>
</head>
<body>
<h1>真划算</h1>
<table>
<tr>
<th>商品</th>
<th>单价(元)</th>
<th>颜色</th>
<th>库存</th>
<th>好评率</th>
<th>操作</th>
</tr>
<tr>
<td>罗技M185鼠标</td>
<td>80</td>
<td>黑色</td>
<td>893</td>
<td>98%</td>
<td align="center">
<input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>微软X470键盘</td>
<td>150</td>
<td>黑色</td>
<td>9028</td>
<td>96%</td>
<td align="center">
<input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>洛克iphone6手机壳</td>
<td>60</td>
<td>透明</td>
<td>672</td>
<td>99%</td>
<td align="center">
<input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>蓝牙耳机</td>
<td>100</td>
<td>蓝色</td>
<td>8937</td>
<td>95%</td>
<td align="center">
<input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>金士顿U盘</td>
<td>70</td>
<td>红色</td>
<td>482</td>
<td>100%</td>
<td align="center">
<input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
</td>
</tr>
</table>
<h1>购物车</h1>
<table>
<thead>
<tr>
<th>商品</th>
<th>单价(元)</th>
<th>数量</th>
<th>金额(元)</th>
<th>删除</th>
</tr>
</thead>
<tbody id="goods">
<!--
<tr>
<td>罗技M185鼠标</td>
<td>80</td>
<td align="center">
<input type="button" value="-"/>
<input type="text" size="3" readonly value="1"/>
<input type="button" value="+"/>
</td>
<td>80</td>
<td align="center"><input type="button" value="x"/></td>
</tr>
-->
</tbody>
<tfoot>
<tr>
<td colspan="3" align="right">总计</td>
<td id="total"></td>
<td></td>
</tr>
</tfoot>
</table>
</body>
</html>
步骤二：测试
打开demo3.html，效果如下图：
图-4
3.4 完整代码
demo3.html完整代码如下：
<!DOCTYPE html>
<html>
<head>
<title>购物车</title>
<meta charset="utf-8" />
<style type="text/css">
h1 {
text-align:center;
}
table {
margin:0 auto;
width:60%;
border:2px solid #aaa;
border-collapse:collapse;
}
table th, table td {
border:2px solid #aaa;
padding:5px;
}
</style>
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
function add_shoppingcart(btn) {
var tds = $(btn).parent().siblings();
var name = tds.eq(0).text();
var price = tds.eq(1).text();
var new_tr =
$('<tr>' +
'<td>'+name+'</td>'+
'<td>'+price+'</td>'+
'<td align="center">'+
'<input type="button" value="-" onclick="change(this, -1);"/> '+
'<input type="text" size="3" readonly value="1"/> '+
'<input type="button" value="+" onclick="change(this, 1);"/> '+
'</td>'+
'<td>'+price+'</td>'+
'<td align="center"><input type="button" value="x" onclick="del(this);"/></td>' +
'</tr>');
$("#goods").append(new_tr);
total();
}
function del(btn) {
$(btn).parent().parent().remove();
total();
}
function total() {
var trs = $("#goods tr");
var sum = 0;
for(var i=0;i<trs.length;i++) {
var td = trs.eq(i).children().eq(3);
var m = td.text();
sum += parseFloat(m);
}
$("#total").text(sum);
}
function change(btn, n) {
var t = $(btn).next().length==0? $(btn).prev() : $(btn).next();
var amount = parseInt(t.val());
if(amount<=1 && n<0) {
return;
}
t.val(amount+n);
amount = t.val();
var tds = $(btn).parent().siblings();
var price = tds.eq(1).text();
var m = price*amount;
tds.eq(2).text(m);
total();
}
</script>
</head>
<body>
<h1>真划算</h1>
<table>
<tr>
<th>商品</th>
<th>单价(元)</th>
<th>颜色</th>
<th>库存</th>
<th>好评率</th>
<th>操作</th>
</tr>
<tr>
<td>罗技M185鼠标</td>
<td>80</td>
<td>黑色</td>
<td>893</td>
<td>98%</td>
<td align="center">
<input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>微软X470键盘</td>
<td>150</td>
<td>黑色</td>
<td>9028</td>
<td>96%</td>
<td align="center">
<input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>洛克iphone6手机壳</td>
<td>60</td>
<td>透明</td>
<td>672</td>
<td>99%</td>
<td align="center">
<input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>蓝牙耳机</td>
<td>100</td>
<td>蓝色</td>
<td>8937</td>
<td>95%</td>
<td align="center">
<input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>金士顿U盘</td>
<td>70</td>
<td>红色</td>
<td>482</td>
<td>100%</td>
<td align="center">
<input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
</td>
</tr>
</table>
<h1>购物车</h1>
<table>
<thead>
<tr>
<th>商品</th>
<th>单价(元)</th>
<th>数量</th>
<th>金额(元)</th>
<th>删除</th>
</tr>
</thead>
<tbody id="goods">
<!--
<tr>
<td>罗技M185鼠标</td>
<td>80</td>
<td align="center">
<input type="button" value="-"/>
<input type="text" size="3" readonly value="1"/>
<input type="button" value="+"/>
</td>
<td>80</td>
<td align="center"><input type="button" value="x"/></td>
</tr>
-->
</tbody>
<tfoot>
<tr>
<td colspan="3" align="right">总计</td>
<td id="total"></td>
<td></td>
</tr>
</tfoot>
</table>
</body>
</html>