jQuery笔记

极客jQuery笔记

认识jQuery

jQuery是一个JavaScript函数库，极大地简化了JavaScript编程。

jQuery库可以通过一行简单的标记被添加到网页中

jQuery库包含的功能：

HTML元素选取
HTML元素操作
CSS操作
HTML事件函数
JavaScript特效和动画
HTML DOM遍历和修改
AJAX
Utilities

引入jQuery

从jquery.com下载jQuery库
从CDN中载入jQuery，如从百度、新浪、谷歌、微软等加载jQuery

jQuery语法

jQuery语法是为HTML元素的选取编制的，可以对元素执行某些操作。

基础语法：$(selector).action()

美元符号定义jQuery
选择符selector“查询”和“查找”HTML元素
jQuery的action()执行对元素的操作

文档就绪函数：$(document).ready(function(){....});

jQuery选择器

选择器	实例	选取
#id	$("#lastname")	id="lastname"的元素
.class	$(".intro")	所有class="intro"的元素
element	$("p")	所有的`<p>`元素
.class.class	$(".intro.demo")	所有class="intro"且class="demo"的元素

更多选择器，同类只列一个例：

:first、:last、:even、:odd-------------->例：$("p:first")，第一个<p>元素

:eq(index)、:qt(no)、:lt(no)、not(selector)---->例：$("ui li:eq(3)")，无序列表中第4个元素（索引从0开始）

:contains(text)、:empty、:hidden、:visible--->例：$("div:empty")，<div>标签下无子节点的所有元素

[attribute]、[attribute=value]、[attribute != value]、[attribute $= value]

:input、:text、:password、:radio、:checkbox.......详参jQuery手册

jQuery事件

jQuery事件处理方法是jQuery中的核心函数。

事件处理程序指的是当HTML中发生某些事件时所调用的方法。术语由事件“触发”经常会被使用。

通常会把jQuery代码放到<head>部分的事件处理中。

由于jQuery是为处理HTML事件而特别设计的，徐遵循一下原则：

把所有jQuery代码置于事件处理函数中
把所有事件处理函数置于文档就绪事件处理器中
把jQuery代码置于单独 .js 文件中
如果存在名称冲突，则重命名jQuery库

常用事件方法

事件	描述
ready(fn)	文档就绪事件
blur()	触发、或将函数绑定到指定元素的blur事件
change()	触发、或将函数绑定到指定元素的change事件
click()	触发、或将函数绑定到指定元素的click事件
dbclick()	触发、或将函数绑定到指定元素的dbclick事件
focus()	触发、或将函数绑定到指定元素的focus事件
keydown()	触发、或将函数绑定到指定元素的keydown事件
mousedown()	触发、或将函数绑定到指定元素的mousedown事件
scroll()	触发、或将函数绑定到指定元素的scroll事件
select()	触发、或将函数绑定到指定元素的select事件
submit()	触发、或将函数绑定到指定元素的submit事件
error()	触发、或将函数绑定到指定元素的error事件
live()	为当前或未来的匹配元素添加一个或多个事件处理器
toggle()	绑定两个或多个事件处理函数，当发生轮流的click事件执行
trigger()	所有匹配元素的指定事件
on()	向匹配元素附加一个或更多事件处理器

绑定和解除绑定事件

bind()、unbind()--->$("btn").bind("click",fn)绑定一个事件，可绑定多个。截至到jQuery 3.0，bind()已被弃用

在jQuery 1.7之后，将事件处理程序附加到文档的方法被.on()，.off()。

事件的目标

target：指的是被触发时的目标，如点击带click事件的div，则target就是div

currentTarget：指的是现在的目标，因为事件冒泡，所以是body

事件的冒泡

event.stopPropagation()：防止事件冒泡DOM树，防止任何父处理程序被通知事件。（不向父级冒泡）

event.stopImmediatePropagation()：保持其余的处理程序不执行，并防止事件冒泡DOM树。（不向所有冒泡）

自定义事件（了解）

jQuery HTML

jQuery拥有可操作HTML元素和属性的强大方法

jQuery提供了一系列与DOM相关的方法，这使访问和操作元素、属性变得容易

jQuery获取/设置

text()--设置或返回所选元素的文本内容。且可带有回调函数，text(function(i,origText){.. return ...})
heml()--设置或返回所选元素的内容，包括HTML标签。可带回调函数，同上。
val()--设置或返回表单字段的值。可带回调函数，同上。i为被选元素列表中当前元素的下标，origText为旧值
attr(type)--获取属性值。可带回调函数，attr(type，function（i,origText）{return ....})

