Web前端之jQuery 一
jQuery介绍和核心
jQuery是一个快速, 小巧,功能丰富的JavaScript库。它通过易于使用的API在大量浏览器中运行,使得HTML文档遍历和操作,事件处理,动画和Ajax更加简单。通过多功能性和可扩展性的结合,jQuery改变了 数百万人编写JavaScript的方式。另外它只是封装了js的dom的操作和ajax,其它的未封装。所以js是包含jquery的。由此可见,jquery的出现,使我们更加容易操作DOM。
核心思想: write less,do more写得少做的多
关于jQuery的相关资料:
官网:http://jquery.com/
汉化api文档:https://www.94xh.com/
注:
选择器是jQuery借鉴css选择器的语法而创建的一种查找要操作的节点的语法格式。比如 $(’#id’);
为什么要使用以及如何使用jQuery
为什么要使用jQuery
在用js写代码时,会遇到一些问题:
●window.onload事件有事件覆盖的问题,因此只能写一个事件。
●代码容错性差。
●浏览器兼容性问题。
●书写很繁琐,代码量多。
●代码很乱,各个页面到处都是。
●动画效果很难实现。
如何使用jQuery
step1,引入jQuery.js文件
<!-- 引包 -->
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
step2, 使用选择器查找要操作的节点
step3,调用jQuery对象的属性或者方法来操作相应的节点。
jQuery的两大特点
●链式编程比如.shon()和.html()可以连写成.show().htm1()。
●隐式迭代:隐式对应的是显式。隐式迭代的意思是:在方法的内部进行循环遍历,而不用我们自己再进行循环,简化我们的操作,方便我们调用。
jQuery的入口函数
入口函数:
//1.jQuery入口函数
//返回的是jQuery对象 如果你想获取js的document文档对象
//jquery对象===js对象的转换
//console.log($(document)[0]);
console.log($(document));
//等待文档资源加载完成之后调用此方法
$(document).ready(function(){
alert(1);
});
//2.jquery简便写法入口函数
$(function(){
alert(2);
});
$(window).ready(function(){
//表示图片资源加载完成之后调用
alert(1);
});
jQuery对象和js对象的转换
如果是js对象,更加希望转换成jquery才操作简便的dom,
因为js是包含jquery。jquery只是封装DOM事件 ajax动画,就要将js对象转换成jQuery对象。
总结:如果是jquery对象一定要调用jquery的属性和方法,
如果是js对象一定要调用的是js的属性和方法。
千万不要将这两个对象混淆
在jquery大部分的都是api(方法),length和索引是它的属性。
示例:
<div id="one"></div>
<div id="two"></div>
$(function(){
//获取jQuery对象
console.log($('#two'));//伪数组
//获取js对象
var gTwo=document.getElementById('two');
console.log(gTwo);//<div id="two"></div>
//jquery对象==>js对象
console.log($('#two')[0]);//<div id="two"></div>
console.log($('#two').get(0));//<div id="two"></div>
//js对象==>jquery对象
console.log($(gTwo));//伪数组
});
jQuery的选择器
jQuery的基本选择器
示例:
$(function(){
//事件三步走:事件源 事件 事件驱动
//jquery如何获取dom
//jquery的标签选择器
console.log($('div'));
//js对象
//js内部自己遍历
//1.标签选择器
$('div').click(function(){
//this指的是js对象 这两句结果相同 都返回文本内容
console.log(this.innerText);
console.log($(this).text());
$(this).hide(300);//让其隐藏,300指的是消失的时间,单位是毫秒。
});
//2.类选择器
console.log($('.box'));
//1.id选择器
console.log($('#box'));
});
层级选择器
示例:
$(function(){
//后代选择器 空格 修改 样式属性
$('.lists li').css('color','pink');
//子代选择器> 亲儿子
$('.item>a').css({color:'gold',backgroundColor:'seagreen'});
//紧邻选择器+ 选择紧挨着的下一个元素
$('.mama+.gugu').css({color:'#AABBCC'});
//兄弟选择器~。选择后面的所有的兄弟元素
$('#jiu~li').css({color:'rgb(188,188,188)'});
});
基本过滤选择器
示例:
$(function(){
//写法$('ul li:eq(0)')
//1.eq:选择第一个匹配的元素
$('ul li:eq(0)').css({color:'#AADDFF'});
//2.gt 大于序号0的
$('ul li:gt(0)').css({color:'pink'});
//3.lt 小于序号0的
$('ul li:lt(0)').css({color:'seagreen'});
//4.odd 选择所有序号为奇数行的元素
$('ul li:odd').css({color:'#4466CC'});
//5.even 选择所有序号为偶数行的元素
$('ul li:even').css({color:'#cc22EE'});
//6. first last
$('ul li:first').css({color:'pink'});
$('ul li:last').css({color:'seagreen'});
});
筛选选择器方法(重要)
示例:
$(function(){
//find(selector) 查找后代,包括子子孙孙
$('#box').find('p').css('color','seagreen');
$('#box').find('.num3').css('color','pink');
//写得少做得多 在jQuery中叫链式编程,所以我们书写的代码少了
$('#box').find('p>.active').css('color','gold').click(function(){
alert($(this).text());
});
//子代children()
$('#box').children('.child').css('color','#AABBCC');
//parent() 亲爹
$('.active').parent().css('color','#994466')
//eq(index) index是从0开始的
$('#box').children('p').eq(1).css('font-size',30);
});
属性选择器
示例:
$(function(){
//常用的
$('input[type=text]').css('background','pink');
$('input[type=password]').css('background','seagreen');
});
sibling()用法
sibling()可以返回被选元素的所有同级元素
<script type="text/javascript">
$(function(){
//eq(0)选的是第0个li标签
//$('ul li').eq(0).siblings('.active');
// $('ul li').click(function(){
// $(this).css('color','#DDEE99').siblings('li').css('color','#CCAA77');
// });
//当我点击一个li标签里面的a标签时,只有被点击的变色,其他为另一个颜色
$('ul li').click(function(){
$(this).children('a').css('color','#CCAA99').parent('li').siblings('li').children('a').css('color','#DDEE99');
//$(this).index()获取点击的每一个li的索引,同时也是对应的p标签的索引
$('p').eq($(this).index()).addClass('active').siblings('p').removeClass('active');
});
});
</script>
效果图:
jQuery动画
jQuery提供的一组网页中常见的动画效果,这些动画是标准的、有规律的;同时还提供给了我们自定义动画的功能。
显示动画
方式一:
$("div").show();
解释:无参数,表示让指定的元素直接显示出来。其实这个方法的底层就是通过display: block;
实现的。
方式二:
$('div').show(3000);
解释:通过控制元素的宽高、透明度、display属性,逐渐显示,2秒后显示完毕。
方式三:
$("div").show("slow");
参数可以是:
- slow 慢:600ms
- normal 正常:400ms
- fast 快:200ms
解释:和方式二类似,也是通过控制元素的宽高、透明度、display属性,逐渐显示。
方式四:
//show(毫秒值,回调函数;
$("div").show(5000,function () {
alert("动画执行完毕!");
});
解释:动画执行完后,立即执行回调函数。
总结:
上面的四种方式几乎一致:参数可以有两个,第一个是动画的执行时长,第二个是动画结束后执行的回调函数。
//show(,)第一个参数是动画的时间,第二个参数是回调函数
//normal默认是400ms\slow 600ms fast 200ms
$('.box').show('slow',function(){
$(this).text('李艳艳');
});
隐藏动画
方式参照上面的show()方法的方式。如下:
$(selector).hide();
$(selector).hide(1000);
$(selector).hide("slow");
$(selector).hide(1000, function(){});
实现点击按钮显示盒子,再点击按钮隐藏盒子
开关式显示隐藏动画
$('#box').toggle(3000,function(){});
显示和隐藏的来回切换采用的是toggle()方法:就是先执行show(),再执行hide()。
滑入和滑出
1、滑入动画效果:(类似于生活中的卷帘门)
$(selector).slideDown(speed, 回调函数);
解释:下拉动画,显示元素。
注意:省略参数或者传入不合法的字符串,那么则使用默认值:400毫秒(同样适用于fadeIn/slideDown/slideUp)
2、滑出动画效果:
$(selector).slideUp(speed, 回调函数);
解释:上拉动画,隐藏元素。
3、滑入滑出切换动画效果:
$(selector).slideToggle(speed, 回调函数);
淡入淡出动画
1、淡入动画效果:
$(selector).fadeIn(speed, callback);
作用:让元素以淡淡的进入视线的方式展示出来。
2、淡出动画效果:
$(selector).fadeOut(1000);
作用:让元素以渐渐消失的方式隐藏起来
3、淡入淡出切换动画效果:
$(selector).fadeToggle('fast', callback);
作用:通过改变透明度,切换匹配元素的显示或隐藏状态。
参数的含义同show()方法。
自定义动画
语法:
$(selector).animate({params}, speed, callback);
作用:执行一组CSS属性的自定义动画。
- 第一个参数表示:要执行动画的CSS属性(必选)
- 第二个参数表示:执行动画时长(可选)
- 第三个参数表示:动画执行完后,立即执行的回调函数(可选)
停止动画
$(selector).stop(true, false);
里面的两个参数,有不同的含义。
第一个参数:
- true:后续动画不执行。
- false:后续动画会执行。
第二个参数:
- true:立即执行完成当前动画。
- false:立即停止当前动画。
PS:参数如果都不写,默认两个都是false。实际工作中,直接写stop()用的多。