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