jQuery复习（一）-----jQuery基础十五问

1.jQuery是什么框架？

目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。

很多大公司都在使用 jQuery， 例如:

Google、Microsoft、IBM、Netflix等

jQuery是一个JavaScript函数库。

jQuery是一个轻量级的"写的少，做的多"的JavaScript库。

jQuery库包含以下功能：

• HTML 元素选取
• HTML 元素操作
• CSS 操作
• HTML 事件函数
• JavaScript 特效和动画
• HTML DOM 遍历和修改
• AJAX
• Utilities（工具函数）
• 提示： 除此之外，Jquery还提供了大量的插件。

2.jQuery框架的优点

1. 轻量级的 javascript 框架
   jQuery非常轻巧，采用UglifyJS（http://github.com/mishoo/UglifyJS）压缩后，大小保持在30KB左右。

2. 强大的选择器
   允许开发者使用从CSS1-CSS3几乎所有的选择器，以及jQuery独创的高级而复杂的选择权。

3. 出色的dom操作的封装
   jQuery封装了大量常用的DOM操作，使开发者在编写DOM操作相关程序的时候，更得心应手。

4. 可靠的事件处理机制

5. 完善的ajax
   jQuery将所有的Ajax操作封装到一个函数$.ajax()里，使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。

6. 不污染顶级变量

7. 出色的浏览器兼容性
   JQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。

8. 链式操作方式
   JQuery的链式操作可以把多个操作写在一行代码里，更加简洁。

9. 行为层与结构层的分离
   开发者可以使用jQuery选择器选中元素，然后直接给元素添加事件。使各个方面的开发人员各司其职，互不干涉。

10. 丰富的插件支持
    JQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前台页面上的组件都有对应插件，并且用JQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。

11. 隐式迭代
    当想找到带有“.myclass”类的全部元素，并将其隐藏，无需循环遍历每一个返回的元素。

12. 完善的文档
    jQuery官网
    jQuery API 中文文档
    jQuery 参考手册 - 文档操作-W3school
    jQuery 教程 -菜鸟教程

13. 开源
    开源，（Open Source）全称为开放源代码。开源就是要用户利用源代码在其基础上修改和学习的，但开源系统同样也有版权，同样也受到法律保护。
    开源程序–百度百科

3.jQuery的选择器

1、jQuery选择器的优势：
(1) 代码更简单
(2) 支持CSS1到CSS3选择器
(3) 完善的处理机制

2、jQuery选择器的分类
（1） 基本选择器
基本选择器是jQuery中使用最多的选择器，它又元素Id、class、元素名、多个元素符组成。

选择器	功能	返回值
#id	根据给定的ID匹配一个元素	单个元素
element	根据给定的元素名匹配所有元素	元素集合
.class	根据给定的类匹配元素	元素集合
*	匹配所有元素	元秦集合
selector1，selectorN	将每一个选择器匹配到的元素合并后一起返回	元秦集合

（2） 层次选择器
层次选择器通过DOM元素间的层次关系来获取元素，主要的层次关系包括父子、后代、相邻、兄弟关系。

选择器	功能	返回值
ancestor descendant	根据祖先元素匹配所有的后代元素	元秦集合
parent>child	根据父元素匹配所有的子元素	元秦集合
prev+next	匹配所有紧接在prev元素后的相邻元素	元秦集合
prev~siblings	匹配prev元素之后的所有兄弟元素	元秦集合

*说明 ancestor descendant与parent>child所选择的元素集合是不同的，前者的层次关系是祖先与后代，而后者是父子关系；另外，prev+next可以使用.next()代替，而prev~
siblings可以使用nextAll()代替。
（3） 过滤选择器

① 简单过滤选择器
过滤选择器是根据某类过滤规则进行元素的匹配，书写时都以(:)开头；简单过滤选择器是过滤选择器中使用最广泛的一种。

