zoukankan      html  css  js  c++  java
  • jQuery的基础总结

    **本篇只列出零碎的jQuery基础知识点,个人记录自己的学习进度,无序排列,谨慎查看。**

    1.jQuery入口函数的四种写法

     
     
     
    xxxxxxxxxx
     
     
     
     
    //第一种写法
    $(function(){
        alert("hello world");
    })
    //第二种写法
    jQuery(function(){
        alert("hello");
    })
    //第三种写法
    $(document).ready(function(){
        alert("heihei");
    })
    //第四种写法
    jQuery(document).ready(function(){
        alert("world");
    })
     

    四种写法都能弹出窗口内容。

    2.jQuery与JS遍历数组的区别

    1. jQuery与JS都可以通过eachmap来遍历数组。

    2. jQuery可以遍历伪数组,但JS不能。

      注:以each方法举例。

       
       
       
      xxxxxxxxxx
       
       
       
       
      //定义一个数组,一个伪数组
       var arr = [1 ,3 ,5 ,7 ,9];//定义一个数组
       var arw = {0:1, 1:3 ,2:5, 3:7, 4:9, length:5};//定义一个伪数组
       
      JS代码:
       
       
       
      xxxxxxxxxx
       
       
       
       
       //forEach方法中先是value后是index
       //value:数组中的元素;
       //index:数组中元素遍历的位置
       arr.forEach(function(value ,index){//遍历数组arr
          console.log(index ,value);
       })
       arw.forEach(function(value ,index){//遍历伪数组arw
          console.log(index ,value);
       })
       
      JS的forEach方法无法遍历伪数组。
      jQuery代码:
       
       
       
      xxxxxxxxxx
       
       
       
       
       //jQuery的each方法中先是index后是value
       //第一个参数(arr/arw):遍历的数组
       //第二个参数:每遍历一个元素之后执行的回调函数
       $.each(arr ,function(index ,value){//遍历数组arr
          console.log(index ,value);
       })
       $.each(arw ,function(index ,value){//遍历伪数组arw
           console.log(index ,value);
       })
       
      jQuery的each方法可以遍历伪数组。需要注意的是jQuery对象本质就是伪数组

    3.jQuery符号冲突问题

    1. 通过释放$的使用权解决符号冲突。

       
       
       
      xxxxxxxxxx
       
       
       
       
      jQuery.noConflict();//释放jQuery对$符号的使用权
      jQuery(function(){//释放之后就不能再使用$符号,改用jQuery
      alert("heihei");
      })
       
    2. 通过自定义jQuery的符号来解决符号冲突。

       
       
       
      xxxxxxxxxx
       
       
       
       
      var ff = jQuery.noConflict();//自定义jQuery符号
      ff(function(){
          alert("heihei");
      })
       

      注意:在释放符号使用权或者自定义符号时,释放语句一定要写在其他jQuery语句前面。

    4.jQuery与JS的map遍历方法

     
     
     
    xxxxxxxxxx
     
     
     
     
    //定义一个数组,一个伪数组
     var arr = [1 ,3 ,5 ,7 ,9];//定义一个数组
     var arw = {0:1, 1:3 ,2:5, 3:7, 4:9, length:5};//定义一个伪数组
     

    JS代码(无法遍历伪数组):

     
     
     
    xxxxxxxxxx
     
     
     
     
    //value:数组中的元素
    //index:数组中元素遍历的位置
    //array:当前被遍历的数组
    arr.map(function(value ,index ,array){
       console.log(index ,value ,array);
    })
     

    jQuery代码:

     
     
     
    xxxxxxxxxx
     
     
     
     
     //第一个参数(arr/arw):遍历的数组
     //第二个参数:每遍历一个元素之后执行的回调函数
     $.map(arr ,function(index ,value){//遍历数组arr
         console.log(index ,value);
     })
     $.map(arw ,function(index ,value){//遍历伪数组arw
         console.log(index ,value);
     })
     

    5.each方法和map方法的区别

    1. each静态方法默认返回的是遍历的数组;

      map静态方法默认返回的是一个空数组。

       
       
       
      xxxxxxxxxx
       
       
       
       
      //定义一个数组,一个伪数组
       var arr = [1 ,3 ,5 ,7 ,9];//定义一个数组
       var arw = {0:1, 1:3 ,2:5, 3:7, 4:9, length:5};//定义一个伪数组
       
      each
       
       
       
      xxxxxxxxxx
       
       
       
       
       var $ar = $.each(arr ,function(index ,value){})//将遍历的数组赋给jQuery对象
       console.log($ar);//控制台输出each方法的返回值
       
      map
       
       
       
      xxxxxxxxxx
       
       
       
       
      var $am = $.map(arr ,function(index ,value){})//将遍历的数组赋给jQuery对象    
       console.log($am);//控制台输出map方法的返回值
       
    2. each静态方法无法在回调函数中对数组进行处理;

      map静态方法可以在回调函数中通过return对数组进行处理。

      each
       
       
       
      xxxxxxxxxx
       
       
       
       
      var $ar = $.each(arr ,function(index ,value){//将遍历的数组赋给jQuery对象
          return index+value;
      })
       console.log($ar);//控制台输出each方法的返回值
       
      map
       
       
       
      xxxxxxxxxx
       
       
       
       
      var $am = $.map(arr ,function(index ,value){//将遍历的数组赋给jQuery对象
          return index+value;
      })    
       console.log($am);//控制台输出each方法的返回值
       
      使用map处理的数组返回值由空数组变为indexvalue相加的和所得到的数组。

    6.jQuery各种静态方法的使用

    1. trim():去除字符串两端的空格

       
       
       
      xxxxxxxxxx
       
       
       
       
      var str = "   hello   ";
       var $re = $.trim(str);
       
    2. isArray():判断传入的对象是否为真数组(伪数组不算在内),返回值为true/false

       
       
       
      xxxxxxxxxx
       
       
       
       
       var str = [1,3,5];
       var re = $.isArray(str);
       
    3. isFunction():判断传入的对象是否为函数,返回值为true/false

      注意:jQuery框架本质是一个函数
       
       
       
      xxxxxxxxxx
       
       
       
       
       var sj = $.isFunction(jQuery);
       console.log(sj);
       
    4. isWindow():判断传入的对象是否为window对象,返回值为true/false

       
       
       
      xxxxxxxxxx
       
       
       
       
       var ww = $.isWindow(w);
       console.log(ww);
       

    7.定义并调用静态方法和实例方法

    1. 静态方法

       
       
       
      xxxxxxxxxx
       
       
       
       
       //定义一个类
       function oTest(){
       }
       //给oTest添加静态方法
       oTest.staticMethod = function(){
           alert("staticMethod");
       }
       //通过类名调用
       oTest.staticMethod();
       
    2. 实例方法

       
       
       
      xxxxxxxxxx
       
       
       
       
      //定义又一个类
      function tTest(){
      }
      //给tTest添加实例方法
      tTest.prototype.instanceMethod = function(){
          alert("instanceMethod");
      }
      //创建实例
      var t = new tTest();
      //通过实例调用实例方法
      t.instanceMethod();
       
  • 相关阅读:
    《C# to IL》第一章 IL入门
    multiple users to one ec2 instance setup
    Route53 health check与 Cloudwatch alarm 没法绑定
    rsync aws ec2 pem
    通过jvm 查看死锁
    wait, notify 使用清晰讲解
    for aws associate exam
    docker 容器不能联网
    本地运行aws lambda credential 配置 (missing credential config error)
    Cannot connect to the Docker daemon. Is 'docker daemon' running on this host?
  • 原文地址:https://www.cnblogs.com/bobozz/p/11450779.html
Copyright © 2011-2022 走看看