jQuery

目录

jQuery

img

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

jQuery简介

  1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
  2. jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“
  3. jQuery 很容易学习。

前面总结了JS相关知识的文章，对元素进行添加，修改，获取···操作很繁琐，代码多，但是jQuery 库可以通过一行简单的标记被添加到网页中

jQuery 内容

  • 选择器
  • 筛选器
  • 样式操作
  • 文本操作
  • 属性操作
  • 文档处理
  • 事件
  • 动画效果
  • 插件
  • each、data、Ajax

jQuery语法

$符号事jQuery中的重要标识

//在JS中可以通过获取先获取标签，然后去使用对应的方法，在jQuery中一样，可以先筛选元素（标签），然后再对该元素做出动态操作
  • 格式：$(selector).action()
  • selector：通过选择器获取元素
  • action：获取元素后的动作行为

jQuery对象

JS中DOM获取到的元素是DOM对象，那么在jQuery中获取到的元素属于jQuery对象，两者之间方法有差别，虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法

对比DOM对象和jQuery对象

  • DOM对象：var variable = DOM对象
  • jQuery对象：var $variable = jQuery对象
    • 声明jQuery对象变量时候前面加‘$’
//获取id值为d1的元素的html
jQuery: $("#d1").html()
DOM:    document.getElementById("d1").innerHTML

对象之间的转换

  • DOM转jQuery：$(DOM对象)
  • jQuery转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版自定义模态框

表单筛选器

表单忘记了可以看俺的笔记哦：HTML表单 - HammerZe - 博客园 (cnblogs.com)

: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内容
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>

总结：

  • 对于标签上有的能看到的属性和自定义属性都用attr
  • 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop
  • 通俗理解为：attr适用于属性为静态的情况(不经常修改动态变化的)，而prop用于动态变化的情况，尤其是选择类标签

文档处理

添加到指定元素内部的后面

$(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(){})
  • events： 事件
  • function: 事件处理函数
  • jQuery对象.events(function(){})
$('#d1').click(function(){alert('弹')})

移除事件

  • .off( events [, selector ][,function(){}])

  • off() 方法移除用 .on()绑定的事件处理程序。

  • events： 事件
  • selector: 选择器（可选的）
  • function: 事件处理函数

阻止后续事件执行

  1. return false; // 常见阻止表单提交等
  2. e.preventDefault();
<!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(){})

与window.onload的区别

  • window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用
  • jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）

事件委托

事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件

// 将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>

点赞特效简单示例
posted @ 2022-02-15 23:39  HammerZe  阅读(138)  评论(0)  编辑  收藏  举报