前端第四篇---前端基础之jQuery

一、jQuery介绍 #

二、jQuery对象 #

三、jQuery基础语法 #

四、事件 #

五、动画效果 #

一、jQuery简介#

　　1.jQuery介绍#

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

　　2.jQuery的优势#

一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。

　　3.jQuery内容#

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

二、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基础语法#

　3.1 查找标签#

　　3.1.1选择器#

ID选择器

$("#id")

标签选择器

$("tagName")

class选择器　　

$(".className")

配合使用　　

$("div.c1")  // 找到有c1 class类的div标签

所有元素选择器　　

$("*")

组合选择器

$("#id, .className, tagName")

层级选择器

x和y可以为任意选择器< br >
$("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">
    <title>模态框</title>
 
    <style>
        /*<!--设置背景是绝对定位position-->*/
        .cover{
            position: absolute;
            top:0;
            right:0;
            bottom: 0;
            left: 0;
            background-color: rgba(0,0,0,0.4);
            z-index: 998;/*设置对象的层叠顺序，数值大的会覆盖在数值小的标签之上。z-index 仅能在定位元素上奏效*/
        }
        .modal{
 
            position: absolute;
            left:50%;
            top:50%;
            /*------------*/
            height: 400px;
            width: 600px;
            background-color: white;
            /*=------------=*/
            margin-left: -300px;
            margin-top: -200px;
            z-index: 1000;         /*设置对象的层叠顺序，数值大的会覆盖在数值小的标签之上。z-index 仅能在定位元素上奏效*/
        }
        /*在浏览器中不显示*/
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<button id="b1">屠龙宝刀，点击就送</button>
<!--对话框边上的背景-->
<div class="cover hide"></div>
<!--弹出来的对话框-->
<div class="modal hide">
    <form>
        <p>
            <label>
                用户名：
                <input type="text">
            </label>
        </p>
        <p>
            <label>
                密&nbsp&nbsp&nbsp码：
                <input type="password">
            </label>
        </p>
        <p>
            <input type="submit" value="登陆">
            <input id="cannel" type="button" value="取消" >
        </p>
    </form>
</div>
<script src="jquery-3.2.1.min.js"></script>
 
<script>
    $("#b1").click(function () {
        //  一点击就去点cover和modal 中的hide
        $('.cover').removeClass('hide');
        $('.modal').removeClass('hide');
    });
 
//    现在点击取消按钮，是没有任何效果的。所以为取消按钮绑定事件
    $("#cannel").click(function () {
        $(".cover").addClass("hide");
        $(".modal").addClass("hide")
 
    })
 
 
 
</script>
 
 
 
 
 
</body>
</html>

jQuery版自定义模态框

属性选择器

[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

例子

$(":checkbox")  // 找到所有的checkbox

表单对象属性　　

< br >:enabled     //  可用    $("input:enabled")找到可用的input标签

例子

<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

<select id="s1">
  <option value="beijing">北京市</option>
  <option value="shanghai">上海市</option>
  <option selected value="guangzhou">广州市</option>
  <option value="shenzhen">深圳市</option>
</select>
 
$(":selected")  // 找到所有被选中的option

　　3.1.2筛选器#

下一个元素

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

上一个元素

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

父亲元素

$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

儿子和兄弟元素

$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们

查找元素

$("#id").find()// 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

补充

.first()// 获取匹配的第一个元素
.last()// 获取匹配的最后一个元素
.not()// 从匹配元素的集合中删除与指定表达式匹配的元素
.has()// 保留包含特定后代的元素，去掉那些不含有指定后代的元素。

示例：左侧菜单#

 <!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="title">菜单一</div>
    <div class="items">
      <div class="item">111</div>
      <div class="item">222</div>
      <div class="item">333</div>
    </div>
    <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 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 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");
  });
</script>

左侧菜单示例

　　3.2 操作标签#

　　3.2.1 样式操作#

样式操作

addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。

示例：开关灯和模态框

CSS

css("color","red")//DOM操作：tag.style.color="red"

示例：

$("p").css("color", "red"); //将所有p标签的字体设置为红色

 <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS样式修改</title>
