版权声明:原创作品转载必须标明出处,谢谢配合! https://blog.csdn.net/qq_38704184/article/details/85009419
jQuery
jQuery是一个优秀的JavaScript框架,一个轻量级的JS库。
他封装了JS,CSS,DOM,提供了一致的,简洁的API。
兼容CSS3,以及各种浏览器
使用户更方便地处理HTML,Events、实现动画效果,并且方便地为网站提供AJAX交互
使用户的HTML页面保持代码和HTML内容分离
注意:jQuery2.x开始不再支持Internet Explorer6,7,8
jQuery为了解决浏览器的兼容问题而提供的一种统一封装后的对象描述
jQuery提供的方法都是针对jQuery独享特有的,而且大部分方法的返回值类型也是jQuery对象,所以方法可以连缀调用“jquery对象.方法().方法().方法()....”
通过jQuery选择器选中的对象为jQuery对象
如$("div")和$(#d1)
jQuery选择器包含如下种类:
--基本选择器
- 元素选择:依据标签名定位元素 $("标签名")
- 类选择器:根据class属性定位元素 $(".class属性名")
- id 选择器:根据id属性定位元素 $("#id")
- 选择器组:定位一组选择器多对应的所有元素 $("#id,importent")
--层次选择器
- 在select1元素下,选中所有满足select2 的子孙元素 $("select1 select2")
- 在select1元素下,选中所有满足select2的子元素 $("select1 > select2")
- 选中select1元素的,满足select2的下一个弟弟 $("select+select2")
- 选中select1元素的,满足select2 的所有弟弟 $("select1 ~ select2")
--过滤选择器
- first 第一个元素
- last 最后一个元素
- not (selector) 把selector排序在外
- even 挑选偶数行
- odd 挑选奇数行
- eq(index)下标等于index的元素
- gt(index)下标大于index的元素
- lt(index)下标小于index的元素
- contains(text) 匹配包含给定文件的元素
- empty匹配所有不包含子元素或文本的空元素
- hidden 匹配所有不可见元素
- visible 匹配所有的课件元素
- [attribute]匹配具有attribute属性的元素
- [attribute = value]匹配属性等于value的元素
- [attribute != value]匹配属性不等于value的元素
- enable 匹配可用的元素
- disable匹配不可以的元素
- checked匹配选中的CheckBox
- seleced 匹配选中的option
--表单选择器
- text
- password
- radio
- chexkbox
- submit
- reset
- button
- file
- hidden
读写节点
- 读写节点的HTML内容 obj.html() / obj.html("<span>123</span>")
- 读写节点的文本内容 obj.text() / obj.text("123")
- 读写节点的value属性值 obj.val() / obj.val("abc")
- 读写节点的属性值 obj.attr("属性值") /obj.val("属性名","属性值")
插入DOM节点
- parent.append(obj)作为最后一个自及诶单添加进来
- parent.prepend(obj)作为第一个子节点添加进来
- brother.after(obj)作为下一个兄弟节点添加进来
- brother.before(obj)作为上一个兄弟节点添加进来
删除DOM节点
- obj.remove()删除节点
- obj.remove(selector)只删除满足selector的节点
- obj.empty()清空节点
样式操作
- addclass(" ") 追加样式
- removeClass(" ") 移除指定样式
- removeClass() 移除所有样式
- toggleClass(" ") 切换样式
- hasClass(" ")判断是否有某个样式
- css(" ")读取css的值
- css(" "," ")设置多个样式
遍历节点
- children() / children(selector) 直接子节点
- next() /next(selector) 下一个兄弟节点
- prev() /prev(select) 上一个兄弟节点
- siblings() / siblings(selector) 所有兄弟
- find(selector) 查找满足选择器的所有后代
- parent() 父节点
如何取消冒泡事件(什么是事件冒泡:子节点产生的事件会一次向上抛给父节点)
e.stopPropagation() 可以取消事件冒泡
if(event.stopPropagation){
event.stopPropagation();//IE
}else{
event.cancelBuddle();//非IE
}
基于jQuery的购物demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物</title>
<style type="text/css">
body{
background: #ccceee;
}
h1 {
text-align: center;
}
table {
width:60%;
margin: 100px auto;
border: 1px solid #ffffff;
border-collapse: collapse;
text-align: center;
}
table th ,table td {
border: 1px solid #ffffff;
padding: 5px;
}
input:hover {
background-color: yellow;
}
</style>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
function addshopping(btn) {
var tds = $(btn).parent().siblings();
var name = tds.eq(0).text();
var price = tds.eq(1).text();
var n_tr = $('<tr>'+
'<td>'+name+'</td>'+
'<td>'+price+'</td>'+
'<td align="center">'+
'<input type="button" value="-" onclick="decrease(this);">'+
'<input type="text" value="1" size="3" readonly>'+
'<input type="button" value="+" onclick="increase(this);">'+
'</td>'+
'<td>'+price+'</td>'+
'<td align="center">'+
'<input type="button" value="X" onclick="del(this);">'+
'</td>'+'</tr>'
);
$("#goods").append(n_tr);
total();
}
function del(btn) {
$(btn).parent().parent().remove();
total();
}
function increase(btn) {
//获取文本框内容
var amount = $(btn).prev().val();
$(btn).prev().val(++amount);
//获取单价
var price = $(btn).parent().prev().text();
var money = amount*price;
$(btn).parent().next().text(money);
total();
}
function decrease(btn) {
//获取数量
var amount = $(btn).next().val();
if (amount<=1) {
return;
}
$(btn).next().val(--amount);
//获取单价
var price = $(btn).parent().prev().text();
var money = amount*price;
$(btn).parent().next().text(money);
total();
}
function total() {
//获取tbody下的所有行
var $trs = $("#goods tr");
//遍历
var sum = 0 ;
for (var i = 0; i < $trs.length; i++) {
// 获取每一行
var $tr = $trs.eq(i);
//获取每一行中的第四列
var money = $tr.children().eq(3).text();
sum += parseFloat(money);
}
$("#total").text(sum);
}
</script>
</head>
<body>
<h1>聚划算</h1>
<table>
<thead>
<tr>
<th>商品名</th>
<th>商品价格</th>
<th>商品库存</th>
<th>好评率</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>龙瞎皮肤</td>
<td>888</td>
<td>100</td>
<td>50%</td>
<td>
<input type="button" value="加入购物车" onclick="addshopping(this);"/>
</td>
</tr>
<tr>
<td>寒冰源计划皮肤</td>
<td>666</td>
<td>50</td>
<td>70%</td>
<td>
<input type="button" value="加入购物车" onclick="addshopping(this);"/>
</td>
</tr>
<tr>
<td>劫源计划皮肤</td>
<td>555</td>
<td>30</td>
<td>60%</td>
<td>
<input type="button" value="加入购物车" onclick="addshopping(this);"/>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" style="text-align: center;color: red;">LOL皮肤选购</td>
</tr>
</tfoot>
</table>
<h1>购物车</h1>
<table>
<thead>
<tr>
<th>商品名</th>
<th>商品单价</th>
<th>商品数量</th>
<th>商品总价</th>
<th>操作</th>
</tr>
</thead>
<tbody id="goods">
</tbody>
<tfoot>
<tr>
<td colspan="3">总价:</td>
<td colspan="2" id="total"></td>
</tr>
</tfoot>
</table>
</body>
</html>