JQuery

2019-05-31  本文已影响0人  皮卡丘的皮上丘

1,使用步骤

 引包  -> 入口函数  ->  功能实现代码(事件处理)

2,JQuery 和JS的入口函数区别

区别一:书写个数不同

    Js入口函数只能出现一次,出现多次会存在事件覆盖的问题。

    jQuery的入口函数,可以出现任意多次,并不会存在事件覆盖问题。

区别二:执行时机不同

    Js入口函数是在所有的文件资源加载完成后,才执行。这些文件资源包括:页面文档、外部的js文件、外部的css文件、图片等。

    jQuery的入口函数,是在文档加载完成后,就执行。文档加载完成指的是:DOM树加载完成后,就可以操作DOM了,不用等到所有的外部资源都加载完成。

    文档加载的顺序:从上往下,边解析边执行。

3,DOM对象和JQuery对象的相互转换

DOM对象此处指的是:使用js操作DOM返回的结果。

jQuery对象此处指的是:使用jQuery提供的操作DOM的方法返回的结果。

4,jQuery选择器

图中的序号是从0开始,即索引值。

5,样式属性操作

6,属性操作

7,jQuery动画

隐藏显示动画:show() 或 hide()

滑入滑出动画:

淡入淡出动画:

改变透明度

自定义动画

注意:所有能够执行动画的属性必须只有一个数字类型的值。

比如:要改变字体大小,要使用:fontSize(font-size),不要使用:font

停止动画

当调用stop()方法后,队列里面的下一个动画将会立即开始。但是,如果参数clearQueue被设置为true,那么队列面剩余的动画就被删除了,并且永远也不会执行。

如果参数jumpToEnd被设置为true,那么当前动画会停止,但是参与动画的每一个CSS属性将被立即设置为它们的目标值。比如:slideUp()方法,那么元素会立即隐藏掉。如果存在回调函数,那么回调函数也会立即执行。

注意:如果元素动画还没有执行完,此时调用sotp()方法,那么动画将会停止。并且动画没有执行完成,那么回调函数也不会被执行。

8,节点操作

动态创建元素:

        // $()函数的另外一个作用:动态创建元素

        var $spanNode = $(“<span>我是一个span元素”);

        var node = $(“#box”).html(“<li>我是li</li>”);

添加元素:

常用append()作用:在被选元素内部的最后一个子元素(或内容)后面插入内容(存在或者创建出来的元素都可以)

不常用操作:(用法跟append()方法基本一致)

appendTo()作用:同append(),区别是:把$(selector)追加到node中去

$(selector).appendTo(node);

 prepend()作用:在元素的第一个子元素前面追加内容或节点

$(selector).prepend(node);

 after()作用:在被选元素之后,作为兄弟元素插入内容或节点

$(selector).after(node);

 before()作用:在被选元素之前,作为兄弟元素插入内容或节点

$(selector).before(node);

html创建元素

作用:设置或返回所选元素的html内容(包括 HTML 标记)

设置内容的时候,如果是html标记,会动态创建元素,此时作用跟js里面的 innerHTML属性相同

清空元素

复制元素

9,操作form表单

属性操作

值和内容

10,尺寸位置操作

宽度和高度操作:

css()获取高度和height获取高度的区别?

11,坐标值操作

12,事件机制

事件绑定:

bind方式: $("p").bind("click mouseenter",function(e){  //事件响应方法   });

可以同时绑定多个事件,缺点:要绑定事件的元素必须存在文档中。

delegate方式:(特点:减少事件绑定次数提高效率,性能高,支持动态创建的元素)

$(".parentBox").delegate("p","click", function(){   //为 .parentBox下面的所有的p标签绑定事件});

on方式:兼容zepto(移动端类似jQuery的一个库),jQuery1.7版本后,jQuery用on统一了所有的事件处理的方法

作用:给匹配的元素绑定事件,包括了上面所有绑定事件方式的优点

事件解绑:

unbind() 方式  作用:解绑 bind方式绑定的事件

    $(selector).unbind(); //解绑所有的事件

    $(selector).unbind(“click”); //解绑指定的事件

undelegate() 方式  作用:解绑delegate方式绑定的事件

    $( selector ).undelegate(); //解绑所有的delegate事件

    $( selector).undelegate( “click” ); //解绑所有的click事件

off解绑on方式绑定的事件

事件触发:

13,jQuery事件对象介绍

event.data                       传递给事件处理程序的额外数据

event.currentTarget           等同于this,当前DOM对象

event.pageX                     鼠标相对于文档左部边缘的位置

event.target                      触发事件源,不一定===this

event.stopPropagation() 阻止事件冒泡

event.preventDefault();     阻止默认行为

event.type                       事件类型:click,dbclick…

event.which                     鼠标的按键类型:左1 中2 右3

event.keyCode                   键盘按键代码

14,链式编程

链式编程原理:return this;

通常情况下,只有设置操作才能把链式编程延续下去。因为获取操作的时候,会返回获取到的相应的值,无法返回 this。

end(); // 结束当前链最近的一次过滤操作,并且返回匹配元素之前的状态。

15,隐式迭代

隐式迭代的意思是:在方法的内部会为匹配到的所有元素进行循环遍历,执行相应的方法;而不用我们再进行循环,简化我们的操作,方便我们调用。

如果获取的是多元素的值,大部分情况下返回的是第一个元素的值。

16,each方法

大部分情况下是不需要使用each方法的,因为jQuery的隐式迭代特性。

如果要对每个元素做不同的处理,这时候就用到了each方法

17,多库共存

此处多库共存指的是:jQuery占用了$ 和jQuery这两个变量。当在同一个页面中引用了jQuery这个js库,并且引用的其他库(或者其他版本的jQuery库)中也用到了$或者jQuery这两个变量,那么,要保证每个库都能正常使用,这时候就有了多库共存的问题。

18,jQuery插件机制

jQuery这个js库,虽然功能强大,但也不是面面俱到包含所有的功能。

jQuery是通过插件的方式,来扩展它的功能:

当你需要某个插件的时候,你可以“安装”到jQuery上面,然后,使用。

当你不再需要这个插件,那你就可以从jQuery上“卸载”它。

jQuery.color.js

    animate()自定义动画:不支持背景的动画效果

    animate动画支持的属性列表

jQuery.lazyload.js

    使用步骤:引入jQuery文件  ->  引入插件  -> 使用插件

19,jQueryUI

jQueryUI专指由jQuery官方维护的UI方向的插件。

官方API:http://api.jqueryui.com/category/all/

其他教程:https://www.runoob.com/jqueryui/jqueryui-intro.html

上一篇下一篇

猜你喜欢

热点阅读