</head>
<body>
<p>今日内容jQuery</p>
<p>的一部分</p>
<script src="jquery-3.2.1.min.js"></script>
<!--把当前点击的标签变绿-->
<script>
<!--先找到p标签,绑定事件-->
$('p').click(function () {
    $(this).css('color','red')
    $(this).css("font-size", "24px");
})
</script>
</body>
</html>
 
 
 
等价于
 
$(this).css({"color": "pink", "font-size": "48px"});

小练习字体变红

位置：

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移

　　.offset()方法允许我们检索一个元素相对于文档（document）的当前位置

　　.position()的差别在于：.position()是相对于父级元素的位移

height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()

 <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>返回顶部</title>
    <style>
        /*设置返回按钮的属性*/
    .c2{
        width: 50px;
        height: 50px;
 
        position: fixed;  /* fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动*/
        bottom: 15px;
        right: 15px;
        background-color: #2b669a;
    }
    .hide{
        display:none ;
    }
    </style>
</head>
<body>
<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="btn2 c2">返回顶部</button>
 
<script src="jquery-3.2.1.min.js"></script>
 
<script>
    /*设置窗口滚动栏*/
    $(window).scroll(function () {
        if ($(window).scrollTop()>100){
            $('#b2').removeClass("hide");
        }else{
            $('#b2').addClass('hide');
        }
    });
    /*点击返回按钮就距离顶部0*/
    $('#b2').click(function () {
        $(window).scrollTop(0);
    })
</script>
</body>
</html>

返回顶部

 <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>尺寸示例</title>
    <style>
        .c1 {
            height: 100px;
            width: 200px;
            padding: 10px;
            margin: 20px;
            background-color: red;
            border: 5px solid green;
        }
    </style>
</head>
<body>
 
<div>
    <div class="c1">div</div>
</div>
<script src="jquery-3.2.1.min.js"></script>
//===============================
<script>
$('.c1').height()
$('.c1').width()
 
$('.c1').innerHeight()
$('.c1').innerWidth()
 
$('.c1').outerHeight()
$('.c1').outerWidth()
 
 
</script>
//===============================
 
</body>
</html>
 
 
    
 
 
Q:100/200/120/220/130/230

尺寸示例

　　3.2.2 文本操作#

　　HTML代码：

html() / / 取得第一个匹配元素的html内容
html(val) / / 设置所有匹配元素的html内容

　　文本值：

text() / / 取得所有匹配元素的内容
text(val) / / 设置所有匹配元素的内容

　值：

val() / / 取得第一个匹配元素的当前值
val(val) / / 设置所有匹配元素的值
val([val1, val2]) / / 设置checkbox、select的值

　　获取被选中的checkbox或radio的值：

女< / label>
< input name = "gender" id = "c1" type = "radio" value = "0" >
男< / label>
< input name = "gender" id = "c2" type = "radio" value = "1" >

　　可以使用：

$( "input[name='gender']:checked" ).val()

 <!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>jQuery val示例</title>
</head>
<body>
 
 
<label for="s1">城市</label>
<select id="s1">
  <option value="beijing">北京市</option>
  <option value="shanghai">上海市</option>
  <option selected value="guangzhou">广州市</option>
  <option value="shenzhen">深圳市</option>
</select>
<hr>
<label for="s2">爱好</label>
<select id="s2" multiple="multiple">
  <option value="basketball" selected>篮球</option>
  <option value="football">足球</option>
  <option value="doublecolorball" selected>双色球</option>
</select>
 
<script src="jquery-3.2.1.min.js"></script>
<script>
  // 单选下拉框
  $("#s1").val("shanghai");
  // 多选下拉框
   $("#s2").val(["basketball", "football"]);
</script>
</body>
</html>

jQuery val赋值示例

 <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>文档操作</title>
    <style>
        .error {
            color: red;
        }
    </style>
</head>
<body>
<form id="f1">
        <p>
            <label>用户名:
                <input class="need" name="username" type="text">
                <span class="error"></span>
            </label>
        </p>
        <p>
            <label>密码:
                <input class="need" name="password" type="password">
                <span class="error"></span>
            </label>
        </p>
        <p>
            <input id="b1" type="submit" value="登录">
            <input id="cancel" type="button" value="取消">
        </p>
    </form>
