自学jQuery必看的常用静态方法大全

最新推荐文章于 2020-06-29 15:40:17 发布
最新推荐文章于 2020-06-29 15:40:17 发布
阅读量441 收藏 2
点赞数 2
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45473786/article/details/105307324
版权

文章目录

jQuery对象

jQuery对象是一个伪数组
什么是伪数组：有数组的属性，即 0–(length-1) 的属性并且有 length 属性

<body>
  <div>div1</div>
  <div>div2</div>
  <div>div3</div>
</body>
<script src="../jquery.js"></script>
<script>  
 $(function(){
    var $div = $("div");
    console.log($div);
 })
</script>

在这里插入图片描述

静态方法和实例方法

先来回顾一下什么是静态方法、什么是实例方法
静态方法： 直接添加到类上面的，通过类名调用
实例方法： 添加到实例原型上面的，通过实例调用
注释部分为特别关注！！！

<body>
  <div>div1</div>
  <div>div2</div>
  <div>div3</div>
</body>
<script src="../jquery.js"></script>
<script>  
//定义一个类
  function Person() {
    
  }
  
  //给这个类添加一个静态方法，直接添加给类的就是静态方法
  Person.staticMethod = function() {
    alert("staticMethod");
  }
  //静态方法通过类名调用
  Person.staticMethod();

  //给这个类添加一个实例方法
  Person.prototype.instanceMethod = function() {
    alert("instanceMethod");
  };
  //实例方法通过类的实例调用，首先创建一个实例(创建一个对象)
  var person = new Person();
  person.instanceMethod();
</script>

jQuery的each方法与原生JS的forEach()比对

注意：
（1）原生JS的forEach() 可以传递两个参数。第一个参数是遍历的当前元素，第二个参数是当前遍历元素的索引值
（2）jQuery的each方法 可以传递两个参数。第一个参数是当前遍历元素的索引值，第二个参数是遍历的当前元素。正好与原生JS的forEach()相反
（3）原生JS的forEach()只能遍历数组，不能遍历伪数组。jQuery的each方法既能遍历数组又可以遍历伪数组的

注释部分为特别关注！！！

<script>  
  var arr = [1,2,3,4,5];
  //伪数组
  var obj = {0:7, 1:8, 2:9,length:3};
  //第一个参数：遍历的当前元素
  //第二个参数：当前遍历元素的索引值
  //注意：原生的forEach()只能遍历数组，不能遍历伪数组
  arr.forEach(function(value,index){
    console.log(index,value);
  })

  //利用jQuery的each静态方法遍历数组
  //第一个参数：当前遍历元素的索引值
  //第二个参数：遍历的当前元素
  //注意：jQuery的each方法是可以遍历伪数组的
  $.each(arr,function(index,value){
    console.log(index,value);
  });
  $.each(obj,function(index,value){
    console.log(index,value);
  })
</script>

jQuery的map方法与原生JS的map方法比对

注意：
（1）原生JS的map方法可以传递三个个参数。第一个参数是当前所遍历的元素，第二个参数是当前遍历元素的索引，第三个参数是当前被遍历的数组。
（2）jQuery的map方法传递两个参数。第一个参数是要遍历的数组，第二个参数是每遍历一个元素之后执行的回调函数。回调函数中又可以传递两个参数，第一个参数是当前遍历到的元素，第二个参数是所遍历元素的索引。
（3）原生JS的map方法不能遍历伪数组，jQuery的map方法可以遍历伪数组

注释部分为特别关注！！！

<script src="../jquery.js"></script>
<script>  
  var arr = [1,2,3,4,5];
  var obj = {0:7, 1:8, 2:9,length:3};
  //利用原生JS的map方法遍历
  //第一个参数：当前所遍历的元素
  // 第二个参数：当前遍历元素的索引
  //第三个参数：当前被遍历的数组
  //注意：不能遍历伪数组
  arr.map(function(value,index,array){
    console.log(index,value,array);
  })

  console.log("我是分割线");
  //jQuery的map方法
  //第一个参数：要遍历的数组
  //第二个参数：每遍历一个元素之后执行的回调函数
  //回调函数中的参数有两个
  //第一个参数：当前遍历到的元素
  //第二个参数：所遍历元素的索引
  //注意：可以遍历伪数组

  $.map(arr,function(value,index){
    console.log(index,value); 
  })
</script>

在这里插入图片描述

jQuery的each方法与jQuery的map方法的不同之处

区别一

（1）each静态方法默认的返回值是它所遍历的数组,遍历谁就返回谁
（2）map静态方法默认的返回值是一个空数组
注释部分为特别关注！！！

<script src="../jquery.js"></script>
<script>  
  var arr = [1,2,3,4,5];
  var obj = {0:7, 1:8, 2:9,length:3};

  //map和each的区别1
  //each静态方法默认的返回值是它所遍历的数组，遍历谁就返回谁
  //map静态方法默认的返回值是一个空数组
  var a = $.map(obj,function(value,index){
    console.log(index,value); 
  })
  var b = $.each(obj,function(index,value){
    console.log(index,value);
  })

  console.log(a);
  console.log(b);
