zoukankan      html  css  js  c++  java
  • jQuery 基础理论

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

    解决了大部分浏览器兼容性问题,凡是jQuery让用的几乎都没有兼容性问题

     但是:

       仅限于PC

       仅是对DOM的每一步进行了简化但是没有从根本上简化步骤

    1 使用:

      (1)本地引入:<script src="js/jquery.minl.js"></script>

      (2)CDN方式引入:如

    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
      crossorigin="anonymous">
    </script>

    2. jQuery的原理:

    (1)引入jquery.js其实是向全局window中添加了一种新的类型: jQuery

      ① 构造函数:负责创建jQuery类型的子对象

        内容其实就是:function jQuery(){ return new jQuery... }

         如此一来,今后创建jQuery的子对象时,就不用再写new,而是直接写jQuery(),且jQuery做了进一步的简化:让$=jQuery,所以,调用$()等同于调  用jQuery().

      具体$()做2件事:

        1)创建一个jQuery的子对象;

        2)去DOM树上查找要操作的元素,保存进jQuery子对象中;

       

      ② 原型对象:jQuery的原型对象jQuery.prototype负责保存所有jQuery类型的子对象共有的方法

    所以:

      (1)要用jQuery的简化版函数来操作DOM元素,都必须先创建jQuery的子对象,并且封装到jQuery对象中,才能使用jQuery的简化函数。

      (2)但是调用jQuery家的简化版函数底层会被自动翻译为原生的DOM函数或属性作用于jQuery对象中封装的DOM元素身上。

      (3)jQuery子对象调用简化版函数就等效于从前对原生DOM元素调用原生的DOM函数和属性

    3.如何使用jQuery:

    就像上面说的,jQuery操作DOM元素的步骤其实并没有简化,和DOM操作页面元素的步骤基本一样:

    (1)查找触发事件的元素: 

    var $变量名=$("选择器")

     (2)绑定事件处理函数:

    $变量名.click(function(){
        //获得this: this->当前点击的DOM元素对象,千万别看.前!
        //但是this指向的是DOM元素,无权使用jQuery家的函数
        //所以,将来this->  var $变量=$(this);
        (3). 查找要修改的元素: 也可用$("选择器")
        (4). 修改元素:
        a. 修改元素的内容: $元素.html("新内容")
    })

     4.jQuery简化版函数的特点:

    (1)所有和修改相关的函数一个函数两用。如html(),text()都可以设置或者获取值,不写参数时就是获取值。

    (2)几乎所有jQuery函数都内部自带for循环。

        因为jQuery查找的结果是一个类型数组对象。对整个类数组对象调用一个jQuery简化版函数,其内部都自带for循环,会将效果自动应用到查找结果中  每个DOM元素上

    如:

     (3)大部分jquery函数都会将正在操作的.前的jQuery对象,再次返回出来,供后续操作继续使用——链式操作

  • 相关阅读:
    用一条UPDATE语句交换两列的值
    js之事件冒泡和事件捕获详细介绍
    C# String与string的区别
    setTimeout()和setInterval()方法的区别?
    jQuery的.bind()、.live()和.delegate()之间区别
    在Hyper-V虚拟机中使用Wi-Fi上网
    调整框架的尺寸,是否显示滚动条,跳出框架
    调整框架的尺寸
    查看jquery绑定的事件函数
    Onload,Onunload,onbeforeunload,$(window).load(function() {})和$(document).ready(function(){})
  • 原文地址:https://www.cnblogs.com/codexlx/p/12519941.html
Copyright © 2011-2022 走看看