目录
jQuery封装了JS代码,使JS的编写更加简单,类似python的模块,在前端中叫
“类库”
,同时也兼容多个浏览器,提供了更多的功能,写的更少,功能却更多(write less do more)
看到下载安装的小伙伴不要害怕,jQuery的下载与安装及其简单,安装的同时不影响你开法拉利,下面一个小demo你就明白~
# 本地版
'''
1. 打开第一个jQuery官网
2.点击Downloading jQuery
3.Download the compressed, production jQuery 3.6.0推荐下载压缩版本,加载比较快
4.通过点击打开,复制里面的内容保存到JS文件中
5.通过script标签的src引入文件
'''
# CDN版(CDN:Content Delivery Network,内容分发网络)
'''
如果能保持电脑一直有网络,可以选择这个版本
1.打开bootcdn:https://www.bootcdn.cn/jquery/3.4.1/
2.选择3.4左右版本的jQuery
3.https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js
4.3中给大家放好URL了,复制
5.通过script标签引入
'''
# 最终引入
<script src="jQuery/jQuery3.4.js"></script> # 本地
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script> # CDN
前面总结了JS相关知识的文章,对元素进行添加,修改,获取···操作很繁琐,代码多,但是jQuery 库可以通过一行简单的标记被添加到网页中
$
符号事jQuery中的重要标识
//在JS中可以通过获取先获取标签,然后去使用对应的方法,在jQuery中一样,可以先筛选元素(标签),然后再对该元素做出动态操作
$(selector).action()
selector
:通过选择器获取元素action
:获取元素后的动作行为JS中DOM获取到的元素是DOM对象,那么在jQuery中获取到的元素属于jQuery对象,两者之间方法有差别,虽然
jQuery对象
是包装DOM对象
后产生的,但是jQuery对象
无法使用DOM对象
的任何方法,同理DOM对象
也没不能使用jQuery
里的方法
//获取id值为d1的元素的html
jQuery: $("#d1").html()
DOM: document.getElementById("d1").innerHTML
$(DOM对象)
jQuery对象[索引]
Demo
var dEle = document.getElementById("d1").innerHTML
$(dEle) //DOM转jQuery
$("#d1")[0] //jQuery转DOM
CSS选择器关键字 | jQuery | 说明 |
---|---|---|
tagName | $('tagName') | 标签选择器 |
. | $('.className') | 类选择器 |
# | $('#id') | id选择器 |
* | $('*') | 通用选择器 |
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jQuery/jQuery3.4.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<p id="1" class="class1">1</p>
<p id="2" class="class2">2</p>
<div id="3" class="class3">3</div>
</body>
</html>
标签选择器
//获取p标签
$('p')
//获取div标签
$('div')
id选择器
//获取id为1的元素
$('#1')
类选择器
//获取类名为class3的元素
$('.class3')
通用选择器
//获取所有元素
$('*')
//k.fn.init(11) [html, head, meta, title, script, script, body, p#1.class1, p#2.class2, div#3.class3, script, prevObject: k.fn.init(1)]
a和b可以是任意选择器
CSS选择器关键字 | jQuery | 说明 |
---|---|---|
空格 | $(a b) | 后代选择器 |
> | $(a>b) | 儿子选择器 |
+ | $(a b) | 相邻选择器(紧挨着) |
~ | $(a~b) | 弟弟选择器(不需要紧挨着) |
ps:相邻和弟弟选择器都是同级别的 demo
<div id="d1" class="d1">div1
<p id="p1" class="p1" >div里的p
<br>
<span id="s1" class="s1">div里的p中的span</span>
</p>
</div>
<div class="d2" id="d2">div2</div>
后代选择器
//查找id='d1',div元素的后代span元素
$('#d1 span' )
儿子选择器
//查找div元素class=d1的儿子id=p1
$('.d1>#p1')
相邻选择器
//查找id=d1的div元素的相邻元素
$('#d1+div')
弟弟选择器
//查找id=d1的div元素的弟弟元素div
$('#d1~#d2')
CSS 属性选择器通过已经存在的属性名或属性值匹配元素; jQuery也可以通过属性选择器来进行操作;
CSS选择器关键字 | jQuery | 说明 |
---|---|---|
[attr] | [attr] | 带有以 attr 命名的属性的元素 |
[attr=value] | [attr=value] | 表示带有以 attr 命名的属性,且属性值为 value 的元素 |
[attr!=value] | [attr!=value] | 表示带有以 attr 命名的属性,且属性值不为 value 的元素 |
选择器不会可以看:(CSS快速入门(一) - HammerZe - 博客园 (cnblogs.com))
// 示例
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签
可以对选择器获取到的元素进一步筛选
方法 | 说明 |
---|---|
:first | 第一个 |
:last | 最后一个 |
:eq(index) | 索引等于index的那个元素 |
:even | 匹配所有索引值为偶数的元素,从 0 开始计数 |
:odd | 匹配所有索引值为奇数的元素,从 0 开始计数 |
:gt(index) | 匹配所有大于给定索引值的元素 |
:lt(index) | 匹配所有小于给定索引值的元素 |
:not(元素选择器) | 移除所有满足not条件的标签 |
:has(元素选择器) | 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找) |
ps:可以写括号内,也可以点出来
demo code
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li class='l9'>9</li>
</ul>
demo
//first
$('ul li:first()')
$('ul li:first()')[0].innerText //1
//last
$('ul li:last()')
$('ul li').last()
//eq
$('ul li:eq(1)')
//even
$('ul li:even()')
//odd
$('ul li:odd()')
//gt
$('ul li:gt(2)')
//lt
$('ul li:lt(2)')
//not
$('ul li:not(.l9)')
//has
$('ul li:has(.l9)')
练习,自定义模态框,实现弹出隐藏功能
<!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>
jQuery版自定义模态框
表单忘记了可以看俺的笔记
:text //普通文本
:password //密文密码
:file //上传文件
:radio //选择
:checkbox //多选
:submit // 提交按钮
:reset //重置按钮
:button //普通按钮
可以针对表单进行筛选
'''通过属性选择器可以通过属性值来获得元素,在表单筛选器中对此进行了简写'''
# 属性筛选器获取type=text的input元素
$('input[type=text]')
#表单筛选器获取
$(':text')
# 表单筛选器的特例
$(':checked') # 找checked属性的input标签会连同option默认的selected一起找到,但是找selected属性的option标签不会输出input标签
:enabled //可用的
:disabled //失效的
:checked //勾选的(input标签)
:selected //选择好的(option标签)
方法 | 说明 |
---|---|
first() | 获取匹配的第一个元素 |
last() | 获取匹配的最后一个元素 |
not() | 从匹配元素的集合中删除与指定表达式匹配的元素 |
has() | 保留包含特定后代的元素,去掉那些不含有指定后代的元素。 |
next() | 下一个元素 |
nextAll() | 下面所有元素 |
nextUntil("元素选择器") | 直到下面选择器获取的元素 |
prev() | 上一个元素 |
prevAll() | 上面所有元素 |
prevUntil("元素选择器") | 直到上面选择器获取的元素 |
parent() | 父元素 |
parents() | 所有父元素 |
parentsUntil(“元素选择器”) | 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止 |
children() | 该元素的子元素 |
siblings() | 该元素的兄弟元素 |
find(‘元素选择器’) | 查找该元素的后代元素 |
filter(‘元素选择器’) | 筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式 |
demo
//next
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
//prev
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
//parent
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止。
//children siblings
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们
//find 等价于$("div p")
$("div").find("p")
//filter
$("div").filter(".c1") // 从结果集中过滤出有c1样式类的
<!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 hide">
<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 hide">
<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>
$(".title").click(function (){ // jQuery绑定事件
// 隐藏所有class里有.items的标签
// $(".items").addClass("hide"); //批量操作
// $(this).next().removeClass("hide");
// jQuery链式操作
$(this).next().removeClass('hide').parent().siblings().find('.items').addClass('hide')
});
</script>
左侧菜单栏
对比DOM
DOM | jQuery | 说明 |
---|---|---|
add(class1, class2, …) | addClass() | 添加指定的CSS类名 |
remove(class1, class2, …) | removeClass() | 移除指定的CSS类名 |
contains(class) | hasClass() | 判断样式存不存在 |
toggle(class, true|false) | toggleClass() | 切换CSS类名,如果有就移除,如果没有就添加。 |
$("p").css("color", "red"); //将所有p标签的字体设置为红色
DOM操作
方法 | 说明 |
---|---|
open() | 打开一个新的浏览器窗口 |
alert() | 显示警告窗口 |
close() | 关闭当前浏览器窗口 |
scrollTo() | 可把内容滑动到指定坐标 |
scrollBy() | 可将内容滑动指定的距离(相对于当前位置) |
innerWidth | 返回窗口的网页显示区域宽度 |
innerHeight | 返回窗口的网页显示区域高度 |
jQuery
方法 | 说明 |
---|---|
offset() | 获取匹配元素在当前窗口的相对偏移或设置元素位置 |
position() | 获取匹配元素相对父元素的偏移 |
scrollTop() | 获取匹配元素相对滚动条顶部的偏移 |
scrollLeft() | 获取匹配元素相对滚动条左侧的偏移 |
ps:.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 btn-default">点我</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="btn btn-default c2 hide">返回顶部</button>
<script src="jquery-3.2.1.min.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()
//案例
$(window).height()
236
$(window).width()
1229
方法括号内没有值就获取,有值就设置
html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容
text()// 取得所有匹配元素的内容
text(val)// 设置所有匹配元素的内容
val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值
demo code
<input type="checkbox" value="basketball" name="hobby">篮球
<input type="checkbox" value="football" name="hobby">足球
<select multiple id="s1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
设置值
//将属性name=hobby的元素的值修,元素修改,效果勾选篮球足球
$("[name='hobby']").val(['basketball', 'football']);
//设置id为s1的值,效果选择1和2
$("#s1").val(["1", "2"])
获取被选中的checkbox或radio的值:
<label for="c1">女</label>
<input name="gender" id="c1" type="radio" value="0">
<label for="c2">男</label>
<input name="gender" id="c2" type="radio" value="1">
$("input[name='gender']:checked").val()
用于ID等或自定义属性:
attr(attrName)// 返回第一个匹配元素的属性值 DOM:setAttribute(name,value)
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性
用于checkbox和radio
prop() // 获取属性
removeProp() // 移除属性
示例
<input type="checkbox" value="1">
<input type="radio" value="2">
<script>
$(":checkbox[value='1']").prop("checked", true);
$(":radio[value='2']").prop("checked", true);
</script>
总结:
添加到指定元素内部的后面
$(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的前面
移除和清空元素
remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。
替换
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(){...}) //任意按键
keydown和keyup事件组合示例:
<!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>
按住shift实现批量操作
hover事件示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>苍茫的天涯是我的哎,绵绵的青山脚下一片海!</p>
<script src="jQuery-3.3.1.js">
</script>
<script>
$('p').hover(
function () {
alert('来啦,老弟')
},
function () {
alert('慢走哦~')
}
)
</script>
</body>
</html>
hover事件
实时监听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值变化事件
jQuery对象.on( events,function(){})
jQuery对象.events(function(){})
$('#d1').click(function(){alert('弹')})
.off( events [, selector ][,function(){}])
off()
方法移除用 .on()
绑定的事件处理程序。
return false; // 常见阻止表单提交等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止默认事件</title>
</head>
<body>
<form action="">
<button id="b1">点我</button>
</form>
<script src="jquery-3.3.1.min.js"></script>
<script>
$("#b1").click(function (e) {
alert(123);
//return false;
e.preventDefault();
});
</script>
</body>
</html>
ps :
像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>
</head>
<body>
<div>
<p>
<span>点我</span>
</p>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
$("span").click(function (e) {
alert("span");
e.stopPropagation();
});
$("p").click(function () {
alert("p");
});
$("div").click(function () {
alert("div");
})
</script>
</body>
</html>
在DOM中我们知道,有onload方法等待加载完毕再执行函数 jQuery中也有:ready
// 原生js文档加载方式
window.onload = function () {}
// jQuery文档加载方式1
$(document).ready(function () {})
// jQuery文档加载方式2
$(function(){})
事件委托是通过事件冒泡的原理,利用父标签去捕获子标签的事件
// 将body内部所有的点击事件委托给button按钮执行
$('body').on('click','button',function () {
// 创建一个button标签
var btnEle = document.createElement('button')
// 设置内部文本
btnEle.innerText = '点我'
// 将button标签添加到body内部
$('body').append(btnEle)
})
语法
// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定义(了解即可)
animate(p,[s],[e],[fn])
示例
<!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>
div {
position: relative;
display: inline-block;
}
div>i {
display: inline-block;
color: red;
position: absolute;
right: -16px;
top: -5px;
opacity: 1;
}
</style>
</head>
<body>
<div id="d1">点赞</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
$("#d1").on("click", function () {
var newI = document.createElement("i");
newI.innerText = "+1";
$(this).append(newI);
$(this).children("i").animate({
opacity: 0
}, 1000)
})
</script>
</body>
</html>
点赞特效简单示例