jQuery框架简单介绍

jQuery框架介绍

1. jQuery框架与javaScript之间的有什么关系？

  javaSript是一门编程语言，jQuery是javaSript中的一个库，jquery是JavaScript中的一个子集。通过使用jQuery框架中的一些接口，我们可以更方便的实现一些网页操作。比起直接使用原生接口，jQuery框架优点多多。

2. jQuery与原生javaSript对比，有什么优点？

原生js代码繁琐，代码量大，实现动画复杂。

3. jQuery与javaScript之间的区别是什么？

• 编写个数不同：window.onload()函数只能在JavaScript中使用一次，但是$(document).ready()可以出现多次。（这两个函数都是用来表示等页面加载完成后，使用JavaScript脚本命令）
• jquery有简化写法：$(document).ready()可以简化写为$(function(){})
• 执行时间不同：window.onload()必须等到页面加载完成后才能执行，$(document).ready()在DOM树构建完成后就可以执行

文档加载步骤如下：
1. 解析HTML结构
2. 加载外部脚本和样式表文件
3. 解析并执行脚本代码
4. DOM树构建完成
5. 加载图片等外部文件
6. 页面加载完成

3.1 为什么要使用入口函数？

使用window.onload或者是$(document).ready()可以使我们的代码放在html任意位置都会等待页面加载完成后再被调用。如果不使用该函数，代码块正好放在head标签中，那么页面还没有加载完，就会调用js脚本。

4. 如何引入jquery文件？

我们从jquery官网下载好jquery文件，然后通过外部样式引入这个库文件就可以在js脚本中使用。
示例：<script src="jquery-3.3.1.js"></script>

5. jquery中的选择器

jquery选择器的语法和css选择器语法一样

5.1 基本选择器

类型	示例	作用
id选择器	$('#wrapper')	选择指定id的标签
类选择器	$('.box')	选择class的标签
标签选择器	$('ul')	选择指定的标签
通配符选择器	$('*')	选择所有标签

5.2 层级选择器

类型	示例	作用
后代选择器	$('div p')	选择div下所有p
子代选择器	$('div>p')	选择div的儿子中的p
毗邻选择器	$('div+p')	选择div同级后面紧贴着的p
兄弟选择器	$('div~p')	选择div同级后面所有的p

5.3 基本过滤选择器

