10分钟掌握7个jQuery 实用的函数
沉沙 2018-06-07 来源 : 阅读 562 评论 0

摘要:jQuery 中有很多方法是我们可以很方便拿来使用的。我们可以利用这个来让我们更加高效的开发,也能让代码更具有阅读性。本文由职坐标整理发布,更多相关内容,请关注职坐标WEB前端jQuery频道!

jquey中有很多方法是我们可以很方便拿来使用的。我们可以利用这个来让我们更加高效的开发,也能让代码更具有阅读性。

1.filter()

顾名思义,这个方法可以匹配DOM元素集合中指定的元素,例如:

$("div").css("background", "#c8ebcc")
  .filter(".middle")
  .css("border-color", "red");

这段代码的含义是给div元素集合中带middle元素增加红色边框。
filter()里面也可以写方法来过滤:

$('li').filter(function(index) {
  return $('strong', this).length == 1;
}).css('background-color', 'red');

2.trigger()

触发事件的发生,比如:

$("#btn").trigger("click");

出发id为btn的点击事件。
还可以触发自定义事件:
先绑定自定义事件:

$("#btn").bind("myClick", function () {
   $("#test").append();
});

触发事件:

$("btn").trigger("myClick");

3.$.contains(elem1, elem2)

这个是判断dom元素是否包含在另一个dom里面,并不是java的contains哦

4.$.each()

循环遍历,看一下代码就知道啦:

var array = [1,2,3,4,5]
$.each(array, function(i, item)) {
    if (item > 4) {
        console.log(item);
        console.log(array[i]);
    }
}

这里的i是指循环的次数,从0开始,item指每次循环的变量值。
item等价于array[i],输出值为5,5

5.$.grep()

筛选数组:

var array = [1,2,3,4];
    array = $.grep(array, function(item,i) {
        return item > 3;
    })
    console.log(array);

输出:[4]
注意这里的item和i和each函数调换了位置,另外,如果不给grep函数返回值,array将为空,这和each函数不同。

6.elem.datepicker()

日历函数,给指定的dom增加日历功能,

$('.mfgdate').datepicker({language:userLanguage, format:"yyyy/mm/dd", autoclose: true });

7.slice(start, end)和splice(index,n,item)

slice()函数是截取数组的一部分,不会改变原始数组:

var a=[1,2,3,4,5,6];
var b=a.slice(0,3);  //[1,2,3]
var c=a.slice(3);    //[4,5,6]

如果只传入一个参数,那么将从参数一的索引位置开始截取,一直到数组尾

splice(index,n,item)函数有两个功能,先从index,删除n个元素,在从index开始加入item。

var a=['a','b','c'];
var b=a.splice(1,1,'e','f');  //a=['a','e','f','c'],b=['b']

从第一个元素开始,删除一个,也就是b,在加入e,f。a数组变化了,返回的是删除的元素

 

本文由职坐标整理发布,学习更多的jQuery相关知识,请关注职坐标WEB前端jQuery频道!


本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程