zoukankan      html  css  js  c++  java
  • 什么是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. 事件绑定: 

  • 相关阅读:
    QButton
    注入
    SpringBoot热重启配置
    centos7 安装 tomcat
    centos 安装jdk
    spring boot (6) AOP的使用
    spring boot (5) 自定义配置
    spring boot (4) 使用log4 打印日志
    SpringBoot (3)设置支持跨域请求
    spring boot (2) 配置swagger2核心配置 docket
  • 原文地址:https://www.cnblogs.com/sna-ling/p/12716553.html
Copyright © 2011-2022 走看看