Web前端-JQ
jQuery
-
- jQuery的历史
- jQuery的特点
- jQuery基本语法
-
- jQuery选择器
- jQuery事件
- jQuery的HTML(DOM)操作
- jQuery遍历
-
- 遍历祖先
- 遍历后代
- 遍历同胞
- 遍历过滤
jQuery的历史
1.2005年8月，John Resig提议改进Prototype的“Behaviour”库
2.2006年1月John Resig等人创建了jQuery；8月，jQuery的第一个稳定版本，并且已经支持CSS选择符、事件处理和AJAX交互
3.2007年7月，jQuery 1.1.3版发布
4.2008年5月，jQuery 1.2.6版发布，这版主要是将Brandon Aaron开发的流行的Dimensions插件的功能移植到了核心库中，同时也修改了许多BUG，而且有不少的性能得到提
5.2009年1月，jQuery 1.3版发布，它使用了全新的选择符引擎Sizzle
6.2010年1月，也是jQuery的四周年生日，jQuery 1.4版发布
友情提示：
JQuery 版本 2 以上不支持 IE6，7，8 浏览器。
如果需要支持 IE6/7/8，那么请选择1.9
jQuery的特点
1**.快速获取文档元素**
jQuery的选择机制构建于Css的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。
2.提供漂亮的页面动态效果
jQuery中内置了一系列的动画效果，可以开发出非常漂亮的网页，许多网站都使用jQuery的内置的效果，比如淡入淡出、元素移除等动态特效。
3.创建AJAX无刷新网页
AJAX是异步的JavaScript和ML的简称，可以开发出非常灵敏无刷新的网页，特别是开发服务器端网页时，比如PHP网站，需要往返地与服务器通信，如果不使用AJAX，每次数据更新不得不重新刷新网页，而使用AJAX特效后，可以对页面进行局部刷新，提供动态的效果。
4.提供对JavaScript语言的增强
jQuery提供了对基本JavaScript结构的增强，比如元素迭代和数组处理等操作。
5.增强的事件处理
jQuery提供了各种页面事件，它可以避免程序员在HTML中添加太事件处理代码，最重要的是，它的事件处理器消除了各种浏览器兼容性问题。
6.更改网页内容
jQuery可以修改网页中的内容，比如更改网页的文本、插入或者翻转网页图像，jQuery简化了原本使用JavaScript代码需要处理的方式
jQuery基本语法
jQuery选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script src="jquery.js">script>
<script type="text/javascript">
function YC(){
alert("你要隐藏标签啦")
$('p').hide() //元素选择器
//$('#p1').hide() id选择器
//$('.p2').hide() class选择器
}
function XS(){
alert("你要显示标签啦")
$('p').show()
}
script>
head>
<body>
<p id="p1" class="p2">我是一个标签p>
<input type="button" value="隐藏" onclick="YC()" />
<input type="button" value="显示" onclick="XS()"/>
body>
html>
1）jquery是以$开头的
2）$(‘p’)参数是元素，则是元素选择器
3）$(’#p1’)参数是id名，则是id选择器
4）$(’.p2’)参数是class名，则是class选择器
5）jquery代码可以和js代码混合使用
jQuery事件
1、hide（）：隐藏HTML元素
$("#box").hide();
2、show（）：显示HTML元素
$("#box").show();
3、fadein（）：淡入div元素
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000); //毫秒
4、fadeOut（）：淡出div元素
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
5、fadeToggle（）方法：可以在fadein（）和fadeOut（）方法之间进行切换
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
//可以实现单击切换
6、fadeTo（）方法：允许渐变为给定的不透明度（值介于0与1之间）
$("#div1").fadeTo("slow",0.15,function(){
alert("这个是第三个参数的效果")
});//可以设置第三个参数，为匿名函数
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
7、slideDown（）方法：用于向下滑动
$("#panel").slideDown("slow",function(){
alert("滑动展开了div,要执行的第二个参数")
$("#flip").css("color","red")
});//实现滑动展开，并执行一个匿名函数
8、slideUp（）方法：用于向上滑动
$("#panel").slideUp("slow",function(){
$("#flip").css("color","blue")
});//向上滑动，并执行一个匿名函数
9、slideToggle（）方法可以在slideDown（）与slideUp（）方法之间进行切换
10、animate（）方法
语法：animate({params},speed,callback);
参数简介：{params}：是一个必选参数，定义了形成动画的CSS属性，类型为字典类型
speed：可选的参数其规定效果的时长也就是滑动的速度。它可以取值为：“slow”、“fast” 或毫秒
callback： 可选的参数是动画完成后所执行的函数名称
jQuery提供针对动画的队列功能（按照顺序进行加载）
11、stop（）方法用于停止动画或效果，再它们完成之前。
语法：stop(stopAll,goToEnd);
参数简介：
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
jQuery的HTML(DOM)操作
jQuery 中非常重要的部分，就是操作 DOM 的能力
1、获得内容—text（）、html（）以及val（）
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
2、添加元素
jQuery append() 方法在被选元素的末尾插入内容：文本内容，元素
jQuery prepend() 方法在被选元素的开头插入内容：文本内容，元素
3、删除元素
remove（）方法删除被选元素及其子元素，可以通过参数进行删除的过滤
empty（）方法删除被选元素
4、添加样式
addclass()方法向被选元素添加一个或多个样式/class
removeClass()方法是从选元素删除一个或多个类
toggleClass()方法是实现样式切换操作
5、获取元素样式的属性值
css()方法设置或返回被选元素的一个或多个样式属性
alert($("h1").css("color"));
以上代码是返回h1标签的color样式
$("p").css({
"background-color":"red","font-size":"200%"});
以上代码意思为，定位到p标签，将p标签的背景颜色改为red红色，字体大小扩大200%。
如果添加多个样式属性则需要用字典的方式进行写入参数
6、获取设置尺寸
height（）方法返回设置元素的高度(不包括内边距、边框或外边距)
返回元素的高度
$("#abc").height();
设置元素的高度
$("#abc").height("100px");
width（）方法返回设置元素的宽度(不包括内边距、边框或外边距)
返回元素的宽度
$("#abc").width()
设置元素的宽度
$("#abc").width("700px")
innerWidth()方法返回元素的宽度(包括内边距)
innerHeight()方法返回元素的高度(包括内边距)
jQuery遍历
遍历祖先
1、parent()方法返回被选元素的直接父元素。该方法只会向上一级对DOM树进行遍历。
$("span").parent().css({
"color":"red","border":"2px solid red"})
将span标签的父元素进行css样式设置
2、parents()方法返回被选元素的所有祖先元素，一路向上知道文档的根元素()
$("span").parents().css({
"color":"red","border":"2px solid red"})
将span标签的所有祖先元素进行css的样式改变
3、parentsUntil()方法返回介于两个给定元素之间的所有祖先元素。
$("span").parentsUntil("div").css({
"color":"red","border":"2px solid red"})
将span一直到div中的所有祖先元素进行样式改变
遍历后代
1、children()方法返回被选元素的所有直接子元素
$(".div").children().css({
"color":"red","border":"2px solid red"})})
对id名为div下的直接子元素进行样式的渲染
2、find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
$(".div").find("*").css({
"color":"red","border":"2px solid red"})})
参数为*则是对id名为div下的所有子元素进行样式的渲染
参数为指定的子元素，则只会对指定的子元素进行样式的渲染
遍历同胞
1、siblings()方法返回被选元素的所有同胞元素
$("h2").siblings().css({
"color":"red","border":"2px solid red"})
返回h2的所有同胞元素（不包括自己 h2标签）
2、next()方法返回被选元素的下一个同胞元素
$("h2").next().css({
"color":"red","border":"2px solid red"})
返回h2下一个同胞元素，进行样式的渲染
3、nextAll()方法返回被选元素的所有跟随的同胞元素
$("h2").nextAll().css({
"color":"red","border":"2px solid red"})
返回h2下面所有的同胞元素，进行样式的渲染
4、nextUntil()方法返回介于两个给定参数之间的所有跟随的同胞元素
$("h2").nextUntil("h6").css({
"color":"red","border":"2px solid red"})
返回h2到h6两个元素之间的所有同胞元素
遍历过滤
1、first()方法返回被选元素的首个元素
2、last()方法返回被选院所的最后一个元素
3、eq()方法返回被选元素中带有指定索引号的元素。：从匹配的一组中选中某一个进行显示
索引号从0开始，因此首个索引号是0而不是1
4、filter()方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回：匹配的选择显示不匹配的不显示
5、not()方法返回不匹配标准的所有元素。