</script>

在这里插入图片描述

区别二

（1）each静态方法不支持在回调函数中对遍历的数组进行处理
（2）map静态方法可以在回调函数中通过return对遍历的数组进行处理，生成一个新的数组返回
注释部分为特别关注！！！

<script src="../jquery.js"></script>
<script>  
  var arr = [1,2,3,4,5];
  var obj = {0:7, 1:8, 2:9,length:3};

   //map和each的区别2
   //each静态方法不支持在回调函数中对遍历的数组进行处理
   //map静态方法可以在回调函数中通过return对遍历的数组进行处理，生成一个新的数组返回
  var a = $.map(obj,function(value,index){
    console.log(index,value); 
    return value + index;
  })
  var b = $.each(obj,function(index,value){
    console.log(index,value);
    return value + index;
  })

  console.log(a);
  console.log(b);
</script>

在这里插入图片描述

jQuery的trim()方法

（1）trim()方法用于去掉字符串两边的空格
（2）参数： 需要去除两边空格的字符串
（3）返回值： 返回一个去除两边空格的新的字符串
注释部分为特别关注！！！

<script src="../jquery.js"></script>
<script>  
  var str = "   a    "
  console.log("我是原来的str:"+str);
  //trim()去掉字符串两边的空格
  //参数：需要去除两边空格的字符串
  //返回值：返回一个去除两边空格的新的字符串
  var newstr = $.trim(str);
  console.log("我是去掉两边空格的str："+newstr);
  
</script>

在这里插入图片描述

jQuery中的isWindow()、isArray()和isFunction()方法

jQuery中的isWindow()、isArray()和isFunction()方法使用方法相类似
（1）isWindow()：判断传入的对象是否是window对象
（2）isArray()：判断传入的对象是否是真数组，伪数组返回false
（3）isFunction()：判断传入的对象是否是一个函数
（4）返回值都是true/false
（5）特别注意： jQuery本质是一个函数

注释部分为特别关注！！！

<script src="../jquery.js"></script>
<script>  
  var str = "   a    ";
  
  //判断传入的对象是否是window对象
  //返回值：true/false
  var w = window;  //windom对象
  console.log($.isWindow(str));
  console.log($.isWindow(w));

  //判断传入的对象是否是真数组
  //返回值：true/false
  var arr = [1,2,3];
  var obj = {0:1, 1:2, length:2};
  console.log($.isArray(arr));
  console.log($.isArray(obj));
  
  //判断传入的对象是否是一个函数
  //返回值：true/false
  //注意：jQuery本质是一个函数
  var f = function(){};
  console.log($.isFunction(f));
  console.log($.isFunction(jQuery));
  
</script>

在这里插入图片描述

jQuery中的holdReady()方法

holdReady()中为 true 时，暂停 ready 入口函数执行。holdReady()中为 false 时，恢复ready入口函数执行。
以下代码显示结果： 点击按钮后一次出现"btn"警告框和"ready"警告框

<body>
  <button>点我</button>
</body>
<script src="../jquery.js"></script>
<script>  
  var btn = document.getElementsByTagName("button")[0];
  btn.onclick = function() {
    alert("btn");
    //恢复ready执行
    $.holdReady(false);
  }
  
  //暂停ready执行
  $.holdReady(true);
  $(document).ready(function(){
    alert("jquery");
  })
</script>
Test_晓
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JQuery-静态方法
qq_43812731的博客
07-29 280
什么是静态方法? 静态方法对应的是对象方法,对象方法用实例对象调用,而静态方法用类名调用 <script> // 定义一个类 function AClass() {} // 给函数A添加静态方法 // 直接添加给类的就是静态方法 AClass.staticMethod = function () { alert("静态方法"); }; // 静态方法的调用 AClass.class(); // 给..
static静态方法
qq_50728916的博客
03-25 2742
什么是static关键字 static关键字我们经常接触，不过我们一直没有讨论过它到底是什么，有什么具体的作用，那static关键字是什么呢，有啥用呢？ static是静态的意思，是一个修饰符，就像是一个形容词，是用来形容类，变量，方法的。 static修饰变量，这个变量就变成了静态变量，修饰方法这个方法就成了静态方法， static关键字方便在没有创建对象的情况下来进行调用（方法/变量）。 static关键字的作用 static关键字你可以理解为是一个形容词，一般是用来形容类、方法、变量，代码块，还有
前端学习——js——静态方法和实例方法
x1037490413的博客
10-21 396
静态方法：直接添加到类上面通过类名调用 实例方法：添加到这个类的原型上通过实例调用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, i...
代码分析jQuery四种静态方法使用
10-23
主要通过代码介绍了jQery四种静态方法（isFunction,isArray,isWindow,isNumeric）的使用,需要的朋友可以参考下
jQuery的静态方法和实例方法
It_sharp的博客
04-20 401
1、静态方法 直接添加到类上面的就是静态方法，通过类名调用 2、实例方法 添加到类的原型上的方法就是实例方法，通过类的实例来调用 function AClass(){ } //静态方法 直接调用 AClass.staticMethod = function(){ } //实例方法 通过实例调用 AClass.prototype.instanceMethod = function(){ ...
JQuery自学第三天.docx
04-24
- 静态方法直接通过JQuery类调用，如`$.each()`。 - 实例方法通过JQuery对象调用，如`$(selector).each()`。 6. **静态方法each()**： - 用于遍历数组或JQuery对象，原生JS也有类似功能。 7. **静态方法map()**...
JQuery自学第二天.docx
04-16
其他JQuery静态方法如`$.trim()`用于去除字符串两端的空格，`$.isWindow()`检查对象是否为`window`对象，`$.isArray()`检测是否为真数组，`$.isFunction()`则用来判断是否为函数。 `$.holdReady()`是一个特殊的方法...
JQuery自学第一天.docx
04-15
8. **其他JQuery静态方法**： - `$.trim(str)`：清除字符串首尾的空白字符。 - `$.isWindow(obj)`：检查对象是否为window对象。 - `$.isArray(obj)`：判断对象是否为真正的数组，区别于Array-like对象。 - `$.is...
html讲解 css基础自学
10-24
随着技能的提升，可以深入学习JavaScript、jQuery等，实现动态交互效果，进一步提升网页的用户体验。对于初学者来说，实践是最重要的，通过编写实际的网页，可以更好地理解和掌握这些概念。记得多尝试，多参考在线...
jQuery扩展实例方法和静态方法
qq_25139209的博客
03-18 1530
jQuery扩展实例方法和静态方法扩展jQuery实例方法(function($){ //设置默认参数 var defaults={ } //自定义方法 var showLink=function(obj){ $(obj).append(function(){ return "("+$(obj).attr("href")+
jQuery源码阅读（十）---jQuery静态方法分析
u010046318的博客
07-19 1795
jQuery工具方法（静态方法）是通过jQuery.extend方法来挂在的，extend方法的源码实现在这篇博客中也有整理过。现在简单回顾下，当jQuery.extend中的参数为一个对象时，就是扩展插件的方式，也就是说里面的方法都会扩展到jQuery上。因此，jQuery工具方法就是这样实现的。jQuery.extend({ //里面可以扩展的方法 noConflict: fun
Jquery validate 静态方法和常用方法的使用
x329357842的博客
03-14 4481
valid方法使用 ： <!-- jsp代码片段 主要是两个文本框一个按钮 --> <form id="formID"action="login.spring" method="get"> 用户名:<input type="text" name="username" id="username" ><br><br>
jQuery的静态方法
何小变
06-29 217
each方法 原生js遍历forEach方法（只能遍历数组，不可遍历伪数组） arr.forEach((value,index)=>{}) //第一个参数为遍历到的项、第二个参数为索引，只能遍历数组，不能遍历伪数组。 $.each()遍历（可遍历数组，也可遍历伪数组） $.each(arr,(index,value)=>{}) //接收两个参数，第一个参数为要遍历的数组，第2个参数为回调函数， //而回调函数可以接收两个参数，第一个参数为索引，第二个参数为数组项。 map方法
js的foreach（arr.forEach）和jq的each（$.each）以及js的map（arr.map）和jq的map（$.map）
WY001的博客
04-24 952
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-1.12.4.js"></script> <script&gt...
jQuery中的静态方法each
It_sharp的博客
04-20 184
each var arr = [1 , 3 , 5 , 7 , 9]; /* 第一个参数：遍历到的元素 第二个参数：当前遍历到的元素 注意点： 原生的forEach方法只能遍历到数组，不能遍历为数组 */ arr.forEach(function(value , index){ console.log(index,value); }) //第一个参数遍历到的索引， //第二个参数遍历到的元素 ...
常用静态方法
wqsbenren的博客
10-10 167
Math.pow(double a, double b) 求a的b次方 Math.sqrt(4) 4开根号
Java中类方法与实例方法的区别
热门推荐
mhady的博客
05-11 3万+
Java中类的方法分为类方法（用static修饰，也叫静态方法）和实例方法（没有用static修饰，也叫非静态方法），这两种方法之间有什么区别呢？ 一. 实例方法 当类的字节码文件加载到内存中时，类的实例方法并没有被分配入口地址，只有当该类的对象创建以后，实例方法才分配了入口地址。从而实例方法可以被类创建的所有对象调用，还有一点需要注意，当我们创建第一个类的对象时，实例方法的入口地址会完成分配
JQuery学习第三天：核心函数与静态方法解析
"jQuery自学第三天的学习笔记，涵盖了jQuery与原生JavaScript的区别、jQuery的冲突解决、核心函数的使用、jQuery对象以及静态方法如each和map的详细解析。" jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值