jQuery-基本简介

jQuery—基本简介

1. jQuery简介

   —jQuery主要的功能为CRUD—增删改查，其中最基本的功能为查找元素；

   —官方网址：https://jquery.com/

   —jQuery是一个优秀的js函数库，封装了BOM/DOM函数，主要是DOM封装库；使用jQuery的网站超过90%，中大型WEB项目开发首选；Write Less Do More!!!

   —jQuery特点：HTML元素选取（选择器）、HTML元素操作、CSS操作、HTML事件处理、链式调用、读写合一、隐式遍历、浏览器兼容、易扩展插件、ajax封装…

   —jQuery的优点：

   1. 强大选择器：方便快速查找DOM元素；
   2. 隐式遍历：一次操作多个元素；
   3. 读写合一：读数据/写数据用的是同一个函数
   4. 事件处理
   5. 链式调用
   6. DOM增删改查操作
   7. 样式操作

   基本使用

   —jQuery的不同版本：

   1.X版本：兼容老版本IE；文件更大；（最常用的是1.X版本）

   2.X版本：部分IE8及以下不支持；文件小，执行效率更高；

   3.X版本：完全不在支持IE8及以下版本；提供一些新的API；提供不包含ajax/动画API的版本；

   —jQuery的基本操作流程：

   1. 引入jQuery库（测试时使用未压缩的库即开发版/测试版，当项目上线时使用压缩库即生产版/压缩版）
   2. 引入jQuery库有两种方式：服务器本地引入和CDN远程引入，项目上线时，一般使用比较靠谱的CDN资源库，减轻服务器负担；官方网址：https://www.bootcdn.cn/
   3. 使用jQuery核心函数（$/jQuery）和jQuery核心对象；

   <!--使用jQuery实现用户访问-->
   <!--引入jQuery库开发版-->
   <script src="js/jquery-1.12.3.js"></script></script>
   //程序开发
   <script>
       //查询文档元素
       //使用jQuery核心函数：$或者jQuery
       $(function(){//绑定文档加载完成监听
           //通过ID选择器查询元素
           //使用jQuery核心对象：执行$()返回的对象
           var $btn = $('#btn')
           $btn.click(function(){//给btn绑定监听，隐式遍历
              var username = $('#username').val()
              alert(username)
           })
       })
   </script>
   

2. jQuery的两把利器

   jQuery核心函数

   —简称：jQuery函数；

   —jQuery库向外直接暴露的就是$和jQuery函数，直接可用；

   —引入jQuery库后，直接使用$即可，当函数用：$(xxx)；当对象用：$.xxx()

   jQuery核心对象

   —简称：jQuery对象

   —产生jQuery对象：执行jQuery函数就返回的是jQuery对象；

   —使用jQuery对象：$obj.xxx()

   <script>
   	//jQuery库的基本函数模型，暴露$和jQuery函数
    (function(window){
        var jQuery = function(){
            return new xxx()
        }
        window.$ = window.jQuery = jQuery
    })(window)
   </script>
   

3. jQuery核心函数

   —作为一般函数调用：$(param)

   1. 参数为函数：当DOM加载完成后，执行此回调函数；用于绑定文档加载完成后的监听，相当于window.onload = function(){}；
   2. 参数为选择器字符串：查找所有匹配的标签，并将它们封装成jQuery对象；封装为jQuery对象就可以使用jQuery对象的方法；
   3. 参数为DOM对象：将DOM对象封装成jQuery对象；DOM事件中回调函数下的this对应的是发生事件的dom元素；例如$(this).html()读取DOM元素中的内容；
   4. 参数为html标签字符串（用的较少）：创建标签对象并封装成jQuery对象；例如向文档中添加一个文本框：$('<input type = "text" name = "msg"/><br/>').appendTo('div')
   5. 如何返回操作完成后的jQuery对象，则直接返回this即可；

   —作为（工具）对象使用：$.xxx()

   1. $.each(obj,function(index,item){})：隐式遍历数组；回调函数中返回数组下标索引和内容值；
   2. $.trim(str)：去除字符串两端的空格；

4. jQuery核心对象

   —执行jQuery核心函数返回的就是jQuery核心对象；

   —jQuery对象是一个包含所有匹配的任意多个dom元素的伪数组对象；

   —伪数组：

   1. Object对象
   2. 具有**length属性和数值下标属性**
   3. 没有数组特别的方法：forEach()、push()、pop()、splice()；
   4. 用instanceof检测返回false；

   <script>
   	//自定义伪数组
       var weiArray = {}
       weiArray.length = 0
       weiArray[0] = 'Tom'
       weiArray.length = 1
       weiArray[0] = 'Jack'
       weiArray.length = 2
       //打印输出伪数组的数据
       for(var i =0;i<weiArray.length;i++){
           var obj = weiArray[i]
           console.log(i,obj)
       }
   </script>
   

   —jQuery对象有很多有用的属性和方法，可以方便程序员操作DOM；

   —jQuery对象的基本行为：

   1. size()/length：返回包含的DOM元素个数；

   2. [index]/get(index)：返回对应位置的DOM元素；

   3. each(fucntion(index,domEle){})：遍历JQuery对象包含的所有DOM元素；

      例如：$buttons.each(fucntion(){console.log(this.innerHTML)})这里面的**this指向jQuery包含的DOM元素**；

   4. index()：返回当前dom元素所在兄弟元素中的下标；

   —属性：操作内部标签的属性或值；

   —CSS：操作标签的样式；

   —文档：对标签进行增删改操作；

   —筛选：根据指定的规则过滤内部的标签；

   —事件：处理事件监听相关；

   —效果：实现一些动画效果；