类型	示例	作用
:first	$('li:first')	获取第一个li标签
:last	$('li:last')	获取最后一个li标签
:odd	$('li:odd')	获取索引为奇数的li标签
even	$('li:even')	获取索引为偶数的li标签
eq(index)	$('li:eq(1))	获取索引为index的li标签
gt(index)	$('li:gt(1))	获取索引大于index的li标签
lt(index)	$('li:lt(1))	获取索引小于index的li标签

5.4 属性选择器

类型	示例	作用
标签[属性名]	$('p[class]')	获取所有含该属性的元素
标签[属性名=值]	$('p[class=what]')	获取特定属性是某个特定值的元素
标签[属性名^=值]	$('p[class^=what]')	获取特定属性是以某个特定值开头
标签[属性名!=值]	$('p[class!=what]')	获取特定属性不是某个特定值、或者不包含该属性的元素
标签[属性名$=值]	$('p[class$=name]')	获取特定属性以特定值结尾的元素
标签[属性名*=值]	$('p[class *='name']')	获取特定属性中包含特定值的元素

5.5 筛选选择器

类型	示例	作用
.eq(index)	$('li').eq(1)	获取索引为1的li元素
.first()	$('li').first()	获取第一个li元素
.last()	$('li').last()	获取最后一个li元素
.parent()	$('span').parent('.p1')	选择父亲元素
.siblings()	$('.list').sibling('li')	查找所有兄弟元素
.find()	$('div').find('button')	查找所有后代元素
.hasClass()	$('div').hasClass('button')	是否含有某一标签,返回布尔值(true/false)
.children()	$('div').children('button')	获取匹配元素的子元素集合
.prev()	$('div').prev('button')	获取匹配元素同级的前一个元素
.prevAll()	$('button').prevAll('div')	查找当前元素之前的所有同辈元素

6. jQuery和DOM对象转换

6.1 DOM对象转jQuery对象

直接使用$(DOM对象)
示例:

var oDiv = document.getElementsByTag('div');
$(oDiv) //即转换成jQuery对象

6.2 jQuery对象转换为DOM对象

示例:
$('div')[0]或者$('div').get(0)即可将jquery对象转换为DOM对象

7. jQuery效果函数

7.1 显示隐藏动画

7.11 show,hide,toggle

函数名	作用
show(speed,callback)	显示标签(向下,向右增大)
hide(speed,callback)	隐藏标签(向上,向左减小)
toggle(speed,callback)	显示隐藏开关，如果标签可见,则隐藏标签；反之标签不可见,则显示标签

注意：speed参数是控制标签显示/隐藏的速度，可选slow,normal,fast或者直接输入以毫秒为单位的数字；callback是回调函数，执行完动画，调用的函数。toggle只能控制标签的显隐,不能使用回调函数。

7.12 slideDown,slideUp,slideToggle

函数名	作用
slideDown(speed,callback)	显示标签(向下增大)
slideUp(speed,callback)	隐藏标签(向上减小)
slideToggle(speed,callback)	显示隐藏开关，如果标签可见,则隐藏标签；反之标签不可见,则显示标签

7.13 fadeIn,fadeOut,fadeTo,fadeToggle

函数名	作用
fadeIn(speed,callback)	显示标签(淡入)
fadeOut(speed,callback)	隐藏标签(淡出)
fadeTo(speed,opacity,callback)	调整到指定不透明度
fadeToggle(speed,callback)	开关控制淡入淡出

7.14 这几组有什么区别呢？

首先,三组都是通过控件的display属性来达到控制显隐的效果。show,slide,这两组都是通过控制标签的width和height来达到动画效果，fadeIn通过控制opacity不透明度来达到动画的效果。

7.15 其他函数

函数名	作用
click(function)	添加标签单击事件
hove(function1,function2)	添加鼠标悬浮标签事件，function1代表鼠标悬浮执行时间，function2代表鼠标离开标签事件。等同于mouseenter和mouseleave合集
mouseover(function)	鼠标移上去时候
mouseout(function)	鼠标移出时
mouseenter(function)	鼠标移入时
mouseleave(function)	鼠标移除时

7.2 创建自定义动画animate函数

animate(params,speed,callback)

用于创建自定义动画函数
示例:$('#he').animate({left:'300px'})
注意：params:动画终值属性集合(用大括号括起来),speed动画速度，callback回调函数。

stop(clearQueue,gotoEnd)

停止在指定元素上正在运行的动画
示例:$('#he').stop();
注意:clearQueue为true清空队列，立即结束动画;
gotoEnd让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等

delay(speed)

用来做延迟操作,传入毫秒数
示例:$('#he').animate({left:'800px'},2000).delay(1000).animate({top:'300px'});

注意:这些函数都可以通过点.连接起来，按顺序调用，这种调用方式称之为链式调用

8. jQuery属性操作

jQuery属性操作模块分为四部分:html属性操作、DOM属性操作、类样式操作、值属性操作。

8.1 html属性操作

attr()

可以获取或修改html标签属性

获取值
传入一个需要获取的属性参数
示例:$('div').attr('id')

设置值
传入两个参数设置一个值，或者设置多个值将多个键值对由大括号括起来当一个参数传入
示例一:$('#box').attr('class','wrapper');
示例二：$('#box').attr({'class':'123','name':'aaa'});
注意：在示例二中，大括号括起来的键值对，键可以不用引号引起来，值必须有引号引起来

removeAttr()

删除匹配元素一个指定的属性
示例:$('p').removeAttr('id');

8.2 dom属性操作

prop()

可以获取或修改DOM属性，用法等同于attr()

获取值
示例:$('p').prop('name');

设置值
示例一:$('p').prop('name',2);
示例二:$('p').prop({'name':2})

removeProp

示例:$('p').removeProp('name')

8.3 类样式操作

addClass()

为每个元素添加指定的类名,若要添加多个类名用空格隔开
示例一:$('#he').addClass('wrapper');
示例二:$('#he').addClass('wrapper1 box2')

removeClass()

从所匹配的元素中删除全部或指定的类
示例一:$('#he').removeClass('wrapper1') 删除wrapper1
示例二:$('#he').removeClass(); 删除全部类

toggleClass()

开关,若该标签有这个类就删除，没有则添加这个类
示例一:$('#he').toggleClass('changeColor');

attr()和使ddClass()加入一个类属性有什么区别?

使用attr()设置类时,不能追加类属性，只会覆盖掉原来的类属性；使用addClass()会在不改变原来类的基础上添加一个类，删除类同理;

8.4 值操作

html()

获取或设置选中标签的内容,设置值时将会被解析为HTML语言

获取值
示例:$('p').html()

设置值
示例:$('p').html('<a href="#">what</a> fk?')

text()

获取或设置元素中包括文本的内容，设置时仅会被解析为纯文本

获取值
示例:$('p').text()

设置值
示例:$('p').text('what fk?')

html()和text()有什么区别？

在获取值时,html()会将内容中标签读出来，而text()会忽视标签，读取纯文本;
例如:p标签中文本为<span>12</span>34，html()读出来的效果是<span>12</span>34,而text()读出来的效果是1234
在设置值时,html()会将字符串解析为html语言,然后显示出来,而text()仅仅将其解析为纯文本显示;
例如:同样设置'<a href="#">what</a> fk?'这一段内容,html()显示出来的是带有超链接的what fk,而text()显示出来的是'<a href="#">what</a> fk?'
也就是说:值中含有标签时，text()不会渲染出标签元素,只会将标签代码原封不动的显示出来

val()

见关于input的value用法

9. jQuery文档操作

9.1 插入操作

函数名	使用方法	示例	作用
append()	父元素.append(子元素)	$('div').append('<a href="#">百度</a>')	在父元素里面追加子元素标签
appendTo()	子元素.appendTo(父元素)	$('<a href="#">新浪</a>').appendTo($('div'))	在父元素里面追加子元素标签
prepend()	父元素.prepend(子元素)	$('ul').prepend("<li>我是谁？</li>")	将子元素标签追加到父元素内的第一个位置
prependTo()	父元素.prependTo(父元素)	$('p').prependTo($('ul'));	将子元素标签追加到父元素内的第一个位置
after()	父元素.after(子元素)	$('p').after($('ul'));	在父元素的后面插入子元素
insertAfter()	父元素.insertAfter(父元素)	$('p').insertAfter($('ul'));	在父元素的后面插入子元素
before()	父元素.before(子元素)	$('p').before($('ul'));	在父元素的前面插入子元素
insertBefore()	父元素.insertBefore(父元素)	$('p').insertBefore($('ul'));	在父元素的前面插入子元素

注意:
1. 他是jQuery方法,所有调用时务必保证转换为jquery对象$()
2. 父元素是jquery对象，子元素可以使字符串,DOM对象,jquery元素
3. append()和appendTo()方法就父子元素位置不同，功能相同。
4. 如果子元素是页面上某个标签,则相当于移动操作

9.2 复制操作

clone()
克隆匹配这些DOM元素，并选中这些克隆的副本。
可以传入一个布尔值,为true时，将该标签的事件也克隆（默认不克隆）
示例:$('#btn3').clone(true).insertAfter($('p'));

9.3 替换操作

replaceWith()
选择器.repalceWith(内容)
示例：$('#btn').replaceWith("<a href='#'>我是替换后的标签</a>>");
注意:内容替换选择器，内容可以是DOM,jquery,字符串。

replaceAll()
内容.replaceAll(选择器)
示例:$('p').replaceAll($('ul'));

注意:这两个函数区别只是内容和选择器位置不同

9.3删除操作

empty() 清空
清空被选元素的内容
示例：$('ul').empty() 会清空ul中所有内容（相当于html(”)）

remove() 删除
会删除被选元素，事件也没了
示例：$('ul').remove() 会删除ul标签和标签的内容

detach() 删除并返回
会删除被选元素，但是会返回删除的元素，事件会保留
示例：var $btn = $('button').detach() 将页面上的button全部删除，返回给变量btn

10. jquery中的css

函数名	功能
position()	获取匹配元素相对于父元素的偏移位置,返回一个对象,对象中有left，top两个属性
offset()	获取匹配元素相对于浏览器左上角偏移位置,同样有left,top两个属性
scrollTop()	获取元素相对于滚动条顶部的偏移像素值
scrollLeft()	获取元素相对于滚动条左侧的偏移像素值
innerHeight()	获取内部区域高度(内容高+padding)
innerWidth()	获取内部区域宽(内容宽+padding)
outHeight()	获取外部区域高(内容高+padding+border)
outWidth()	获取外部区域宽(内容宽+padding+border)
width()	获取或设置内容宽
height()	获取或这是内容高

scroll()

当元素滚动时,调用的方法
示例:

$(function () {
    $(document).scroll(function () {
            console.log($(document).scrollTop());
            console.log($(document).scrollLeft());
    });

获取浏览器滚动时的top和left
在DOM中用onScroll(),在jquery中用scroll()方法监听滚动条。

11.jquery事件

HTML中与JavaScript交互是通过事件来交互的。

11.1 什么是事件流？

事件流就是从页面中接受事件的顺序

DOM事件流

DOM2级事件流包括三个阶段
1. 事件捕获阶段
2. 处于目标阶段
3. 事件冒泡阶段

addEventListener()
DOM事件监听器
参数一事件名，参数二function，参数三bool值（捕获阶段为true,冒泡阶段为false）

document,document.documentElement,document.document.body关系

document代表整个html
document.documentElement代表<html>标签
document.document.body代表<body>标签

事件流过程分析

例如一个id为btn的按钮设置click事件，document对象首先接受到click事件，然后按照dom树依次传到btn。而事件冒泡过程是由具体元素接受，向上传到document。

11.2 事件属性

属性	作用
e.type	获取事件的类型
e.target	获取事件发生的DOM对象
e.pageX和e.pageY	获取光标相对页面的x的坐标和y的坐标
e.which	获取事件的左中右键，键盘事件获取键盘按键

示例:

$("#btn").click(function (e) {
    console.log("type:"+e.type);
    console.log("target:"+ e.target);
    console.log("page.x:"+ e.pageX+"  page.y:"+ e.pageY);
    console.log("which:"+ e.which);
});

显示结果：

type:click
target:[object HTMLButtonElement]
page.x:42  page.y:233
which:1

11.3 事件冒泡

jquery不支持事件捕获
一般来说父子盒子都设置一个click事件,单击子盒子事件,则父子两个盒子事件一起触发。

阻止冒泡stopPropagation()

原因:子盒子处于click冒泡阶段后,父盒子随之也处于click冒泡阶段,由内而外,最终传到DOM.
解决办法:阻止事件冒泡。阻止子盒子事件冒泡，父盒子就接受不到冒泡,即只触发子盒子事件。
示例:

$('#box #p1').click(function (e) {
    e.stopPropagation();
    console.log('我是p标签');
});
$('#box').click(function () {
    console.log('我是div标签');
})

阻止默认事件preventDefault()

像超链接a标签，都有默认click事件，form表单的submit有默认submit事件。
示例:

<--标签内容-->
<a href="https://www.baidu.com">我是一个超链接</a>   
//jquery内容  
$('a').click(function (e) {
    e.preventDefault();
})

即便我们给a标签设置了链接，由于我们在click事件中设置了阻止默认事件，导致a标签不能跳转。

综上，还有另一种方法既可以阻止默认事件，也可以阻止冒泡
示例:

$('#p1 a').click(function (e) {
    return false;
})

通过return false即可

11.4 jquery常用事件

jquery事件绑定bind()

将元素和事件绑定时，有bind(),on()两种方法

bind()
示例一:$('#box').bind('click',function(){})

绑定多个事件时，事件之间用空格隔开
示例二:

$(".box").bind('click mouseleave', function () {
    alert("已经绑定了好几个事件")
})

绑定多个不同的时间时，可以使用键值对的方式
示例三:

$(".box").bind({'click':sayhi,'mouseout':sayhello});
function sayhi(){
    alert('hi');
}
function sayhello(){
    alert('hello');
}

绑定自定义事件

示例:

$('.box').bind('myHover', function (e) {
     alert('看看这就执行了');
});
 $('.box').trigger('myHover');

注意:
1. 自定义事件不能自动触发，只有使用trigger()方法时才能触发。
2. trigger()方法第二个参数是一个参数数组,传入参数后,自定义事件方法就必须要用相应数目的形参来接受
3. 绑定事件仅对该行代码前面的元素有效，后面新加入的元素不会触发该绑定事件。举一个例子，若在代码后父盒子中添加一个子盒子，父盒子事件对子盒子无效。也就是说动态生成的元素不能直接添加对象里面的时间也不能发生。

事件代理on()

on()
既然子盒子做不了，将事件交给父盒子取做。
语法:父标签.on(“事件名”,”需要绑定的选择器”,fn回调函数);
示例:

$('ul').on("click","li", function () {
            console.log($(this).index());
});
$("ul").append("<li>我是动态创建的元素</li>")

移除事件unbind()

unbind()传入需要移除的事件名,不传入参数时，移除所有事件
示例:$("#box").unbind("mouseout");
只能移除bind()绑定的对象

合成事件

例如：hover()事件是由mouseenter()和mouseleave事件合成的
hover()第一个参数移入函数，第二个移出函数

11.5 鼠标事件

属性	功能
click()	单击事件
dblclick()	双击事件
mousedown()/up()	鼠标按下/弹起触发事件
mousemove()	鼠标移动事件
mouseover()/out()	鼠标移入/移出
mouseenter()/leave()	鼠标进入/离开触发事件
focus()/blur()	鼠标聚焦/失去焦点触发事件
keydown()/up	键盘按下/弹起事件

click()和dblClick()

双击会触发一次双击事件和两次单击事件，所以一般不会对一个盒子既设置单击事件又设置双击事件

mouseover()/mouseout()和mouseenter()/mouseleave()区别？

假设子盒子设置鼠标移入移出事件，mouseover()/mouseout()在父盒子子盒子之间都会触发；而mouseenter()/mouseleave()仅仅在父盒子触发。
举一个例子：
子盒子设置mouseover()/mouseout()，那么鼠标从父盒子移入子盒子，会触发父盒子的置mouseover()和子盒子的mouseout()。
子盒子设置mouseenter()/mouseleave()，那么鼠标从父盒子移入子盒子，两个事件都不会触发；仅仅在鼠标移入移出父盒子会触发这两个事件。

mousemove()用途

通常用在鼠标拖拽动作上

11.6 表单事件

属性	功能
change()	表单元素发生改变时触发事件 (此事件仅限于input)
select()	文本元素发生改变时触发事件（仅限于input中type=text或者textarea）
submit()	表单元素发生改变时触发事件

注意:
1. select()方法仅对文本元素有效，对其他元素无效。在文本被选中时触发
2. submit()事件是form表单中submit按钮的默认事件,默认提交表单。通过设置该函数，可以设置在提交前触发的事件(当然，也可以通过阻止默认提交表单事件)，该函数与服务端有很大挂钩

12. jquery中ajax技术(简介)

什么是ajax？

AJAX = 异步的javascript和XML（Asynchronous Javascript and XML），即在不重载整个网页情况下，通过后台加载数据，将其显示在网页上。

jquery的load()方法

从服务器加载数据，并把返回的数据放入被选元素中。
示例：$("selector").load(url,data,callback);
注意：
selector：选择器
url：url地址
data：键值对集合
callback：回调函数集合
示例:

$('#btn').click(function(){
    //只传一个url，表示在id为#new-projects的元素里加载index.html
    $('#new-projects').load('./index.html');
})

jquery的getJSON()方法

异步加载json数据，并对数据进行解析，显示到页面上
语法:$.getJSON(url,[data],[callback])

jquery的$.get()方法

$.get() 方法请求从服务器上请求数据
语法:$.get(URL,callback)

jquery的post()方法

post()方法多用于以POST方式向服务器发送数据，服务器接收到数据之后，进行处理，并将处理结果返回页面
语法：$.post(URL,data,callback);

jquery的ajax方法

$.ajax();
具体参数:
1. url ： 要求为String类型的参数，（默认为当前页地址）发送请求的地址。
2. type:默认为get，有get和post两种方法
3. timeout:超时时间
4. async:默认true异步，有同步异步两种方法
5. cache:默认true，是否从浏览器加载缓存
6. data:要求为Object或String类型的参数，发送到服务器的数据。data为需要发送的值，以键值对形式。
7. dataType:要求为string类型的参数，预期服务器返回的数据类型。作为回调函数的参数可用类型：xml，html，script，json，jsonp，text。相当于，想要什么类型数据就指定什么类型。发过来就转换成什么类型的
8. script：返回纯文本JavaScript代码。
9. beforeSend： 要求为Function类型的参数，发送请求前调用函数。
10. success:data为成功时返回的对象，Function类型的参数。
11. error:data为失败时返回的对象，Function类型的参数。