1、样式操作:
addClass(); // 添加指定的CSS类名。
removeClass(); // 移除指定的CSS类名。
hasClass(); // 判断样式存不存在
toggleClass(); // 切换CSS类名,如果有就移除,如果没有就添加。
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义模态框</title>
<style>
/*背景颜色,为了盖住原始页面*/
.cover {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: darkgrey;
/*z-index: 999;*/
}
/*需要弹出的窗口颜色以及样式*/
.modal {
width: 600px;
height: 400px;
background-color: white;
position: fixed;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -200px;
z-index: 1000;
}
.hide {
display: none;
}
</style>
</head>
<body>
<input type="button" value="我就问你,你敢点吗,啊。" id="b1">
<!--为了背景颜色可用-->
<div class="cover hide"></div>
<!--弹出窗口的格式-->
<div class="modal hide">
<p>
<label>用户名
<input type="text" value="">
</label>
</p>
<p>
<label>密码
<input type="text">
</label>
</p>
</p>
<label>
<input type="button" value="登录">
<input id="i3" type="button" value="关闭">
</label>
</p>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
// 找到点击染出模态框的按钮
var tButton = $("#b1");
tButton.click(function () {
//显示出背景(移除hide)
$(".cover").removeClass("hide");
// 显示表单信息(移除hide)
$(".modal").removeClass("hide");
});
// 关闭模态框
var cButton = $("#i3");
cButton.click(function () {
$(".cover").addClass("hide");
$(".modal").addClass("hide");
});
</script>
</body>
</html>
2、位置操作
offset() // 获取匹配元素在当前窗口的相对偏移或设置元素位置
offset({top:100,left:100} -- 设置位置
offset() --获取位置,对于左上角的定位
position() // 获取匹配元素相对父元素的偏移
scrollTop() // 获取匹配元素相对滚动条顶部的偏移
scrollLeft() // 获取匹配元素相对滚动条左侧的偏移
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>位置相关方法</title>
<!-- $(".c1").offset() 获取位置,对于左上角的定位-->
<!-- $(".c1").offset({top:100, left:100}) 设置位置并移动位置-->
<!-- $(".c3").position() 获取匹配元素相对父元素的偏移-->
<style>
* {
margin: 0;
padding: 0;
}
.c1,
.c2,
.c3{
height: 100px;
width: 100px;
}
.c1 {
background-color: red;
}
.c2 {
position: relative; /*相对定位*/
left: 200px;
top: 200px;
background-color: pink;
}
.c3 {
position: absolute; /*绝对定位*/
left: 100px;
top: 100px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="c1">我是div</div>
<div class="c2">
<div class="c3">我是c3的div</div> <!--绝对定位是相对于c2的定位-->
</div>
<script src="jquery-3.4.1.js"></script>
</body>
</html>
3、文本操作:
例子:
<div id=c1>你好</div>
$("#c1").html() // 取值,取得第一个匹配元素的html内容
$("#c1").html('你好') // 设置值,设置所有匹配元素的html内容
$("#c1").text() // 取值,取得所有匹配元素的内容
$("#c1").text('你好') // 设置值,设置所有匹配元素的内容
例子:
<input class="need" id="input-name" name="uesrname" type="text" value="">
$("#input-name").val() //取得第一个匹配元素的当前值
$("#input-name").val('22') //设置所有匹配元素的值,22
例子:
<p>性别:
<label>男
<input name="gender" type="radio" value="1">
</label>
<label>女
<input name="gender" type="radio" value="2">
</label>
<label>保密
<input name="gender" type="radio" value="0">
</label>
</p>
获取被选中的checkbox或radio的值:
checked:选中的意思
$('input[name='gender']:checked').val() // 获取用户选中的内容
4、属性操作:
用于checkbox和radio
prop() // 获取属性
removeProp() // 移除属性
attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
例子一:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性操作</title>
<!--图片上下切换功能-->
</head>
<body>
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1819216937,2118754409&fm=26&gp=0.jpg" alt="">
<input type="button" id="c1" value="下一个">
<script src="jquery-3.4.1.js"></script>
<script>
var newURL = "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4171735524,1073408263&fm=26&gp=0.jpg";
$("#c1").click(function () {
var $imgEle = $("img");
// 获取老的图片地址
var oldURL = $imgEle.attr("src");
// 知识点:
// 1、attr(attrName, attrValue) 为所有匹配元素设置一个属性值
// 2、attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
// $imgEle.attr("src",newURL); // 设置一个新的图片地址
$imgEle.attr({"src": newURL, title: "我的备胎"}); // 设置一个键值对,新的图片地址以及title信息
newURL = oldURL; // 将老的地址变为新的,新的变为了老的,这样就可以来回一直切换
})
</script>
</body>
</html>
例子二:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全选反选</title>
<style>
.c1 {
margin-top: 10px;
}
</style>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<th><input type="checkbox"></th>
<td>小黑</td>
<td>男</td>
</tr>
<tr>
<th><input type="checkbox"></th>
<td>小红</td>
<td>男</td>
</tr>
<tr>
<th><input type="checkbox"></th>
<td>小蓝</td>
<td>女</td>
</tr>
<tr>
<th><input type="checkbox"></th>
<td>小紫</td>
<td>女</td>
</tr>
</tbody>
</table>
<div class="c1">
<input type="button" id="b1" value="全选">
<input type="button" id="b2" value="反选">
<input type="button" id="b3" value="取消">
</div>
<script src="jquery-3.4.1.js"></script>
<script>
// ------知识要点--------
// 用于checkbox和radio
// prop() // 获取属性----->>>返回布尔值(true/false)
// removeProp() // 移除属性
// 点击全选,属性将checked设置为true
$("#b1").click(function () {
$(":checkbox").prop("checked",true); // checked:选中的意思
});
// 点击取消,属性将checked设置为false
$("#b3").click(function () {
$(":checkbox").prop("checked",false);
});
// 点击反选,循环获取每一个属性值true或者false,然后判断,再将值变为相反值
$("#b2").click(function () {
var $checkEle = $(":checkbox"); //获取所有的checkbox元素
//循环获取每一个checkbox属性值,是true还是false
for (var i = 0; i < $checkEle.length; i++) {
// 属性值是true还是false
var checkprop = $($checkEle[i]).prop("checked");
if (checkprop == true) {
// 将选中变为不选中
$($checkEle[i]).prop("checked", false)
}
else {
// 将不选中变为选中
$($checkEle[i]).prop("checked", true)
}
}
})
</script>
</body>
</html>
5、文档操作:
<ul>
<li id="c1">1</li>
<li id="c2">2</li>
<li id="c3">3</li>
</ul>
var ele = document.createElement("li")
ele.innerText = 0.5
$("#c1").before(ele) // 在1前面添加0.5
$(A).append(B) // 把B追加到A
$(A).appendTo(B) // 把A追加到B
添加到指定元素内部的前面
$(A).prepend(B) // 把B前置到A
$(A).prependTo(B) // 把A前置到B
添加到指定元素外部的后面
$(A).after(B) // 把B放到A的后面
$(A).insertAfter(B) // 把A放到B的后面
添加到指定元素外部的前面
$(A).before(B) // 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
移除和清空元素
$(A).remove()// 从DOM中删除所有匹配的元素。
$(A).empty()// 删除匹配的元素集合中所有的子节点。
事件
事件绑定
$("xxx").on( events [, selector ],function(){})
events: 事件
selector: 选择器(可选的)
function: 事件处理函数
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击在表格最后添加一条记录</title>
</head>
<body>
<table border="1" id="t1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>小绿</td>
<td>数钱</td>
<td>
<button class='delete'>删除</button>
</td>
</tr>
<tr>
<td>2</td>
<td>小雪</td>
<td>数金条</td>
<td>
<button class='delete'>删除</button>
</td>
</tr>
</tbody>
</table>
<button id="b1">添加一条数据</button>
<script src="jquery-3.4.1.js"></script>
<script>
// 绑定事件
$("#b1").on("click",function () {
// 生成要添加的tr标签及数据
var trEle = document.createElement("tr");
// 定义写好的内容
$(trEle).html("<td>3</td><td>小紫</td><td>玩游乐场</td><td><button class='delete'>删除</button></td>");
// 找到标签后进行添加到tbody里面
$("#t1").find("tbody").append(trEle);
});
// 每一行的删除=删除按钮绑定事件,
// 以后都要用JQuery的on,后面新增的删除功能,需要是页面一刷新就有的才可以
// 用法:.on( events [, selector ],function(){})
$("tbody").on("click",".delete",function () {
console.log(1);
$(this).parent().parent().remove();
})
</script>
</body>
</html>
6、动画效果:
<img src='xxxx' alt=''>
$("img").hide(5000); // 5秒之内慢慢的消失
$("img").toggle(5000) // 5秒之内慢慢的消失,再次执行后,5秒内再完全显示,即当前状态相反的命令
$("img").fadeTo(5000,0.1) // 5秒内,透明度变为0.1
7、操作表格学习代码
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>编辑新增内容</title>
<style>
/*新增按钮的颜色以及大小*/
#add {
margin-top: 10px;
background-color: wheat;
color: red;
font-size: 20px;
}
/*表格中的字体大小*/
.tbody01 td {
padding: 5px;
font-size: 20px;
}
.hide {
display: none;
}
/*模态框的背景颜色*/
.cover {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: darkgrey;
opacity: 0.7;
}
/*调整模态框的弹出的位置以及弹出框的大小*/
.modal {
width: 600px;
height: 400px;
background-color: white;
position: fixed;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -200px;
}
/*调整模态框里面的文字大小以及文字距离*/
.modal p {
padding-left: 200px;
padding-top: 10px;
font-size: 20px;
color: pink;
}
#modal_cancel {
margin-left: 150px;
}
</style>
</head>
<body>
<!--弹出模态框时盖板的背景颜色-->
<!--当把hide移除后,页面颜色会铺满整个屏幕-->
<div class="cover hide"></div>
<!--模态框的内容-->
<div class="modal hide">
<p>
<lable for="input_name">姓名
<input id="input_name" type="text">
</lable>
</p>
<p>
<lable for="input_hobby">爱好
<input id="input_hobby" type="text">
</lable>
</p>
<p>
<lable>
<button id="modal_submit">提交</button>
<button id="modal_cancel">取消</button>
</lable>
</p>
</div>
<!--表格中的内容-->
<table border="1px">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody class="tbody01">
<tr>
<td>1</td>
<td>小雪</td>
<td>篮球</td>
<td>
<button class="operation_edit">编辑</button>
<button class="operation_del">删除</button>
</td>
</tr>
<tr>
<td>2</td>
<td>小紫</td>
<td>足球</td>
<td>
<button class="operation_edit">编辑</button>
<button class="operation_del">删除</button>
</td>
</tr>
<tr>
<td>3</td>
<td>小红</td>
<td>台球</td>
<td>
<button class="operation_edit">编辑</button>
<button class="operation_del">删除</button>
</td>
</tr>
<tr>
<td>4</td>
<td>小白</td>
<td>棒球</td>
<td>
<button class="operation_edit">编辑</button>
<button class="operation_del">删除</button>
</td>
</tr>
</tbody>
</table>
<button id="add">新增</button>
<script src="jquery-3.4.1.js"></script>
<script>
// 定义一个弹出模态框的函数
function showModal() {
$(".modal").removeClass("hide"); // 显示出背景 移除hide;显示表单信息,移除hide
$(".cover").removeClass("hide"); // 显示出背景 移除hide;显示表单信息,移除hide
}
// 定义一个关闭模块框的函数
function closeModal() {
let modalEle = $(".modal");
// 点击取消后,清空input框中的内容
modalEle.find("input").val("");
// 将模态框内容以及背景添加上hide
$(".cover").addClass("hide");
modalEle.addClass("hide");
}
// 点击表格的新增按钮,显示出模态框
let $addEle = $("#add");
$addEle.on("click", function () {
showModal();
});
// 点击表格的取消按钮后,关闭模态框
let $cancelEle = $("#modal_cancel");
$cancelEle.on("click", function () {
closeModal();
});
// 给每一行的编辑按钮绑定事件
// 要使用事件委托,基于已经存在的元素(页面加载完之后存在的标签)绑定事件
// 原理:后面新增的记录,由于在页面加载之后生成的,不能编辑,使用事件委托之后,标签无法处理时会一直向上进行寻找,直到有标签可以管理,该行是tbody为最大管理
$("tbody").on("click", ".operation_edit", function () {
// 把模态框弹出来
showModal();
// 把原来的数据填写到模态框中的input框中
let $currentTrEle = $(this).parent().parent(); // 当前编辑的这一行,具体指的是tr标签,this指的是button,
// console.log(this); // <button class="operation_edit">编辑</button>
// 将当前行的JQuery对象保存起来,方便后续判断该变量是否有值,有值为【编辑】,没有值为【新增】
$(".modal").data("currentTrEle", $currentTrEle);
let name = $currentTrEle.children().eq(1).text(); // 取到第2个值= 姓名,指的是tr标签中第2个td标签的值
let hobby = $currentTrEle.children().eq(2).text(); // 取到第3个值 = 爱好,指的是tr标签中第3个td标签的值
// console.log(name, hobby);
$("#input_name").val(name); // 将值填写到input框中
$("#input_hobby").val(hobby);
});
// 给每一行的删除按钮绑定事件
$("tbody").on("click", ".operation_del", function () {
// 找到被点击删除按钮的那一行
let $currentEle = $(this).parent().parent();
// 需要先变序号,然后再进行删除
// 找到当前删除这一行所有后面的tr标签的id,进行循环减1
$currentEle.nextAll().each(function () {
// 找每一行tr标签的孩子td标签中的第一个,first就是序号,last是【编辑、删除】
let tr_id = $(this).children().first().text(); // 取到原来的序号
$(this).children().first().text(tr_id - 1) // 将原来的序号减1,再赋值回去
});
// 真正删除
$currentEle.remove()
});
// 给模态框的提交按钮绑定事件
$("#modal_submit").on("click", function () {
// 取到用户填写的input的值
let name = $("#input_name").val(); // 取到模态框的姓名
let hobby = $("#input_hobby").val(); // 取到模态框中的爱好
// 开始判断模态框中是为“新增”还是“编辑”?
let $myModal = $(".modal");
let $current_data = $myModal.data("currentTrEle"); // 取到编辑按钮时存放的变量
// console.log($current_data);
if ($current_data !== undefined) {
// 说明是编辑状态
$current_data.children().eq(1).text(name);
$current_data.children().eq(2).text(hobby);
// 清空之前保存的当前行(变量)
$myModal.removeData()
}
else {
// 判断内容不能为空
// 创建tr标签把数据填写进去
let number = $("tr").length; //添加内容的序号
let trEle = document.createElement("tr"); // 创建tr标签
$(trEle).html("<td>" + number + "</td>" +
"<td>" + name + "</td>" +
"<td>" + hobby + "</td>" +
'<td>\n' +
' <button class="operation_edit">编辑</button>\n' +
' <button class="operation_del">删除</button>\n' +
' </td>'
);
// 把创建好的tr添加到tbody中
$("tbody").append(trEle);
}
// 隐藏模态框
closeModal()
})
</script>
</body>
</html>