什么是jQuery

1. 什么是jQuery:

 jQuery是第三方开发的执行DOM操作极简化函数库

  第三方: 下载才能用

  执行DOM操作: jQuery还是在执行DOM操作:

                学jQuery还是在学DOM

  极简化: jQuery是对DOM操作的终极简化

         但是没有改变DOM的四步

         仅是对每个API进行了简化

  函数库: jQuery都是用函数解决一切问题!

 

 为什么: 

  1. jQuery是对DOM操作的终极简化:

    增删改查

    事件绑定

    动画

    ajax

  2. 解决了绝大部分兼容性问题

    凡是jQuery让用的,都没有兼容性问题: 

     

 何时: PC端的大项目和框架都用jQuery开发

 

2. 如何使用: 

 官网: jquery.com

 下载: 

  版本: 

   1.x 支持IE8

    uncompressed development 未压缩版本

      具有完备的注释,代码格式和见名知意的变量名

      优: 可读性好

      缺: 体积大,不便于下载

      适合于学习和开发之用

    compressed production 压缩版

      1. 删除注释和代码格式

      2. 极简化变量名

      优: 体积小,便于下载

      缺: 可读性差

      适合于生产环境

   2.x 不再支持IE8

   3.x 不再支持IE8

 

 引入jquery.js:

  先引入jQuery.js,再编写自定义脚本

  原理: 

   引入<script src="jquery.js"

    其实是向全局添加一种新的类型: jQuery,包含2部分

     1. 构造函数: function jQuery(){}

     2. 原型对象: jQuery.prototype={ 所有简化版API }

    限制: 只有jQuery创建的子对象,才能使用jQuery简化版API

   所有,如果想用jQuery简化版API操作DOM元素,都要先创建一个jQuery对象,封装要操作的DOM元素

     如何创建: 2种: 

      1. 先查找,再创建

      本来: var $btn1=new jQuery("选择器")

      但是: 因为new jQuery使用非常频繁,所以: 

       jQuery构造函数进行了改造: 

        function jQuery(){

          return new jQuery();

        }

        $=jQuery()

      所以,创建jQuery对象,只要: var $btn1=$("选择器")

      执行: 先创建jQuery对象

           再用选择器找到要操作的DOM元素对象,保存进jQuery对象中

      调用API时: 对jQuery对象调用API,等效于对其内部封装的DOM元素调用对等的API.

      2. 直接封装已经获得的DOM元素:var $btn=$(this)

        this默认返回DOM元素,不能使用jQuery家的API

        $(this)是将this返回的DOM元素封装成一个jQuery对象

     创建jQuery对象的结果是:

       jQuery对象其实是一个封装多个DOM元素的类数组对象

 

  jQuery API的三大特点: 

   1. 一个函数两用: 没给新值,默认就读取内容;给了新值,就变成修改内容

   2. jQuery函数都自带遍历功能: 对jQuery对象(类数组对象)调用一次API,等效于对jQuery内封装的多个DOM元素,每个都调用一次API.

   3. 每个函数都自动返回正在使用的jQuery对象本身,就可使用链式操作,简化代码。

 

3. 查找: 

  按选择器查找:

  jQuery支持所有CSS3的选择器

  复习: CSS3选择器: 

   基本选择器: #id  element  .class    *    select1,select2,

   层次选择器: 父 后代   父>子   兄+弟    兄~弟

   子元素过滤选择器: 

     :first-child   :last-child    :nth-child(i)    :only-child

   属性选择器: 

    [属性名]

    [属性名=值]

    [属性名^=开头]

    [属性名$=结尾]

    [属性名*=部分]

    [属性名!=值]

  并扩展了部分jQuery新增的选择器

   基本过滤选择器: 先将所有符合条件的元素放入一个集合中,再统一编号,然后选择集合中指定位置的元素

     :first/last   :even/odd   :eq/gt/lt(i)

  按节点间关系查找

4. 修改:

  内容

  属性

  样式

5. 添加/删除:

6. 事件绑定: 

posted @ 2020-04-16 22:58  平凡人的普通修仙之路  阅读(582)  评论(0编辑  收藏  举报