jQuery笔记总结

时间:2019-11-07 03:11来源:动画设计
首先节 jQuery开头认识 jQuery概述 JQuery概念 javascript概念 基于Js语言的API和语法组织逻辑,通过嵌入window和document对象,来操作内部存款和储蓄器中的DOM成分 JQuery概念 基于javascript的,同上

首先节 jQuery开头认识

jQuery概述

  • JQuery概念

    • javascript概念

      • 基于Js语言的API和语法组织逻辑,通过嵌入window和document对象,来操作内部存款和储蓄器中的DOM成分
    • JQuery概念

      • 基于javascript的,同上,提升了代码的效能
  • jQuery是什么:

    • 是三个javascript代码旅馆,大家称之为javascript框架。

    • 是一个便捷的简洁明了的javascript框架,能够简化查询DOM对象、处管事人件、制作动漫、管理Ajax交互作用进程。

    • 它能够帮大家做什么样(有哪些优势)

      • 轻量级、体量小,使用灵活(只需引进八个js文件)

      • 无敌的采纳器

      • 理想的DOM操作的卷入

      • 不错的浏览器宽容性

      • 保证的事件管理机制

      • 完善的Ajax

      • 链式操作、隐式迭代

      • 惠及的选取页面成分(模仿CSS选取器更确切、灵活)

      • 动态改革页面样式/页面内容(操作DOM,动态拉长、移除样式)

      • 决定响应事件(动态增进响应事件)

      • 提供基本网页特效(提供已打包的网页特效方法)

      • 高速完成通讯(ajax)

      • 易扩大、插件丰富

  • 怎么引进JQuery包

    • 引进本地的JQuery

    • 引进谷歌在线提供的库文件(稳固可信赖高速卡塔尔

    • 使用Google提供的API导入 <script type=“text/javascript” src=“jquery.js”></script>

    • 写第七个JQUery案例

      • 解释:在JQuery库中,$是JQuery的别称,$()等效于就jQuery()
<script type=“text/javascript” src=“”></script>
<script type=“text/javascript”>
   $(function(){
       alert(“jQuery 你好!”);
   });
</script>
  • 讲解$(function(){});

    • $是jQuery外号。如$()也可jQuery()那样写,相当于页面起始化函数,当页面加载实现,会实施jQuery()。

    • 仰望在做有所业务早前,JQuery操作DOM文书档案。必得保证在DOM载入完结后开首试行,应该用ready事件做管理HTML文书档案的最初

    • $(document).ready(function(){});

      • 看似于js的window.onload事件函数,不过ready事件要先于onload事件实践

      • window.onload = function(){};

    • 为方便开荒,jQuery简化那样的艺术,直接用$()表示

    • JQuery的ready事件不对等Js的load:

      • 实行机遇比不上:load必要等外界图片和录像等总体加载才推行。ready是DOM绘制实现后进行,先与外表文件

      • 用法分化:load只可写叁遍,ready能够屡次

  • window.onload与$(document).ready()对比

window.onload

$(document).ready()

实行机缘

非得等网页中享有剧情加载完后(图片)才试行

网页中的DOM结构绘制完后就进行,恐怕DOM成分相关的东西并不曾加载完

编纂个数

无法何况奉行多少个

能何况进行两个

简化写法

$(document).ready(function(){ //.. });

引入写法:$(function(){ });

  • jQuery有何样功用(API)

    • 选择器

    • 过滤器

    • 事件

    • 效果

    • ajax

  • 简单的JQuery选择器

    • JQuery基本选取器(ID采取器,标签选择器,类接纳器,通配选用器和组接受器5种卡塔 尔(英语:State of Qatar)

    • ID选择器:document.getElementById(id)与$("#id")相比较(改换文字大小)---id唯风流倜傥,再次来到单个成分

    • 标签接纳器:document.getElementsByTagName(tagName)与$("tagname")相比较---四个标签,再次来到数组

    • 类选用器:$(".className")--五个classname(订正背景图片卡塔尔国

    • 通配选取器:document.getElementsByTagName("*")与$("*")比较---指范围内的有所标签成分

    • 组接收器:$("seletor1,seletor2,seletor3")----无数量约束,用逗号分割

初始询问JQuery

  • JQuery是什么

    • javascript用来干什么的:

      • 操作DOM对象

      • 动态操作样式css

      • 数码访问

      • 支配响应事件等

    • jQuery成效相同,只是越来越高效简洁

  • 什么样援引JQuery

<script type="text/javascript"></script>
写第一个JQUery案例
<script type=“text/javascript” src=“”></script>
<script type=“text/javascript”>
    $(function(){
        alert(“jQuery 你好!”);
    });
</script>
  • $()讲解

    • $在JQuery库中,$是JQuery的别称,$()等效于就jQuery().

    • $()是JQuery方法,赞可看作是JQuery的采纳器,与css选取器形似(可做相比较卡塔尔国

    • var jQuery==$ =function(){} $()本质就是一个函数也便是jQuery的主干函数

    • 如借使jQuery的指标都这么变量加上叁个标识$ 方便识别:var $div = $("#")

function $(id){
        return document.getElementById(id);
    }
  • $()和document是相等的吧
<div id="a" class="aa"></div>
<div id="b" class="aa"></div>
<div id="c" class="aa"></div>
alert(document.getElementById("id") == $("#aa"));//返回结果为false
alert(document.getElementById("id") == $("#aa").get(0));//返回true
  • 代办对象$()

    • jQuery中回到的是代理对象自己

    • jQuery的主导原理是通过采用器找到呼应的代理对象

    • jQuery全是经过艺术操作

    • 体制采取器$(".className")

      • $(".aa").css("color","green");
    • id选择器("")

      • $("#a").css("background-color","#ff0066");
    • 标签选拔器

      • $("p").css("color","#cc3366");
    • 组选拔器

      • $("#b ul li").size();
  • 指标调换($(element))

    • 原生dom对象和jquery代理对象的互相转变
$(传入的原生对象);
//原生对象转化成jQuery对象
var nav = document.getElementById("nav");
var $nav = $(nav);
alert($nav.get(0) == nav);//true
  • 追寻范围的限定($('字符串',element)卡塔 尔(阿拉伯语:قطر‎

    • 总括:三种写法比较:

      • 艺术生机勃勃:不推荐 找寻速度最慢

        • $("#nav").css();

        • $("#nav li").css();

      • 措施二:寻找速度最快 链式操作

        • $("#nav").css().children().css();
      • 措施三:也常用 速度第二快

        • var $nav = $("#nav").css();

        • $("li",$nav).css(); $nav 限定了查找范围 速度快

  • 总括: $() jquery大旨方法的意义和动用处境

    • 若是是叁个字符串参数况且没有标签对(选择器卡塔 尔(阿拉伯语:قطر‎ $(ul.nav")

    • 生龙活虎经是八个字符串参数况且有标签对(创制html标签卡塔尔国$("<img>") --最后加到DOM树中 $xx.append("<img>");

    • 若是是传播三个element dom对象,直接包装为proxy对象回来 $(DOM对象)

    • 只要第多个参数是字符串,第叁个是element dom对象的话,那么正是在element这一个dom对象里面寻觅选取器对应的成分何况代理 $("li",$DOM对象)

  • 代理情势以至代理内部存款和储蓄器结构

 

 

第二节 选择器

  • 来回看一下CSS常用的接纳器
选择器 语法 描述
标签选择器 E{css规则} 以文档元素作为选择符
ID选择器 #ID{css规则} ID作为选择符
类选择器 E.className{css规则} class作为选择符
群组选择器 E1,E2,E3{css规则} 多个选择符应用同样的样式
后代选择器 E F{css规则} 元素E的任意后代元素F
  • 选拔器引擎准绳($('字符串'))

    • css选用器的平整

      • 标签选拔器

      • id选择器

      • 类采用器

      • 混合接受器

    • css3的采纳器法则

    • 情状和伪类(:even :odd :first :last :eq(index)卡塔 尔(阿拉伯语:قطر‎

    • 属性([attr=value])

  • 层级接纳器:通过DOM的嵌套关系相称成分

    • jQuery层级选取器----富含选取器、子选取器、相邻选取器、兄弟选拔器4种

    • a.包含接受器:$("a b")在加以的祖先成分下相称全部后代元素。(不受层级约束)

    • b.子选拔器:$("parent > child") 在给定的父成分下相配全体子成分。

    • c.相邻选取器:$("prev + next") 相配全体紧接在prev成分后的next成分。

    • d.兄弟选用器:$("prev ~ siblings") 相称prev成分之后的有所sibling成分。

过滤选拔器

  • 基本过滤选取
选择器 说明 返回
:first 匹配找到的第1个元素 单个元素
:last 匹配找到的最后一个元素 单个元素
:eq 匹配一个给定索引值的元素 单个元素
:even 匹配所有索引值为偶数的元素 集合元素
: odd 匹配所有索引值为奇数的元素 集合元素
:gt(index) 匹配所有大于给定索引值的元素 集合元素
:lt(index) 匹配所有小于给定索引值的元素 集合元素
:not 去除所有与给定选择器匹配的元素 集合元素
:animated 选取当前正在执行动画的所有元素 集合元素
focus 选取当前正在获取焦点的元素 集合元素
  • 内容过滤接受器
选择器 描述 返回
:contains(text) 选取含有文本内容为text的元素 集合元素
:empty 选取不包含子元素获取文本的空元素 集合元素
:has(selector) 选择含有选择器所匹配的元素的元素 集合元素
:parent 选取含有子元素或者文本的元素 集合元素
  • 足见过滤选取器
选择器 描述 返回
:hidden 选择所有不可见的元素 集合元素
:visible 选取所有可见的元素 集合元素
  • 属性过滤选取器
选择器 说明 返回
[attribute] 选取拥有此属性的元素 集合元素
[attribute=value] 选取属性值为value值的元素 集合元素
[attribue^=value] 选取属性的值以value开始的元素 集合元素
[attribue$=value] 选取属性的值以value结束的元素 集合元素
  • 子成分过滤选择器
选择器 说明 返回
:nth-child(index/even/odd) 选取每个父元素下的第index个子元素或者奇偶元素(index从1算起) 集合元素
:first-child 选取每个元素的第一个子元素 集合元素
:last-child 选取每个元素的最后一个子元素 集合元素
  • :nth-child()采取器是很常用的子成分过滤选拔器,如下

    • :nth-child(even)选取每种父成分下的索引值是偶数的因素

    • :nth-child(odd)选择各样父成分下的索引值是奇数的因素

    • :nth-child(2)接受每一个父成分下的索引值是2的因素

    • :nth-child(3n)选取各种父成分下的索引值是3的翻番的成分 (n从1先导)

  • 表单对象属性过滤选拔器

选择器 说明 返回
:enabled 选取所有可用元素 集合元素
:disabled 选取所有不可用元素 集合元素
:checked 选取所有被选中的元素(单选框、复选框) 集合元素
:selected 选取所有被选中的元素(下拉列表) 集合元素
  • 表单选择器
选择器 说明
:input 选取所有input textarea select button元素
:text 选取所有单行文本框
:password 选取所有密码框
:radio 选取所有单选框
:checkbox 选取所有多选框
:submit 选取所有的提交按钮
:image 选取所有的图像按钮
:reset 选取所有的重置按钮
:button 选取所有的按钮
:file 选取所有的上传域
:hidden 选取所有的不可见元素
  • 一定岗位接收器

    • :first

    • :last

    • :eq(index)

  • 钦赐范围选取器

    • :even

    • :odd

    • :gt(index)

    • :lt(index)

  • 消灭选择器

    • :not 非

其三节 接收器优化

选取非常的采取器表达式能够抓牢品质、巩固语义并简化逻辑。常用的抉择器中,ID选取器速度最快,其次是种类采纳器。

    • 多用ID选择器
    • 少直接利用class选拔器
    • 多用老爹和儿子关系,少用嵌套关系
    • 缓存jQuery对象

行使过滤器

jQuery提供了2种接受文书档案成分的诀窍:选拔器和过滤器

类过虑器:依照元素的类属性来进展过滤操作。

  • hasClass(className):推断当前jQuery对象中的有个别成分是还是不是含有钦定类名,包含再次回到true,不带有重返false

下标过滤器:正确选出内定下标成分

  • eq(index):获取第N个因素。index是整数值,下标从0开首

表明式过滤器

  • filter(expr)/(fn):筛选出与钦命表明式/函数匹配的要素集结。

  • 功能最强大的表明式过滤器,可吸收接纳函数参数,也足以是简约的采纳器表明式

璀璨 map(callback):将豆蔻梢头组元素调换到其余数组

洗濯 not(expr):删除与内定表明式相配的要素

截取 slice(start,end):接收一个独具匠心的子集

查找

  • 向下搜寻后代成分

    • children():获得具有因素的有着子成分集结(子成分卡塔尔

    • find():搜索全体与钦点表明式匹配的要素(全体后代成分中查找)

  • 搜索兄弟成分 siblings()查找当前成分的男人

第3节 代理对象属性和样式操作

  • 代理对象属性和体制操作

    • attr

    • prop(常常属性值是boolean的值大概不用安装属性值,日常接纳)

    • css(最棒不用,常常作者用来做测验)

    • addClass / removeClass

  • 操作原生DOM的时候用的章程:二遍只好操作七个

    • 操作属性:setAttribute / getAttribute

    • 操作样式:style.xx = value

    • 操作类样式:className=''

    • 赢得DOM的子成分children属性

    • DOM里面增加一个子元素appendChild()

  • 操作jQuery代理对象的时候:批量操作DOM对象(全部都是透过措施操作)

  • 操作属性:attr()、prop()

    • attr和prop差距:要是属性的值是布尔类型的值 用prop操作 反之attr
  • 操作样式:css()

  • 操作类样式:addClass() removeClass()

  • 操作DOM子元素:children()

  • 增加子成分:append()

第五节 jQuery中DOM操作

DOM是一种与浏览器、平台|语言非亲非故的接口,使用该接口能够轻便的拜候页面中的全体的正规化组件

DOM操作的归类

DOM Core

  • DOM core并不依据于JavaScript,任何帮衬DOM的次第都得以利用

  • JavaScript 中的getElementByID() getElementsByTagName() getAttribute() setAttribute()等艺术都以DOM Core的组成都部队分

HTML-DOM

  • HTML -DOM的产出比DOM-Core还要早,它提供一些更显眼的申明来叙述HTML成分的天性
  • 比方说:使用HTML-DOM来博取某成分的src属性的不二秘籍

    • element.src

CSS-DOM

  • 本着CSS的操作。在JavaScript中,主要用以获取和安装style对象的各个质量,通过退换style对象的性情,使网页突显不一致的功力

招来节点

  • 找出属性节点 attr() 能够获得各属性的值

创办节点

  • $(html):依据传递的标志字符串,创造DOM对象

安插节点

方法 说明
append() 向每个匹配元素内部追加内容
appendTo() 颠倒append()的操作
prepend() 向每个匹配元素的内容内部前置内容
prependTo() 颠倒prepend()的操作
after() 向每个匹配元素之后插入内容
insertAfter() 颠倒after()的操作
before() 在每个匹配元素之前插入内容
insertBefore() 颠倒before()的操作

除去节点

  • jQuery提供了三种删除节点的法门 remove() detach() empty()

  • remove()方法

    • 当有些节点用此办法删除后,该节点所蕴涵的具有后代节点将同一时间被删去,用remove()方法删除后,照旧得以继续应用删除后的援用
  • detach()

    • 和remove()方法相近,也是从DOM中去掉全部相称的成分,与remove()区别的是,全数绑定的平地风波、附加的数据等,都会被保存下去
  • empty()

    • empty()方法实际不是去除节点,而是清空节点,它能清空成分中负有后代节点

复制节点

  • 动用clone()方法来产生

  • 在clone()方法中传送二个参数true,同期复制作而成分中所绑定的平地风波

轮番节点

  • jQuery提供对应的措施 replaceWidth()

体制操作

  • 得到样式和安装样式 attr()

  • 追加样式 addClass()

  • 移除样式 removeClass()

  • 切换样式

    • toggle()方法只假如决定行为上的双重切换(就算元素是显得的,则藏身;若是成分原本是躲避的,则显得卡塔 尔(阿拉伯语:قطر‎

    • toggleClass()方法调控样式上的再度切换(咋样类名存在,则删除它,要是类名空头支票,则增加它卡塔 尔(阿拉伯语:قطر‎

  • 认清是还是不是带有有个别样式

    • hasClass()能够用来判断成分是或不是带有有个别class,如有重返true 该措施等价于is()

设置和获得HTML、文本和值

  • html()

    • 此方法相似JavaScript中innerHTML属性,能够用来读取和设置有个别成分中的HTML内容
  • text()方法

    • 此方法类型JavaScript中innerHTML,用来读取和安装某些成分中的文本内容
  • val()方法

    • 此办法相同JavaScript中的value属性,用来安装获取成分的值。无论是文本框、下拉列表依旧单选框,都能够回来元素的值,假诺成分多选,重返二个包涵全体选用的值的数组

遍历节点

  • children()方法

    • 该方法用来拿到相称成分的子成分会集

    • childre()方法只构思子成分而不思量任何后代成分

  • next()方法

    • 该格局用于获取相称成分前面紧邻的同辈成分
  • prev()方法

    • 用于相称成分前边紧邻的同辈成分
  • siblings()方法

    • 用以相称元素前后全体的同辈成分
  • parent()方法

    • 赢得集结中各类 成分的父级成分
  • parents()方法

    • 获得集结中各样成分的先世成分

CSS DOM操作

CSS DOM技艺轻易的来讲正是读取和安装style对象的各样品质

用css()方法拿到成分的体制属性,能够并且安装五个样式属性

CSS DOM中有关成分定位有多少个常用的主意

  • offset()方法

    • 它的功能是获得成分在当下视窗的对峙偏移当中重回的靶子包涵几个属性,即top和left,他只对可以看到成分有效

position()方法

  • 收获绝对于这段日子的叁个position()样式属性设置为relative可能absolute的祖父节点的对峙偏移,与offset()同样,他赶回的指标也席卷八个属性,即top和left

scrollTop()方法和scrollLeft方法

  • 那七个方法的成效分别是拿到成分的轮转条距顶部的相距和距左边的间距
  • 一张图计算以上的岗位关系(项目中很常用-必定要弄清楚)

 

第六节 jQuery动画

回溯上节

  • 操作DOM

    • a.什么是DOM:Document Object Model缩写,文书档案对象模型

    • b.精晓页面包车型客车树形结构

    • c.什么是节点:是DOM结构中细小单元,包括成分、属性、文本、文书档案等。

生龙活虎、创立节点

  • 1.创立成分

    • 语法:document.createElement(name);
var div = document.createElement("div");
document.body.appendChild(div);
  • $(html):依据传递的暗号字符串,创造DOM对象

  • 2.开立文本

var div = document.createElement("div");
var txt = document.createTextNode("DOM");
div.appendChild(txt);
document.body.appendChild(div);

var $div = = $("<div>DOM</div>");
$(body).append($div);
  • 3.装置属性

    • 语法:e.setAttrbute(name,value)
var div = document.createElement("div");
var txt = document.createTextNode("DOM");
div.appendChild(txt);
document.body.appendChild(div);
div.setAttribute("title","盒子");

var $div = = $("<div title='盒子'>DOM</div>");
$(body).append($div);

二、插入内容

  • 此中插入

    • 向元素最前边插入节点:

      • append():向每一个相称的因素内部追加内容

      • appendTo():把富有相称的要素追加到钦命成分会集中,$("A").append("B") 等效 $("B").appendTo("A")

    • 向成分最前头插入节点:

      • prepend(卡塔 尔(英语:State of Qatar):把各类相配的因素内部后置内容

      • prependTo(卡塔 尔(英语:State of Qatar):把全数相称的要素前置到另三个点名的因素集结中,$("A").prepend("B") 等效 $("B").prependTo("A")

  • 外表插入

    • after():在每一种相配的成分之后插入内容

    • before():在各类相配想元素早先插入内容

    • insertAfter():将享有相配的要素插入到另二个点名的要素会集后边,$A.insert($B) 等效 $B.insertAfter($A);

    • insertBefore():将具备相称的成分插入到另一个点名的因素集结前边$A.before($B) 等效 $B.insertBefore($A);

三、删除内容

  • 移除

    • remove():从DOM中去除全部相配成分
  • 清空

    • empty():删除相配的因素集结中全数子节点内容

四、克隆内容:创立内定节点副本

  • clone()

    • 在意:若clone(true卡塔 尔(阿拉伯语:قطر‎则是回顾克隆元素的质量,事件等

五、替换内容

    • replaceWith():将兼具相配的成分替换来钦赐的因素

    • replaceAll():用特别的要素轮番掉钦点成分

  • 潜心:两个效果同样,只是语法不相同 $A.replaceAll($B) 等效于 $B.replaceWhith($A);

本节新知识

  • JavaScript语言本人不帮助动漫设计,必须通过改变CSS来兑现动漫效果

显隐动漫

  • show():显示 hide():隐藏

    • 原理:hide()通过改动成分的可观大幅和不发光度,直到那四个属性值到0

    • show()从上到下增美金素的冲天,从左到右扩充成分宽度,从0到1扩充折射率,直至内容完全可以预知

    • 参数:

      • show(speed,callback)

        • speed: 字符串或数字,表示动漫将运营多长时间(slow=0.6/normal=0.4/fast=0.2卡塔尔

        • callback: 动漫完了时进行的法子

  • 展现和隐敝式生机勃勃对意气风发环扣风流倜傥环的卡通格局

  • 显隐切换

    • toggle():切换来分的可以预知状态

      • 规律:相称成分的增进率、中度以致不折射率,同期进行动漫,蒙蔽动漫后将display设置为none

      • 参数:

        • toggle(speed)

        • toggle(speed,callback)

        • toggle(boolean)

          • speed: 字符串或数字,表示动画将运转多久(slow=0.6/normal=0.4/fast=0.2卡塔 尔(阿拉伯语:قطر‎

          • easing: 使用哪个缓冲函数来衔接的字符串(linear/swing)

          • callback: 动画造成时进行的措施

          • boolean:true为显示 false为隐藏

滑动

  • 显隐滑动作效果果

    • slideDown():滑动蒙蔽

    • slidUp():滑动显示

    • 参数:

      • slideDown(speed,callback)

      • slidUp(speed,callback)

  • 显隐切换滑动

    • slideToggle():显隐滑动切换

    • 参数:

      • slidUp(speed,callback)

潜移暗化:通过改正不折射率

  • 淡入淡出

    • fadeIn()

    • fadeOut()

    • 参数:

      • fadeIn(speed,callback)

      • fadeOut(speed,callback)

  • 设置淡出透明效果

    • fadeTo():以稳中求进的方法调动到内定反射率

    • 参数:

      • fadeTo(speed,opacity,callback)
  • 渐变切换:结合fadeIn和fadeOut

    • fadeToggle()

    • 参数:

      • fadeOut(speed,callback)
  • 自定义动漫:animate()

    • 只顾:在使用animate方法以前,为了影响该因素的top left bottom right样式属性,必需先把成分的position样式设置为relative只怕absolute

    • 甘休成分的动画片

      • 洋洋时候必要结束相配正在进展的动漫片,必要运用stop()

      • stop()语法结构:stop([clearQueue],[gotoEnd]);

        • 都以可选参数,为布尔值

        • 风度翩翩经直接使用stop()方法,会及时停下当前正在进展的卡通片

    • 推断成分是不是处在动漫状态

      • 若果不处于动画状态,则为要素加多新的卡通片,不然不增加
        if(!$(element).is(":animated")){ //决断成分是不是处在动漫状态}

      • 本条大意在animate动画中临时被用到,须求专一

    • 延期卡通片

      • 在动漫奉行过程中,假如你想对动漫片实行延期操作,那么使用delay()
  • 用animate模拟show():

    • show: 表示由透明到不透明

    • toggle: 切换

    • hide:表示由展现到隐蔽

  • 动漫片方法总括

方法名 说明
hide()和show() 同时修改多个样式属性即高度和宽度和不透明度
fadeIn()和fadeOut() 只改变不透明度
slideUp()和slideDown() 只改变高度
fadeTo() 只改变不透明度
toggle() 用来代替show()和hide()方法,所以会同时修改多个属性即高度、宽度和不透明度
slideToggle() 用来代替slideUp和slideDown()方法,所以只能改变高度
fadeToggle() 用来代替fadeIn()和fadeOut方法,只能改变不透明度
animate() 属于自定义动画,以上各种动画方法都是调用了animate方法。此外,用animate方法还能自定义其他的样式属性,例如:left marginLeft `scrollTop`等

第七节 jQuery中的事件

事件目的的质量

  • event.type:获取事件的类型

  • event.target:获取到触发事件的要素

  • event.preventDefault方法 阻止暗许事件作为

  • event.stopPropagation()阻止事件的冒泡

  • keyCode:只针对于keypress事件,获取键盘键数字 按下回车,13

  • event.pageX / event.pageY 获取到光标相对于页面包车型客车x坐标和y坐标

    • 设若未有jQuery,在IE浏览器中用event.x / event.y;在Firefox浏览器中用event.pageX / event.pageY。如若页面上有滚动条还要加上滚动条的宽度和可观
  • event.clientX:光标对于浏览器窗口的水准坐标 浏览器

  • event.clientY:光标对于浏览器窗口的垂直坐标

  • event.screenX:光标对于计算机荧屏的等级次序坐标 Computer显示屏

  • event.screenY:光标对于Computer显示屏的等级次序坐标

  • event.which 该办法的法力是在鼠标单击事件中拿走到鼠标的左、中、右键,在键盘事件中的按键1代表左键 2代表中键 3代表右键

事件冒泡

  • 怎样是冒泡

    • 在页面上得以有多少个事件,也足以四个因素影响同贰个因素

    • 从里到外

    • 嵌套关系

    • 相符事件

    • 其间的某一父类未有相像事件时,继续升高查找

  • 终止事件冒泡

    • 终止事件冒泡可以阻止事件中任何对象的事件管理函数被试行

    • 在jQuery中提供了stopPropagation()方法

  • 阻挡私下认可行为

    • 网页1十月素有谈得来的私下认可行为,比如:单击超链接后会跳转、单击提交后表单会付给,一时须求阻止成分的暗中同意行为

    • 在jQuery中提供了 preventDefault()方法来堵住成分的默许行为

  • 事件捕获

    • 事件捕获和冒泡是倒转的经过,事件捕获是从最顶上部分往下起来接触

    • 不要全部的浏览器都协助事件捕获,並且这么些毛病不恐怕通过JavaScript来修复。jQuery不接济事件捕获,如供给用事件捕获,要用原生的JavaScript

bind();绑定

  • 为相称成分绑定管理办法

  • 亟需给三个要素加多四个事件 ,事件奉行同时

  • one():只进行叁次

绑定特定事件类型方法

|分类|方法名称|表明|

页面载入 ready(fn) 当DOM载入就绪可以绑定一个要执行的函数
事件绑定 blind(type,[data],fn) 为每个匹配元素的特定事件绑定一个事件处理函数
事件绑定 unblind() 解除绑定
事件绑定 on(events,[,selector[,]data],handler) 在选择元素上绑定一个或者多个事件处理函数
事件绑定 off() 移除on绑定的事件
事件绑定 delegate(selector,eventType,handler) 为所有选择匹配元素附加一个或多个事件处理函数
事件绑定 undelegate() 移除绑定
事件动态 live(type,fn) 对动态生成的元素进行事件绑定
事件动态 die(type,fn) 移除live()绑定的事件
交互事件 hover() 鼠标移入移出
交互事件 toggle(fn1,fn2,[fn3],[fn4]) 每单击后依次调用函数
交互事件 blur(fn) 触发每一个匹配元素的blur事件
交互事件 change() 触发每一个匹配元素的change事件
交互事件 click() 触发每一个匹配元素的click事件
交互事件 focus() 触发每一个匹配元素的focus事件
交互事件 submit() 触发每一个匹配元素的submit事件
键盘事件 keydown() 触发每一个匹配元素的keydown事件
键盘事件 keypress() 触发每一个匹配元素的keypress事件
键盘事件 keyup() 触发每一个匹配元素的keyup事件
鼠标事件 mousedown(fn) 绑定一个处理函数
鼠标事件 mouseenter(fn) 绑定一个处理函数
键盘事件 mouseleave(fn) 绑定一个处理函数
键盘事件 mouseout(fn) 绑定一个处理函数
键盘事件 mouseover(fn) 绑定一个处理函数
窗口操作 resize(fn) 绑定一个处理函数
窗口操作 scroll(fn) 绑定一个处理函数

第八节 jQuery与Ajax

  • Ajax简介 :

    • Asynchronous Javascript And XML (异步的
      JavaScript和XML)

    • 它而不是生机勃勃种单风流浪漫的技艺,而是有机利用一文山会海交互作用式网页应用相关的技能所变成的结合体

  • Ajax优势与相差

    • Ajax优势

      • 优秀的顾客体验

        • 那是Ajax下最大的略微,能在不刷新整个页前面提下更新数据
      • 压实web程序的特性

        • 与守旧方式相比较,Ajax形式在性质上最大的界别在于传输数据的艺术,在守旧方式中,数据的交给时经过表单来贯彻的。Ajax方式只是因而XMLHttpRequest对象向服务器交由希望交给的数据,即按需发送
      • 缓慢解决服务器和带宽的负担

        • Ajax的干活原理也正是在客商和服务器之间加了叁当中间层,似顾客操作与服务器响应异步化。它在用户端创造Ajax引擎,把守旧方法下的片段服务器担负的干活转移到客商端,便于客商端能源来管理,缓解服务器和带宽的承当
    • Ajax的不足

      • 浏览器对XMLHttpRequest对象的支撑度相差

      • 毁掉浏览器前行、后退按键的正规机能

      • 对搜索引擎的支撑的欠缺

      • 支付和调节和测量检验工具的干涸

创立一个Ajax乞求

Ajax的主干是XMLHttpRequest对象,它是Ajax实现的要紧,发送异步央求、选用响应以致实行回调都以透过它来成功

创建ajax对象 var xhr = new XMLHttpRequest();

未雨计划粮草先行发送央浼

get / post

  • get

    • 传送的数码放在U福特ExplorerL前面

    • 华语编码 encodeULX570I( '' );

    • 缓存 在数码背后加上随机数只怕日期对象恐怕……

  • post

    • 传递的数额放在send()里面,而且必要求规定数量格式

    • 未曾缓安抚题

form表单中:

action:

  • method: (默认是 get)
  • get: 会在url里面以 name=value , 七个数据里面用 & 连接

post:

  • enctype: "application/x-www-form-urlencoded"

url

是或不是异步

  • 同步(false):阻塞

  • 异步(true):非阻塞

正式发送需要

ajax供给管理进度

xhr.onreadystatechange = function(){
    if (xhr.readyState == 4)
    {
        alert( xhr.responseText );
    }
};
  • onreadystatechange :当管理进程发生变化的时候实行上边的函数

  • readyState :ajax管理进度

    • 0:央浼未开端化(还并未有调用 open()卡塔 尔(英语:State of Qatar)。

    • 1:要求已经创立,然则还平素不发送(还未有曾调用 send()卡塔 尔(阿拉伯语:قطر‎。

    • 2:诉求已发送,正在管理中(平常今后能够从响应中拿到内容头卡塔 尔(英语:State of Qatar)。

    • 3:需要在管理中;日常响应中原来就有局地数据可用了,可是服务器还尚无实现响应的变迁。

    • 4:响应已做到;您能够得到并应用服务器的响应了。

  • responseText :央求服务器重返的数码存在该属性之中

  • status : http状态码

 

  • 案例:ajax封装案例
//ajax请求后台数据
var btn =  document.getElementsByTagName("input")[0];
btn.onclick = function(){

    ajax({//json格式
        type:"post",
        url:"post.php",
        data:"username=poetries&pwd=123456",
        asyn:true,
        success:function(data){
            document.write(data);
        }
    });
}
//封装ajax
function ajax(aJson){
    var ajx = null;
    var type = aJson.type || "get";
    var asyn = aJson.asyn || true;
    var url = aJson.url;        // url 接收 传输位置
    var success = aJson.success;// success 接收 传输完成后的回调函数
    var data = aJson.data || '';// data 接收需要附带传输的数据

    if(window.XMLHttpRequest){//兼容处理
        ajx = new XMLHttpRequest();//一般浏览器
    }else
    {
        ajx = new ActiveXObject("Microsoft.XMLHTTP");//IE6+
    }
    if (type == "get" && data)
    {
        url +="/?"+data+"&"+Math.random();
    }

    //初始化ajax请求
    ajx.open( type , url , asyn );
    //规定传输数据的格式
    ajx.setRequestHeader('content-type','application/x-www-form-urlencoded');
    //发送ajax请求(包括post数据的传输)
    type == "get" ?ajx.send():ajx.send(aJson.data);

    //处理请求
    ajx.onreadystatechange = function(aJson){

    if(ajx.readState == 4){

        if (ajx.status == 200 && ajx.status<300)//200是HTTP 请求成功的状态码
        {
            //请求成功处理数据
            success && success(ajx.responseText);
        }else{
            alert("请求出错"+ajx.status);

        }
    }

    };

jQuery中的Ajax [增加补充部分--来自锋利的jQuery]

jquery对Ajax操作进行了打包,在jquery中的$.ajax()方法归于最尾部的措施,第2层是load()、$.get()、$.post();第3层是$.getScript()、$.getJSON(),第2层使用频率极高

load()方法

  • load()方法是jquery中最简便和常用的ajax方法,能载入远程HTML代码并插入DOM中 结构为:load(url,[data],[callback])

    • 动用url参数内定选择符能够加载页面内的有些因素 load方法中url语法:url selector 注意:url和选拔器之间有二个空格
  • 传递形式

    • load()方法的传递方式基于参数data来机关钦赐,若无参数字传送递,则使用GET形式传递,反之,选择POST
  • 回调参数

    • 总得在加载成功后才实施的操作,该函数有三个参数 分别代表号召重回的源委、必要状态、XMLHttpRequest对象

    • 假设央求实现,回调函数就能够被触发

$("#testTest").load("test.html",function(responseText,textStatus,XMLHttpRequest){
    //respnoseText 请求返回的内容
    //textStatus 请求状态 :sucess、error、notmodified、timeout
    //XMLHttpRequest 
})
  • load方法参数
参数名称 类型 说明
url String 请求HTML页面的URL地址
data(可选) Object 发送至服务器的key / value数据
callback(可选) Function 请求完成时的回调函数,无论是请求成功还是失败

$.get()和$.post()方法

load()方法日常用来从web服务器上获取静态的数据文件。在品种中供给传递一些参数给服务器中的页面,那么能够运用$.get()和$.post()或$.ajax()方法

  • 注意:$.get()和$.post()方法是jquery中的全局函数

  • $.get()方法

    • $.get()方法运用GET格局来进展异步央求

    • 结构为:$.get(url,[data],callback,type)

      • 设若服务器重临的源委格式是xml文书档案,须求在劳动器端设置Content-Type类型 代码如下:header("Content-Type:text/xml:charset=utf-8") //php
  • $.get()方法参数剖析

参数 类型 说明
url String 请求HTML页的地址
data(可选) Object 发送至服务器的key/ value 数据会作为QueryString附加到请求URL中
callback(可选) Function 载入成功的回调函数(只有当Response的返回状态是success才调用该方法)
type(可选) String 服务器返回内容的格式,包括xml、html、script、json、text和_default

$.post()方法

它与$.get()方法的结会谈使用情势相通,犹如下不相同

  • GET央求会将参数跟张乃U哈弗L后开展传递,而POST伏乞则是用作Http新闻的实体内容发送给web服务器,在ajax央浼中,这种不一致对客商不可以知道
  • GET情势对传输数据有大大小小限定(平日无法超出2KB卡塔 尔(英语:State of Qatar),而利用POST情势传递的数据量要比GET情势大得多(理论不受约束卡塔 尔(阿拉伯语:قطر‎

  • GET格局呼吁的多少会被浏览器缓存起来,由此别的人能够从浏览器的历史纪录中读取那一个数据,如:账号、密码。在某种情况下,GET格局会带来惨烈的平安难点,而POST相对来讲能够制止那么些主题素材

  • GET和POST形式传递的数据在服务端的获得也分化等。在PHP中,GET格局用$_GET[]获取;POST方式用$_POST[]获取;两种方法都可用$_REQUEST[]来获取

总结

  • 运用load()、$.get()和$.post()方法成功了部分健康的Ajax程序,倘若还索要复杂的Ajax程序,就供给用到$.ajax()形式

$.ajax()方法

  • $.ajax()方法是jquery最尾部的Ajax实现,它的结构为$.ajax(options)

  • 该方法独有一个参数,但在此个目的里带有了$.ajax()情势所供给的呼吁设置甚至回调函等新闻,参数以key / value存在,全数参数都是可选的

  • $.ajax()方式常用参数解析

参数 类型 说明
url String (默认为当前页地址)发送请求的地址
type String 请求方式(POST或GET)默认为GET
timeout Number 设置请求超时时间(毫秒)
dataType String 预期服务器返回的类型。可用的类型如下

xml:返回XML文档,可用jquery处理
html:返回纯文本的HTML信息,包含的script标签也会在插入DOM时执行
script:返回纯文本的javascript代码。不会自动缓存结果,除非设置cache参数。注意:在远程请求时,所有的POST请求都将转为GET请求
json:返回JSON数据
jsonp:JSONP格式,使用jsonp形式调用函数时,例如:myurl?call back=?,jquery将自动替换后一个?为正确的函数名,以执行回调函数
text:返回纯文本字符串
beforeSend Function 发送请求前可以修改XMLHttpRequest对象的函数,例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次Ajax请求。XMLHttpRequest对象是唯一的参数
function(XMLHttpRequest){
         this;//调用本次Ajax请求时传递的options参数
}
complete Function 请求完成后的回调函数(请求成功或失败时都调用)
参数:XMLHttpRequest对象和一个描述成功请求类型的字符串
function(XMLHttpRequest,textStatus){
         this;//调用本次Ajax请求时传递的options参数
}
success Function 请求成功后调用的回调函数,有两个参数
(1)由服务器返回,并根据dataTyppe参数进行处理后的数据
(2)描述状态的字符串
function(data,textStatus){
         //data可能是xmlDoc、`jsonObj、html、text等<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this;//调用本次Ajax请求时传递的options`参数
}
error Function 请求失败时被调用的函数
global Boolean 默认为true。表示是否触发全局Ajax事件,设置为false将不会触发。AjaxStart或AjaxStop可用于控制各种Ajax事件

第九节 插件

  • 怎么是插件

    • 插件(Plugin)也称为jQuery的扩大。以jQuery宗旨代码为底子编写的相符一定专门的职业的应用程序。通过js文件的法子援用。
  • 插件分为哪几类

    • UI类、表单及验证类、输入类、特效类、Ajax类、滑动类、图形图像类、导航类、综合工具类、动漫类等等
  • 引进插件的步调

    • 引进jquery.js文件,並且在就此插件在此以前引入

    • 引进插件

    • 引进插件相关文件,举个例子四肢、中文包

  • 如何自定义插件

    • 插件格局分为3类:

      • 装进对象方法插件

      • 包装全局函数插件

      • 接纳器插件(相近于.find())

  • 自定义插件的正经八百(息灭种种插件的冲突和谬误,扩大成功率卡塔尔国

    • 命名:jquery.插件名.js

    • 具备的新章程附加在jquery.fn对象方面,全数新职能附加在jquery上

    • 享有的措施或插件必得用分号结尾,幸免出难题

    • 插件必得重临jQuery对象,便于链式连缀

    • 幸免插件内部使用$,假诺要运用,请传递jQuery($并不是总等于jQuery,其它其他js框架也或许使用$)

    • 插件中的this应该本着jQuery对象

    • 采取this.each()迭代成分

  • 自定义插件案例

    • 为了有助于客商创设插件,jQuery提供了 jQuery.extend() 和 jQuery.fn.extend()

    • jQuery.extend():创制工具函数大概是选用器

    • jQuery.fn.extend():成立jQuery对象命令 (fn也就是prototype的外号卡塔尔国

  • jQuery官方提供的插件开荒模板

;(function($){
    $.fn.plugin=function(options){
        var defaults = {
            //各种参数 各种属性
        }
        var options = $.extend(defaults,options);

        this.each(function(){
            //实现功能的代码
        });

        return this;
    }
})(jQuery);

自定义jQuery函数

(function($){
    $.extend({
        test: function(){
            alert("hello plugin");
        }
    })
    })(jQuery);

自定义jQuery命令

  • 形式1:
(function($){
    $.fn.extend({
        say : function(){
         alert("hello plugin");
    }
    })
})(jQuery);
  • 形式2:
(function($){
    $.fn.say = function(){
        alert("hello plugin");
    };

})(jQuery);

附录生机勃勃 jQuery种种版本新扩大的黄金年代部分常用的措施

  • jQuery1.3新扩张常用的法子
方法 说明
.closest() 从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素
die() 从元素中删除先前用live()方法绑定的所有的事件
live() 附加一个事件处理器到符合目前选择器的所有元素匹配
  • jQuery1.4新扩张常用的主意
方法 说明
.first() 获取集合中第一个元素
last() 获取集合中最后一个元素
has(selector) 保留包含特定后代的元素,去掉那些不含有指定后代的元素
detach() 从DOM中去掉所有匹配的元素。detach()和remov()一样,除了detach()保存了所有jquery数据和被移走的元素相关联。当需要移走一个元素,不久又将该元素插入DOM时,这种方法很有用
delegate() 为所有选择器匹配的元素附加一个处理一个或多个事件
undelegate() 为所有选择器匹配的元素删除一个处理一个或多个事件
  • jQuery1.6新扩展常用的艺术
方法 说明
prop(proptyName) 获取在匹配元素集合中的第一个元素的属性值
removeProp(proptyName,value) 为匹配的元素删除设置的属性
:focus 选择当前获取焦点的元素

附录二 jQuery品质优化

属性优化

  • 运用新型版的jQuery类库

  • 采用突出的选拔器

    • $(#id)

      • 运用id来定位DOM成分是最棒的章程,为了增长品质,提出从方今的ID成分在此在此之前往下搜索
    • $("p") , $("div") , $("input")

      • 标签选择器质量也不易,它是性质优化的第二精选。因为jQuery将一贯调用当地方法document.getElementsByTagName()来牢固DOM成分
    • $(".class")

      • 建议有选取性的应用
    • $("[attribute=value]")

      • 对那个应用属性定位DOM成分,当地JavaScript并从未直接完成。这种方法品质并非很卓绝。提出防止选择。
    • $(":hidden")

      • 和方面使用属性定位DOM格局接近,建议尽量不要使用
    • 静心的地点

      • 尽大概利用ID选拔器

      • 尽大概给选用器钦命上下文

  • 缓存对象

    • 假令你需求在此外函数中动用jQuery对象,你能够把她们缓存在全局处境中
  • 数组方式使用jQuery对象

    • 应用jQuery选用器获取的结果是三个jQuery对象。在品质方面,建议利用for或while循环来管理,并不是$.each()

事件代理

每二个JavaScript事件(如:click、mouseover卡塔尔都会冒泡到父级节点。当大家供给给三个成分调用同个函数时那点很有用。比方,大家要为三个表单绑定那样的一坐一起:点击td后,把背景颜色设置为粉红色

  • $("#myTable td").click(function(){$(this).css("background","red");});

  • 尽管有九二十一个td成分,在选择上述的秘诀时,绑定了玖20个事件,将带给品质影响

  • 代替这种多成分的风浪监听方法是,你只需向他们的父节点绑定二遍事件,然后经过event.target获取到点击的当前成分

    • $("#myTable td").click(function({$(e.target).css("background","red")});

    • e.target捕捉到触发的指标

  • 在jQuery1.7中提供了叁个新的方法on(),来支援你将所有事件监听封装到二个方便的不二秘诀中

    • $("#myTable td").on("click",'td',function(){$(this).css("background","red");});
  • 将您的代码转变成jQuery插件

    • 它亦可使你的代码有越来越好的重用性,何况可以有效的声援你团队代码

采取join()方法来拼接字符串

  • 只怕你前面运用+来拼接字符串,未来能够改了。它真的有利于品质优化,非常是长字符串管理的时候

客观运用HTML5和Data属性

  • HTML5的data属性能够帮助我们插入数据,特别是后端的数据沟通。jQuery的Data()方法有效利用HTML5的个性

    • 例如:<div id="dl" data-role="page" data-list-value="43" data-options='{"name:""John"}'>

    • 为了读取数据,你供给利用如下代码

      • $("#dl').data("role';//page)

      • $("#dl').data("lastValue';//43)

      • $("#dl').data("options';//john)

  • 不遗余力选取原生的JavaScript方法

  • 压缩JavaScript代码

    • 单向利用Gzip;另一面去除JavaScript文件之中的讲明、空白

附录三 常用的jQuery代码片段

附录四 多如牛毛CND加快服务

  • Bootstrap粤语网开源项目无需付费 CDN 服务

  • 百度静态财富公共库

  • 360网址卫士常用前端公共库CDN服务--已结束服务

  • 吐放静态文件 CDN

  • 微软CDN服务

  • 阿里云

  • 动画设计,百度开放云平台

  • jQuery CDN

  • jQuery cdn加速

  • 新浪CDN

附录五 jQuery的风流罗曼蒂克部分财富

速查手册

  • jQuery API 普通话文档--css88

  • jQuery-overapi

  • 在线桌面版API

  • 越来越多实际情况---生机勃勃份实用的API参照他事他说加以考察手册会集

jQuery插件

底工常用

  • 滚动固定在某些地方

  • jQuery图片滚动插件全能版

  • jQuery Wookmark Load 瀑布流布局

  • jQuery Jcrop 图像裁剪

  • jQuery kxbdMarquee 无缝滚动

  • jQuery lightBox 灯箱效果

  • Lazy Load Plugin for jQuery

越来越多插件-动效库收拾

  • 插件动作效果库
  • 常用组件

恢宏阅读

  • jQuery源码解析种类

参考

  • 锋利的jQuery
  • 本文md源文件

编辑:动画设计 本文来源:jQuery笔记总结

关键词: