核心函数&jQuery对象&静态 实例方法

核心函数

$();//jQuery原理();就代表调用jQuery的核心函数
1.接收一个函数

$(function(){
alert("hi")
});

2.1接收一个字符串选择器 返回一个jQuery对象, 对象中保存了找到的DOM元素

$(function () {
var $p = $("<p>我是段落</p>");
  console.log($p);
});

2.2接收一个代码片段 返回一个jQuery对象, 对象中保存了创建的DOM元素

$(function () {
        var $box1 = $(".box1");
        var $box2 = $("#box2");
            console.log($box1);
            console.log($box2);
});

3.接收一个DOM元素 会被包装成一个jQuery对象返回给我们

$(function () {
 var span = document.getElementsByTagName("span")[0];
            console.log(span);
            var $span = $(span);
            console.log($span);
 });

jQuery对象

jQuery对象是一个伪数组
(伪数组 有0到length-1的属性,并且有length属性)

静态方法 实例方法

        // 1.定义一个类
        function AClass() {
        }
        // 2.给这个类添加一个静态方法
        // 直接添加给类的就是静态方法
        AClass.staticMethod = function () {
            alert("staticMethod");
        }
        // 静态方法通过类名调用
        AClass.staticMethod();

        // 3.给这个类添加一个实例方法
        AClass.prototype.instanceMethod = function () {
            alert("instanceMethod");
        }
        // 实例方法通过类的实例调用
        // 创建一个实例(创建一个对象)
        var a = new AClass();
        // 通过实例调用实例方法
        a.instanceMethod();

静态方法

静态方法each方法

原生js

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

利用jQuery的each静态方法遍历数组

var arr = [1, 3, 5, 7, 9];
var obj = { 0: 1, 1: 3, 2: 5, 3: 7, 4: 9, length: 5 };
      $.each(arr, function (index, value) {
          console.log(index, value);
       });
      $.each(obj, function(index, value) {
        console.log(index, value);
      });
    value 第一个参数: 当前遍历到的索引
    index 第二个参数: 遍历到的元素
    注意点:
    jQuery的each方法是可以遍历伪数组的
静态方法map方法

原生js

   var arr = [1, 3, 5, 7, 9];
   var obj = { 0: 1, 1: 3, 2: 5, 3: 7, 4: 9, length: 5 };
      arr.map(function (value, index, array) {
          console.log(index, value, array);
      });
      obj.map(function (value, index, array) {
          console.log(index, value, array);
      });
    value 第一个参数: 当前遍历到的元素
    index 第二个参数: 当前遍历到的索引
    array 第三个参数: 当前被遍历的数组
    注意点:
    和原生的forEach一样,不能遍历的伪数组
map
  $.map(arr, function (value, index) {
          console.log(index, value);
      });
   value  第一个参数: 要遍历的数组
   index  第二个参数: 每遍历一个元素之后执行的回调函数
    回调函数的参数:
   value  第一个参数: 遍历到的元素
   index  第二个参数: 遍历到的索引
    注意点:
    和jQuery中的each静态方法一样, map静态方法也可以遍历伪数组

jQuery中的each静态方法和map静态方法的区别:

each静态方法默认的返回值就是, 遍历谁就返回谁
map静态方法默认的返回值是一个空数组
each静态方法不支持在回调函数中对遍历的数组进行处理
map静态方法可以在回调函数中通过return对遍历的数组进行处理, 然后生成一个新的数组返回

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 函数和对象 1、函数 1.1 函数概述 函数对于任何一门语言来说都是核心的概念。通过函数可以封装任意多条语句,而且...
    道无虚阅读 4,961评论 0 5
  • JQuery核心函数 JQuery核心函数有两种写法$();jQuery(); 核心函数接收一个字符串选择器返回一...
    喝酸奶要舔盖__阅读 279评论 0 0
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,512评论 0 2
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,277评论 0 1
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,878评论 0 3

友情链接更多精彩内容