选择器	功能	返回值
first()或:first	获取第一个元素	单个元素
last()或:last	获取最后一个元素	单个元素
:not(selector)	获取除给定选择器外的所有元素	元素集合
:even	获取所有索引值为偶数的元素，索引号从0开始	元素集合
:odd	获取所有索引值为奇数的元素，索引号从0开始	元素集合
:eq(index)	获取指定素引值的元素，索引号从0开始	单个元素
:gt(index)	获取所有大于给定索引值的元素，索引号从0开始	元素集合
:t(index）	获取所有小于给定索引值的元素，索引号从0开始	元素集合
:header	获取所有标题类型的元素，如hl、h2…	元素集合
:animated	获取正在执行动画效果的元素	元素集合

② 内容过滤选择器
内容过滤选择器是根据元素中的文字内容或所包含的的子元素特征获取元素，其文字内容可以模糊或绝对匹配进行元素定位。

选择器	功能	返回值
:contains(text)	获取包含给定文本的元素	元素集合
:empty	获取所有不包含子元秦或者文本的空元素	元素集合
:has(selector)	获取含有选择器所匹配的元素的元素	元素集合
:parent	获取含有子元素或者文本的元素	元素集合

③ 可见性过滤选择器
可见性过滤选择器根据元素是否可见的特征来获取元素。

选择器	功能	返回值
:hidden	获取所有不可见元素，或者type为hidden的元素	元秦集合
:visible	获取所有的可见元素	元秦集合

④ 属性过滤选择器
属性过滤选择器根据元素的某个属性获取元素，如ID号或匹配属性值的内容，并以“[”号开始、以“]”号结束。

• 属性过滤选择器语法

选择器	功能	返回值
[attribute]	获取包含给定属性的元素	元素集合
[attribute=value]	获取等于给定的属性是某个特定值的元素	元素集合
[attributel!=value]	获取不等于给定的属性是某个特定值的元素	元素集合
[atributeˆ=value]	获取给定的属性是以某些值开始的元素	元素集合
[atribute$=value]	获取给定的属性是以某些值结尾的元素	元素集合
[atribute*=value]	获取给定的属性是以包含某些值的元素	元素集合
[selector1][selector2][selectorN]	获取满足多个条件的复合属性的元素	元素集合

⑤ 子元素过滤选择器
在页面开发过程中，常常遇到突出指定某行的需求。虽然使用基本过滤选择器:eq(index)可实现单个表格的显示，但不能满足大量数据和多个表格的选择需求。为了实现这样的功能，jQuery中可以通过子元素过滤选择器轻松获取所有父元素中指定的某个元素。

• 子元素过滤选择器语法

选择器	功能	返回值
:nth-child(eq|even|odd|index)	获取每个父元素下的特定位置元素，索引号从1开始	元素集合
:first-child	获取每个父元素下的第一个子元素	元素集合
:last-child	获取每个父元素下的最后一个子元素	元素集合
:only-child	获取每个父元素下的仅有一个子元素	元素集合

⑥ 表单对象属性过滤选择器
此选择器主要是对所选择的表单元素进行过滤，例如选择被选中的下拉框，多选框等元素。

选择器	功能	返回值
:enabled	选取所有可用元素	集合元素
:disabled	选取所有不可用元素	集合元素
:checked	选取所有被选中的元素（单选框、复选框）	集合元素
:selected	选取所有被选中的选项元素(下拉框)	集合元素

（4） 表单选择器
无论是提交还是传递数据，表单在页面中的作用是显而易见的。通过表单进行数据的提交或处理，在前端页面开发中占据重要地位。因此，为了使用户能更加方便地、高效地使用表单，在jQuery选择器中引入表单选择器，该选择器专为表单量身打造，通过它可以在页面中快速定位某表单对象。

• 表单选择器语法

选择器	功能	返回值
:input	获取所有input、textarea、select	元秦集合
：text	获取所有单行文本框	元秦集合
:password	获取所有密码框	元秦集合
:radio	获取所有单选按钮	元秦集合
:checkbox	获取所有复选框	元秦集合
:submit	获取所有提交按钮	元秦集合
reset	获取所有重置按钮	元秦集合
:image	获取所有图像域	元秦集合
:button	获取所有按钮	元秦集合
:file	获取所有文件域	元秦集合

4.jQuery的事件有哪些

jQuery 是为事件处理特别设计的。
而什么是事件？页面对不同访问者的响应叫做事件。
常见的DOM事件

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload
hover

jQuery 参考手册 - 事件 -W3school

5.jQuery的动画有哪些

1、显示隐藏:

1. show([speed],[easing],[fn]) 显示元素，speed为速度，easing切换效果(先快后慢)，fn回调函数，当全部隐藏后执行fn，它们都可以省略
2. hide([speed],[easing],[fn]) 隐藏元素
3. toggle([speed],[easing],[fn]) 切换显示/隐藏，隐藏调用时显示，显示调用时隐藏
   *一般情况下都不加参数

2、滑动:

1. slideDown([speed],[easing],[fn]) 下拉滑动
2. slideUp([speed],[easing],[fn]) 上拉滑动
3. slideToggle([speed],[easing],[fn]) 切换滑动

3、淡入淡出:

1. fadeIn([speed],[easing],[fn]) 淡入
2. fadeOut([speed],[easing],[fn]) 淡出
3. fadeToggle([speed],[easing],[fn]) 淡入淡出切换
4. fadeTo(speed,opacity,[easing],[fn]) 改变颜色透明度
   *opacity值为0~1，speed和opacity必须要写

4、自定义动画:

1. animate(json,[speed],[easing],[fn])
   *josn为一个对象，里面存储你要改变的样式，speed为执行时间,fn为回调函数一般用来判断动画是否执行完毕
2. 结束动画: step();
   *注意:一定要写在效果或者动画之前

Tips：动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行

5、事件切换:

1. hover(f1); 鼠标经过和离开都会触发f1
2. hover(f1,f2); 鼠标经过执行f1,离开执行f2

6.jQuery操作dom的函数方法有哪些

1、增加操作

append()-在被选元素的结尾插入内容

prepend()-在被选元素的开头插入内容

after()-在被选元素之后插入内容

before()-在被选元素之前插入内容

addClass()-向被选元素添加一个或多个类

2、删除操作

remove()-删除被选元素（及其子元素）

empty()-从被选元素中删除子元素

removeClass()-从被选元素删除一个或多个类

3、修改操作

text()-设置或返回所选元素的文本内容

html()-设置或返回所选元素的内容（包括HTML标记）

val()-设置或返回表单字段的值

css()-设置或返回样式属性

4、查询操作

parent()方法返回被选元素的直接父元素

children()方法返回被选元素的所有直接子元素

find()方法返回被选元素的后代元素，一路向下直到最后一个后代

siblings()方法返回被选元素的所有同胞元素。

first()、last()、eq()、not()和filter()

*除了以上的方法外，还有更多方法，工作中最常用的基本就是这些。

7.jQuery调用后台接口的函数有哪些

*jQuery通过Ajax实现请求后台接口数据

8.jQuery ajax请求方式有哪几种，分别是什么，不同点是什么

jquery实现Ajax请求的几种常见方式,结合实例形式总结分析了jQuery实现ajax请求常用的load()、post()、get()及Ajax()方法相关操作技巧。

1. 用jquery 的 load() 方法实现ajax请求。
   这里的 “mydiv” 是要加载内容的区域 /myrequest/url/param 是你要请求的服务端的 URL.。一旦得到结果，就会把服务端返回的内容显示在 mydiv 区域中。

$('#mydiv').load('/myrequest/url/param')

2. 用jquery 的 post() ,get() 方法。
   其实这也就是对应 http 请求中的 POST，GET，

$post('/myrequest/url/param',
     {
      text:"mytext",
      other:"other_param"
     },
      // 调用服务端成功后的回调函数
      function(){
       alert('succeccd');
     }
)

$get('/myrequest/url/param',
     {
      text:"mytext",
      other:"other_param"
     },
      // 调用服务端成功后的回调函数
      function(){
       alert('succeccd');
     }
)

3. 用jquery 的 Ajax() 方法，这个最常用且强大。
   *一般项目中最常见的请求方法了，因为他的功能最强大，能完成各种需求的ajax请求:
   *可以指定返回的类型: xml,html,或者json 格式
   *可以指定 beforeSend,error,success,complete 这些事件发生时的回调函数
   *可以用参数来指定ajax 请求过期的时间，比如服务端没有响应等.

$.ajax({
    async:false,//同步，异步
    url:"/addjoke", //请求的服务端地址
    data:{
       content:mycontent,
       title:joketitle,
       d:Math.random()
       },
    type:"post",
    dataType:"text",
    success:function(data){
      //成功之后的处理，返回的数据就是 data
    }
    error:function(){
      alert('error'); //错误的处理
    }
  });

9.jQuery获取设置删除元素属性的方法分别是什么

一、获取元素的属性
1、原生JS

.getAttribute("属性")

2、jquery

.attr("属性")

示例代码

/*jq获取属性*/
    var el = $('.test').attr('class');
/*js获取属性*/
    var el= document.getElementById('test').getAttribute('data');

二、设置元素的属性

1、原生JS

.setAttribute("属性","值")

2、jquery

 .attr("属性","值")

实例代码

/*jq设置属性*/
    var temp2= $('.test2').attr('class','test-spe');
/*js设置属性*/
    var temp2= document.getElementById('test2').setAttribute('data','self-name-2');

三、删除元素的属性

1、原生JS

 .removeAttribute 

2、jquery

 .removeAttr

示例代码

/*jq删除属性*/
      var temp = $('.test').removeAttr('data');
/*js删除属性*/
      var temp = document.getElementById('test').removeAttribute('data');

10.jQuery添加 删除 元素类名的方法分别是什么，判断元素类名是否存在的方法是什么

1、addClass(property/func),添加类名

property:表示需要添加的类名

func：回调函数，接收两个参数

第一个参数为下标值

第二个参数是当前的类名
2、removeClass()移除某些类名

3、hasClass()检查元素是否具有某个类名

Tips：写法案例及拓展
*切换类名的效果

$("div").on("click",function(){
				//$(".test").addClass("chang");
				var test = $("div").addClass(function(index,currentClass){
					console.log(index,currentClass);
					var newClass = currentClass=="test"?"chang":"test";
					$("div").removeClass(currentClass);
					return newClass;
				});
				console.log(test);
			})

$(".test").css({
				"background":"red",
				"opacity":"0.8"
			});
			
$(".test").css("background",function(){
				//方法一
					var arr=[1,2,3,4,5,6,7,8,9,"a","b","c","d","e","f"];
					var res = "";
					for (var i=0;i<6;i++){
						var ram = Math.floor(Math.random()*arr.length);
						res+=arr[ram];
					}
					console.log(res)
					return "#"+res;
					//方法二
						var res = "";
						for (var i=0;i<6;i++){
							var ram = Math.floor(Math.random()*16).toString(16);
							res+=ram;
						}
						console.log(res)
						return "#"+res;
			})

var i=100;
			setInterval(function(){
				i>300?i-=200:i++;
				$(".test").css({
					"width":function(){
						return i+"px";
					},
					"height":function(){
						return i+"px";
					}
				})
			},1000/60);

11.jQuery加载事件和js加载事件的区别是什么

onload事件与ready事件分别是原生js与jquery的加载函数

一、原生js加载函数写法：

window.onload=function(){            }

jquery加载函数写法：

$(document).ready(function(){

   });

二、二者的区别主要有：

１.加载模式不同：
原生js会等待页面dom元素加载完毕，并且页面图片也加载完毕才会执行；
jquery会等到dom元素都加载完毕，但不会等到图片也加载完毕就执行；

２.

通过原生js可以获取到dom元素的属性值；

通过jquery不可以获取到dom元素的属性值；

３.

原生js如果编写了多个加载函数，后面编写的会覆盖前面编写的；

jquery如果编写了多个加载函数，后面的不会覆盖前面的；

12.jQuery加载事件的写法有几种，分别写出来

jQuery加载事件的写法有3种
// 方法一：

$(function () {                 });

// 方法二：

$(document).ready(function () {      });

// 方法三：

window.onload = function () {        };

13.jQuery hover事件是哪两个事件的合成事件

hover() 方法的语法结构为：hover(enter, leave);

hover() 方法用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第1个函数（enter)；当光标移出这个元素时，会触发指定的第2个函数（leave)。
历史版本解析如下：
附：jQuery历史版本查看
1、版本v1.12.4

