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在线提供的库文件（稳定可靠高速）

使用Google提供的API导入

写第一个JQUery案例

解释:在JQuery库中，$是JQuery的别名，$()等效于就jQuery()

讲解$(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()对比

推荐写法：$(function(){ });

jQuery有哪些功能(API)：

选择器

过滤器

事件

效果

ajax

简单的JQuery选择器：

JQuery基本选择器（ID选择器，标签选择器，类选择器，通配选择器和组选择器5种）

ID选择器：document.getElementById(id)与$("#id")对比(改变文字大小)---id唯一，返回单个元素

标签选择器：document.getElementsByTagName(tagName)与$("tagname")对比---多个标签，返回数组

类选择器:$(".className")--多个classname（改变背景图片）

通配选择器：document.getElementsByTagName("*")与$("*")对比---指范围内的所有标签元素

组选择器：$("seletor1,seletor2,seletor3")----无数量限制，用逗号分割

初步了解JQuery

JQuery是什么

javascript用来干什么的：

操作DOM对象

动态操作样式css

数据访问

控制响应事件等

jQuery作用一样，只是更加快速简洁

如何引用JQuery

$()讲解

$在JQuery库中，$是JQuery的别名，$()等效于就jQuery().

$()是JQuery方法,赞可看作是JQuery的选择器，与css选择器相似（可做对比）

var jQuery==$ =function(){} $()本质就是一个函数也就是 jQuery的核心函数

只要是jQuery的对象都这样变量加上一个符号$ 方便识别：var $div = $("#")

$()和document是相等的吗

代理对象$()

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代理对象的相互转换

检索范围的限制（$('字符串',element)）

总结：三种写法对比：

方式一：不推荐 搜索速度最慢

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

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

方式二：搜索速度最快 链式操作

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

方式三：也常用 速度第二快

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

$("li",$nav).css(); $nav 限制了搜索范围 速度快

总结： $() jquery核心方法的作用和使用场景

如果是一个字符串参数并且没有标签对（选择器） $(ul.nav")

如果是一个字符串参数并且有标签对（创建html标签）$("") --最终加到DOM树中 $xx.append("");

如果是传入一个element dom对象，直接包装为proxy对象返回 $(DOM对象)

如果第一个参数是字符串，第二个是element dom对象的话，那么就是在element这个dom对象里面寻找选择器对应的元素并且代理 $("li",$DOM对象)

代理模式以及代理内存结构

来回顾一下CSS常用的选择器

选择器引擎规则($('字符串'))

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元素。

过滤选择器

基本过滤选择

内容过滤选择器

可见过滤选择器

属性过滤选择器

子元素过滤选择器

:nth-child()选择器是很常用的子元素过滤选择器，如下

:nth-child(even)选择每个父元素下的索引值是偶数的元素

:nth-child(odd)选择每个父元素下的索引值是奇数的元素

:nth-child(2)选择每个父元素下的索引值是2的元素

:nth-child(3n)选择每个父元素下的索引值是3的倍数的元素 (n从1开始)

表单对象属性过滤选择器

表单选择器

特定位置选择器

: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()查找当前元素的兄弟

代理对象属性和样式操作

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()

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对象

插入节点

删除节点

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方法

这两个方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离

一张图总结以上的位置关系(项目中很常用-必须要弄清楚)

回顾上节

操作DOM

a.什么是DOM：Document Object Model缩写，文档对象模型

b.理解页面的树形结构

c.什么是节点：是DOM结构中最小单元，包括元素、属性、文本、文档等。

一、创建节点

1.创建元素

语法：document.createElement(name);

$(html)：根据传递的标记字符串，创建DOM对象

2.创建文本

3.设置属性

语法：e.setAttrbute(name,value)

二、插入内容

内部插入

向元素最后面插入节点：

append():向每个匹配的元素内部追加内容

appendTo():把所有匹配的元素追加到指定元素集合中，$("A").append("B") 等效 $("B").appendTo("A")

向元素最前面插入节点：

prepend（）：把每个匹配的元素内部前置内容

prependTo（）：把所有匹配的元素前置到另一个指定的元素集合中,$("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:表示由显示到隐藏

动画方法总结

事件对象的属性

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：光标对于电脑屏幕的水平坐标 电脑屏幕

event.screenY：光标对于电脑屏幕的水平坐标

event.which 该方法的作用是在鼠标单击事件中获取到鼠标的左、中、右键，在键盘事件中的按键 1代表左键 2代表中键 3代表右键

事件冒泡

什么是冒泡

在页面上可以有多个事件，也可以多个元素影响同一个元素

从里到外

嵌套关系

相同事件

其中的某一父类没有相同事件时,继续向上查找

停止事件冒泡

停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行

在jQuery中提供了stopPropagation()方法

阻止默认行为

网页中元素有自己的默认行为，例如：单击超链接后会跳转、单击提交后表单会提交，有时需要阻止元素的默认行为

在jQuery中提供了 preventDefault()方法来阻止元素的默认行为

事件捕获

事件捕获和冒泡是相反的过程，事件捕获是从最顶端往下开始触发

并非所有的浏览器都支持事件捕获，并且这个缺陷无法通过JavaScript来修复。jQuery不支持事件捕获，如需要用事件捕获，要用原生的JavaScript

bind();绑定

为匹配元素绑定处理方法

需要给一个元素添加多个事件 ，事件执行一样时候

one()：只执行一次

绑定特定事件类型方法：

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

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

传递的数据放在URL后面

中文编码 encodeURI( '' );

缓存 在数据后面加上随机数或者日期对象或者……

post

传递的数据放在send()里面，并且一定要规定数据格式

没有缓存问题

form表单中:

action:

method: (默认是 get)

get: 会在url里面以 name=value , 两个数据之间用 & 连接

post:

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

url

是否异步

同步(false)：阻塞

异步(true)：非阻塞

正式发送请求

ajax请求处理过程

onreadystatechange ：当处理过程发生变化的时候执行下面的函数

readyState ：ajax处理过程

0：请求未初始化（还没有调用 open()）。

1：请求已经建立，但是还没有发送（还没有调用 send()）。

2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。

3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。

4：响应已完成；您可以获取并使用服务器的响应了。

responseText ：请求服务器返回的数据存在该属性里面

status : http状态码

案例：ajax封装案例