2021-07-07

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 元素组或单个元素进行操作

我是一个标签

1
1）jquery是以$开头的

2）$(‘p’)参数是元素，则是元素选择器

3）$(’#p1’)参数是id名，则是id选择器

4）$(’.p2’)参数是class名，则是class选择器
5）jquery代码可以和js代码混合使用
jQuery事件
1、hide（）：隐藏HTML元素
$("#box").hide();
1
2、show（）：显示HTML元素
$("#box").show();
1
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(){
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲flip").css("col…(“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两个元素之间的所有同胞元素