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对象,再次返回出来,供后续操作继续使用——链式操作

原文地址:https://www.cnblogs.com/codexlx/p/12519941.html