• 什么是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. 事件绑定: 

  • 相关阅读:
    Bootstrap 2.2.2 的新特性
    Apache POI 3.9 发布,性能显著提升
    SQL Relay 0.48 发布,数据库中继器
    ProjectForge 4.2.0 发布,项目管理系统
    红帽企业 Linux 发布 6.4 Beta 版本
    红薯 快速的 MySQL 本地和远程密码破解
    MariaDB 宣布成立基金会
    Percona XtraBackup 2.0.4 发布
    Rocks 6.1 发布,光盘机群解决方案
    精通Servlet研究,HttpServlet的实现追究
  • 原文地址:https://www.cnblogs.com/sna-ling/p/12716553.html
Copyright © 2020-2023  润新知