jQuery添加

append()--在被选元素的结尾插入内容。（不换行插入）
prepend()--在被选元素的开头插入内容
after()--在被选元素之后插入内容。（换行后插入）
before()--在被选元素之前插入内容

jQuery删除

remove()--删除被选元素（及其子元素）
empty()--从被选元素中删除子元素

jQuery CSS类

addClass()--向被选元素添加一个或多个类
removeClass()--从被选元素删除一个或多个类
toggleClass()--对被选元素进行添加/删除类的切换操作
css()--设置或返回样式属性
position()--返回第一个匹配元素相对于父元素的位置
offset()--返回第一个匹配元素相对与文档的位置

jQuery尺寸

width()--设置或返回元素的宽度（不包含内边距、边框或外边距）
height()--设置或返回元素的高度（不包括内边距、边框或外边距）
innerWidth()--返回元素的宽度（包含内边距，不包含边框和外边距）
innerHeight()--同上
outerWidth()--返回元素的高度（包括内边距、边框和），加true时，包括外边距
outerHeight()--同上

jQuery效果

显示、隐藏、淡入、淡出、滑动、动画

显示隐藏滑动

参数（按顺序）：speed可选，callback可选

hide()--隐藏元素
show()--显示隐藏元素
toggle()--隐藏/显示元素
slideUp()--向上滑动元素
slideDown()--向下滑动元素
slideToggle()--向上/向下切换滑动元素

淡入淡出

参数（按顺序）：speed可选-->规定效果的时长。callback可选--->是效果完成后执行的函数名称

fadeIn()------淡入
fadeOut()----淡出
fadeToggle()----淡入淡出切换，相当于开关
fadeTo()-----淡入或淡出到一定透明度。透明度：0~1。用法：fadeTo(speed,opacity,callback)

jQuery-AJAX

什么是AJAX？

AJAX=异步JavaScript和XML。（Asynchronous JavaScript And XML ）

AJAX是与服务器交换数据的艺术，它在不重新加载全部页面的情况下，实现了对部分网页的更新。

GET请求

语法：$(selector).get(url，data，success(response，status，xhr)，dataType)

参数：url必须，data可选，success可选（请求成功是允许函数），dataType可选（服务器响应数据类型）

额外参数：response-包含来自请求的结果数据，status-包含请求的状态，xhr-包含XMLHttpRequest对象

dataType:可能类型有，xml，html，text，script，json，jsonp

该函数是简写的AJAX函数，等价于：

 $.ajax({
      url:url,
      data:data,
      success:success,
      dataType:dataType
  });

POST请求

语法：$(selector).post(url，data，success(data，textStatus，jqXHR)，dataType)，等价于

 $.ajax({
    type: 'POST',
    url: url,
    data: data,
    success: success,
    dataType: dataType
  });

加载

语法：$(selector).load(URL,data,callback);

jQuery遍历

jQuery遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML元素。以某项选择开始，并沿着这个选择，直到抵达你期望的元素位置。

向上遍历DOM树

parent()--返回被选元素的直接父元素。该方法只会向上一级对DOM树进行遍历。
parents()--返回被选元素的所有祖先元素。它一路向上直到文档的根元素<html>。
parentsUntil()--返回介于两个给定元素之间的所有祖先元素。记忆：向上返回所有祖先元素直到...

向下遍历DOM树

children()--返回被选元素的所有直接元素。该方法指挥向下一级对DOM树进行遍历
find()--返回被选元素的后代元素，一路向下直到最后一代。

水平同胞遍历

siblings()--返回被选元素的所有同胞元素，但不包括自己。siblings：兄弟姐妹
next()--返回被选元素的下一个同胞元素。该方法只返回一个元素。
nextAll()--返回被选元素的所有跟随的同胞元素
nextUntil()--返回介于两个给定参数之间的所有跟随的同胞元素
prev()--在DOM树中向前遍历，下同，意思参上
prevAll()
prevUntil()

过滤

三个最基本的过滤方法是：first()，last() 和 eq()，它们允许基于在其一组元素中的位置来选一个特定的元素。

其他过滤方法，比如filter() 和 not() 允许选取匹配或不匹配的某项指定标准的元素。

first()--返回被选元素的首个元素。
last()--返回被选元素的最后一个元素
eq()--返回被选元素中带有指定索引的元素
filter()--该方法允许自定义一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回
not()--返回不匹配标准的所有元素