【Jquery】- 常用函数(each、extend)

最新推荐文章于 2025-08-15 09:01:53 发布

weixin_33834910

最新推荐文章于 2025-08-15 09:01:53 发布

阅读量128

点赞数

CC 4.0 BY-SA版权

文章标签： javascript json python ViewUI

原文链接：https://my.oschina.net/yangzhiwei256/blog/3016465

本文详细解析了JQuery中extend和each函数的使用方法，包括如何利用extend函数进行对象属性的合并与覆盖，以及each函数在遍历DOM元素和数组时的不同应用方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

Jquery extend 函数

extend函数：给对象添加新属性：js插件经常使用来配置参数

var result = $.extend({},item,item1);

{}：item和item1合并后的结果
item:默认属性
item1:新增属性，若item1与item属性重合则会覆盖item1属性

<span id="Test"></span>
var item={"name":"olive","age":23};
var item1={"name":"Momo",sex:"gril"};

var result=$.extend({},item,item1);

console.log(JSON.stringify(result));
$("#Test").text(JSON.stringify(result))

结果：

分析：

结果表明item1 name属性覆盖item name属性，并且item和item1对象的不重叠属性相互不会产生影响，会统一由result对象继承，很多js框架都是通过设置默认的配置，然后通过extend函数，用户可以自定义相关配置，从而达到框架个性化配置

Jquery each 函数

界面

  <input type="button" id="b1" value="方法1"><br>
  <input type="button" id="b2" value="方法2"><br>
  <input type="button" id="b3" value="方法3"><br>

  <select size=3 multiple="multiple">
  <option>美国</option>
  <option>中国</option>
  <option>德国</option>
  <option>法国</option>
  <option>德国</option>
  <option>法国</option>
  <option>英国</option>
  </select>

js操作逻辑

  //Jquery each函数的第1种用法：最常见
  $("#b1").click(function(){
   $("select option:selected").each(function(){
   //alert($(this).val());  //this表示当前数组objs的成员对象（dom对象）
   alert(this.value); 
   });
  });
  
  //Jquery each函数的第2种用法
   $("#b2").click(function(){
   var $objs=$("select option:selected");
   $.each($objs,function(){
         alert(this.value); 
   });
  });

   //Jquery each函数的第3种用法：如果需要遍历显示数组及下标，该方法比较实用
   $("#b3").click(function(){
    	
   var $objs=$("select option:selected");
   $.each($objs,function(i,item){ //item表示objs的成员变量
   //alert(item.value); 
   alert("第"+(i+1)+"个国家:"+$(item).val());
   });
  });

效果：