基本知识
- jQuery就是JavaScript的简单化,方便,快捷,一般开发项目使用未压缩版,方便操作,产品上线使用压缩版
使用jQuery步骤
1、引入jQuery文件
2、写一个入口函数
3、找到你要操作的一元素(jQuery选择器),去操作他(给他添加属性,样式,文本…)
特性
- 会产生隐式迭代
- 会返回自身对象,从而可以链式编程
入口函数
- jQuery的入口函数执行顺序优先于window.onload,并且window.onload只能存在一个,但是jq的函数入口可以存在多个。
- jQuery的基本结构:其实是一个自执行函数
(function(){
window.jQuery = window.$ = jQuery;
}
这个自执行函数就是给window对象添加一个jQuery属性和和jQuery其实是等价的
//引入jQuery后,jQuery和$是等价的
console.log(window.jQuery === window.$);//true
jQuery参数传递
$是一个函数,参数传递不同,效果也不一样:
- 如果参数传递的是一个匿名函数,就是入口函数
$(function(){
})
- 如果参数传递的是一个字符串,就是一个选择器/创建一个标签
一般使用一个jQuery选择器,给选择器选中的元素命名前面都会加上$符以示区别
$(“#one”); 选择器;
$(“<div>abc<div>”); 创建一个标签
- 如果参数是一个dom对象,那他就会把dom对象转换成jQuery对象
原生JS选择器获取到的对象就是dom对象,只能调用dom方法或者属性,不能调用jQuery的属性或者方法;利用jQuery选择器获取到的对象就是jQuery对象,只能调用jQuery的方法或者属性,不能调用原生jsdom对象的属性或者方法(jQuery是一个伪数组,jQuery对象其实就是一个包装集)
dom对象和jQuery对象互相转换
- dom对象转换成jQuery对象
//使用原生方法来找到dom元素
var div1 = document.getElementById("one");
//使用jquery将dom对象转换成jQuery对象
var $div1 = $(div1);
- jQuery对象转换成dom对象
- 使用jQuery的下标取出
//使用jQuery方法取出对象集
var $divs = $('div');
//因为jquery对象是一个对象集,我们便使用下标取出
//并转换成dom对象
var div2 = $divs[1];
console.log(div2);
console.log($divs);
- 使用jQuery的get方法来取出
//使用jQuery的方法来转换
var div3 = $divs.get(1);//索引值
console.log(div3);
注意:
- jQuery的下标并不像原生js一样只用在后面使用[0]来取出下标,而是使用eq(),详情在筛选选择器和过滤选择器
jQuery选择器
jQuery基本选择器
名称 | 用法 | 描述 |
ID选择器 | $(“#id”) | 获取指定ID的元素 |
类选择器 | $(‘.class’) | 获取同一类class的元素 |
标签选择器 | $(‘div’) | 获取同一类标签的所有元素 |
并集选择器 | $(‘div,p,li’) | 使用逗号分隔,只要符合条件之一就可 |
交集选择器 | $(‘div.redClass’) | 获取class为redClass的div元素 |
- 和css选择器用法一样
jQuery层次选择器
名称 | 用法 | 描述 |
子代选择器 | $(‘ul>li) | 使用>号,获取儿子层级的元素,注意:不会获取孙子级的元素 |
后代选择器 | $(‘ul li) | 使用空格,代表后代选择器,获取ul下所有的li元素,包括孙子等 |
jQuery过滤选择器
这类选择器都带冒号
名称 | 用法 | 描述 |
:eq(index) | $(‘li:eq(2)’).css(‘color’,’red’) | 获取到的li元素中,选择索引号为2的元素,索引号index从0开始 |
:odd | $(‘li:odd’) .css(‘color’,’red’) | 获取到的li元素中,选择索引号为奇数的元素 |
:even | $(‘li:even’) .css(‘color’,’red’) | 获取到的li元素中,选择索引号为偶数的元素 |
:gt(index) | $(“li:gt(2)”) | 获取到的li元素中,获取到索引值大于2的元素 |
:lt(index) | $(“li:lt(2)”) | 获取到的li元素中,获取到索引值小于2的元素 |
…
jQuery事件(方法)
this
- 在这里面this代表的是触发事件的元素,但是还是要写成$(this)
text方法
- text();是用来获取和设置文本的
- 获取文本:text()方法不给参数,会获取到这个标签中所有的文本,包括后代元素的文本
$(function () {
var wb;
$("#anniu").click(function () {
wb = $('.box').text();
console.log(wb);
})
})
- 设置文本:text()方法给参数,参数里面就是要设置的文本,包含了多个dom元素的jQuery对象,会将里面所有的dom元素都设置上(隐式迭代)
//设置文本
$('#anniu2').click(function () {
$('.box').text("设置文本");
})
css方法
- 获取样式:在css()里传入你想要获取的样式名称,但是在IE浏览器中一定要有一个准确的边框信息,比如说想获取边框的宽度就要说border-bottom-width;注意 :如果获取的是标签名为div的dom元素,则只能获取第一个div的元素样式
$("#box1").css('width');//获取宽度
- 设置样式:css(样式名,样式值);要是给标签名为div的元素设置,那就是给所有都设置(隐式迭代)
//1、设置单样式
$('#box1').css('width','200px');
$('#box1').css('height',200);//不带单位就不需要用引号包裹
$('#box1').css('backgroundColor','red');
$('#box1').css('border','2px solid blue');
// 2、设置多样式
$('#box1').css({
width : 200,
'height':'200px',
backgroundColor:'red',
border:'2px solid blue'
})
- class类操作
- 添加类:使用$(‘element’)addclass(‘添加的类名1 添加的类名2’);给element添加N个类名,中间用空格隔开
//添加单个类
$('.box').addClass('fsz30');
// 添加多个类
$('.box').addClass('w300 h300');
- 移除类:使用$(‘element’)removeclass(‘添加的类名1 添加的类名2’);给element添加N个类名,中间用空格隔开,要是不填写参数则代表移除所有
// 移除单个类
$('.box').removeClass('fsz30');
// 移除多个类
$('.box').removeClass('w300 h300');
//移除所有
$('.box').removeClass();
- 判断类:判断元素是否有某个class,有就返回true,没有false
//判断.box类是否有fsz30这个类
$('.box').hasClass('fsz30');
- 切换类:如果元素没有这个类,就添加这个类,如果有就移除这个类
//如果元素没有这个类,就添加这个类,如果有就移除这个类
$('.box').toggleClass('fsz30');
mouseEnter事件和mouseLeave
- 在正常的mouseOver事件,在鼠标移动到选取的元素及其子元素上时都会触发,对于计数来说并不方便,而mouseEnter事件只在鼠标移动到选取的元素上时触发。
- 而mouseLeave是鼠标离开事件
jQuery动画
- jQuery提供了三组基本动画,这些动画都是标准的、有规律的效果,jQuery还提供了自定义动画功能。
1. 显示(show)与隐藏(hide)是一组动画;
2. 滑入(slideDowm)与滑出(slideUp)与切换(slideToggle),效果与卷帘门类似;
3. 淡入(fadeln)与淡出(fadeOut)与切换(fadeToggle)
show和hide和切换
- show()和hide()都可以往里面传参
- 参数1:代表执行动画的时长,毫秒数,也可以是代表时长的字符串(“fast”,“normal”,“slow”)
- 参数2:代表动画执行完毕后的回调函数。
$('#xs').click(function (e) {
e.preventDefault();
//直接出现
// $('#box').show();
// $('#box').show('fast');//200毫秒
// $('#box').show('normal');//400毫秒
// $('#box').show('slow');//600毫秒
// $('#box').show(2000);//自定义两千毫秒
// $('#box').show("faks");//如果写错了,则自动默认认为是normal
$('#box').show(2000,function () {
alert('动画执行完了');
});//自定义两千毫秒,执行完毕之后自动调用后面的匿名函数
});
$('#yc').click(function (e) {
e.preventDefault();
$('#box').hide();//直接隐藏
$('#box').hide('fast');//200毫秒
$('#box').hide('normal');//400毫秒
$('#box').hide('slow');//600毫秒
$('#box').hide(2000);//自定义两千毫秒
$('#box').hide('sfa');//如果写错了,则自动默认认为是normal
$('#box').hide(2000,function () {
alert('动画执行完了');
});//自定义两千毫秒,执行完毕之后自动调用后面的匿名函数
});
$('#qh').click(function (e) {
e.preventDefault();
//如果元素是隐藏的,便执行显示动画;
//如果元素是显示的,便执行隐藏动画;
$('#box').toggle();
});
slideDowm和slideUp和slideToggle
具体操作和show和hide一样
$('#hr').click(function (e) {
e.preventDefault();
//也可以传两个参(具体和show一样)
//第一个参数是执行动画时长(毫秒)
//第二个是回调函数
$('#box').slideDown(2000,function () {
console.log('滑入结束');
});
});
$('#hc').click(function (e) {
e.preventDefault();
//也可以传两个参(具体和show一样)
//第一个参数是执行动画时长(毫秒)
//第二个是回调函数
$('#box').slideUp(2000,function () {
console.log('滑出结束');
});
});
$('#qh').click(function (e) {
e.preventDefault();
//和show和hide一样,
//要是滑出了就滑入
//要是滑入了就滑出
$('#box').slideToggle();
});
fadeIn和fadeOut和fadeToggle和fadeTo
除了fadeTo其他和show一样
$('#dr').click(function (e) {
e.preventDefault();
//也可以传两个参(具体和show一样)
//第一个参数是执行动画时长(毫秒)
//第二个是回调函数
$('#box').fadeIn(2000,function () {
console.log('淡入结束');
});
});
$('#dc').click(function (e) {
e.preventDefault();
//也可以传两个参(具体和show一样)
//第一个参数是执行动画时长(毫秒)
//第二个是回调函数
$('#box').fadeOut(2000,function () {
console.log('淡出结束');
});
});
$('#qh').click(function (e) {
e.preventDefault();
//和show和hide一样,
//要是淡入了就淡出
//要是淡出了就滑淡入
$('#box').fadeToggle();
});
fadeTo有两个参数,第一个是时间,第二个是淡入/出的透明度
$('#drtz').click(function (e) {
e.preventDefault();
//设定淡入/出
//两个参数,第一个时间,第二个透明度
$('#box').fadeTo(1000, 0.5);
});
自定义动画
animate({params},[speed] , [easing] , [callback]);
- {params}:要执行动画的css属性,带数字(必选);
- speed:执行动画时长(可选)
- easing:执行效果,默认为swing(缓动),可以是linear(匀速)
- callback:动画执行完后立即执行的回调函数(可选)
$(function () {
$('input').click(function (e) {
e.preventDefault();
$('div').animate({
left : 800,
width : 200,
height : 200,
opacity : 0.5
},2000,'linear',function () {
//因为是回调函数,可以再次调用animate
$('div').animate({
left : 400,
width : 300,
height : 300,
opacity : 0.5,
top : 150
},2000)
})
});
})
动画队列
- 要是在执行动画的时候,多次快速重复执行相同动画,但是在动画还没执行完时边再次执行下一个动画,会造成一种情况,动画在还没有执行完,鼠标移到其他地方去之后,动画仍要继续执行,这就是动画队列
- 通过stop(参数1,参数2);
- 参数1:是否清除队列
- 参数2:是否跳转到最终结果
- 参数1和参数2填写true和false,选择是否跳过动画,如果不写参数,默认就是两个false
$('input').eq(0).click(function (e) {
e.preventDefault();
$('div').slideDown(2000).slideUp(2000);
});
$('input').eq(1).click(function (e) {
e.preventDefault();
$('div').stop(true,false);
});
jQuery节点操作
创建节点:
html();
$(‘<span-这是个span元素</span-‘);
// 原生js创建节点:document.write(); innerHTML(); document.createElement();
// jQuery创建节点:html(); $();
//1、html(); 设置或者获取内容
$('input').eq(0).click(function (e) {
e.preventDefault();
//不传参就是获取所有内容
$('div').html();
//传参就是设置内容,会把以前的内容覆盖掉
//如果设置的内容中包含了标签,是会把标签解析出来
$('div').html('我是设置的内容<a>百度一下</a>');
});
//2、$(); 创建元素,但是需要通过追加才能放入页面中
$('input').eq(1).click(function (e) {
e.preventDefault();
//创建
var $elem = $('<a href="www.baidu.com">a标签</a>');
//只存在内存中,需要追加
$('div').append($elem);
});
追加(添加)节点:
元素.append(节点) 在被选元素的结尾插入内容
元素.perpend (节点) 在被选的元素开头插入内容
ppendTo(节点)/perpendTo(节点),具体和append,perpend差不多,只是调用不一样:节点.appendTo(元素)
append和perpend(将已经存在的标签作为子元素插入则是作为剪切插入)
元素.before 在被选元素之后插入内容(作为兄弟元素)
元素.after 在被选元素之前插入内容(作为兄弟元素)
清空节点和删除节点:
元素.empty() 清空指定节点的所有元素,自身保留(清理门户)
元素.remove() 相比于empty,自身也删除(自杀)
克隆节点clone
元素 .clone(); 返回一个克隆后的元素,需要用一个变量接收
- clone后可以传参数(true,false),要是是true,则表示是把事件也一起克隆,false则是不克隆事件,不给参数则默认是false
- jQuery里面克隆节点 ,只存在内存中,要是想让存在在页面上,就需要再次追加到页面上。
jQuery操作属性
使用attr();设置属性,使用removeAttr()删除属性
- 1、获取属性
元素 . attr(‘属性名’) 返回值便是属性名所对应的属性值 - 2、设置属性
元素 . attr(‘属性名’ , ‘属性值’);要是原来有属性则更改原来的,要是原来没有的属性则添加
// 设置单属性
$('a').attr('href', 'www.baidu.com');
//设置多属性
$('a').attr({
'aaa' : 'AAA',
'bbb' : 'BBB'
});
- 3、属性移除
元素 . removeAttr(‘属性名’);要是元素没有被移除的属性也不会报错
//移除单属性
$('a').removeAttr('aaa');
// 移除多属性
$('a').removeAttr('aaa bbb ccc');
事件机制
jQuery事件注册
on简单事件注册
$(selector).on(‘click’,function(){})
表示给$(selector)绑定事件,不支持动态绑定。
on注册事件委托
$(selector).on.(‘click’,’span’,function(){});
表示给$(selector)绑定代理事件,当必须是它的内部元素span才能触发这个事件,支持动态绑定。
事件解绑
// 解除所有事件
$(elem).off();
// 解除click事件
$(elem).off('click');
事件触发trigger();
- 一般使用if语句嵌套,当满足if语句的条件之后,触发另外一个事件
- 多用于自定义事件名称,当满足某个条件后,直接触发自定义事件
事件对象
- 注册一个事件,系统就会帮我们生成一个对象记录这个事件触发时候的一些信息(比如出发时间的时候有没有按住某个键;比如触发这个事件的时候的一些坐标信息)
- 在jQuery中用事件参数e来获取(jQuery事件对象是对原生js事件对象的一个封装,帮你处理好了兼容性)
- 在调用事件对象之前,要在事件的函数括号里放入一个形参e,只有这样才会形成事件对象
常用的事件对象:
使用e.XXX调用(都是触发事件的那一瞬间的值)
screenX和screenY 对应屏幕最左上角的值
clientX和clientY 距离页面左上角的位置(忽视滚动条)
pageX和pageY 距离页面最顶部的左上角的位置(会计算滚动条的距离);
阻止事件冒泡/跳转
- 当有事件冒泡的时候,我们可以使用e.stopPropagation()来阻止事件冒泡
- 当点击一个链接的时候,要是不想让事件进行跳转,则可以使用e.preventDefault();来阻止浏览器的默认行为
$('div').click(function (e) {
e.preventDefault();
alert('div弹窗');
});
$('input').click(function (e) {
e.preventDefault();//组织浏览器默认行为
e.stopPropagation();//阻止事件冒泡
alert('btn弹窗');
});
使用return false即阻止了事件冒泡,也组织了浏览器的默认行为
获取键盘按键
- 使用e.keyCode()获取键盘上所按的键所对应的值。(ASCII码)
补充
链式编程
- 如果给元素设置或者调用一个方法,这个方法有返回值,并且返回的是一个jQuery对象,那就可以继续在点出jQuery方法
- 有些时候我们一个方法返回的确实是一个jQuery对象,但是这个对象又不是我们想要的对象,便可以再这个方法的后面加上一个.end();(表示返回上一个状态,end也是一个jQuery对象,只有jQuery对象才能使用end方法)然后继续在后面点。
显示迭代each(增强for循环)
增强循环,将jQuery对象都进行一次循环,有两个参数(索引值,节点)
$(要遍历的jQuery对象).each(function (index, element) {
// element == this
});