jQuery
jQuery介绍
- jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
- jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程。它的宗旨就是:“Write less, do more.“
jQuery的优势
- 一款轻量级的JS框架。jQuery核心js文件才几十kb,不会影响页面加载速度。
- 丰富的DOM选择器,jQuery的选择器用起来很方便,比如要找到某个DOM对象的相邻元素,JS可能要写好几行代码,而jQuery一行代码就搞定了,再比如要将一个表格的隔行变色,jQuery也是一行代码搞定。
- 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里,更加简洁。
- 事件、样式、动画支持。jQuery还简化了js操作css的代码,并且代码的可读性也比js要强。
- Ajax操作支持。jQuery简化了AJAX操作,后端只需返回一个JSON格式的字符串就能完成与前端的通信。
- 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器,不用再为浏览器的兼容问题而伤透脑筋。
- 插件扩展开发。jQuery有着丰富的第三方的插件,例如:树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件,并且用jQuery插件做出来的效果很炫,并且可以根据自己需要去改写和封装插件,简单实用。
jQuery内容:
- 选择器
- 筛选器
- 样式操作
- 文本操作
- 属性操作
- 文档处理
- 事件
- 动画效果
- 插件
- each、data、Ajax
下载链接:jQuery官网
中文文档:jQuery AP中文文档
jQuery版本
- 1.x:兼容IE678,使用最为广泛的,官方只做BUG维护,功能不再新增。因此一般项目来说,使用1.x版本就可以了,最终版本:1.12.4 (2016年5月20日)
- 2.x:不兼容IE678,很少有人使用,官方只做BUG维护,功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x,最终版本:2.2.4 (2016年5月20日)
- 3.x:不兼容IE678,只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。
维护IE678是一件让人头疼的事情,一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少,PC端用户已经逐步被移动端用户所取代,如果没有特殊要求的话,一般都会选择放弃对678的支持。
jQuery导入问题
# 1 文件下载到了本地 如何解决多个文件反复书写引入语句的代码
可以借助于pycharm自动初始化代码功能完成自动添加
配置
编辑
file and code template
# 2 直接引入jQuery提供的CDN服务(基于网络直接请求加载)
CDN:内容分发网络
CDN有免费的也有收费的
前端免费的cdn网站:
1)bootcdn国内推荐使用 : https://www.bootcdn.cn/
2)staticfile CDN:https://www.staticfile.org/
使用示例:
<script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
注意:jquery.js是没有压缩的,jquery.min.js是压缩过的
"""你的计算机必须要有网络"""
对于第一种方式:(本地下载导入)
点击链接-右击另存为
目录
head内导入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.6.0.min.js"></script>
</head>
<body>
</body>
</html>
jQuery基本语法
# jQuery基本语法
jQuery(选择器).action()
秉持着jQuery的宗旨 jQuery简写 $
jQuery() === $()
# jQuery与js代码对比
eg:将p标签内部的文本颜色改为红色
// 原生js代码操作标签
let pEle = document.getElementById('d1')
pEle.style.color = 'red'
// jQuery操作标签
$('p').css('color','blue')
参考教程:
https://www.w3school.com.cn/jquery/index.asp
jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象,那么它就可以使用jQuery里的方法:例如$(“#i1”).html()。
$("#i1").html()
的意思是:获取id值为 i1
的元素的html代码。其中 html()
是jQuery里的方法。
相当于: document.getElementById("i1").innerHTML;
虽然 jQuery对象
是包装 DOM对象
后产生的,但是 jQuery对象
无法使用 DOM对象
的任何方法,同理 DOM对象
也没不能使用 jQuery
里的方法。
一个约定,我们在声明一个jQuery对象变量的时候在变量名前面加上$:
var $variable = jQuery对像
var variable = DOM对象
$variable[0]//jQuery对象转成DOM对象
拿上面那个例子举例,jQuery对象和DOM对象的使用:
$("#i1").html();//jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML;// DOM对象使用DOM的方法
jQuery对象和标签对象之间互转:
jQuery基础语法
$(selector).action()
查找标签
基本选择器
id选择器:
$("#id")
标签选择器:
$("tagName")
class选择器:
$(".className")
配合使用:
$("div.c1") // 找到有c1 class类的div标签
所有元素选择器:
$("*")
组合选择器:
$("#id, .className, tagName")
层级选择器:
x和y可以为任意选择器
$("x y");// x的所有后代y(子子孙孙)
$("x > y");// x的所有儿子y(儿子)
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y
基本筛选器:
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素,从 0 开始计数
:odd // 匹配所有索引值为奇数的元素,从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
例子:
$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签
练习:
自定义模态框,使用jQuery实现弹出和隐藏功能
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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="i0">
<div class="cover hide"></div>
<div class="modal hide">
<label for="i1">姓名</label>
<input id="i1" type="text">
<label for="i2">爱好</label>
<input id="i2" type="text">
<input type="button" id="i3" value="关闭">
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
var tButton = $("#i0")[0];
tButton.onclick=function () {
var coverEle = $(".cover")[0];
var modalEle = $(".modal")[0];
$(coverEle).removeClass("hide");
$(modalEle).removeClass("hide");
};
var cButton = $("#i3")[0];
cButton.onclick=function () {
var coverEle = $(".cover")[0];
var modalEle = $(".modal")[0];
$(coverEle).addClass("hide");
$(modalEle).addClass("hide");
}
</script>
</body>
</html>
属性选择器:
[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于
例子:
// 示例
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签
表单筛选器:
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
前端示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<form action="">
<p>username:<input type="text"></p>
<p>password<input type="password"></p>
<input type="checkbox" value="111">111
<input type="checkbox" value="111" checked>222
<input type="checkbox" value="111">333
<select name="" id="">
<option value="">111</option>
<option value="">222</option>
<option value="" selected>333</option>
</select>
<input type="button" value="按钮">
</form>
</body>
</html>
例子:
$('input[type="text"]')
w.fn.init [input, prevObject: w.fn.init(1)]0: inputlength: 1prevObject: w.fn.init [document]__proto__: Object(0)
$('input[type="password"]')
w.fn.init [input, prevObject: w.fn.init(1)]
$(':text') # 等价于上面第一个
w.fn.init [input, prevObject: w.fn.init(1)]0: inputlength: 1prevObject: w.fn.init [document]__proto__: Object(0)
$(':password') # 等价于上面第二个
w.fn.init [input, prevObject: w.fn.init(1)]
// ==============================
$(":checkbox") // 找到所有的checkbox
表单对象属性:
:enabled
:disabled
:checked //
:selected
例子:
找到可用的input标签
<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>
$("input:enabled") // 找到可用的input标签
找到被选中的option:
<select id="s1">
<option value="beijing">北京市</option>
<option value="shanghai">上海市</option>
<option selected value="guangzhou">广州市</option>
<option value="shenzhen">深圳市</option>
</select>
$(":selected") // 找到所有被选中的option
特殊情况
前端示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<form action="">
<p>username:<input type="text"></p>
<p>password<input type="password"></p>
<input type="checkbox" value="111">111
<input type="checkbox" value="111" checked>222
<input type="checkbox" value="111">333
<select name="" id="">
<option value="">111</option>
<option value="">222</option>
<option value="" selected>333</option>
</select>
<input type="button" value="按钮">
</form>
</body>
</html>
"""特殊情况"""
$(':checked') # 它会将checked和selected都拿到
w.fn.init(2) [input, option, prevObject: w.fn.init(1)]0: input1: optionlength: 2prevObject: w.fn.init [document]__proto__: Object(0)
$(':selected') # 它不会 只拿selected
w.fn.init [option, prevObject: w.fn.init(1)]
$('input:checked') # 自己加一个限制条件
w.fn.init [input, prevObject: w.fn.init(1)]
筛选器方法
下一个元素:
$("#id").next() # 同级别下一个
$("#id").nextAll() # 同级别下面所有
$("#id").nextUntil("#i2") # 下面所有,直到class="i2",不包含最后一个
上一个元素:
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2") // 不包含最后一个
父亲元素:
$("#id").parent() // 查找父元素(可以一直点下去)
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止。不包含最后一个
儿子和兄弟元素:
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们(同级别上下所有)
查找
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
$("div").find("p") # 等价于 $("div p")
示例:前端示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<span id="d1">span</span>
<span>span</span>
<div id="d2">
<span>div>span</span>
<p>div>p
<span id="d3">div>p>span</span>
</p>
<span>div>span</span>
</div>
<span>span</span>
<span>span</span>
<span class="c1">span</span>
</body>
</html>
$('div span:first')
等价于
$('div span').first()
$('div span:last')
等价于
$('div span').last()
$('div span:not("#d3")')
等价于
$('div span').not('#d3')
筛选
筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。
$("div").filter(".c1") // 从结果集中过滤出有c1样式类的
等价于 $("div.c1")
补充:
.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素,去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素
示例:左侧菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>左侧菜单示例</title>
<style>
.left {
position: fixed;
left: 0;
top: 0;
width: 20%;
height: 100%;
background-color: rgb(47, 53, 61);
}
.right {
width: 80%;
height: 100%;
}
.menu {
color: white;
}
.title {
text-align: center;
padding: 10px 15px;
border-bottom: 1px solid #23282e;
}
.items {
background-color: #181c20;
}
.item {
padding: 5px 10px;
border-bottom: 1px solid #23282e;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div class="left">
<div class="menu">
<div class="item">
<div class="title">菜单一</div>
<div class="items">
<div class="item">111</div>
<div class="item">222</div>
<div class="item">333</div>
</div>
</div>
<div class="item">
<div class="title">菜单二</div>
<div class="items">
<div class="item">111</div>
<div class="item">222</div>
<div class="item">333</div>
</div>
</div>
<div class="item">
<div class="title">菜单三</div>
<div class="items">
<div class="item">111</div>
<div class="item">222</div>
<div class="item">333</div>
</div>
</div>
</div>
</div>
<div class="right"></div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
/*
// 方式一
// 开局隐藏所有class里有.items的标签
$(".items").addClass("hide"); //批量操作
$(".title").click(function (){ // jQuery绑定事件
$(".items").addClass("hide"); //批量操作
$(this).next().removeClass("hide");
// jQuery链式操作
// $(this).next().removeClass('hide').parent().siblings().find('.items').addClass('hide')
});
*/
//方式二
// 开局隐藏所有class里有.items的标签
$(".items").addClass("hide"); //批量操作
$(".title").click(function (){ // jQuery绑定事件
// jQuery链式操作
$(this).next().removeClass('hide').parent().siblings().find('.items').addClass('hide')
});
</script>
操作标签
样式操作
样式类
addClass();// 添加指定的CSS类名。 ==> js中classList.add()
removeClass();// 移除指定的CSS类名。 ==> js中classList.remove()
hasClass();// 判断样式存不存在 ==> js中classList.contains()
toggleClass();// 切换CSS类名,如果有就移除,如果没有就添加。 ==>js中class.toggle()
CSS
添加css
$("#tab1").css("display","none");
移除设置的css
$("#tab1").removeAttr("style","");
回忆:
//通过JS添加样式+移除样式
document.getElementById('tab1').style.display="none";
document.getElementById("tab1").removeAttribute("style");
示例:
$("p").css("color", "red"); //将所有p标签的字体设置为红色
示例:
<p>111</p>
<p>222</p>
"""一行代码将第一个p标签变成红色第二个p标签变成绿色"""
$('p').first().css('color','red').next().css('color','green')
注意:
# jQuery的链式操作 使用jQuery可以做到一行代码操作很多标签
# jQuery对象调用jQuery方法之后返回的还是当前jQuery对象 也就可以继续调用其他方法
# 用python代码实现这种链式操作
class MyClass(object):
def func1(self):
print('func1')
return self
def func2(self):
print('func2')
return self
obj = MyClass()
obj.func1().func2()
位置操作
offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
// ==========================
$(".c1").offset(); // 括号内不加参数就是获取
$(".c1").offset({left: 300, top:200}); // 加了参数就是设置
$(window).scrollTop() // 括号内不加参数就是获取
$(window).scrollTop(0) // 加了参数就是设置
示例:
# 位置操作
offset() # 相对于浏览器窗口
position() # 相对于父标签
scrollTop() # 需要了解
$(window).scrollTop()
0
$(window).scrollTop()
969
$(window).scrollTop() # 括号内不加参数就是获取
1733
$(window).scrollTop(0) # 加了参数就是设置
n.fn.init [Window]
$(window).scrollTop(500)
n.fn.init [Window]
scrollLeft()
.offset()
方法允许我们检索一个元素相对于文档(document)的当前位置。
和 .position()
的差别在于: .position()
是相对于相对于父级元素的位移。
示例:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>位置相关示例之返回顶部</title>
<style>
.c1 {
width: 100px;
height: 200px;
background-color: red;
}
.c2 {
height: 50px;
width: 50px;
position: fixed;
bottom: 15px;
right: 15px;
background-color: #2b669a;
}
.hide {
display: none;
}
.c3 {
height: 100px;
}
</style>
</head>
<body>
<button id="b1" class="btn">点我</button>
<div class="c1"></div>
<div class="c3">1</div>
<div class="c3">2</div>
<div class="c3">3</div>
<div class="c3">4</div>
<div class="c3">5</div>
<div class="c3">6</div>
<div class="c3">7</div>
<div class="c3">8</div>
<div class="c3">9</div>
<div class="c3">10</div>
<div class="c3">11</div>
<div class="c3">12</div>
<div class="c3">13</div>
<div class="c3">14</div>
<div class="c3">15</div>
<div class="c3">16</div>
<div class="c3">17</div>
<div class="c3">18</div>
<div class="c3">19</div>
<div class="c3">20</div>
<div class="c3">21</div>
<div class="c3">22</div>
<div class="c3">23</div>
<div class="c3">24</div>
<div class="c3">25</div>
<div class="c3">26</div>
<div class="c3">27</div>
<div class="c3">28</div>
<div class="c3">29</div>
<div class="c3">30</div>
<div class="c3">31</div>
<div class="c3">32</div>
<div class="c3">33</div>
<div class="c3">34</div>
<div class="c3">35</div>
<div class="c3">36</div>
<div class="c3">37</div>
<div class="c3">38</div>
<div class="c3">39</div>
<div class="c3">40</div>
<div class="c3">41</div>
<div class="c3">42</div>
<div class="c3">43</div>
<div class="c3">44</div>
<div class="c3">45</div>
<div class="c3">46</div>
<div class="c3">47</div>
<div class="c3">48</div>
<div class="c3">49</div>
<div class="c3">50</div>
<div class="c3">51</div>
<div class="c3">52</div>
<div class="c3">53</div>
<div class="c3">54</div>
<div class="c3">55</div>
<div class="c3">56</div>
<div class="c3">57</div>
<div class="c3">58</div>
<div class="c3">59</div>
<div class="c3">60</div>
<div class="c3">61</div>
<div class="c3">62</div>
<div class="c3">63</div>
<div class="c3">64</div>
<div class="c3">65</div>
<div class="c3">66</div>
<div class="c3">67</div>
<div class="c3">68</div>
<div class="c3">69</div>
<div class="c3">70</div>
<div class="c3">71</div>
<div class="c3">72</div>
<div class="c3">73</div>
<div class="c3">74</div>
<div class="c3">75</div>
<div class="c3">76</div>
<div class="c3">77</div>
<div class="c3">78</div>
<div class="c3">79</div>
<div class="c3">80</div>
<div class="c3">81</div>
<div class="c3">82</div>
<div class="c3">83</div>
<div class="c3">84</div>
<div class="c3">85</div>
<div class="c3">86</div>
<div class="c3">87</div>
<div class="c3">88</div>
<div class="c3">89</div>
<div class="c3">90</div>
<div class="c3">91</div>
<div class="c3">92</div>
<div class="c3">93</div>
<div class="c3">94</div>
<div class="c3">95</div>
<div class="c3">96</div>
<div class="c3">97</div>
<div class="c3">98</div>
<div class="c3">99</div>
<div class="c3">100</div>
<button id="b2" class="c2 hide">返回顶部</button>
<script src="jquery-3.5.1.js"></script>
<script>
$("#b1").on("click", function () {
$(".c1").offset({left: 200, top:200});
});
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$("#b2").removeClass("hide");
}else {
$("#b2").addClass("hide");
}
});
$("#b2").on("click", function () {
$(window).scrollTop(0);
})
</script>
</body>
</html>
尺寸:
height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()
示例:
前端示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
p {
margin: 1px 2px 3px 4px;
padding: 4px 3px 2px 1px;
}
</style>
</head>
<body>
<p>111</p>
</body>
</html>
# 尺寸
$('p').height() # 文本
20
$('p').width()
1670
$('p').innerHeight() # 文本+padding
26
$('p').innerWidth()
1674
$('p').outerHeight() # 文本+padding+border
26
$('p').outerWidth()
1674
文本操作
HTML代码:
html() // 取得第一个匹配元素的html内容
html(val) // 设置所有匹配元素的html内容
文本值:
text() // 取得所有匹配元素的内容
text(val) // 设置所有匹配元素的内容
js和jQuery对比:
# 操作标签内部文本
# 括号内不加参数就是获取加了就是设置
text() #==> js中innerText
html() #==>js中innerHTML
#示例
$('div').text()
演示
# 获取文本值
$spanEle.text()
"O(∩_∩)O哈哈~"
# 设置文本值
$spanEle.text('o(* ̄︶ ̄*)o')
"""
等于js中
# 获取文本值
let sEle = window.document.getElementById('d1');
sEle.innerText
# 设置文本值
sEle.innerText = ‘o(* ̄︶ ̄*)o’;
"""
# 获取HTML代码
$spanEle.html()
"o(* ̄︶ ̄*)o"
# 设置HTML代码
$spanEle.html('<u>\(^o^)/</u>')
"""
等于js中
# 获取HTML代码
sEle.innerHTML
"<u>(^o^)/</u>"
# 设置HTML代码
sEle.innerText = ‘<i>(*^@^*)</i>’;
"""
### 获取值操作(用户输入数据标签):
```js
val() # 取得第一个匹配元素的当前值
val(val) # 设置所有匹配元素的值
val([val1, val2]) # 设置多选的checkbox、多选select的值
# 获取值操作对比"""
js ==> jQuery
.value ==> .val()
"""
示例:
前端代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<input type="text" id="d1">
<input type="file" id="d2">
<input id="Pingpong" type="checkbox" name="hobby" value="111">乒乓球
<input id="Badminton" type="checkbox" name="hobby" value="222">羽毛球
<input id="Basketball" type="checkbox" name="hobby" value="333">篮球
</body>
</html>
演示:
# 获取值
let $iEle = $('#d1')
$iEle.val()
"enen"
# 设置值
$iEle.val('你好呀')
"""
对比js中操作
# 获取值
let iEle = window.document.getElementById('d2')
iEle.value
"你好呀"
# 设置值
iEle.value = '好什么啊'
"好什么啊"
"""
# 获取文件
>let $fileEle = $('#d2')
>$fileEle[0] # 将jQ对象转换为js标签对象
>$fileEle[0].files[0] # 得到具体文件对象,获取文件数据
File {name: '111.jpg', lastModified: 1591765734704, lastModifiedDate: Wed Jun 10 2020 13:08:54 GMT+0800 (中国标准时间), webkitRelativePath: '', size: 36685, …}
#获取被选中的checkbox或radio的值
#jQuery方式
$('input[name="hobby"]:checked').each(function(index, element) {
# 打印值
console.log($(this).val());
});
#js方式
# 通过id获取多选框是否选中
var pinpong = $('#Pingpong').is(":checked");
var badminton = $('#Badminton').is(":checked");
var basketball = $('#Basketball').is(":checked");
# 在控制台输出选中值
console.log("乒乓球:"+pinpong);
console.log("羽毛球:"+badminton);
console.log("篮球:"+basketball);
案例:自定义登录校验
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>文本操作之登录验证</title>
<style>
.error {
color: red;
}
</style>
</head>
<body>
<form action="">
<div>
<label for="input-name">用户名</label>
<input type="text" id="input-name" name="name">
<span class="error"></span>
</div>
<div>
<label for="input-password">密码</label>
<input type="password" id="input-password" name="password">
<span class="error"></span>
</div>
<div>
<input type="button" id="btn" value="提交">
</div>
</form>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$("#btn").click(function () {
var username = $("#input-name").val();
var password = $("#input-password").val();
if (username.length === 0) {
$("#input-name").siblings(".error").text("用户名不能为空");
}
if (password.length === 0) {
$("#input-password").siblings(".error").text("密码不能为空");
}
})
</script>
</body>
</html>
属性操作
用于ID等或自定义属性:
attr(attrName) # 返回第一个匹配元素的属性值
attr(attrName, attrValue) # 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2}) # 为所有匹配元素设置多个属性值
removeAttr() # 从每一个匹配的元素中删除一个属性
"""
js中 jQuery
setAttribute() #==》 attr(name,value)
getAttribute() #==》 attr(name)
removeAttribute() #==》 removeAttr(name)
在用变量存储对象的时候 js中推荐使用
XXXEle 标签对象
jQuery中推荐使用
$XXXEle jQuery对象
"""
用于checkbox和radio
prop() // 获取属性
removeProp() // 移除属性
示例:前端示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<p id="d1" username="jason"></p>
<input type="checkbox" value="111" name="hobby" id="d2">
<input type="checkbox" value="222" name="hobby" checked id="d3">
<input type="checkbox" value="333" name="hobby" id="d4">
</body>
</html>
演示:
>let $pEle = $('p')
undefined
>$pEle.attr('id') # 获取 有则返回
"d1"
>$pEle.attr('class') # 获取无则undefined
undefined
>$pEle.attr('class','c1') # 设置属性
w.fn.init [p#d1.c1, prevObject: w.fn.init(1)]
>$pEle.attr('id','id666')
w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]
>$pEle.attr('password','jason123')
w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]
>$pEle.removeAttr('password')
w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]
"""
对于标签上有的能够看到的属性和自定义属性用attr
对于返回布尔值比如checkbox radio option是否被选中用prop
"""
#对于attr()
>$('#d3').attr('checked') # 对于代码中已选中的
"checked"
>$('#d2').attr('checked') # 对于代码中未选中,前端页面手动改成选中的,无效,查还是undefined
undefined
>$('#d3').attr('checked') # 对于代码中已选中的,前端页面手动改成未选中的,无效,查看还是选中
"checked"
>$('#d3').attr('checked','checked') # 设置也是无效
w.fn.init [input#d3]
#对于prop()
>$('#d2').prop('checked') # 对于代码中未选中,查看为false
false
>$('#d2').prop('checked') # 对于代码中未选中,手动选中后查看为true
true
>$('#d3').prop('checked',false) # 对于代码中已选中的,修改操作能够生效(改成取消)
w.fn.init [input#d3]
注意:
在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug,在3.x版本的jQuery中则没有这个问题。为了兼容性,我们在处理checkbox和radio的时候尽量使用特定的prop(),不要使用attr(“checked”, “checked”)。
<input type="checkbox" value="1">
<input type="radio" value="2">
<script>
$(":checkbox[value='1']").prop("checked", true);
$(":radio[value='2']").prop("checked", true);
</script>
prop和attr的区别:
attr全称attribute(属性)
prop全称property(属性)
虽然都是属性,但他们所指的属性并不相同,attr所指的属性是HTML标签属性,而prop所指的是DOM对象属性,可以认为attr是显式的,而prop是隐式的。
举个例子:
<input type="checkbox" id="i1" value="1">
针对上面的代码,
$("#i1").attr("checked") // undefined
$("#i1").prop("checked") // false
可以看到attr获取一个标签内没有的东西会得到undefined,而prop获取的是这个DOM对象的属性,因此checked为false。
如果换成下面的代码:
<input type="checkbox" checked id="i1" value="1">
再执行:
$("#i1").attr("checked") // checked
$("#i1").prop("checked") // true
这已经可以证明attr的局限性,它的作用范围只限于HTML标签内的属性,而prop获取的是这个DOM对象的属性,选中返回true,没选中返回false。
接下来再看一下针对自定义属性,attr和prop又有什么区别:
<input type="checkbox" checked id="i1" value="1" me="自定义属性">
执行以下代码:
$("#i1").attr("me") // "自定义属性"
$("#i1").prop("me") // undefined
可以看到prop不支持获取标签的自定义属性。
总结一下:
- 对于标签上有的能看到的属性和自定义属性都用attr
- 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。
文档处理
创建
$('<p>') ==》js中createElement('p')
添加到指定元素内部的后面
$(A).append(B) // 把B追加到A ==> js中appendChild()
$(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的前面
移除和清空元素
remove() // 从DOM中删除所有匹配的元素。
empty() // 清空标签内所有的内容。
应用例子:
点击按钮在表格添加一行数据。
点击每一行的删除按钮删除当前行数据。
演示:
前端示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="d1">div
<p id="d2">div>p</p>
<span>div>span</span>
<p>div>p</p>
</div>
</body>
</html>
操作示例
>let $pEle = $('<p>')
>$pEle.text('你好啊 草莓要不要来几个?')
>$pEle.attr('id','d3')
>$('#d1').append($pEle) # 内部尾部追加
>$pEle.appendTo($('#d1'))
>$('#d1').prepend($pEle) # 内部头部追加
w.fn.init [div#d1]
>$pEle.prependTo($('#d1'))
w.fn.init [p#d1, prevObject: w.fn.init(1)]
>$('#d2').after($pEle) # 放在某个标签后面
w.fn.init [p#d2]
>$pEle.insertAfter($('#d1'))
>$('#d1').before($pEle)
w.fn.init [div#d1]
>$pEle.insertBefore($('#d2'))
>$('#d1').remove() # 将标签从DOM树中删除
w.fn.init [div#d1]
>$('#d1').empty() # 清空标签内部所有的内容
w.fn.init [div#d1]
替换
replaceWith()
replaceAll()
克隆
clone() // 参数
克隆示例:点击复制按钮
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>克隆</title>
<style>
#b1 {
background-color: deeppink;
padding: 5px;
color: white;
margin: 5px;
}
#b2 {
background-color: dodgerblue;
padding: 5px;
color: white;
margin: 5px;
}
</style>
</head>
<body>
<button id="b1">屠龙宝刀,点击就送</button>
<hr>
<button id="b2">屠龙宝刀,点击就送</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
// clone方法不加参数true,克隆标签但不克隆标签带的事件
$("#b1").on("click", function () {
$(this).clone().insertAfter(this);
});
// clone方法加参数true,克隆标签并且克隆标签带的事件
$("#b2").on("click", function () {
$(this).clone(true).insertAfter(this);
});
</script>
</body>
</html>
事件
常用事件
click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...}) # 文本域变化事件
keyup(function(){...})
创建事件:
// 第一种
$('#d1').click(function () {
alert('别说话 吻我')
});
// 第二种(功能更加强大 还支持事件委托)
$('#d2').on('click',function () {
alert('借我钱买草莓 后面还你')
})
完整示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<button id="d1">吻我</button>
<button id="d2">亲我</button>
<script>
// 第一种
$('#d1').click(function () {
alert('别说话 吻我')
});
// 第二种(功能更加强大 还支持事件委托)
$('#d2').on('click',function () {
alert('借我钱买草莓 后面还你')
})
</script>
</body>
</html>
事件示例:
keydown和keyup事件组合示例:
按shift批量处理
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>Egon</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Alex</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Yuan</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>EvaJ</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Gold</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
</tbody>
</table>
<input type="button" id="b1" value="全选">
<input type="button" id="b2" value="取消">
<input type="button" id="b3" value="反选">
<script src="jquery-3.3.1.js"></script>
<script>
var flag = false;
// shift按键被按下的时候
$(window).keydown(function (event) {
console.log(event.keyCode);
if (event.keyCode === 16){
flag = true;
}
});
// shift按键被抬起的时候
$(window).keyup(function (event) {
console.log(event.keyCode);
if (event.keyCode === 16){
flag = false;
}
});
// select标签的值发生变化的时候
$("select").change(function (event) {
// 如果shift按键被按下,就进入批量编辑模式
// shift按键对应的code是16
// 判断当前select这一行是否被选中
console.log($(this).parent().siblings().first().find(":checkbox"));
var isChecked = $(this).parent().siblings().first().find(":checkbox").prop("checked");
console.log(isChecked);
if (flag && isChecked) {
// 进入批量编辑模式
// 1. 取到当前select选中的值
var value = $(this).val();
// 2. 给其他被选中行的select设置成和我一样的值
// 2.1 找到那些被选中行的select
var $select = $("input:checked").parent().parent().find("select")
// 2.2 给选中的select赋值
$select.val(value);
}
});
</script>
</body>
</html>
实时监听input输入值变化示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>实时监听input输入值变化</title>
</head>
<body>
<input type="text" id="i1">
<script src="jquery-3.2.1.min.js"></script>
<script>
/*
* oninput是HTML5的标准事件
* 能够检测textarea,input:text,input:password和input:search这几个元素的内容变化,
* 在内容修改后立即被触发,不像onchange事件需要失去焦点才触发
* oninput事件在IE9以下版本不支持,需要使用IE特有的onpropertychange事件替代
* 使用jQuery库的话直接使用on同时绑定这两个事件即可。
* */
$("#i1").on("input propertychange", function () {
alert($(this).val());
})
</script>
</body>
</html>
input值变化事件
克隆事件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
#d1 {
height: 100px;
width: 100px;
background-color: orange;
border: 1px solid blue;
}
</style>
</head>
<body>
<button id="d1">屠龙宝刀,点击就送</button>
<script>
$('#d1').on('click',function () {
// console.log(this) // this指代是当前被操作的标签对象
// $(this).clone().insertAfter($('body')) // $(this)将标签对象变成jQuery对象,clone默认情况下只克隆html和css 不克隆事件
$(this).clone(true).insertAfter($('body')) // clone括号内加true即可克隆事件
})
</script>
</body>
</html>
克隆事件
左侧菜单:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>左侧菜单示例</title>
<style>
.left {
position: fixed;
left: 0;
top: 0;
width: 20%;
height: 100%;
background-color: rgb(47, 53, 61);
}
.right {
width: 80%;
height: 100%;
}
.menu {
color: white;
}
.title {
text-align: center;
padding: 10px 15px;
border-bottom: 1px solid #23282e;
}
.items {
background-color: #181c20;
}
.item {
padding: 5px 10px;
border-bottom: 1px solid #23282e;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div class="left">
<div class="menu">
<div class="item">
<div class="title">菜单一</div>
<div class="items">
<div class="item">111</div>
<div class="item">222</div>
<div class="item">333</div>
</div>
</div>
<div class="item">
<div class="title">菜单二</div>
<div class="items">
<div class="item">111</div>
<div class="item">222</div>
<div class="item">333</div>
</div>
</div>
<div class="item">
<div class="title">菜单三</div>
<div class="items">
<div class="item">111</div>
<div class="item">222</div>
<div class="item">333</div>
</div>
</div>
</div>
</div>
<div class="right"></div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
/*
// 方式一
// 开局隐藏所有class里有.items的标签
$(".items").addClass("hide"); //批量操作
$(".title").click(function (){ // jQuery绑定事件
$(".items").addClass("hide"); //批量操作
$(this).next().removeClass("hide");
// jQuery链式操作
// $(this).next().removeClass('hide').parent().siblings().find('.items').addClass('hide')
});
*/
//方式二
// 开局隐藏所有class里有.items的标签
$(".items").addClass("hide"); //批量操作
$(".title").click(function (){ // jQuery绑定事件
// jQuery链式操作
$(this).next().removeClass('hide').parent().siblings().find('.items').addClass('hide')
});
</script>
左侧菜单栏
返回顶部
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>位置相关示例之返回顶部</title>
<style>
.c1 {
width: 100px;
height: 200px;
background-color: red;
}
.c2 {
height: 50px;
width: 50px;
position: fixed;
bottom: 15px;
right: 15px;
background-color: #2b669a;
}
.hide {
display: none;
}
.c3 {
height: 100px;
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<button id="b1" class="btn">点我</button>
<div class="c1"></div>
<div class="c3">1</div>
<div class="c3">2</div>
<div class="c3">3</div>
<div class="c3">4</div>
<div class="c3">5</div>
<div class="c3">6</div>
<div class="c3">7</div>
<div class="c3">8</div>
<div class="c3">9</div>
<div class="c3">10</div>
<div class="c3">11</div>
<div class="c3">12</div>
<div class="c3">13</div>
<div class="c3">14</div>
<div class="c3">15</div>
<div class="c3">16</div>
<div class="c3">17</div>
<div class="c3">18</div>
<div class="c3">19</div>
<div class="c3">20</div>
<div class="c3">21</div>
<div class="c3">22</div>
<div class="c3">23</div>
<div class="c3">24</div>
<div class="c3">25</div>
<div class="c3">26</div>
<div class="c3">27</div>
<div class="c3">28</div>
<div class="c3">29</div>
<div class="c3">30</div>
<div class="c3">31</div>
<div class="c3">32</div>
<div class="c3">33</div>
<div class="c3">34</div>
<div class="c3">35</div>
<div class="c3">36</div>
<div class="c3">37</div>
<div class="c3">38</div>
<div class="c3">39</div>
<div class="c3">40</div>
<div class="c3">41</div>
<div class="c3">42</div>
<div class="c3">43</div>
<div class="c3">44</div>
<div class="c3">45</div>
<div class="c3">46</div>
<div class="c3">47</div>
<div class="c3">48</div>
<div class="c3">49</div>
<div class="c3">50</div>
<div class="c3">51</div>
<div class="c3">52</div>
<div class="c3">53</div>
<div class="c3">54</div>
<div class="c3">55</div>
<div class="c3">56</div>
<div class="c3">57</div>
<div class="c3">58</div>
<div class="c3">59</div>
<div class="c3">60</div>
<div class="c3">61</div>
<div class="c3">62</div>
<div class="c3">63</div>
<div class="c3">64</div>
<div class="c3">65</div>
<div class="c3">66</div>
<div class="c3">67</div>
<div class="c3">68</div>
<div class="c3">69</div>
<div class="c3">70</div>
<div class="c3">71</div>
<div class="c3">72</div>
<div class="c3">73</div>
<div class="c3">74</div>
<div class="c3">75</div>
<div class="c3">76</div>
<div class="c3">77</div>
<div class="c3">78</div>
<div class="c3">79</div>
<div class="c3">80</div>
<div class="c3">81</div>
<div class="c3">82</div>
<div class="c3">83</div>
<div class="c3">84</div>
<div class="c3">85</div>
<div class="c3">86</div>
<div class="c3">87</div>
<div class="c3">88</div>
<div class="c3">89</div>
<div class="c3">90</div>
<div class="c3">91</div>
<div class="c3">92</div>
<div class="c3">93</div>
<div class="c3">94</div>
<div class="c3">95</div>
<div class="c3">96</div>
<div class="c3">97</div>
<div class="c3">98</div>
<div class="c3">99</div>
<div class="c3">100</div>
<button id="b2" class="c2 hide">返回顶部</button>
<script>
$("#b1").on("click", function () {
$(".c1").offset({left: 200, top:200});
});
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$("#b2").removeClass("hide");
}else {
$("#b2").addClass("hide");
}
});
$("#b2").on("click", function () {
$(window).scrollTop(0);
})
</script>
</body>
</html>
自定义登录校验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<p>username:
<input type="text" id="username">
<span style="color: red"></span>
</p>
<p>password:
<input type="text" id="password">
<span style="color: red"></span>
</p>
<button id="d1">提交</button>
<script>
let $userName = $('#username')
let $passWord = $('#password')
$('#d1').click(function () {
// 在获取用户的用户名和密码的时候 用户如果没有填写 应该给用户展示提示信息
// 获取用户输入的用户名和密码 做校验
let userName = $userName.val()
let passWord = $passWord.val()
if (!userName){
$userName.next().text("用户名不能为空")
}
if (!passWord){
$passWord.next().text('密码不能为空')
}
})
$('input').focus(function () {
$(this).next().text('')
})
</script>
</body>
</html>
input实时监控
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>k</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<input type="text" id="d1">
<script>
$('#d1').on('input',function () {
console.log(this.value)
})
</script>
</body>
</html>
hover事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<p id="d1">到家啊就是度假酒店</p>
<script>
// $("#d1").hover(function () { // 鼠标悬浮 + 鼠标移开
// alert(123)
// })
$('#d1').hover(
function () {
alert('我来了') // 悬浮
},
function () {
alert('我溜了') // 移开
}
)
</script>
</body>
</html>
file类型的input文件上传时,实时显示头像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
<style>
body {
margin: 0;
}
.header-img {
height: 120px;
width: 120px;
border-radius: 50%;
border: 5px solid #6395ea;
overflow: hidden;
}
.header-img>img {
max-width: 100%;
/* width: 100%; 或者用这个 */
/* 图片占制作的圆形框100%比例 */
}
</style>
</head>
<body>
<input type="file" id="myfile">
<div class="header-img">
<img src="" alt="" id="myimg">
</div>
<script>
// 选择头像实时显示
$("#myfile").change(function () {
// 文件阅读器对象
// 1、先生成一个文件阅读器对象
let myFileReaderObj = new FileReader();
// 2、获取用户上传的头像文件
let fileObj = $(this)[0].files[0];
// 3、将文件对象交给阅读器对象读取
myFileReaderObj.readAsDataURL(fileObj); // 这步操作是异步
// 4、利用文件阅读器将文件展示到前端页面 修改img的src属性
// 等待myFileReaderObj文件阅读器加载完毕之后再执行
myFileReaderObj.onload = function(){
$("#myimg").attr("src",myFileReaderObj.result)
}
})
</script>
</body>
</html>
实时显示头像
事件绑定
.on( events [, selector ],function(){})
- events: 事件
- selector: 选择器(可选的)
- function: 事件处理函数
移除事件
.off( events [, selector ][,function(){}])
off()
方法移除用 .on()
绑定的事件处理程序。
- events: 事件
- selector: 选择器(可选的)
- function: 事件处理函数
阻止后续事件执行
1、return false; // 常见阻止表单提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- Bootstrap3 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- Bootstrap3 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- font-awesome.min.css图标库4.7版本 -->
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<form action="">
<span id="d1" style="color: red"></span>
<input type="submit" id="d2">
</form>
<script>
$('#d2').click(function (e) {
$('#d1').text('宝贝 你能看到我吗?');
// 阻止标签后续事件的执行 方式1
return false;
})
</script>
</body>
</html>
2、e.preventDefault();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- Bootstrap3 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- Bootstrap3 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- font-awesome.min.css图标库4.7版本 -->
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<form action="">
<span id="d1" style="color: red"></span>
<input type="submit" id="d2">
</form>
<script>
$('#d2').click(function (e) {
$('#d1').text('宝贝 你能看到我吗?');
// 阻止标签后续事件的执行 方式2
e.preventDefault();
})
</script>
</body>
</html>
注意:
像click、keydown等DOM中定义的事件,我们都可以使用.on()
方法来绑定事件,但是hover
这种jQuery中定义的事件就不能用.on()
方法来绑定了。
想使用事件委托的方式绑定hover事件处理函数,可以参照如下代码分两步绑定事件:
$('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件
$(this).addClass('hover');
});
$('ul').on('mouseleave', 'li', function() {//绑定鼠标划出事件
$(this).removeClass('hover');
});
阻止事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="d1">div
<p id="d2">div>p
<span id="d3">span</span>
</p>
</div>
<script>
$('#d1').click(function () {
alert('div')
})
$('#d2').click(function (e) {
alert('p')
// 如果不使用阻止冒泡,点击'div>p'之后,关闭弹窗,会再触发父标签click事件
e.stopPropagation()
})
$('#d3').click(function (e) {
alert('span')
// 如果不使用阻止冒泡,点击'span'之后,关闭弹窗,会依次再触发父标签click事件(p、div)
// 阻止事件冒泡的方式1
// return false
// 阻止事件冒泡的方式2
e.stopPropagation()
})
</script>
</body>
</html>
阻止事件冒泡
事件委托on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- <script src="../../Desktop/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>-->
</head>
<body>
<div id="d1">
<button>是兄弟,就来砍我!!!</button>
</div>
<script>
// 给页面上所有的button标签绑定点击事件
// $('button').click(function () {
// //无法影响到动态创建的标签,比如这里如果手动通过append添加一个button标签到#d1内部尾部,新增的这个就不会有收到这个点击事件影响
// alert(123)
// })
// 事件委托
$('body').on('click','button',function () {
alert(123) // 在指定的范围内 将事件委托给某个标签 无论该标签是事先写好的还是后面动态创建的
})
</script>
</body>
</html>
事件委托
页面载入
# js中等待页面加载完毕再执行代码
window.onload = function(){
// js代码
}
"""jQuery中等待页面加载完毕"""
# 第一种
$(document).ready(function(){
// js代码
})
# 第二种
$(function(){
// js代码
})
# 第三种
"""直接写在body内部最下方"""
示例:
文档加载完绑定事件,并且阻止默认事件发生:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>登录注册示例</title>
<style>
.error {
color: red;
}
</style>
</head>
<body>
<form id="myForm">
<label for="name">姓名</label>
<input type="text" id="name">
<span class="error"></span>
<label for="passwd">密码</label>
<input type="password" id="passwd">
<span class="error"></span>
<input type="submit" id="modal-submit" value="登录">
</form>
<!-- Bootstrap3 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- Bootstrap3 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- font-awesome.min.css图标库4.7版本 -->
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script>
function myValidation() {
// 多次用到的jQuery对象存储到一个变量,避免重复查询文档树
var $myForm = $("#myForm");
$myForm.find(":submit").on("click", function () {
// 定义一个标志位,记录表单填写是否正常
var flag = true;
$myForm.find(":text, :password").each(function () {
var val = $(this).val();
if (val.length <= 0 ){
var labelName = $(this).prev("label").text();
$(this).next("span").text(labelName + "不能为空");
flag = false;
}
});
// 表单填写有误就会返回false,阻止submit按钮默认的提交表单事件
return flag;
});
// input输入框获取焦点后移除之前的错误提示信息
$myForm.find("input[type!='submit']").on("focus", function () {
$(this).next(".error").text("");
})
}
// 文档树就绪后执行
$(document).ready(function () {
myValidation();
});
</script>
</body>
</html>
动画效果:
$("#d1").hide(5000) #渐渐隐藏,5000表示5秒
$("#d1").show(5000) #渐渐显示
$("#d1").slideUp(5000) #从下方向上滑动
$("#d1").slideDown(5000) #从上方向下滑动
$("#d1").fadeOut(5000) #颜色逐渐变浅直到消失
$("#d1").fadeIn(5000) #颜色逐渐变深直到显示
$("#d1").fadeTo(5000,0.4) #颜色逐渐变深直到透明的为0.4
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
#d1 {
height: 1000px;
width: 400px;
background-color: red;
}
</style>
</head>
<body>
<div id="d1"></div>
<script>
$("#d1").hide(5000)
</script>
</body>
</html>
补充:
#each() 和for循环类似,更加方便
前端代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div id="d1">1</div>
<div id="d2">2</div>
<div id="d3">3</div>
<div id="d4">4</div>
<div id="d5">5</div>
<div id="d6">6</div>
<div id="d7">7</div>
<div id="d8">8</div>
<div id="d9">9</div>
<div id="d10">10</div>
</body>
</html>
前端示例代码
$("div")
w.fn.init(10) [div#d1, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]
$("div").each(function(index){console.log(index)}) #each()就相当于for循环前面的$("div")数组,然后交给后面的function,一个参数是索引,第二个参数是值
VM115:1 0
VM115:1 1
VM115:1 2
VM115:1 3
VM115:1 4
VM115:1 5
VM115:1 6
VM115:1 7
VM115:1 8
VM115:1 9
w.fn.init(10) [div#d1, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]
$("div").each(function(index,obj){console.log(index,obj)})
VM168:1 0 <div id="d1" username="jason">1</div>
VM168:1 1 <div>2</div>
VM168:1 2 <div>3</div>
VM168:1 3 <div>4</div>
VM168:1 4 <div>5</div>
VM168:1 5 <div>6</div>
VM168:1 6 <div>7</div>
VM168:1 7 <div>8</div>
VM168:1 8 <div>9</div>
VM168:1 9 <div>10</div>
w.fn.init(10) [div#d1, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]
$("div").each(function(index,obj,arr){console.log(index,obj,arr)}) #只有两个参数
VM234:1 0 <div id="d1" username="jason">1</div> undefined
VM234:1 1 <div>2</div> undefined
VM234:1 2 <div>3</div> undefined
VM234:1 3 <div>4</div> undefined
VM234:1 4 <div>5</div> undefined
VM234:1 5 <div>6</div> undefined
VM234:1 6 <div>7</div> undefined
VM234:1 7 <div>8</div> undefined
VM234:1 8 <div>9</div> undefined
VM234:1 9 <div>10</div> undefined
w.fn.init(10) [div#d1, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]
#===============================
#还有一种写法
$.each([11,222,3333],function(index,obj){console.log(index,obj)}) #第一个参数是自定义数组,第二个还是函数
VM386:1 0 11
VM386:1 1 222
VM386:1 2 3333
(3) [11, 222, 3333]
#data() 能够让标签帮我们存储数据 并且用户肉眼看不见
$('div').data('info','回来吧,我原谅你了!') # 给前面$('div')这个数组所有的对象都加了一个键是info,值是'回来吧,我原谅你了!'
w.fn.init(10) [div#d1, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]
$('div').first().data('info') #查看
"回来吧,我原谅你了!"
$('div').last().data('info')
"回来吧,我原谅你了!"
$('div').first().data('xxx') # 如果取没有的就没有
undefined
$('div').first().removeData('info') #删除数组中第一个元素设置的info键
w.fn.init [div#d1, prevObject: w.fn.init(10)]
$('div').first().data('info')
undefined
$('div').last().data('info')
"回来吧,我原谅你了!"
$("div").removeData('info') ##删除数组中所有元素设置的info键
w.fn.init(10) [div#d1, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]