JQuery

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,948评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,371评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,490评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,521评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,627评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,842评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,997评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,741评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,203评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,534评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,673评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,339评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,955评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,770评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,000评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,394评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,562评论 2 349

推荐阅读更多精彩内容

  • 为甚嚒要学习jQuery? 因为JS中有很多痛点: window.onload事件只能出现一次,如果出现多次,后面...
    magic_pill阅读 814评论 0 13
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,330评论 0 2
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,167评论 0 1
  • jQuery jQuery是JavaScript世界中使用最广泛的一个库。 jQuery这么流行,肯定是因为它解决...
    星腾_范特西阅读 2,085评论 0 27
  • jQuery模块 选择器、DOM操作、事件、AJAX与动画 匿名函数自执行 作用:解决命名空间与变量污染的问题 总...
    青青玉立阅读 876评论 0 0