jQuery框架简单介绍
jQuery框架介绍
1. jQuery框架与javaScript之间的有什么关系？
javaSript是⼀门编程语⾔，jQuery是javaSript中的⼀个库，jquery是JavaScript中的⼀个⼦集。通过使⽤jQuery框架中的⼀些接⼝，我们可以更⽅便的实现⼀些⽹页操作。⽐起直接使⽤原⽣接⼝，jQuery框架优点多多。
2. jQuery与原⽣javaSript对⽐，有什么优点？
原⽣js代码繁琐，代码量⼤，实现动画复杂。
3. jQuery与javaScript之间的区别是什么？
编写个数不同：load()函数只能在JavaScript中使⽤⼀次，但是$(document).ready()可以出现多次。（这两个函数都是⽤来表⽰等页⾯加载完成后，使⽤JavaScript脚本命令）
jquery有简化写法：$(document).ready()可以简化写为$(function(){})
执⾏时间不同：load()必须等到页⾯加载完成后才能执⾏，$(document).ready()在DOM树构建完成后就可以执⾏
⽂档加载步骤如下：
1. 解析HTML结构
2. 加载外部脚本和样式表⽂件
3. 解析并执⾏脚本代码
4. DOM树构建完成
5. 加载图⽚等外部⽂件
6. 页⾯加载完成
3.1 为什么要使⽤⼊⼝函数？
使⽤load或者是$(document).ready()可以使我们的代码放在html任意位置都会等待页⾯加载完成后再被调⽤。如果不使⽤该函数，代码块正好放在head标签中，那么页⾯还没有加载完，就会调
⽤js脚本。
4. 如何引⼊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 对象) ⽰例:
6.2 jQuery 对象转换为DOM 对象
⽰例:
$('div')[0]或者$('div').get(0)即可将jquery对象转换为DOM对象
7. jQuery 效果函数
7.1 显⽰隐藏动画
7.11 show,hide,toggle
jquery滚动条滚动到底部函数名
作⽤
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)
调整到指定不透明度
var  oDiv = ElementsByTag('div');$(oDiv) //即转换成jQuery 对象
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()

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。