初识jQuery

什么是jQuery

JQuery是一个快速的，简洁的JavaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情.

---

jQuery的特点

• 一款轻量级的js框架。

JQuery核心js文件才几十kb，不会影响页面加载速度。与Extjs相比要轻便的多。

• 丰富的DOM选择器(CSS1-3 + XPath)

JQuery的选择器用起来很方便，好比要找到某个dom对象的相邻元素js可能要写好几行代码，而JQuery一行代码就搞定了，再比如要将一个表格的隔行变色，JQuery也是一行代码搞定。

• 链式表达式

JQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
事件、样式、动画支持。
JQuery还简化了js操作css的代码，并且代码的可读性也比js要强。

• Ajax操作支持

JQuery简化了AJAX操作，后台只需返回一个JSON格式的字符串就能完成与前台的通信。

• 跨浏览器兼容

JQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。

• 插件扩展开发

JQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前台页面上的组件都有对应插件，并且用JQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。

• 可扩展性强

JQuery提供了扩展接口：JQuery.extend(object),可以在JQuery的命名空间上增加新函数。JQuery的所有插件都是基于这个扩展接口开发的。

---

如何在页面引入jQuery

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>

• jquery.min.js里的代码进行过特殊的处理,如变量的名称基本都写成一个字母,而且格式缩进都被删除了.
  所以文件容量比较小(min),一般在网页中调用这个文件.
• jquery.js里的代码是没有进行处理的原代码,适合于人们阅读与研究.
• sourcemap文件是js文件压缩后，文件的变量名替换对应、变量所在位置等元信息数据文件，一般这种文件和min.js主文件放在同一个目录下。 比如压缩后原变量是map，压缩后通过变量替换规则可能会被替换成a，这时sourcemap文件会记录下这个mapping的信息，这样的好处就是说，在调试的时候，如果有一些JS报错，那么浏览器会通过解析这个map文件来重新merge压缩后的js,使开发者可以用未压缩前的代码来调试，这样会给我们带来很大的方便！而这种还原性调试功能，目前只有chorme才具有
  

  ---

  
  

  jQuery对象和Dom对象之间的区别与联系

  
  div与$div的联系是
  用如下两种方法可将$div对象转换成div对象

var $div=$('#x')
var div=$div.get(0)

或

var $div=$('#x')
var div=$div[0]

用如下方法可将div对象转换成$div对象

var div = document.getElementById('x')
var $div=$(div)

div与$div的区别是
div的属性方法有classList,className等
$div返回的是一个数组，其属性方法有addClass(),ajaxSend(),length等属性与方法

---

自己封装一个jQuery方法

window.jQuery=function(nodeOrSelector){
        let nodes={}//声明一个空的node节点对象
        if(typeof nodeOrSelector==='string'){//如果当前获取的是多个节点
            let temp=document.querySelectorAll(nodeOrSelector)//选中所有的名字相同的选择器，返回给一个临时变量
            for(let i=0;i<temp.length;i++){//遍历返回的数组，赋给nodes
                nodes[i]=temp[i]
            }
            nodes.length=temp.length
        }
        else if(nodeSelector instanceof Node){//如果就获取一个节点
            nodes={
                0:nodeOrSelector,
                length:1
            }
        }
        nodes.addClass=function(classes) {//给选中的节点统一添加class

                for (let i = 0; i < nodes.length; i++) {
                    nodes[i].classList.add(classes)
                }

        }

            nodes.getText=function(){//获取选中的节点的text
                var texts=[]//初始化一个空数组
                for(let i=0;i<nodes.length;i++){//遍历获取的节点，通过数组的push方法依次压入初始化的数组，并返回该数组
                    texts.push(nodes[i].textContent)
                }
                return texts
            }
            nodes.setText=function (text) {//将选中的节点的内容统一设置c成text
                for(let i=0;i<nodes.length;i++){//遍历获取的节点，将自己传的参数text赋给当前节点的textContent
                    nodes[i].textContent=text;
                }

            }
            return nodes
        }
        var node2=jQuery('ul>li')

        node2.addClass(['blue'])
        node2.setText('hi')