<script src="jquery-3.2.1.min.js"></script>
<script>
 
 
    $("#b1").click(function () {  /*找到b1*/
        var $needEles = $(".need");/*找到need赋值给$needEles*/
        for (var i=0;i<$needEles.length;i++){
            if ($($needEles[i]).val().trim().length === 0) {
                /*赋值labelName是用户名和密码这两个词*/
                                                /*找父类的文本去空格去冒号*/
                var labelName = $($needEles[i]).parent().text().trim().slice(0,-1);/*去掉冒号*/
                /* 用户名下面的内容就是文本框，添加一个内容***不能为空*/
                $($needEles[i]).next().text( labelName +"不能为空!");
            }
        }
        return false;/*提交按钮有自动提交的功能，写这句话就是为了不提交*/
    })
 
</script>
</body>
</html>

自定义登录校验示例

　　3.2.3 属性操作#

　　用于ID等或自定义属性：

attr(attrName) / / 返回第一个匹配元素的属性值
attr(attrName, attrValue) / / 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2}) / / 为所有匹配元素设置多个属性值
removeAttr() / / 从每一个匹配的元素中删除一个属性

　　attr的使用

 <input id="chk1" type="checkbox" />是否可见
<input id="chk2" type="checkbox" checked="checked" />是否可见
 
 
 
<script>
 
//对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
//对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
//像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此
//需要使用prop方法去操作才能获得正确的结果。
 
 
//    $("#chk1").attr("checked")
//    undefined
//    $("#chk1").prop("checked")
//    false
 
//  ---------手动选中的时候attr()获得到没有意义的undefined-----------
//    $("#chk1").attr("checked")
//    undefined
//    $("#chk1").prop("checked")
//    true
 
    console.log($("#chk1").prop("checked"));//false
    console.log($("#chk2").prop("checked"));//true
    console.log($("#chk1").attr("checked"));//undefined
    console.log($("#chk2").attr("checked"));//checked
</script>

attr的使用

　　示例：全选、反选、取消#

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <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>小东北</td>
        <td>二人转演员</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>夏娜</td>
        <td>xx演员</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>涉及</td>
        <td>导演</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.2.1.min.js"></script>
<script>
    // 点击全选,表格中所有的checkbox都选中
    // 1. 找checkbox
    // 2. 全部选中  --> prop("checked", true);
    $("#b1").click(function () {
        $(":checkbox").prop("checked", true);
    });

    // 点击取消
    // 1. 找checkbox
    // 2. 全部取消选中  --> prop("checked", false);
   $("#b3").click(function () {
        $(":checkbox").prop("checked", false);
    });

    // 反选
    // 1. 找到所有的checkbox
    // 2. 判断
    // 2.1 原来没选中的,要选中
    // 2.2 原来选中的,要取消选中
       $("#b2").click(function () {
           // 找到所有的checkbox,把它们保存在一个名叫 $checkboxEles 的变量中,方便后面使用
           var $checkboxEles = $(":checkbox");
           // 遍历所有的checkbox,根据每一个checkbox的状态做不同的操作
           for (var i=0;i<$checkboxEles.length;i++){
               // 把每一个checkbox包成jQuery对象
               var $tmp = $($checkboxEles[i]);
               // 如果 checkbox是选中的
               if ($tmp.prop("checked")){
                   // 取消选中
                   $tmp.prop("checked", false);
               }else {
                   // 否则就选中
                   $tmp.prop("checked", true);
               }
           }
    });

</script>
</body>
</html>

　　3.2.4 文档处理#

//创建一个标签对象
    $("<p>")
 
 
//内部插入
　　　//添加到指定元素内部的后面
    $("").append(content|fn)      ----->$("p").append("<b>Hello</b>");       // 把"<b>Hello</b>"追加到 ‘p’ 　　 
    $("").appendTo(content)       ----->$("p").appendTo("div");              // 把 div 追加到 p　　//添加到指定元素内部的前面　　
    $("").prepend(content|fn)     ----->$("p").prepend("<b>Hello</b>");      // 把 b标签 前置于 p
    $("").prependTo(content)      ----->$("p").prependTo("#foo");            // 把#foo 前置于p
 
//外部插入
 
    $("").after(content|fn)       ----->$("p").after("<b>Hello</b>");         // 把 b 放在 p 后面
    $("").before(content|fn)      ----->$("p").before("<b>Hello</b>");        // 把 b 放在 p 前面
    $("").insertAfter(content)    ----->$("p").insertAfter("#foo");           // 把 #foo 放在 p 后面
    $("").insertBefore(content)   ----->$("p").insertBefore("#foo");          // 把 #foo 放在 p 前面
 
