Web前端-JQ

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()方法返回不匹配标准的所有元素。