Web前端-JQ

Posted 再来半包

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web前端-JQ相关的知识，希望对你有一定的参考价值。

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

以上是关于Web前端-JQ的主要内容，如果未能解决你的问题，请参考以下文章

Web前端-HTML&CSS笔记之06

2018-06-26 jq选择器

Web前端之样式继承与其他概念

在无向图中如何定义祖先和后代？

如何在线性“祖先-后代”关系中找到最后一个后代（与其他条件匹配）

Jquery：获取祖先（或后代）和自我