• 初识jQuery
  • [jQuery基本原理](# jquery基本原理)
  • [jQuery和JavaScript的区别](# jquery和javascript的区别)
  • [js对象和jQuery对象相互转换](# js对象和jquery对象相互转换)

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