jQuery学习
jQuery学习
标签查找—jQuery中代码查找标签绑定的变量名推荐$xxxEle
jQuery操作标签
class操作
jQuery操作
addclass() classList.add( newClassName )；添加新的类名，如已经存在，取消添加
removeClass() classList.remove( oldClassName )；移除已经存在的类名;
hasClass() classList.contains( oldClassName );确定元素中是否包含指定的类名，返回值为true 、false；
toggleClass() classList.toggle( className )；如果classList中存在给定的值，删除它，否则，添加它；
样式操作
一个属性：css(属性名，值);
多个属性：css({属性名1：值1，属性名2：值2})
位置操作
$(window).scrollTop() 获取左侧滚动条距离顶端的位移量
文本值操作
text() - 设置或返回所选元素的文本内容 = innerText
html() - 设置或返回所选元素的内容（包括 HTML 标记）= innerHTML
val() - 设置或返回表单字段的值 = value
$(js对象) 对于已经是一个js对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。
'''无参数默认就是获取 有参数就是设置'''
属性操作
1.取得元素的指定属性值
$('标签').attr('属性')
2.批量设置单个
$('标签').attr('类','id')
3.批量设置多个
$('标签').attr({'k':'v','k1':'v1'})
4.批量移除
$('标签').removeAttr('类')
文档处理
内部添加
$(A).append(B)// 把B追加到A
$(A).prepend(B)// 把B前置到A
外部添加
$(A).after(B)// 把B放到A的后面
$(A).before(B)// 把B放到A的前面
清空内容
$('body').empty()
事件操作
jQuery对象.click(function(){}) // 点击事件绑定
jQuery对象.change(function(){}) // 事件会在文本内容或选项被更改时触发
克隆操作
$('#d1').click(function () {
// $('body').append($(this).clone()) // 不克隆事件
$('body').append($(this).clone(true)) // 克隆事件
})
悬浮事件
$('#d1').hover(function () {触发结果})
鼠标悬浮上去和移开各自触发一次
如果想要将悬浮和移开分开执行不同的操作 需要写两个函数
$('#d1').hover(
function () {触发结果}, # 悬浮触发
function () {触发结果} # 移走触发
)
值监听事件
方式一：（有时候无法生效，可以考虑使用第二种）
$('#d1').click(function(){})
$('#d1').on('click',function(){})
方式二：
<input type="text" id="d1">
<script>
$('#d1').on('input',function () {
console.log($(this).val())
})
阻止后续事件
"""
如果给已经有事件的标签绑定事件 那么会依次执行
如果想要取消后续事件的执行 可以使用两种方式阻止
"""
1.方式1(推荐使用)
$('#d1').click(function () {
alert(123)
return false // 取消当前标签对象后续事件的执行
})
2.方式2(自带关键字)
$('#d1').click(function (e) {
alert(123)
e.preventDefault()
})
事件冒泡
在多个标签嵌套的并且都有相同事件的情况下 会出现逐级汇报的现象
方式1
return false
方式2
e.stopPropagation()
事件委托
针对动态创建的标签 提前写好的事件默认是无法生效的
$('body').on('事件类型','选择器',function(){})
# 将body内所有的点击事件交给button标签处理
$('body').on('click','button',function(){})
动画效果
show()：根据hide()方法记住的display属性值来显示元素。
hide() : 将该元素的display样式改为 "none"。
$("element").show("slow"); //元素将缓慢的显示出来
$("element").show("normal"); //元素将默认速度显示出来
$("element").show("fast"); //元素将迅速的显示出来
$("element").hide("1000"); //元素将在1000毫秒(1秒)内慢慢地隐藏
前端框架
bootstrap框架：内部提供了很多漂亮的标签样式和功能 我们只需要CV使用即可
bootstrap版本：推荐使用v3版本
基本使用：1.本地导入 2.cdn导入 bootstrap需要使用jQuery来实现动态效果
文件组成：bootstrap需要导入两个文件，一个是css文件，一个是js文件
"""使用前端框架 几乎不需要自己写css 只需要写class即可"""
作业：
回到顶端
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>回到顶部</title>
<style> /* 按钮样式 */
#to_top {
width: 65px;
/* 设置高宽 */
height: 20px;
position: fixed;
/* 固定按钮 */
bottom: 60px;
right: 10px;
/* 设置边框 */
border: 2px solid black;
}
</style>
</head>
<!-- 设置滑条 -->
<body style="height: 2000px;">
<!-- 设置按钮 -->
<div id="to_top">返回顶部</div>
<!-- 导入jquery -->
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
<!-- 绑定点击事件 -->
$("#to_top").click(function () {
// 定义一个方法，写入滚动条归零，执行速度50毫秒
$("html,body").animate({scrollTop: "0px"}, 500);
});
</script>
</body>
</html>
全选功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<ul>
<!-- 设置三个选择框 -->
<li><input type="checkbox" class="chk" id="d1"/><label>全选</label></li>
<li><input type="checkbox" class="c1"/>1</li>
<li><input type="checkbox" class="c1"/>2</li>
<li><input type="checkbox" class="c1"/>3</li>
</ul>
</head>
<body>
<!-- 导入jquery -->
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
// $("#d1").click(function () {
// if ("#d1".checked) {
// $("#d1").prop("checked", true)
// $(".c1").prop("checked", true)
// }
// })
$(function () {
document.getElementById("d1").onclick = function () {
a = document.getElementById("d1").checked
if (a) {
$(".c1").prop("checked", true)}
else
$(".c1").prop("checked", false)
}
})
</script>
</body>
</html>
删除单元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.t {
border: 1px gray solid;
border-spacing: 0px;
border-collapse: collapse;
}
.t td {
border: 1px gray solid;
padding: 5px;
}
.t th {
border: 1px gray solid;
padding: 5px;
}
</style>
</head>
<body>
<body>
<table class="t">
<caption>表格</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr id="tr1">
<td>1</td>
<td>eason</td>
<td>男</td>
<td><a class="remove"> 删除 </a></td>
</tr>
<tr id="tr2">
<td>2</td>
<td>jojo</td>
<td>男</td>
<td><a class="remove"> 删除 </a></td>
</tr>
<tr id="tr3">
<td>3</td>
<td>kaer</td>
<td>男</td>
<td><a class="remove"> 删除 </a></td>
</tr>
</table>
</body>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
<!-- 删除绑定点击事件 -->
$(".remove").click(function () {
// 删除掉父标签
$(this).parent().parent().remove();
});
</script>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本