//替换
    $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");　　  
    $("").replaceAll()            ----->$("p")replaceAll("#foo")
 
//删除
 
    $("").empty()           // 删除匹配的元素集合中的所有的子节点                             
    $("").remove([expr])    // 从DOM中删除所有匹配的元素
 
//克隆
 
    $("").clone([Even[,deepEven]])

 <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>点击在表格最后添加一条记录</title>
</head>
<body>
<table border="1" id="t1">
    <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>爱好</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>强</td>
        <td>吃冰激凌</td>
        <td>
            <button class="delete">删除</button>
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td>哥</td>
        <td>Girl</td>
        <td>
            <button class="delete">删除</button>
        </td>
    </tr>
 
    </tbody>
</table>
 
<button id="b1">添加一行数据</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
    // 绑定事件
    $("#b1").click(function () {
        // 生成要添加的tr标签及数据
        var trEle = document.createElement("tr");
        $(trEle).html("<td>3</td>" +
            "<td>小东北</td>" +
            "<td>社会摇</td>" +
            "<td><button class='delete'>删除</button></td>");
        // 把生成的tr插入到表格中
        $("#t1").find("tbody").append(trEle);
    });
    
    // 每一行的=删除按钮绑定事件
    $(".delete").click(function () {
        $(this).parent().parent().remove();
    });
 
</script>
</body>
</html>

表格最后添加一条记录

 <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>克隆示例</title>
</head>
<body>
 
<button id="b1">屠龙宝刀,点我就送!</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
    // clone方法不加参数true，克隆标签但不克隆标签带的事件
    $("#b1").click(function () {
        $(this).clone().insertAfter(this);
    });
</script>
</body>
</html>

clone方法不加参数true

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>clone方法-参数-加（true）(runoob.com)</title>
<script src="jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("body").append($("p:first").clone(true));
    });
    $("p").click(function(){
        $(this).animate({fontSize:"+=1px"});
    });
});
</script>
</head>
<body>
 
<p>单击段落增加文本的大小。</p>
<p>这是另一个段落。</p>
<button>复制第一个p元素(包括事件处理程序),并附加到body元素中</button>

连同属性一起clone

四、事件#

　　4.1 常用事件#

click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})

　　keydown和keyup事件组合示例：　　#

 <!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>
</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.2.1.min.js"></script>
<script>
  // 全选
  $("#b1").on("click", function () {
    $(":checkbox").prop("checked", true);
  });
  // 取消
  $("#b2").on("click", function () {
    $(":checkbox").prop("checked", false);
  });
  // 反选
  $("#b3").on("click", function () {
    $(":checkbox").each(function () {
      var flag = $(this).prop("checked");
      $(this).prop("checked", !flag);
    })
  });
  // 按住shift键，批量操作
  // 定义全局变量
  var flag = false;
  // 全局事件，监听键盘shift按键是否被按下
  $(window).on("keydown", function (e) {
//    alert(e.keyCode);
    if (e.keyCode === 16){
      flag = true;
    }
  });
  // 全局事件,shift按键抬起时将全局变量置为false
  $(window).on("keyup", function (e) {
    if (e.keyCode === 16){
      flag = false;
    }
  });
  // select绑定change事件
  $("table select").on("change", function () {
    // 是否为批量操作模式
    if (flag) {
      var selectValue = $(this).val();
      // 找到所有被选中的那一行的select，选中指定值
      $("input:checked").parent().parent().find("select").val(selectValue);
    }
  })
</script>
</body>
</html>

按住shift键批量操作

　　实时监听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值变化事件

　　4.2 页面载入#

ready(fn)   / / 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){})  - - - - - - - - - - - > $(function(){})

 <!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>
 
<script src="jquery-3.2.1.min.js"></script>
<script src="s7validate.js"></script>
<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>

登录校验示例　

　　4.2 事件绑定#

/ / 语法:  标签对象.事件(函数)    
$( "p" ).click(function(){})

　　4.3 事件委托[data]#

$(" ").on(eve,[selector],[data],fn)  // 在选择元素上绑定一个或多个事件的事件处理函数。