jQuery JavaScript Library v1.12.4

jQuery.fn.extend( {
	hover: function( fnOver, fnOut ) {
		return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
	}
} );

2、版本v2.2.4

jQuery JavaScript Library v2.2.4

jQuery.fn.extend( {
	hover: function( fnOver, fnOut ) {
		return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
	}
} );

3、版本v3.4.1

jQuery JavaScript Library v3.4.1

jQuery.fn.extend( {
	hover: function( fnOver, fnOut ) {
		return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
	}
} );

4、Migrate 版本

jQuery Migrate - v3.1.0 - 2019-06-08

jQuery.fn.extend( {

	bind: function( types, data, fn ) {
		migrateWarn( "jQuery.fn.bind() is deprecated" );
		return this.on( types, null, data, fn );
	},
	unbind: function( types, fn ) {
		migrateWarn( "jQuery.fn.unbind() is deprecated" );
		return this.off( types, null, fn );
	},
	delegate: function( selector, types, data, fn ) {
		migrateWarn( "jQuery.fn.delegate() is deprecated" );
		return this.on( types, selector, data, fn );
	},
	undelegate: function( selector, types, fn ) {
		migrateWarn( "jQuery.fn.undelegate() is deprecated" );
		return arguments.length === 1 ?
			this.off( selector, "**" ) :
			this.off( types, selector || "**", fn );
	},
	hover: function( fnOver, fnOut ) {
		migrateWarn( "jQuery.fn.hover() is deprecated" );
		return this.on( "mouseenter", fnOver ).on( "mouseleave", fnOut || fnOver );
	}
} );

14.jQuery阻止事件冒泡和阻止默认事件的方法有几种，分别是什么

3种
第一种：return false，
　在事件的处理中，可以阻止默认事件和冒泡事件。
　缺点：直接返回了函数，函数后面的语句没法执行了；
第二种： event.stopPropagation();
　在事件的处理中，可以阻止冒泡但是允许默认事件的发生。
第三种： event.preventDefault()
　在事件的处理中，可以阻止默认事件但是允许冒泡事件的发生。
　*例如a标签的跳转

15.jQuery循环有几种分别是什么

jQuery 遍历 - each() 方法
each() 方法规定为每个匹配元素规定运行的函数。

1、选择器+遍历

$('div').each(function (i){
   i就是索引值
   this 表示获取遍历每一个dom对象
});

2、选择器+遍历

$('div').each(function (index,domEle){
   index就是索引值
  domEle 表示获取遍历每一个dom对象
});

3、更适用的遍历方法
1）先获取某个集合对象
2）遍历集合对象的每一个元素

var d=$("div");
$.each(d,function (index,domEle){
  d是要遍历的集合
  index就是索引值
  domEle 表示获取遍历每一个dom对
  });