初识jQuery

Posted 2020-09-22

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

本文出自 “AdolphMaster” 博客，请务必保留此出处http://adolphmaster.blog.51cto.com/12991875/1934030