javaSript是一门编程语言,jQuery是javaSript中的一个库,jquery是JavaScript中的一个子集。通过使用jQuery框架中的一些接口,我们可以更方便的实现一些网页操作。比起直接使用原生接口,jQuery框架优点多多。
原生js代码繁琐,代码量大,实现动画复杂。
window.onload()
函数只能在JavaScript中使用一次,但是$(document).ready()
可以出现多次。(这两个函数都是用来表示等页面加载完成后,使用JavaScript脚本命令) $(document).ready()
可以简化写为$(function(){})
$(document).ready()
在DOM树构建完成后就可以执行 文档加载步骤如下:
1. 解析HTML结构
2. 加载外部脚本和样式表文件
3. 解析并执行脚本代码
4. DOM树构建完成
5. 加载图片等外部文件
6. 页面加载完成
使用window.onload
或者是$(document).ready()
可以使我们的代码放在html任意位置都会等待页面加载完成后再被调用。如果不使用该函数,代码块正好放在head标签中,那么页面还没有加载完,就会调用js脚本。
我们从jquery官网下载好jquery文件,然后通过外部样式引入这个库文件就可以在js脚本中使用。
示例:
jquery选择器的语法和css选择器语法一样
类型 | 示例 | 作用 |
---|---|---|
id选择器 | $('#wrapper') |
选择指定id的标签 |
类选择器 | $('.box') |
选择class的标签 |
标签选择器 | $('ul') |
选择指定的标签 |
通配符选择器 | $('*') |
选择所有标签 |
类型 | 示例 | 作用 |
---|---|---|
后代选择器 | $('div p') |
选择div 下所有p |
子代选择器 | $('div>p') |
选择div 的儿子中的p |
毗邻选择器 | $('div+p') |
选择div 同级后面紧贴着的p |
兄弟选择器 | $('div~p') |
选择div 同级后面所有的p |
类型 | 示例 | 作用 |
---|---|---|
: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 标签 |
类型 | 示例 | 作用 |
---|---|---|
标签[属性名] | $('p[class]') |
获取所有含该属性的元素 |
标签[属性名=值] | $('p[class=what]') |
获取特定属性是某个特定值的元素 |
标签[属性名^=值] | $('p[class^=what]') |
获取特定属性是以某个特定值开头 |
标签[属性名!=值] | $('p[class!=what]') |
获取特定属性不是某个特定值、或者不包含该属性的元素 |
标签[属性名$=值] | $('p[class$=name]') |
获取特定属性以特定值结尾的元素 |
标签[属性名*=值] | $('p[class *='name']') |
获取特定属性中包含特定值的元素 |
类型 | 示例 | 作用 |
---|---|---|
.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') |
查找当前元素之前的所有同辈元素 |
直接使用$(DOM对象)
示例:
var oDiv = document.getElementsByTag('div');
$(oDiv) //即转换成jQuery对象
示例:
$('div')[0]
或者$('div').get(0)
即可将jquery对象转换为DOM对象
函数名 | 作用 |
---|---|
show(speed,callback) | 显示标签(向下,向右增大) |
hide(speed,callback) | 隐藏标签(向上,向左减小) |
toggle(speed,callback) | 显示隐藏开关,如果标签可见,则隐藏标签;反之标签不可见,则显示标签 |
注意:speed
参数是控制标签显示/隐藏的速度,可选slow
,normal
,fast
或者直接输入以毫秒为单位的数字;callback
是回调函数,执行完动画,调用的函数。toggle
只能控制标签的显隐,不能使用回调函数。
函数名 | 作用 |
---|---|
slideDown(speed,callback) | 显示标签(向下增大) |
slideUp(speed,callback) | 隐藏标签(向上减小) |
slideToggle(speed,callback) | 显示隐藏开关,如果标签可见,则隐藏标签;反之标签不可见,则显示标签 |
函数名 | 作用 |
---|---|
fadeIn(speed,callback) | 显示标签(淡入) |
fadeOut(speed,callback) | 隐藏标签(淡出) |
fadeTo(speed,opacity,callback) | 调整到指定不透明度 |
fadeToggle(speed,callback) | 开关控制淡入淡出 |
首先,三组都是通过控件的display
属性来达到控制显隐的效果。show,slide,这两组都是通过控制标签的width
和height
来达到动画效果,fadeIn通过控制opacity
不透明度来达到动画的效果。
函数名 | 作用 |
---|---|
click(function) | 添加标签单击事件 |
hove(function1,function2) | 添加鼠标悬浮标签事件,function1代表鼠标悬浮执行时间,function2代表鼠标离开标签事件。等同于mouseenter和mouseleave合集 |
mouseover(function) | 鼠标移上去时候 |
mouseout(function) | 鼠标移出时 |
mouseenter(function) | 鼠标移入时 |
mouseleave(function) | 鼠标移除时 |
用于创建自定义动画函数
示例:$('#he').animate({left:'300px'})
注意:params:动画终值属性集合(用大括号括起来),speed动画速度,callback回调函数。
停止在指定元素上正在运行的动画
示例:$('#he').stop();
注意:clearQueue为true清空队列,立即结束动画;
gotoEnd让当前正在执行的动画立即完成,并且重设show和hide的原始样式,调用回调函数等
用来做延迟操作,传入毫秒数
示例:$('#he').animate({left:'800px'},2000).delay(1000).animate({top:'300px'});
注意:这些函数都可以通过点.连接起来,按顺序调用,这种调用方式称之为链式调用
jQuery属性操作模块分为四部分:html属性操作、DOM属性操作、类样式操作、值属性操作。
可以获取或修改html标签属性
获取值
传入一个需要获取的属性参数
示例:$('div').attr('id')
设置值
传入两个参数设置一个值,或者设置多个值将多个键值对由大括号括起来当一个参数传入
示例一:$('#box').attr('class','wrapper');
示例二:$('#box').attr({'class':'123','name':'aaa'});
注意:在示例二中,大括号括起来的键值对,键可以不用引号引起来,值必须有引号引起来
删除匹配元素一个指定的属性
示例:$('p').removeAttr('id');
可以获取或修改DOM属性,用法等同于attr()
获取值
示例:$('p').prop('name');
设置值
示例一:$('p').prop('name',2);
示例二:$('p').prop({'name':2})
示例:$('p').removeProp('name')
为每个元素添加指定的类名,若要添加多个类名用空格隔开
示例一:$('#he').addClass('wrapper');
示例二:$('#he').addClass('wrapper1 box2')
从所匹配的元素中删除全部或指定的类
示例一:$('#he').removeClass('wrapper1')
删除wrapper1
示例二:$('#he').removeClass();
删除全部类
开关,若该标签有这个类就删除,没有则添加这个类
示例一:$('#he').toggleClass('changeColor');
使用attr()设置类时,不能追加类属性,只会覆盖掉原来的类属性;使用addClass()会在不改变原来类的基础上添加一个类,删除类同理;
获取或设置选中标签的内容,设置值时将会被解析为HTML语言
获取值
示例:$('p').html()
设置值
示例:$('p').html('what fk?')
获取或设置元素中包括文本的内容,设置时仅会被解析为纯文本
获取值
示例:$('p').text()
设置值
示例:$('p').text('what fk?')
在获取值时,html()会将内容中标签读出来,而text()会忽视标签,读取纯文本;
例如:p
标签中文本为1234
,html()读出来的效果是1234
,而text()读出来的效果是1234
在设置值时,html()会将字符串解析为html语言,然后显示出来,而text()仅仅将其解析为纯文本显示;
例如:同样设置'what fk?'
这一段内容,html()显示出来的是带有超链接的what fk,而text()显示出来的是'what fk?'
也就是说:值中含有标签时,text()不会渲染出标签元素,只会将标签代码原封不动的显示出来
见关于input的value用法
函数名 | 使用方法 | 示例 | 作用 |
---|---|---|---|
append() | 父元素.append(子元素) | $('div').append('百度') |
在父元素里面追加子元素标签 |
appendTo() | 子元素.appendTo(父元素) | $('新浪').appendTo($('div')) |
在父元素里面追加子元素标签 |
prepend() | 父元素.prepend(子元素) | $('ul').prepend(" |
将子元素标签追加到父元素内的第一个位置 |
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. 如果子元素是页面上某个标签,则相当于移动操作
clone()
克隆匹配这些DOM元素,并选中这些克隆的副本。
可以传入一个布尔值,为true时,将该标签的事件也克隆(默认不克隆)
示例:$('#btn3').clone(true).insertAfter($('p'));
replaceWith()
选择器.repalceWith(内容)
示例:$('#btn').replaceWith("我是替换后的标签>");
注意:内容替换选择器,内容可以是DOM,jquery,字符串。
replaceAll()
内容.replaceAll(选择器)
示例:$('p').replaceAll($('ul'));
注意:这两个函数区别只是内容和选择器位置不同
empty() 清空
清空被选元素的内容
示例:$('ul').empty()
会清空ul中所有内容(相当于html(”))
remove() 删除
会删除被选元素,事件也没了
示例:$('ul').remove()
会删除ul标签和标签的内容
detach() 删除并返回
会删除被选元素,但是会返回删除的元素,事件会保留
示例:var $btn = $('button').detach()
将页面上的button全部删除,返回给变量btn
函数名 | 功能 |
---|---|
position() | 获取匹配元素相对于父元素的偏移位置,返回一个对象,对象中有left,top两个属性 |
offset() | 获取匹配元素相对于浏览器左上角偏移位置,同样有left,top两个属性 |
scrollTop() | 获取元素相对于滚动条顶部的偏移像素值 |
scrollLeft() | 获取元素相对于滚动条左侧的偏移像素值 |
innerHeight() | 获取内部区域高度(内容高+padding) |
innerWidth() | 获取内部区域宽(内容宽+padding) |
outHeight() | 获取外部区域高(内容高+padding+border) |
outWidth() | 获取外部区域宽(内容宽+padding+border) |
width() | 获取或设置内容宽 |
height() | 获取或这是内容高 |
当元素滚动时,调用的方法
示例:
$(function () {
$(document).scroll(function () {
console.log($(document).scrollTop());
console.log($(document).scrollLeft());
});
获取浏览器滚动时的top和left
在DOM中用onScroll(),在jquery中用scroll()方法监听滚动条。
HTML中与JavaScript交互是通过事件来交互的。
事件流就是从页面中接受事件的顺序
DOM2级事件流包括三个阶段
1. 事件捕获阶段
2. 处于目标阶段
3. 事件冒泡阶段
addEventListener()
DOM事件监听器
参数一事件名,参数二function,参数三bool值(捕获阶段为true,冒泡阶段为false)
document代表整个html
document.documentElement代表标签
document.document.body代表标签
例如一个id为btn的按钮设置click事件,document对象首先接受到click事件,然后按照dom树依次传到btn。而事件冒泡过程是由具体元素接受,向上传到document。
属性 | 作用 |
---|---|
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
jquery不支持事件捕获
一般来说父子盒子都设置一个click事件,单击子盒子事件,则父子两个盒子事件一起触发。
原因:子盒子处于click冒泡阶段后,父盒子随之也处于click冒泡阶段,由内而外,最终传到DOM.
解决办法:阻止事件冒泡。阻止子盒子事件冒泡,父盒子就接受不到冒泡,即只触发子盒子事件。
示例:
$('#box #p1').click(function (e) {
e.stopPropagation();
console.log('我是p标签');
});
$('#box').click(function () {
console.log('我是div标签');
})
像超链接a标签,都有默认click事件,form表单的submit有默认submit事件。
示例:
<--标签内容-->
"https://www.baidu.com">我是一个超链接
//jquery内容
$('a').click(function (e) {
e.preventDefault();
})
即便我们给a
标签设置了链接,由于我们在click事件中设置了阻止默认事件,导致a
标签不能跳转。
综上,还有另一种方法既可以阻止默认事件,也可以阻止冒泡
示例:
$('#p1 a').click(function (e) {
return false;
})
通过return false
即可
将元素和事件绑定时,有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(“事件名”,”需要绑定的选择器”,fn回调函数);
示例:
$('ul').on("click","li", function () {
console.log($(this).index());
});
$("ul").append("我是动态创建的元素 ")
unbind()传入需要移除的事件名,不传入参数时,移除所有事件
示例:$("#box").unbind("mouseout");
只能移除bind()绑定的对象
例如:hover()
事件是由mouseenter()
和mouseleave
事件合成的
hover()第一个参数移入函数,第二个移出函数
属性 | 功能 |
---|---|
click() | 单击事件 |
dblclick() | 双击事件 |
mousedown()/up() | 鼠标按下/弹起触发事件 |
mousemove() | 鼠标移动事件 |
mouseover()/out() | 鼠标移入/移出 |
mouseenter()/leave() | 鼠标进入/离开触发事件 |
focus()/blur() | 鼠标聚焦/失去焦点触发事件 |
keydown()/up | 键盘按下/弹起事件 |
双击会触发一次双击事件和两次单击事件,所以一般不会对一个盒子既设置单击事件又设置双击事件
假设子盒子设置鼠标移入移出事件,mouseover()/mouseout()在父盒子子盒子之间都会触发;而mouseenter()/mouseleave()仅仅在父盒子触发。
举一个例子:
子盒子设置mouseover()/mouseout(),那么鼠标从父盒子移入子盒子,会触发父盒子的置mouseover()和子盒子的mouseout()。
子盒子设置mouseenter()/mouseleave(),那么鼠标从父盒子移入子盒子,两个事件都不会触发;仅仅在鼠标移入移出父盒子会触发这两个事件。
通常用在鼠标拖拽动作上
属性 | 功能 |
---|---|
change() | 表单元素发生改变时触发事件 (此事件仅限于input) |
select() | 文本元素发生改变时触发事件(仅限于input中type=text或者textarea) |
submit() | 表单元素发生改变时触发事件 |
注意:
1. select()方法仅对文本元素有效,对其他元素无效。在文本被选中时触发
2. submit()事件是form表单中submit按钮的默认事件,默认提交表单。通过设置该函数,可以设置在提交前触发的事件(当然,也可以通过阻止默认提交表单事件),该函数与服务端有很大挂钩
AJAX = 异步的javascript和XML(Asynchronous Javascript and XML),即在不重载整个网页情况下,通过后台加载数据,将其显示在网页上。
从服务器加载数据,并把返回的数据放入被选元素中。
示例:$("selector").load(url,data,callback);
注意:
selector:选择器
url:url地址
data:键值对集合
callback:回调函数集合
示例:
$('#btn').click(function(){
//只传一个url,表示在id为#new-projects的元素里加载index.html
$('#new-projects').load('./index.html');
})
异步加载json数据,并对数据进行解析,显示到页面上
语法:$.getJSON(url,[data],[callback])
$.get() 方法请求从服务器上请求数据
语法:$.get(URL,callback)
post()方法多用于以POST方式向服务器发送数据,服务器接收到数据之后,进行处理,并将处理结果返回页面
语法:$.post(URL,data,callback);
$.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类型的参数。