1 选择器
1.1 基本选择器
基本选择器 | 语法 |
---|---|
ID选择器 | #ID |
类选择器 | .类名 |
标签选择器 | 标签名 |
1.2 层级选择器
层级选择器 | 语法 |
---|---|
获取A元素内部所有B元素,B是A的子孙元素 | A B |
获得A元素下面的所有B子元素 | A>B |
获得A元素同级,下一个B元素。(B和A是兄弟关系,A是老二,B是老三) | A+B |
获取A元素后面所有同级B元素。(B是A后面所有的兄弟,得到一个集合) | A~B |
1.3基本过滤选择器
基本过滤选择器 | 语法 |
---|---|
获得选择的元素中的第一个元素 | :first |
获得选择的元素中的最后一个元素 | :last |
不包括指定内容的元素 | :not() |
偶数,从 0 开始计数 | :even |
奇数,从 0 开始计数 | :odd |
等于第几个 | :eq() |
大于第n个,不含第index个 | :gt() |
小于第n个,不含第index个 | :lt() |
1.4 表单过滤选择器
表单属性选择器 | 语法 |
---|---|
可用 | :enabled |
不可用 | :disabled |
选中(单选radio ,多选checkbox) | :checked |
选择(下列列表<select>中的<option>) | :selected |
2 DOM操作的方法
html() 类似于以前innerHTML,修改或获取元素内部的HTML的内容,标签是 起作用的。
text() 类似于以前的innerText,标签是不起作用的
val() 类似于以前的value属性,设置或获取值。如:val("值")设置值 val()获取值
与属性有关的方法
attr() 修改,添加或获取元素的属性。
attr("属性名","值") 如果属性名不存在就是添加,如果存在就是修改。两个参数是添加或修改
attr("属性名") 一个参数就是获取属性的值
prop() 修改,添加或获取元素的属性。
prop("属性名","值") 如果属性名不存在就是添加,如果存在就是修改。两个参数是添加或修改
prop("属性名") 一个参数就是获取属性的值
removeAttr(),removeProp() 删除指定的属性
jq对象.removeAttr("src")
jq对象.removeProp("href")
与样式有关的方法
元素.style.样式名=样式值
元素.className=类名
与类名有关的方法
addClass(“类名”) 添加一个类样式,与CSS中第二种写法功能相同,如:addClass(“一个或多个类名”)
removeClass(“类名”) 移除一个类样式,让类样式不起作用
toggleClass(“类名”) 切换类样式,如果有这个class名就移除,如果没有就添加
元素的创建和添加
$("标签内容") 创建一个元素
父元素.append(子元素) 添加到最后一个子元素,与js中appendChild()相同
父元素.prepend(子元素) 添加到第一个子元素
元素.before(元素) 添加到当前元素的前面,这两个元素是兄弟关系
元素.after(元素) 添加到当前元素的后面,这两个元素是兄弟关系
删除元素
元素.remove() 删除本身
父元素.empty() 父元素清空所有的子元素,父元素还在
jQuery中常用的事件
事件方法 | 功能 |
---|---|
blur() | 失去焦点 |
change() | 改变事件 |
click() | 单击事件 |
dblclick() | 双击事件 |
focus() | 得到焦点 |
keydown() | 键盘按下 |
keyup() | 松开键盘 |
mouseover() | 鼠标移上 |
mouseout() | 鼠标移出 |
submit() | 表单提交 |
案例:表格隔行换色与全选全不选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试多选表格</title>
<style type="text/css">
table {
border-collapse: collapse;
}
tr {
height: 35px;
text-align: center;
}
a:link {
text-decoration: none;
}
</style>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<table id="tab1" border="1" width="700" align="center">
<tr style="background-color: #999999;">
<td><input type="checkbox" id="all"></td>
<td>分类ID</td>
<td>分类名称</td>
<td>分类描述</td>
<td>操作</td>
</tr>
<tr>
<td><input type="checkbox" name="item"></td>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="item"></td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="item"></td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="item"></td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</table>
<script type="text/javascript">
//隔行换色
$(function () {
//除去第一行,隔行换色
$("tr:gt(0):even").css("background","lightyellow");
$("tr:gt(0):odd").css("background","lightblue");
//获取全选框按钮,施加点击事件
$("#all").click(function () {
//获取所有all的值是true还是false
var b = $("#all").prop("checked");
//点击全选之后,剩下的按钮全部变成被点金状态
$("input[name=item]").prop("checked",b);
});
});
</script>
</body>
</html>
小结
-
选中大于0的tr的偶数行的选择器怎么写?
tr:gt(0):even
-
设置某个复选框选中的方法是什么?
jq对象.prop("checked",true)
案例:实现购物车
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小测试</title>
<style type="text/css">
table {
width: 400px;
border-collapse: collapse;
margin: auto;
}
td,th {
text-align: center;
height: 30px;
}
.container {
width: 400px;
margin: auto;
text-align: right;
}
img {
width: 100px;
height: 100px;
}
th {
background-color: lightgray;
}
tr:hover {
background-color: lightyellow;
}
</style>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<div class="container">
<table border="1">
<tbody id="cart">
<tr>
<th>
图片
</th>
<th>
商品名
</th>
<th>
操作
</th>
</tr>
<tr>
<td><img src="img/dress01.png" /></td>
<td>
三星Note7
</td>
<td>
<!--this表示当前按钮-->
<input type="button" value="删除" onclick="deleteRow(this)">
</td>
</tr>
</tbody>
</table>
<br />
商品名:
<input type="text" id="pname" value="" />
<input type="button" value="添加到购物车" onclick="addRow()" />
</div>
<script>
function addRow() {
//获取文本框内容
var name = $("#pname").val();
//判断
if(name == ""){
alert("输入内容不能为空");
//获取焦点
$("#pname").focus();
return;
}
//创建内容
var tr = "<tr>\n" +
" <td><img src=\"img/dress01.png\" /></td>\n" +
" <td>\n" +
" "+name+" " +
" </td>\n" +
" <td>\n" +
" <!--this表示当前按钮-->\n" +
" <input type=\"button\" value=\"删除\" οnclick=\"deleteRow(this)\">\n" +
" </td>\n" +
" </tr>";
//获取父元素
$("#cart").append(tr);
//清空文本框内容
$("#pname").val("");
}
function deleteRow(obj) {
if(confirm("宁确定要删除?")){
$(obj).parent().parent().remove();
}
}
</script>
</body>
</html>
小结
1. 创建tr
2. 添加到tbody中
3. 删除元素remove()
4. 获取父元素:parent()