jQuery基础
0.jQuery选择器
$('标签')//标签选择器
$('#id')//id选择器,需要用#选择
$('.class')//class选择器,需要用.选择
jQuery效果
0.隐藏/显示
$.hide()//隐藏
$.show()//显示
$.togggle//转换
语法:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);
注意:
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
1.淡入/淡出(fade)
$.fadeIn()//淡入已隐藏的元素。
$.fadeOut()//淡出已隐藏的元素。
$.fadeToggle()//切换
$.fadeTo()//允许渐变为给定的不透明度(值介于 0 与 1 之间)。
语法:
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);
注意:
必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。
可选的 callback 参数是该函数完成后所执行的函数名称。
2.滑动(slide)
slideDown()//向下滑动
slideUp()//向上滑动
slideToggle()//切换滑动
语法:
$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);
注意:
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
3.动画(animate)
animate() //方法用于创建自定义动画。
语法:
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。可以操作多个属性。
ps:当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
使用相对值 - 也可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=
使用预定义的值 - 您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle".
针对动画的队列功能 - 这意味着如果您在彼此之后编写多个 animate() 调用,jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用
stop() //用于停止动画或效果,在它们完成之前。适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。
语法:
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此,默认地,stop() 会清除在被选元素上指定的当前动画。
4. Callback
Callback 函数在当前操作 100% 完成之后执行。
$("button").click(function(){
$("p").hide("slow",function(){//此处得function为回调函数
alert("段落现在被隐藏了");
});
});
5.链(Chaining)
通过 jQuery,可以把动作/方法链接在一起。Chaining 允许我们在一条语句中运行多个 jQuery 方法(在相同的元素上)。
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
jQuery HTML
方法 | 描述 |
---|---|
addClass() | 向匹配的元素添加指定的类名。 |
after() | 在匹配的元素之后插入内容。 |
append() | 向匹配元素集合中的每个元素结尾插入由参数指定的内容。 |
appendTo() | 向目标结尾插入匹配元素集合中的每个元素。 |
attr() | 设置或返回匹配元素的属性和值。 |
before() | 在每个匹配的元素之前插入内容。 |
clone() | 创建匹配元素集合的副本。 |
detach() | 从 DOM 中移除匹配元素集合。 |
empty() | 删除匹配的元素集合中所有的子节点。 |
hasClass() | 检查匹配的元素是否拥有指定的类。 |
html() | 设置或返回匹配的元素集合中的 HTML 内容。 |
insertAfter() | 把匹配的元素插入到另一个指定的元素集合的后面。 |
insertBefore() | 把匹配的元素插入到另一个指定的元素集合的前面。 |
prepend() | 向匹配元素集合中的每个元素开头插入由参数指定的内容。 |
prependTo() | 向目标开头插入匹配元素集合中的每个元素。 |
remove() | 移除所有匹配的元素。 |
removeAttr() | 从所有匹配的元素中移除指定的属性。 |
removeClass() | 从所有匹配的元素中删除全部或者指定的类。 |
replaceAll() | 用匹配的元素替换所有匹配到的元素。 |
replaceWith() | 用新内容替换匹配的元素。 |
text() | 设置或返回匹配元素的内容。 |
toggleClass() | 从匹配的元素中添加或删除一个类。 |
unwrap() | 移除并替换指定元素的父元素。 |
val() | 设置或返回匹配元素的值。 |
wrap() | 把匹配的元素用指定的内容或元素包裹起来。 |
wrapAll() | 把所有匹配的元素用指定的内容或元素包裹起来。 |
wrapinner() | 将每一个匹配的元素的子内容用指定的内容或元素包裹起来。 |
0.jQuery捕获与设置
获得内容 - text()、html() 以及 val()
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容(包括 HTML 标记)
val() - 设置或返回表单字段的值
获取属性 - attr()、prop()
attr():
attr() 方法设置或返回被选元素的属性和值。
当该方法用于返回属性值,则返回第一个匹配元素的值。
当该方法用于设置属性值,则为匹配元素设置一个或多个属性/值对。
prop():
prop() 方法设置或返回被选元素的属性和值。
当该方法用于返回属性值时,则返回第一个匹配元素的值。
当该方法用于设置属性值时,则为匹配元素集合设置一个或多个属性/值对。
区别:
● $(’ ').attr()返回的是html对象
● $(’ ').prop()返回的是DOM对象
● prop()方法操作radio(checkbox)之类的控件,让其选中的时候,其控件选中的值也会随之改变。即既可以控制其选中,也能控制其取消选中;
类似于$(“…”).attr(“checked”);返回的是true或者false
如果有相应的属性,返回的是该属性,如果没有则返回空串
● attr()方法操作adio(checkbox)之类的控件,让其选中的时候,其控件选中的值不会随之改变。即只能控制其选中,不能控制其取消选中;
类似于$(“…”).attr(“checked”);返回的是’checked’或者undefined
如果有相应的属性,返回的是该属性,如果没有则返回undefined
attr和prop的使用场景:
1.添加属性名称该属性就会生效应该使用prop();
2.是有true,false两个属性使用prop();(如’checked’,‘selected’,'disabled’等)
3.其他则使用attr();
官方推荐使用:
同理,jQuery可以通过以上方法进行改变属性值
上面的三个 jQuery 方法:text()、html() 以及 val(),同样拥有回调函数。回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")";
});
});
jQuery 方法 attr()、prop(),也提供回调函数。回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。
1.添加元素
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
//$("p").append("追加文本");
2.删除元素
remove() - 删除被选元素(及其子元素)
empty() - 从被选元素中删除子元素
3.操作CSS
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
toggleClass():
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
});
</script>
<style type="text/css">
.blue
{
color:blue;
}
</style>
</head>
<body>
<h1 class="blue">标题 1</h1>
<h2 class="blue">标题 2</h2>
<p class="blue">这是一个段落。</p>
<p>这是另外一个段落。</p>
<br>
<button>切换 class</button>
</body>
</html>
4.CSS方法
返回指定的 CSS 属性的值:css("propertyname");
设置指定的 CSS 属性:css("propertyname","value");
设置多个 CSS 属性:css({"propertyname":"value","propertyname":"value",...});
CSS 属性 | 描述 |
---|---|
css() | 设置或返回匹配元素的样式属性。 |
height() | 设置或返回匹配元素的高度。 |
offset() | 返回第一个匹配元素相对于文档的位置。 |
offsetParent() | 返回最近的定位祖先元素。 |
position() | 返回第一个匹配元素相对于父元素的位置。 |
scrollLeft() | 设置或返回匹配元素相对滚动条左侧的偏移。 |
scrollTop() | 设置或返回匹配元素相对滚动条顶部的偏移。 |
width() | 设置或返回匹配元素的宽度。 |
5.尺寸
jQuery 提供多个处理尺寸的重要方法:
- width()
- height()
width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。
- innerWidth()
- innerHeight()
width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。
- outerWidth()
- outerHeight()
outerWidth() 方法返回元素的宽度(包括内边距和边框)。
outerHeight() 方法返回元素的高度(包括内边距和边框)。
jQuery 事件方法
事件方法触发器或添加一个函数到被选元素的事件处理程序。
下面的表格列出了所有用于处理事件的 jQuery 方法。
方法 | 描述 |
---|---|
bind() | 向元素添加事件处理程序 |
blur() | 添加/触发失去焦点事件 |
change() | 添加/触发 change 事件 |
click() | 添加/触发 click 事件 |
dblclick() | 添加/触发 double click 事件 |
delegate() | 向匹配元素的当前或未来的子元素添加处理程序 |
die() | 在版本 1.9 中被移除。移除所有通过 live() 方法添加的事件处理程序 |
error() | 在版本 1.8 中被废弃。添加/触发 error 事件 |
event.currentTarget) | 在事件冒泡阶段内的当前 DOM 元素 |
event.data | 包含当前执行的处理程序被绑定时传递到事件方法的可选数据 |
event.delegateTarget | 返回当前调用的 jQuery 事件处理程序所添加的元素 |
event.isDefaultPrevented() | 返回指定的 event 对象上是否调用了 event.preventDefault() |
event.isImmediatePropagationStopped() | 返回指定的 event 对象上是否调用了 event.stopImmediatePropagation() |
event.isPropagationStopped() | 返回指定的 event 对象上是否调用了 event.stopPropagation() |
event.namespace | 返回当事件被触发时指定的命名空间 |
event.pageX | 返回相对于文档左边缘的鼠标位置 |
event.pageY | 返回相对于文档上边缘的鼠标位置 |
event.preventDefault() | 阻止事件的默认行为 |
event.relatedTarget | 返回当鼠标移动时哪个元素进入或退出 |
event.result | 包含由被指定事件触发的事件处理程序返回的最后一个值 |
event.stopImmediatePropagation() | 阻止其他事件处理程序被调用 |
event.stopPropagation() | 阻止事件向上冒泡到 DOM 树,阻止任何父处理程序被事件通知 |
event.target | 返回哪个 DOM 元素触发事件 |
event.timeStamp | 返回从 1970 年 1 月 1 日到事件被触发时的毫秒数 |
event.type | 返回哪种事件类型被触发 |
event.which | 返回指定事件上哪个键盘键或鼠标按钮被按下 |
event.metaKey | 事件触发时 META 键是否被按下 |
focus() | 添加/触发 focus 事件 |
focusin() | 添加事件处理程序到 focusin 事件 |
focusout() | 添加事件处理程序到 focusout 事件 |
hover() | 添加两个事件处理程序到 hover 事件 |
keydown() | 添加/触发 keydown 事件 |
keypress() | 添加/触发 keypress 事件 |
keyup() | 添加/触发 keyup 事件 |
live() | 在版本 1.9 中被移除。添加一个或多个事件处理程序到当前或未来的被选元素 |
load() | 在版本 1.8 中被废弃。添加一个事件处理程序到 load 事件 |
mousedown() | 添加/触发 mousedown 事件 |
mouseenter() | 添加/触发 mouseenter 事件 |
mouseleave() | 添加/触发 mouseleave 事件 |
mousemove() | 添加/触发 mousemove 事件 |
mouseout() | 添加/触发 mouseout 事件 |
mouseover() | 添加/触发 mouseover 事件 |
mouseup() | 添加/触发 mouseup 事件 |
off() | 移除通过 on() 方法添加的事件处理程序 |
on() | 向元素添加事件处理程序 |
one() | 向被选元素添加一个或多个事件处理程序。该处理程序只能被每个元素触发一次 |
$.proxy() | 接受一个已有的函数,并返回一个带特定上下文的新的函数 |
ready() | 规定当 DOM 完全加载时要执行的函数 |
resize() | 添加/触发 resize 事件 |
scroll() | 添加/触发 scroll 事件 |
select() | 添加/触发 select 事件 |
submit() | 添加/触发 submit 事件 |
toggle() | 在版本 1.9 中被移除。添加 click 事件之间要切换的两个或多个函数 |
trigger() | 触发绑定到被选元素的所有事件 |
triggerHandler() | 触发绑定到被选元素的指定事件上的所有函数 |
unbind() | 从被选元素上移除添加的事件处理程序 |
undelegate() | 从现在或未来的被选元素上移除事件处理程序 |
unload() | 在版本 1.8 中被废弃。添加事件处理程序到 unload 事件 |
contextmenu() | 添加事件处理程序到 contextmenu 事件 |
$.holdReady() | 用于暂停或恢复.ready() 事件的执行 |
jQuery遍历
jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素。以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止。
jQuery 遍历函数包括了用于筛选、查找和串联元素的方法。
函数 | 描述 |
---|---|
.add() | 将元素添加到匹配元素的集合中。 |
.andSelf() | 把堆栈中之前的元素集添加到当前集合中。 |
.children() | 获得匹配元素集合中每个元素的所有子元素。 |
.closest() | 从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素。 |
.contents() | 获得匹配元素集合中每个元素的子元素,包括文本和注释节点。 |
.each() | 对 jQuery 对象进行迭代,为每个匹配元素执行函数。 |
.end() | 结束当前链中最近的一次筛选操作,并将匹配元素集合返回到前一次的状态。 |
.eq() | 将匹配元素集合缩减为位于指定索引的新元素。 |
.filter() | 将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。 |
.find() | 获得当前匹配元素集合中每个元素的后代,由选择器进行筛选。 |
.first() | 将匹配元素集合缩减为集合中的第一个元素。 |
.has() | 将匹配元素集合缩减为包含特定元素的后代的集合。 |
.is() | 根据选择器检查当前匹配元素集合,如果存在至少一个匹配元素,则返回 true。 |
.last() | 将匹配元素集合缩减为集合中的最后一个元素。 |
.map() | 把当前匹配集合中的每个元素传递给函数,产生包含返回值的新 jQuery 对象。 |
.next() | 获得匹配元素集合中每个元素紧邻的同辈元素。 |
.nextAll() | 获得匹配元素集合中每个元素之后的所有同辈元素,由选择器进行筛选(可选)。 |
.nextUntil() | 获得每个元素之后所有的同辈元素,直到遇到匹配选择器的元素为止。 |
.not() | 从匹配元素集合中删除元素。 |
.offsetParent() | 获得用于定位的第一个父元素。 |
.parent() | 获得当前匹配元素集合中每个元素的父元素,由选择器筛选(可选)。 |
.parents() | 获得当前匹配元素集合中每个元素的祖先元素,由选择器筛选(可选)。 |
.parentsUntil() | 获得当前匹配元素集合中每个元素的祖先元素,直到遇到匹配选择器的元素为止。 |
.prev() | 获得匹配元素集合中每个元素紧邻的前一个同辈元素,由选择器筛选(可选)。 |
.prevAll() | 获得匹配元素集合中每个元素之前的所有同辈元素,由选择器进行筛选(可选)。 |
.prevUntil() | 获得每个元素之前所有的同辈元素,直到遇到匹配选择器的元素为止。 |
.siblings() | 获得匹配元素集合中所有元素的同辈元素,由选择器筛选(可选)。 |
.slice() | 将匹配元素集合缩减为指定范围的子集。 |
1.jQuery祖先(parent)
parent()//返回被选元素的直接父元素。
parents()//返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。
parentsUntil()//返回介于两个给定元素之间的所有祖先元素。
返回介于 <span> 与 <div> 元素之间的所有祖先元素:
$(document).ready(function(){
$("span").parentsUntil("div");
});
2.jQuery后代(children)
children()//返回被选元素的所有直接子元素
find()//返回被选元素的后代元素,一路向下直到最后一个后代
3.jQuery同胞(siblings)
siblings()//返回被选元素的所有同胞元素
next()//返回被选元素的下一个同胞元素。该方法只返回一个元素。
nextAll()//返回被选元素的所有跟随的同胞元素
nextUntil()//返回介于两个给定参数之间的所有跟随的同胞元素
prev()
prevAll()
prevUntil()
//prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已:它们返回的是前面的同胞元素(在 DOM 树中沿着同胞之前元素遍历,而不是之后元素遍历)。
4.jQuery过滤
first(), last() 和 eq(),它们允许您基于其在一组元素中的位置来选择一个特定的元素。
其他过滤方法,比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素
first()//返回被选元素的首个元素。
last()//返回被选元素的最后一个元素。
eq()//法返回被选元素中带有指定索引号的元素。索引号从 0 开始,因此首个元素的索引号是 0 而不是 1。
filter() //允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。
not() //返回不匹配标准的所有元素。
提示:not() 方法与 filter() 相反。
jQuery AJAX
load() 方法从服务器加载数据,并把返回的数据放入被选元素中。
语法:
$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。
HTTP 请求:GET vs. POST
两种在客户端和服务器端进行请求-响应的常用方法是:GET 和 POST。
- GET - 从指定的资源请求数据
- POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得(取回)数据。注释:GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过,POST 方法不会缓存数据,并且常用于连同请求一起发送数据。
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
语法:
$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。
$.post() 方法通过 HTTP POST 请求向服务器提交数据。
语法:
$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。