初识jQuery

这篇文章是作为自己的第一篇博客,选择jQuery是因为目前正在学习这个,对于jQuery的基本认知在此不会多说(百度即可),只是想记录一下jQuery基本原理,它与JavaScript有什么不同,为什么专业人士称为jQuery库而不是jQuery框架

jQuery基本原理

  • jQuery主要是$()的形式,那么,这个$函数大致可以如下写法:

          function $(str){          //如果str变量是字符串类型
              if( typeof(str) == "string" ){              //获取str变量中的第一个字符
                  var init = str.substring(0,1);              //如果第一个字符是#的话
                  if("#" == init){                  //获取str变量中除第一个字符外的其它字符
                      var other = str.substring(1,str.length);                  //通过ID定位节点
                      var element = document.getElementById(other);                  //如果找到了节点
                      if(element != null){                      //返回
                          return element;
                      }else{                      //返回
                          return null;
                      }
                  }else{                  //继续判断
                  }
              }else{
                  alert("参数必须为string类型");
              }    
          }
    
      所以document.getElementById(id)就可以写成$("#id"),后者是jQuery对象,所以可以调用jQuery方法,  document.getElementById(id).onclick()==>$("#id").onclick

    由于jQuery内部对于JavaScript并没有封装完全,而是有选择性的封装,最常见的例子就是alert(),这就是JavaScript没有被封装的典型,因此,常常说jQuery类库

jQuery和JavaScript的区别

  • 经过上述说明,可以发现,jQuery和JavaScript其实并没有什么不同,只是jQuery对JavaScript包了一层外衣而已

    所以他们的区别如下:

      (1)js对象的三种基本定位方式
             (A)通过ID属性:document.getElementById()
             (B)通过NAME属性:document.getElementsByName()
             (C)通过标签名:document.getElementsByTagName()
      (2)jQuery对象的三种基本定位方式
             (A)通过ID属性:$("#id属性值")
             (B)通过标签名:$("标签名")
             (C)通过CLASS属性:$(".样式名")
       (3)js对象出错的显示
              没有合理的提示信息
              例如:alert(document.getElementById("usernameIDD").value)
      (4)jQuery对象出错的显示
              有合理的提示信息,例如:undefined
              例如:alert($("#usernameIDD").val())

js对象和jQuery对象相互转换

  1. 什么是js对象及代码规则

         就是使用js-API,即Node接口中的API或是传统JS语法定义的对象,叫做js对象
         js代码规则----divElement     var divElement = document.getElementById("divID");     var nameArray = new Array(3);
  2. 什么是jQuery对象及代码规则

  3.      就是使用jQuery-API,返回的对象就叫做jQuery对象
         jQuery代码规则----$div
         var $div = $("#divID")
         声明:上述代码规则,只是个人规则,不代表所有人都这样做
  4. js对象转成jQuery对象【重点】

         语法:$(js对象)---->jQuery对象
         例如:$(divElement)---->$div
         例如:$(this)---->$this
         注意:jQuery对象将js对象做了封装,js对象二边无引号     var inputElement = document.getElementById("inputID");//js对象 
         var $input = $(inputElement);//jquery对象
         var txt = $input.val();
         alert(txt);
  5. jQuery对象转成js对象

         语法1:jQuery对象[下标,从0开始]
         语法2:jQuery对象.get(下标,从0开始)
         例如:$div[0]---->divElement
         注意:不同的对象只能调用对应的api方法,即jQuery对象不能调用js对象的api,反之亦然     $div.innerHTML(错)
         divElement.html(错) 
         var $div = $("#divID");//jquery对象
         var divElement = $div[0];//js对象(方式一)
         //var divElement = $div.get(0);//js对象(方式二)
         var txt = divElement.innerHTML;          
         alert(txt);