初识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);