　　4.4 阻止后续事件执行#

return false;  / / 常见阻止表单提交等

　　像click、keydown等DOM中定义的事件，我们都可以使用`.on()`方法来绑定事件，但是`hover`这　　　种jQuery中定义的事件就不能用`.on()`方法来绑定了。

　　想使用事件委托的方式绑定hover事件处理函数，可以参照如下代码分两步绑定事件

$( 'ul' ).on( 'mouseenter' ,  'li' , function() { / / 绑定鼠标进入事件
    $(this).addClass( 'hover' );
});
$( 'ul' ).on( 'mouseleave' ,  'li' , function() { / / 绑定鼠标划出事件
    $(this).removeClass( 'hover' );
});

　　4.5 移除事件#

.off( events [, selector ][,function(){}])
off() 方法移除用 .on()绑定的事件处理程序

五、动画效果#

//基本
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="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.4.min.js"></script>
    <script>
 
$(document).ready(function() {
    $("#hide").click(function () {
        $("p").hide(1000);
    });
    $("#show").click(function () {
        $("p").show(1000);
    });
 
//用于切换被选元素的 hide() 与 show() 方法。
    $("#toggle").click(function () {
        $("p").toggle();
    });
})
 
    </script>
    <link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
 
 
    <p>hello</p>
    <button id="hide">隐藏</button>
    <button id="show">显示</button>
    <button id="toggle">切换</button>
 
</body>
</html>

显示隐藏

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.4.min.js"></script>
    <script>
    $(document).ready(function(){
     $("#slideDown").click(function(){
         $("#content").slideDown(1000);
     });
      $("#slideUp").click(function(){
         $("#content").slideUp(1000);
     });
      $("#slideToggle").click(function(){
         $("#content").slideToggle(1000);
     })
  });
    </script>
    <style>
 
        #content{
            text-align: center;
            background-color: lightblue;
            border:solid 1px red;
            display: none;
            padding: 50px;
        }
    </style>
</head>
<body>
 
    <div id="slideDown">出现</div>
    <div id="slideUp">隐藏</div>
    <div id="slideToggle">toggle</div>
 
    <div id="content">helloworld</div>
 
</body>
</html>

滑动

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.4.min.js"></script>
    <script>
    $(document).ready(function(){
   $("#in").click(function(){
       $("#id1").fadeIn(1000);
 
 
   });
    $("#out").click(function(){
       $("#id1").fadeOut(1000);
 
   });
    $("#toggle").click(function(){
       $("#id1").fadeToggle(1000);
 
 
   });
    $("#fadeto").click(function(){
       $("#id1").fadeTo(1000,0.4);
 
   });
});
 
 
 
    </script>
 
</head>
<body>
      <button id="in">fadein</button>
      <button id="out">fadeout</button>
      <button id="toggle">fadetoggle</button>
      <button id="fadeto">fadeto</button>
 
      <div id="id1" style="display:none; width: 80px;height: 80px;background-color: blueviolet"></div>
 
</body>
</html>

淡入淡出

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.4.min.js"></script>
 
</head>
<body>
  <button>hide</button>
  <p>helloworld helloworld helloworld</p>
 
 
 
 <script>
   $("button").click(function(){
       $("p").hide(1000,function(){
           alert($(this).html())
       })
 
   })
    </script>
</body>
</html>

回调函数

 <!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 @ 2018-03-15 15:44 流年中渲染了微笑阅读(444) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 25岁的心里话
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现

公告

昵称：流年中渲染了微笑
园龄： 7年3个月
粉丝： 33
关注： 14

+加关注

2025年3月

日

一

二

三

四

五

