经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » jQuery » 查看文章
jQuery的基础总结
来源:cnblogs  作者:落成  时间:2019/9/10 10:54:28  对本文有异议

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

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

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

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

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

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

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

    注:以each方法举例。

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

3.jQuery符号冲突问题

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

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

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

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

4.jQuery与JS的map遍历方法

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

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

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

jQuery代码:

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

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

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

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

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

     

  2. each静态方法无法在回调函数中对数组进行处理;

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

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

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

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

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

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

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

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

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

  1. 静态方法

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

     
     
     
    1. xxxxxxxxxx
     
     
     
     
    1. //定义又一个类
    1. function tTest(){
    1. }
    1. //给tTest添加实例方法
    1. tTest.prototype.instanceMethod = function(){
    1.    alert("instanceMethod");
    1. }
    1. //创建实例
    1. var t = new tTest();
    1. //通过实例调用实例方法
    1. t.instanceMethod();
     

 

 

 

原文链接:http://www.cnblogs.com/bobozz/p/11450779.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号