jquery主要方法

Posted 2021-04-08 WEB前端历险记

jquery可以大大简化我们js对dom的操作，今天给大家简单介绍一下jquery的常用方法。

1）$("selector").map(callback(index,domElement));　　//.map()方法 用于将当前匹配元素集合中的每一个元素传入回调函数（callback）中，并返回一个新的jQuery对象，也就相当于通过该方法重组匹配集合内容。其中index是元素索引，domElement是当前索引对应的jQuery对象。

2）$("selector").not(expr);　　//.not()方法 用于在匹配selector元素集合中移除指定的集合，expr可以为选择器（selector）也可以是一个函数，若为选择器则在selector集合中移除符合expr的集合；若expr为一个函数，则只有当当该函数返回true时才会移除当前索引对应的jQuery对象。

3）$("selector").add(selector1[,context]);　　//.add()方法 该方法是在匹配元素集合中添加selectior1元素，与not()方法的作用相反。其中selector1可以是一个jQuery对象、DOM对象以及html标签。而可选参数context是指定要插入上下文的位置

4)$.each(object,callback(indexInArray,valueOfElement));　　//.each()方法  用于遍历object数组或对象 ,其中callback是回调函数 注：该方法与$("selector").each(function(){})不同，$.each()方法可以遍历所有的的数组，而$("selector").each(function(){});只能遍历jQuery对象数组。

var array = [1,2,3,4];
$(array).each(function(index){
    alert(this);
});
$.each(array,function(index){
    alert(this);
});

5）$.contains(container,contained);　　//.contains()方法 用于检测一个contained对象是否包含在container对象中，若包含返回true否则返回false。　

$.contains($("div")[],$("p")[0]);　　//检测第一个p标签是不是在第一个div标签内。

6）$.isEmptyObject(object);　　//.isEmptyObject()方法 用于判定一个对象是否为空（不包含任何属性的对象为空），若为空返回true　　

$.isEmptyObject({});　　//返回 true $.isEmptyObject({foo:"bar"});　　//返回false

7）$.extend(target,object1);　　//.extend()方法 将两个或多个对象的内容合并到第一个对象target中，以实现第一个对象的扩展并返回被修改的对象。

$.extend({foo:"aa"},{bar:"bb"});　　//结果为：{foo:"aa",bar:"bb"}

8）$.browser　　//.browser属性 该属性可以获得当前浏览器的版本信息　

if($.browser.msie) alert("浏览器是IE："+$.browser.version);if($.browser.mozilla) alert("浏览器是Firefox："+$.browser.version);

9）$.support　　//.support属性  该属性用于战士不同浏览器各自特性和bug的集合

10).parent() 方法允许我们在 DOM 树中搜索这些元素的父元素，沿 DOM 树向上遍历单一层级。

.parents() 方法允许我们在 DOM 树中搜索这些元素的祖先元素，并用从最近的父元素向上的顺序排列的匹配元素构造一个新的 jQuery 对象。元素是按照从最近的父元素向外的顺序被返回的。

$(e.currentTarget).parent("ul")//查看父元素，满足条件返回结果，不满足返回为空$(e.currentTarget).parents("ul")[0]//返回所有满足条件的祖先元素，[0]表示获取距离最近的一个结果

11)判断数组元素位置

$(".js-groupStarResultList:visible").find(".flex-control-nav li a").index($(".flex-active"));

12）在jQuery 1.4.2中，delegate和undelegate选项 

//被引入代替live，因为它们提供了更好的上下文支持 
        //例如，就table来说，以前你会用    
//.live() 
    $("table").each(function () {
        $("td", this).live("hover", function () {
            $(this).toggleClass("hover");
        });
    });       //现在用 
    $("table").delegate("td", "hover", function () {
        $(this).toggleClass("hover");
    });

13）克隆一个元素

var cloned = $('#somediv').clone();

14）在jQuery中如何使用.siblings()来选择同辈元素

// 不这样做
    $('#nav li').click(function () {
        $('#nav li').removeClass('active');
        $(this).addClass('active');
    });        //替代做法是
    $('#nav li').click(function () {
        $(this).addClass('active').siblings().removeClass('active');
    });

15）检查图像是否已经被完全加载进来

$('#theImage').attr('src', 'image.jpg').load(function () {
        alert('This Image Has Been Loaded');
      });