jQuery精讲-优快云博客

一、jQuery入门

二、jQuery元素操作

1、jQuery对象

jQuery对象：是对DOM对象的一层包装。

作用：是通过自身提供的一系列快捷功能来简化DOM操作的复杂度，提高程序的开发效率。

解决的问题：不同浏览器的兼容问题。

<script>
    // 创建一个jQuery对象，该对象包装了document对象
    var $doc = $(document);
    console.log($doc);       // 在控制台中输出jQuery对象
  </script>

$(document)表示将document对象转换为jQuery对象。

通过console.log()可以查看其内部结构。

在这里插入图片描述

jQuery对象内部有3个元素。

下标为0的元素表示其内部的DOM对象，即document对象。
length表示其内部DOM对象的个数，一个jQuery对象中可以包装多个DOM对象。
通过__proto__可以查看该对象的的原型（即jQuery本身）所具有的属性和方法。

2、jQuery选择器

3、元素遍历

前提：在操作HTML文档中的DOM元素时，经常需要进行元素遍历。
jQuery提供的方法：each()。

4、元素内容操作：获取与设置
在这里插入图片描述

5、元素的样式
在这里插入图片描述

6、元素筛选（查找与筛选）
jQuery祖先、jQuery后代、jQuery同胞
在这里插入图片描述
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。（祖先）
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。（后代）
children() 方法返回被选元素的所有直接子元素。（后代）
nextAll() 方法返回被选元素的所有跟随的同胞元素。（同胞）
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。（同胞）
prevAll() 返回未被选元素的所有跟随的同胞元素。（同胞）
prevUntil() 方法返回未介于两个给定参数之间的所有跟随的同胞元素。（同胞）

在这里插入图片描述
first() 方法返回被选元素的首个元素。
last() 方法返回被选元素的最后一个元素。
eq() 方法返回被选元素中带有指定索引号的元素。索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。
not() 方法返回不匹配标准的所有元素。not() 方法与 filter() 相反。

7、元素属性（基本属性操作、CSS属性操作）

三、jQueryDOM节点操作

1、节点追加

父子节点添加指的是在匹配到的元素内部添加指定的content内容。

兄弟节点指的是在匹配到的元素外部添加指定的content内容。

2、节点替换

节点替换是指将选中的节点替换为指定的节点。

在这里插入图片描述

replaceWith()方法的参数是一个函数时，它的返回值类型必须是字符串类型，用于完成指定元素的替换操作。

3、节点删除
在这里插入图片描述

4、节点复制

在这里插入图片描述

四、jQuery事件操作

五、jQuery动画特效

1、常用动画
在这里插入图片描述

参数speed表示动画的速度，可设置为动画时长的毫秒值（如1000），或预定的3种速度（slow、fast和normal）。
参数easing表示切换效果，默认效果为swing，还可以使用linear效果。
参数fn表示在动画完成时执行的函数。
参数opacity表示透明度数值（范围在0~1之间，0代表完全透明，0.5表示50%透明，1代表完全不透明）。

2、自定义动画

在这里插入图片描述

参数params表示一组包含动画最终属性值的集合。
参数settings是easing与fn组成的一个对象集合。
参数queueName表示队列名称，默认值为fx（标准效果队列）。
参数clearQueue与jumpToEnd都是布尔类型，默认值为false，前者规定是否停止被选元素所有加入队列的动画，后者规定是否立即完成当前的动画。

<input id="btn" type="submit" value="开始动画"><div></div>
  <script>
    $('#btn').click(function () {
   $('div').css({background: 'red', width: 0, height: 0});
   var params = {width: '100px', height: '100px'};
   var settings = $.speed(2000, 'linear');
   $('div').animate(params, settings);
    });
  </script>

//动画队列
$('div').show('slow')
.animate({left: '+=200'}, 2000)
.animate({left: '-=200'}, 1500)
.slideUp('normal', runQue);
//队列长度
$('div').queue('fx').length

div.show('slow')
  .animate({left: '+=200'}, 2000)
  .queue(function() {
    $(this).css('background', 'green').dequeue();
  })
  .animate({left: '-=200'}, 1500)
  .slideUp('normal', runQue)
  .queue(function() {//为队列添加额外操作
    $(this).css('background', 'red').dequeue();
  });

六、jQuery操作Ajax

七、jQuery插件机制

1、自定义插件
（1）封装jQuery对象

在插件中封装1各方法

(function($){
  $.fn.方法名 = function() {
    // 实现插件的代码
    ……
  };
})(jQuery);

$.fn是jQuery的原型对象（相当于$.prototype）。

通过“$.fn.方法名”的方式将封装的功能方法对每一个jQuery实例都有效，成为jQuery的插件。

注意：jQuery的简写“$”是可以被修改的，为了避免影响到插件中的代码，建议将插件方法放在“(function($){……})(jQuery);”这个包装函数中，该函数的参数$就表示jQuery全局对象。

在插件中封装多个方法

若要在一个插件中封装多个方法，则可以借助extend()方法，为该方法传递对象类型的参数。

参数的设置按照JavaScript对象语法的编写方式即可实现多个方法的封装。

jQuery.fn.extend({
  方法名1:function(参数列表) {
    // 实现插件的代码
    ……
   },
  方法名2:function(参数列表) {
    // 实现插件的代码
    ……
);

(2)定义全局函数的插件

jQuery.extend({
   方法名1: function(参数列表){
    // 实现插件的代码
    ……
  },
  方法2: function(参数列表){
    // 实现插件的代码
    ……
}
});

将自定义函数附加到jQuery命名空间下，从而作为一个公共的全局函数使用。

例如，jQuery的ajax()方法就是利用这种途径内部定义的全局函数。

（3）自定义选择器的插件

用户可以利用jquery.expr实现选择器的自定义。
obj表示进行匹配的HTML元素对应的jQuery对象。
根据需要对jQuery对象的属性进行判断，并使用return返回匹配结果。

$.expr[":"].方法名称 = function(obj) {
  // 自定义选择器代码
  return 匹配HTML元素的条件;
};
``

2、jQuery插件库

网站地址：https://plugins.jquery.com/

3、jQuery UI

下载地址：https://jqueryui.com/download/all/

jQuery基础总结

一、jQuery入门

二、jQuery元素操作

三、jQueryDOM节点操作

四、jQuery事件操作

五、jQuery动画特效

六、jQuery操作Ajax

七、jQuery插件机制