JQuery操作标签

81463166

2019-10-19

JQuery操作标签

一、样式操作

1 添加指定的CSS类名

addClass();

2 移除指定的CSS类名

removeClass(); // 与addClass一起连用实现开关

3 判断样式存不存在

hasClass();  // true //false

4 切换CSS类名，如果有就移除，如果没有就添加

toggleClass(); // 实现删除和动态添加

5 CSS操作

$("选择器").css(样式)

二、位置操作

1 获取匹配元素在当前窗口的相对偏移或设置元素位置

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

2 获取匹配元素相对父元素的偏移

position()

3 获取匹配元素相对滚动条顶部的偏移

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

4 获取匹配元素相对滚动条左侧的偏移

scrollLeft()

<!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>
<button id="b2" class="btn btn-default c2 hide">返回顶部</button>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
  $("#b1").on("click", function () {
    $(".c1").offset({left: 200, top:200});
  });

  $(window).scroll(function () {
    if ($(window).scrollTop() > 50) {
      $("#b2").removeClass("hide");
    }else {
      $("#b2").addClass("hide");
    }
  });
  $("#b2").on("click", function () {
    $(window).scrollTop(0);
  })
</script>
</body>
</html>

三、尺寸

$("选择器名").height()
$("选择器名").width()
$("选择器名").innerHeight()
$("选择器名").innerWidth()
$("选择器名").outerHeight()
$("选择器名").outerWidth(

四、文本操作

1. HTML代

$("选择器名称").html() // 取得第一个匹配元素的html内容，
$("选择器名称").(val)  // 设置获取便签内容, 能够识别html中的标签

$("#a").html("我下面给老王吃")

$("#a").html("

我下面给老王吃

$("#a").css("color","red")

2. 文本值：

$("选择器名称").text() // 获取所有匹配元素的内容
$("选择器名称").text(val)  // 设置所有匹配元素的内容

$("#a").text()

"我下面给老王吃"

$("#a").text("

我给老王下面

3. 值（input）：

$("选择器名称").val() // 获取第一个匹配元素的当前值
$（"选择器名称"）.val(val) // 获取所有匹配元素的值
$("选择器名称").val(val1, val2, val3) // 设置多个值

$("input").val()

$("input").val("2134")

五、属性操作

1. 用于ID等或自定义属性

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

$("input").attr("name")

$("input").attr("name", ‘user‘)

$("input").attr("name")

2. 用于checkbox和radio

prop() // 获取属性
removeProp() // 移除属性

**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。

六、文档处理

<body>
<div class="a1">我是div
    <span>div>span</span>
    <p>div>p</p>
</div>
<input type="checkbox" class="b1" >男

<div id="ee">asd</div>
</body>

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

$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B

var aEle = document.createElement("div")
aEle.innerHTML=‘插入的div‘
var addTag = $(".a1")
$(addTag).append(aEle)

2. 添加到指定元素内部的前面

$(A).prepend(B)// 把B前置到A(有内容，也会放到最前面)
$(A).prependTo(B)// 把A前置到B

var aEle = document.createElement("div")
aEle.innerHTML=‘插入的div‘

$(addTag).prepend(aEle)

3. 添加到指定元素外部的后面

$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面

var aEle = document.createElement("div")
aEle.innerHTML=‘插入的div‘

$(addTag).after(aEle)

4. 添加到指定元素外部的前面

$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

var aEle = document.createElement("div")
aEle.innerHTML=‘插入的div‘

$(addTag).before(aEle)

5. 移除和清空元素

remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。

$("#ee").remove()

6. 克隆

clone()// 参数

克隆示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>    
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>

</head>
<body>
<button>来啊，来啊</button>
<script>
    $("button").click(function () {
        $(this).clone(true).insertAfter(this)
    })

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

七、事件

click(function(){...}) // 单击
hover(function(){...}) // 鼠标移入
blur(function(){...}) 
focus(function(){...})
change(function(){...})
keyup(function(){...})

1. 事件绑定方法

<button>点我</button>
<script>
    // 方法一
    $("button").click(function () {
         alert("我是22技师")
    
    })
    // 方法二（推荐）
    $("button").on("click",function () {
        alert("我是1088技师")
    })
  

</script>

事件绑定

.on( events [, selector ],function(){})

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

移除事件

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

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

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

阻止后续事件执行

return false; // 常见阻止表单提交等
e.preventDefault();

2. 阻止事件方式

<script>
    $("#sub").on("click",function (e) {
           var data= $("#id").val();
           if(!data.trim()){
               $(".hid").removeClass("hid");
               //第一种阻止事件的方法
               return false
                //第二种阻止事件的方法
               e.preventDefault()
           }
    })

</script>

3. hover事件示例：

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

<body>
<div style="width: 200px;height: 200px;background-color: red">来玩啊</div>
<script>
    $("div").hover(
        function () {
            alert("很开心为你服务");
        },
        function () {
            alert("大爷，慢走，下次再来")
        }
    )

</script>

</body>

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

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

$('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件
    $(this).addClass('hover');
});
$('ul').on('mouseleave', 'li', function() {//绑定鼠标划出事件
    $(this).removeClass('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值变化事件

5. 事件委托

事件委托

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

示例：

表格中每一行的编辑和删除按钮都能触发相应的事件。

$("table").on("click", ".delete", function () {
  // 删除按钮绑定的事件
})

6. 阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <style>
        #a{
            width: 500px;
            height: 500px;
            background-color: red;
        }
         #b{
            width: 400px;
            height: 400px;
            background-color: green;
        }
        #c{
            width: 200px;
            height: 200px;
            background-color: black;
        }

    </style>
    <script>
        // $(document).ready(function(){
        //
        //     $("#a").on("click",function () {
        //         alert("第一")
        //     });
        //     $("#b").on("click",function (e) {
        //         alert("第er")
        //            e.stopPropagation()
        //     });
        //     $("#c").on("click",function (e) {
        //         alert("第san");
        //
        //     });
        //
        // })
         $(function(){

            $("#a").on("click",function () {
                alert("第一")
            });
            $("#b").on("click",function (e) {
                alert("第er")
                   e.stopPropagation()
            });
            $("#c").on("click",function (e) {
                alert("第san");

            });

        })

</script>
</head>
<body>
<div id="a">
    <div id="b">
        <div id="c"></div>
    </div>
</div>


</body>
</html>

7. 页面加载

当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。

// 方式一
$(document).ready(function(){
// 在这里写你的JS代码...
})

// 方式二 简写
$(function(){
// 你在这里写你的代码
})

与window.onload的区别

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

8. 动画效果

// 基本
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="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>

</head>
<body>
<div class="a1">我是div
    <span>div>span</span>
    <p>div>p</p>
</div>
<input type="checkbox" class="b1" >男

<div id="ee">asd</div>
</body>
</html>

补充

each

jQuery.each(collection, callback(indexInArray, valueOfElement))：

描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。

li =[10,20,30,40]
$.each(li,function(i, v){
  console.log(i, v);//index是索引，ele是每次循环的具体元素。
})

输出：

.each(function(index, Element))：

描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。

.each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素。

// 为每一个li标签添加foo
$("li").each(function(){
  $(this).addClass("c1");
});

注意: jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素 - 被称为隐式迭代的过程。当这种情况发生时，它通常不需要显式地循环的 .each()方法：

也就是说，上面的例子没有必要使用each()方法，直接像下面这样写就可以了：

$("li").addClass("c1");  // 对所有标签做统一操作

注意：

在遍历过程中可以使用 return false提前结束each循环。

终止each循环

return false；

伏笔...

.data()

在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。

.data(key, value):

描述：在匹配的元素上存储任意相关数据。

$("div").data("k",100);//给所有div标签都保存一个名为k，值为100

.data(key):

描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data(name, value)或 HTML5 data-*属性设置。

$("div").data("k");//返回第一个div标签中保存的"k"的值

.removeData(key):

描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。

$("div").removeData("k");  //移除元素上存放k对应的数据

示例：

模态框编辑的数据回填表格

插件(了解即可)

jQuery.extend(object)

jQuery的命名空间下添加新的功能。多用于插件开发者向 jQuery 中添加新函数时使用。

示例：

<script>
jQuery.extend({
  min:function(a, b){return a < b ? a : b;},
  max:function(a, b){return a > b ? a : b;}
});
jQuery.min(2,3);// => 2
jQuery.max(4,5);// => 5
</script>

jQuery.fn.extend(object)

一个对象的内容合并到jQuery的原型，以提供新的jQuery实例方法。

<script>
  jQuery.fn.extend({
    check:function(){
      return this.each(function(){this.checked =true;});
    },
    uncheck:function(){
      return this.each(function(){this.checked =false;});
    }
  });
// jQuery对象可以使用新添加的check()方法了。
$("input[type='checkbox']").check();
</script>

单独写在文件中的扩展：

(function(jq){
  jq.extend({
    funcName:function(){
    ...
    },
  });
})(jQuery);

例子：

自定义的jQuery登录验证插件

<!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>
    .login-form {
      margin: 100px auto 0;
      max-width: 330px;
    }
    .login-form > div {
      margin: 15px 0;
    }
    .error {
      color: red;
    }
  </style>
</head>
<body>



div
  form action="" class="login-form" novalidate

    <div>
      <label for="username">姓名</label>
      <input id="username" type="text" name="name" required autocomplete="off">
      <span class="error"></span>
    </div>
    <div>
      <label for="passwd">密码</label>
      <input id="passwd" type="password" name="password" required autocomplete="off">
      <span class="error"></span>
    </div>
    <div>
      <label for="mobile">手机</label>
      <input id="mobile" type="text" name="mobile" required autocomplete="off">
      <span class="error"></span>
    </div>
    <div>
      <label for="where">来自</label>
      <input id="where" type="text" name="where" autocomplete="off">
      <span class="error"></span>
    </div>
    <div>
      <input type="submit" value="登录">
    </div>
    

  /form
/div

script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"/script
script src="validate.js"/script
script
  $.validate();
/script
/body
/html

HTML文件
    
"use strict";
(function ($) {
  function check() {
    // 定义一个标志位，表示验证通过还是验证不通过
    var flag = true;
    var errMsg;
    // 校验规则
    $("form input[type!=':submit']").each(function () {
      var labelName = $(this).prev().text();
      var inputName = $(this).attr("name");
      var inputValue = $(this).val();
      if ($(this).attr("required")) {
        // 如果是必填项
        if (inputValue.length === 0) {
          // 值为空
          errMsg = labelName + "不能为空";
          $(this).next().text(errMsg);
          flag = false;
          return false;
        }
        // 如果是密码类型，我们就要判断密码的长度是否大于6位
        if (inputName === "password") {
          // 除了上面判断为不为空还要判断密码长度是否大于6位
          if (inputValue.length < 6) {
            errMsg = labelName + "必须大于6位";
            $(this).next().text(errMsg);
            flag = false;
            return false;
          }
        }
        // 如果是手机类型，我们需要判断手机的格式是否正确
        if (inputName === "mobile") {
          // 使用正则表达式校验inputValue是否为正确的手机号码
          if (!/^1[345678]\d{9}$/.test(inputValue)) {
            // 不是有效的手机号码格式
            errMsg = labelName + "格式不正确";
            $(this).next().text(errMsg);
            flag = false;
            return false;
          }
        }
      }
    });
    return flag;
  }

  function clearError(arg) {
    // 清空之前的错误提示
    (arg).next().text("");
  }
  // 上面都是我定义的工具函数
  .extend({
    validate: function () {
      ("form :submit").on("click", function () {
      return check();
    });
    ("form :input[type!='submit']").on("focus", function () {
      clearError(this);
    });
    }
  });
})(jQuery);

JS文件

传参版插件：

<!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>
    .login-form {
      margin: 100px auto 0;
      max-width: 330px;
    }
    .login-form > div {
      margin: 15px 0;
    }
    .error {
      color: red;
    }
  </style>
</head>
<body>



div
  form action="" class="login-form" novalidate

    <div>
      <label for="username">姓名</label>
      <input id="username" type="text" name="name" required autocomplete="off">
      <span class="error"></span>
    </div>
    <div>
      <label for="passwd">密码</label>
      <input id="passwd" type="password" name="password" required autocomplete="off">
      <span class="error"></span>
    </div>
    <div>
      <label for="mobile">手机</label>
      <input id="mobile" type="text" name="mobile" required autocomplete="off">
      <span class="error"></span>
    </div>
    <div>
      <label for="where">来自</label>
      <input id="where" type="text" name="where" autocomplete="off">
      <span class="error"></span>
    </div>
    <div>
      <input type="submit" value="登录">
    </div>
    

  /form
/div

script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"/script
script src="validate3.js"/script
script
  $.validate({"name":{"required": true}, "password": {"required": true, "minLength": 8}, "mobile": {"required": true}});
/script
/body
/html

HTML文件

position jquery css