记工作中jQuery常用方法(一)

最新推荐文章于 2024-07-04 12:16:35 发布

轨迹R

最新推荐文章于 2024-07-04 12:16:35 发布

阅读量228

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/for2018/article/details/101155129

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

记工作中jQuery常用方法(一)

文章目录

记工作中jQuery常用方法(一)

1. 说明

在开发前端过程中，基本上不可避免的用到jQuery,如果说 js 支撑了前端交互的基石,那 jQuery就是装饰这栋高楼的砖石。在此特记常用到的一些方法

2. click

绑定元素的点击事件，元素点击触发一般工作中最常用到。它有两种模式，如下

//第一种模式 不带参数
let element = $("body");
element.click(function (){
    alert('click第一种模式');
}); //此时弹出 click第一种点击方式
var clickEvent = function (){
    alert("外置方法");
}
element.click(clickEvent); //此时先弹出 第一种模式 后弹出外置方法 click事件是追加的 设置多个的话 依次执行

//第二种方式 带参数
var clickEventWithParam = function (data){
   //此时取元素 就是data.data
}
element.click('s', clickEventWithParam); 
//如果想初始化被点击的话 可以直接 
element.click(); //此时加载页面时就会执行该事件

贴上jQuery截图。

在这里插入图片描述

2. on绑定事件

针对html动态生成的元素，你使用点击事件的话，是不起作用的，举例

 //html
 <body>
    <div class="box" style="width: 500px; height: 500px; border: 1px solid red;">
    </div>
</body>
//js
 var ele = $(".box");
    ele.click(function (){
        //涉及到事件触发的顺序 暂时不展开
        if ($(".son-box").length > 0){
            return;
        }
        $(this).append('<p class="son-box">这是一段测试的语句，点击后隐藏</p>');
    });
    $('.son-box').click(function (event){
        $(this).css("display", "none");
    });
//此时 针对 追加的 p标签，它的点击事件 是没有效果的 不会触发的。
ele.on('click', '.son-box', function (){
        $(this).css("display", "none");
    });
//替换之前的方法 使用on 的话 就可以了

在举例：

   ele.on('click', '.son-box', function (event){
        let color =  $(this).css("color") == "rgb(255, 0, 0)" ? "#000" : "#f00";
        $(this).css("color", color);
        event.stopPropagation();
    }); 
    ele.click(function (){
        $(this).append('<p class="son-box">这是一段测试的语句，点击后隐藏</p>');
    }); 
//遍历 对每个元素做颜色变换处理，并停止下一步触发 此处 颜色会自动转换为rgb 测试的是google浏览器 其他不清楚

on 也可以带参数这里不举例

3. remove 和 empty

在进行数据初始化的时候一般会用到这两个参数，例如tab数据动态切换，清除掉原有的数据，动态添加新增的数据。

此时就可以使用 empty() 。

empty()方法指的是清除该元素所有子节点包括其内容，同时也会删除绑定的数据及事件

在这里插入图片描述

remove() 方法可以不带参数，表示移除元素本身。如果是里面有有选择器则移除选择器，同时也是移除绑定的数据及事件

在这里插入图片描述

不举例了。

4. $.extend()

这个方法是编写插件常用到的，我们表示合并对象属性。分为初步合并，和深度合并，来看jQuery描述

在这里插入图片描述

这是不定参数，deep可选表示是否深度融合，因为 $ 是 jQuery的简称，所以可以直接使用$.extend()

举例

// 1.第一种 初步复制
var apple = {
        name: "apple",
        color: "红色"
    };
    $.extend(apple, {brand: "红富士"});
    console.log(JSON.stringify(apple)); //输出{"name":"apple","color":"红色","brand":"红富士"}
	$.extend(apple, {brand: "红富士", name: "红富士苹果"});
	console.log(JSON.stringify(apple)); //输出{"name":"红富士苹果","color":"红色","brand":"红富士"}
//遇到相同的属性 可以覆盖 可以多个对象
 $.extend(apple, {brand: "红富士", name: "红富士苹果"}, {price: 18});
//输出{"name":"红富士苹果","color":"红色","brand":"红富士","price":18}
//深度融合
 var apple = {
        name: "apple",
        color: "红色",
        address: {
            "province": "山东省",
            "city": "烟台"
        }
    };
    $.extend(apple, {brand: "红富士", name: "红富士苹果", address: {city: "北京"}}, {price: 18});
    console.log(JSON.stringify(apple));
//{"name":"红富士苹果","color":"红色","address":{"city":"北京"},"brand":"红富士","price":18}
//直接替换 这是初步融合
$.extend(true, apple, {brand: "红富士", name: "红富士苹果", address: {city: "北京"}}, {price: 18});
console.log(JSON.stringify(apple));
//{"name":"红富士苹果","color":"红色","address":{"province":"山东省","city":"北京"},"brand":"红富士","price":18}
//深度融合 不是直接替换address属性 而是合并 只替换相同的 这一般与双层甚至多层结构对象合并

5. 选择器

find(selector) 查找当前元素的子元素中是否存在这样的jQuery对象，
children(selector) 只查询当前元素下面的子节点一个层级不包括子孙元素，类似find 但比find 方法范围窄一些
siblings(selector) 同级别兄弟姐妹元素不包括自身

6. each()

each方法是jQuery的遍历常用方法，参数是 function函数，举例说明吧

$("p").each(function (index, item){
    //index 表示循环的索引 item表示 p的dom对象
});

在这里插入图片描述

举例以layui 遍历为例子

//layui 遍历方法
  Layui.prototype.each = function(obj, fn){
    var key
    ,that = this;
    if(typeof fn !== 'function') return that;
    obj = obj || [];
    if(obj.constructor === Object){ //如果是对象
      for(key in obj){
        if(fn.call(obj[key], key, obj[key])) break;//对象调用call 改变作用域 相当于obj[key].fn 参数是key obj[key] 其中key是其属性 另一个是其value值 一般也是
      }
    } else {
      for(key = 0; key < obj.length; key++){
        if(fn.call(obj[key], key, obj[key])) break; //看下面示例
      }
    }
    return that;
  };
//form.js 片段截取 
// verifyElem校验元素 jQuery数组 其中 _代表索引 item表示 dom对象
 layui.each(verifyElem, function(_, item){
      var othis = $(this)
      ,vers = othis.attr('lay-verify').split('|')
      ,verType = othis.attr('lay-verType') //提示方式
      ,value = othis.val();
      othis.removeClass(DANGER); //移除警示样式