六

	<!DOCTYPE html>
	<html lang="zh-CN">
	<head>
	<meta charset="UTF-8">
	<title>模态框</title>

	<style>
	/<!--设置背景是绝对定位position-->/
	.cover{
	position: absolute;
	top:0;
	right:0;
	bottom: 0;
	left: 0;
	background-color: rgba(0,0,0,0.4);
	z-index: 998;/设置对象的层叠顺序，数值大的会覆盖在数值小的标签之上。z-index 仅能在定位元素上奏效/
	}
	.modal{

	position: absolute;
	left:50%;
	top:50%;
	/------------/
	height: 400px;
	width: 600px;
	background-color: white;
	/=------------=/
	margin-left: -300px;
	margin-top: -200px;
	z-index: 1000; /设置对象的层叠顺序，数值大的会覆盖在数值小的标签之上。z-index 仅能在定位元素上奏效/
	}
	/在浏览器中不显示/
	.hide{
	display: none;
	}
	</style>
	</head>
	<body>
	<button id="b1">屠龙宝刀，点击就送</button>
	<!--对话框边上的背景-->
	<div class="cover hide"></div>
	<!--弹出来的对话框-->
	<div class="modal hide">
	<form>
	<p>
	<label>
	用户名：
	<input type="text">
	</label>
	</p>
	<p>
	<label>
	密&nbsp&nbsp&nbsp码：
	<input type="password">
	</label>
	</p>
	<p>
	<input type="submit" value="登陆">
	<input id="cannel" type="button" value="取消" >
	</p>
	</form>
	</div>
	<script src="jquery-3.2.1.min.js"></script>

	<script>
	$("#b1").click(function () {
	// 一点击就去点cover和modal 中的hide
	$('.cover').removeClass('hide');
	$('.modal').removeClass('hide');
	});

	// 现在点击取消按钮，是没有任何效果的。所以为取消按钮绑定事件
	$("#cannel").click(function () {
	$(".cover").addClass("hide");
	$(".modal").addClass("hide")

	})



	</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="title">菜单一</div>
	<div class="items">
	<div class="item">111</div>
	<div class="item">222</div>
	<div class="item">333</div>
	</div>
	<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 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 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");
	});
	</script>

	<input id="chk1" type="checkbox" />是否可见
	<input id="chk2" type="checkbox" checked="checked" />是否可见



	<script>

	//对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
	//对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
	//像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此
	//需要使用prop方法去操作才能获得正确的结果。


	// $("#chk1").attr("checked")
	// undefined
	// $("#chk1").prop("checked")
	// false

	// ---------手动选中的时候attr()获得到没有意义的undefined-----------
	// $("#chk1").attr("checked")
	// undefined
	// $("#chk1").prop("checked")
	// true

	console.log($("#chk1").prop("checked"));//false
	console.log($("#chk2").prop("checked"));//true
	console.log($("#chk1").attr("checked"));//undefined
	console.log($("#chk2").attr("checked"));//checked
	</script>

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>clone方法-参数-加（true）(runoob.com)</title>
	<script src="jquery.min.js">
	</script>
	<script>
	$(document).ready(function(){
	$("button").click(function(){
	$("body").append($("p:first").clone(true));
	});
	$("p").click(function(){
	$(this).animate({fontSize:"+=1px"});
	});
	});
	</script>
	</head>
	<body>

	<p>单击段落增加文本的大小。</p>
	<p>这是另一个段落。</p>
	<button>复制第一个p元素(包括事件处理程序),并附加到body元素中</button>

一、jQuery简介#

1.jQuery介绍#

2.jQuery的优势#

3.jQuery内容#

二、jQuery对象#

三、jQuery基础语法#

3.1 查找标签#

3.1.1选择器#

3.1.2筛选器#

示例：左侧菜单#

3.2 操作标签#

3.2.1 样式操作#

3.2.2 文本操作#

3.2.3 属性操作#

示例：全选、反选、取消#

3.2.4 文档处理#

四、事件#

4.1 常用事件#

keydown和keyup事件组合示例： #

4.2 页面载入#

4.2 事件绑定#

4.3 事件委托[data]#

4.4 阻止后续事件执行#

4.5 移除事件#

五、动画效果#

公告

搜索

常用链接

随笔档案

　　1.jQuery介绍#

　　2.jQuery的优势#

　　3.jQuery内容#

　3.1 查找标签#

　　3.1.1选择器#

　　3.1.2筛选器#

　　3.2 操作标签#

　　3.2.1 样式操作#

　　3.2.2 文本操作#

　　3.2.3 属性操作#

　　示例：全选、反选、取消#

　　3.2.4 文档处理#

　　4.1 常用事件#

　　keydown和keyup事件组合示例：　　#

　　4.2 页面载入#

　　4.2 事件绑定#

　　4.3 事件委托[data]#

　　4.4 阻止后续事件执行#

　　4.5 移除事件#