9.jQuery初识—选择器、效果
83510998 2020-08-08
一、初识jQuery
js缺点：
- 书写繁琐，代码量大。
- 代码复杂。
- 动画效果很难实现。使用定时器，要小心各种定时器的清除。各种操作和处理事件不好实现。
- 浏览器的兼容性。
jQuery
- 轻量级的js框架，不影响页面加载速度
- 使用比js简单、方便
- 事件、样式、动画支持
- Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信
- 插件扩展开发，jQuery有着丰富的第三方插件，
- 链式表达，jQuery的链式操作可以将多个操作写在一行代码中
- 兼容性好
jquery对象和dom对象
jquery找的标签对象称为——jquery对象
原生js找到的标签对象称为——dom对象
dom对象只能使用dom对象的方法，不能使用jquery对象的方法
jquery对象也是
转换
jquery对象转dom对象——jquery对象[0] 示例：$(‘#d1‘)[0]
dom对象转jquery $(dom对象)
二、jquery文件的引入和加载
jquery-3.3.1.js 较大，一般是用在开发环境下。
jquery-3.3.1.min.js 更小，一般是用在生产环境下。
引入方式
直接写在<script>里js代码
<script src="jquery.js"></script>
写在window.load = function(){}里的js代码。window.onload必须等到页面内包括的所有元素加载完毕之后才执行。
三、jquery基础选择器
使用jquery的时候要有入口函数——回调函数。
//方式1
$(function (){
函数体;
})
//方式一
$(dociment).ready(function(){
函数体;
})1、id选择器
console.log($(‘#brother‘)); $(‘brother‘).css(‘color‘, ‘red‘); //设置样式
2、标签选择器
//（1）设置一个值
$(‘a‘).css(‘color‘, ‘red‘);
//（2）设置多个值，设置多个值的时候使用对象存储 key:value
$(‘a‘).css({‘color‘:‘red‘, ‘font-size‘:10px});3、类选择器
$(‘.c1‘).css(‘background‘, ‘green‘)
4、通配符选择器*
console.log($(‘*‘)); /* 取出所有的标签 jQuery.fn.init(17) [html, head, meta, title, style, body, ul, li#brother, li, a, li.li3, li, li, li, li, script, script, prevObject: jQuery.fn.init(1)] */ // 应用：实现清空整个界面的元素 $(‘*‘).html(‘‘);
四、jquery层级选择器
1、后代选择器 div a
$(‘div p‘).css(‘color‘, ‘red‘); $(‘#box p‘).css(‘color‘, ‘red‘);
2、子代选择器 div > a
$(‘#box>p‘).css(‘color‘, ‘red‘);
3、毗邻选择器
$(‘#father+p‘).css(‘font-size‘, ‘24px‘)
4、兄弟选择器
$(‘father~p‘).css(‘background‘, ‘red‘)
5、组合选择器
$("#id, .className, tagName")五、基本过滤选择器
1、:first 获取第一个元素
获取第一个option标签，修改文本内容
$(‘li:first‘).text(‘first‘);
2、:last 获取最后一个元素
$(‘li:last‘).html(‘last‘)
3、:odd匹配所有索引值为奇数的元素，从0开始计数
// :odd匹配所有索引值为奇数的元素，从0开始计数 $(‘li:odd‘).css(‘color‘,‘red‘);
4、:even匹配所有索引值为偶数的元素，从0开始计数
// :even匹配所有索引值为偶数的元素，从0开始计数 $(‘li:even‘).css(‘color‘,‘green‘);
5、:eq(index)获取给定索引值的元素 从0开始计数
// :eq(index)获取给定索引值的元素 从0开始计数 // 选中索引值为1的元素 $(‘li:eq(1)‘).css(‘font-size‘,‘10px‘);
6、:gt(index) 匹配所有大于给定索引值的元素
// :gt(index) 匹配所有大于给定索引值的元素 // 大于索引值1 $(‘li:gt(1)‘).css(‘font-size‘,‘10px‘);
7、:lt(index) 匹配所有小于给定索引值的元素
// :lt(index) 匹配所有小于给定索引值的元素 // 小于索引值1 $(‘li:lt(1)‘).css(‘font-size‘,‘10px‘);
冒号表示匹配或选取的意思：$(":button") 表示匹配所有的按钮。
$("input:checked")表示匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)。
六、jquery属性选择器
1、标签名[属性名]查找所有含有属性的该标签的元素
$(‘li[id]‘).css(‘color‘, ‘red‘);
2、标签名[alter=value]匹配给定的属性是某个特定值的元素
$(‘li[class=cc]‘).css(‘font-size‘, ‘30px‘);
3、[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
$("li[class!=cc]").css(‘color‘, ‘red‘);4、[attr^=value]匹配给定的属性是以某些值开始的元素
$("input[name^=username]").css(‘background‘, ‘red‘);5、[attr$=value]匹配给定的属性是以某些值结尾的元素
$(‘input[name$=doc]‘).css(‘background‘, ‘red‘);
6、[attr*=value]匹配给定的属性是以包含某些值的元素
$(‘button[class*=btn]‘).css(‘background‘,‘red‘)
七、jquery筛选选择器
选择器或者筛选器选择出来都是对象。筛选器方法就是通过对象调用一个进一步过滤作用的方法，
下一个：
$(‘#id‘).next() //找到下一个兄弟标签 $(‘#id‘).nextAll() //找到下面所有的兄弟标签 $(‘#id‘).nextUntil(‘#i2‘) //直到找到id为i2的标签就结束查找，不包含他
$(‘#I2‘).next().next().text(); //链式
上一个：
$(‘#id‘).prev() $(‘#id‘).prevAll() $(‘#id‘).prevUntil(‘#i2‘)
父亲元素
$(‘#id‘).parent() $(‘#id‘).parents() //查找当前元素的所有父辈元素（爷爷辈、祖先辈都能找到） $(‘#id‘).parentUntil(‘body‘) //查找当前元素的所有父辈元素，直到遇到匹配的那个元素为止，这里直到body标签，不包含body标签，基本选择器都可以放到这里面使用
儿子和兄弟元素
$(‘#id‘).children(); $(‘#id‘).siblings(); //兄弟们，不包含自己， .siblings(‘#id‘), 也可以在添加选择器进一步筛选
find查找所有的后代元素
$(‘ul‘).find(‘#l3‘); //类似于 $(‘ul #l3‘)
filter过滤
$(‘li‘).filter(‘#l3‘);
八、jquery效果——显示隐藏
js中的三种隐藏和显示的方法，
1、通过.css设置属性，来控制显示、隐藏
//通过.css属性，来控制显示、隐藏
$(‘btn‘).click(function (){
$(‘#box‘).css(‘display‘, ‘block‘);
})2、Jquery提供方法show()、hide()控制元素显示隐藏
show:
show(spend, callback)
- speed：三种预定速度的字符串(‘show‘,‘normal‘, ‘fast‘)或表示动画时长的毫秒值(1000毫秒==1秒)
- callback:在动画完成时执行的函数，每个元素执行一次。
hide:
hide(speed,callback)跟show使用方法类似，表示隐藏显示的元素。
可以通过show()和hide()方法，来动态控制元素的显示隐藏。
var isShow = true;
$(‘#btn‘).click(function () {
if (isShow) {
// show(speed,callback)
$(‘#box‘).show(‘show‘,function () {
// alert(111);
$(this).text(‘盒子出来了‘);
isShow = false;
$(‘#btn‘).text(‘隐藏‘);
})
} else {
// 动画时长的毫秒值2000ms
$(‘#box‘).hide(2000,function () {
$(this).text(‘盒子消失了‘);
isShow = true;
$(‘#btn‘).text(‘显示‘);
})
}
})3、toggle开关
如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的
如果是仅仅显示和隐藏盒子，不需要操作文字，推荐使用toggle方法。
$(‘#btn‘).click(function () {
$(‘#box‘).toggle(3000,function () {
alert(111);
});
})九、jquery效果——slide高度变化显示隐藏
1、slideDown：通过高度变化（向下增大）来到动态地显示所有匹配的元素，在显示完成后触发一个回调函数。用法和参数跟上面类似。
2、slideUp：通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。用法和参数跟上面类似。
运用hover来触发回调，鼠标浮动其上触动显示和隐藏：
$(function () {
$(‘#btn‘).hover(function () {
$(‘#box‘).slideDown(2000);
},function () { // 第二个回调函数
$(‘#box‘).slideUp(‘slow‘);
})
})3、slideToggle：通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。和toggle用法类似。
$(‘#btn‘).click(function () {
$(‘#box‘).slideToggle(‘fast‘);
})十、jQuery效果——fade不透明度变化
1、fadeIn：通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化
2、fadeOut：通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
3、fadeTo：把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
4、fadeToggle：通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。实现淡入淡出的效果就是使用此方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>效果——slide</title>
<style type="text/css">
#box {
width: 100px;
height: 100px;
border: 1px solid red;
/*display: none;*/
background-color: yellow;
}
</style>
</head>
<body>
<div id="box">
</div>
<button id="btn">隐藏</button>
</body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
// $(‘#btn‘).click(function () {
$(‘#box‘).mouseover(function () { // 鼠标移动上去逐渐隐形
$(‘#box‘).fadeOut(2000);
/* 点击后内部样式表变为如下：
<div id="box" style="display: none;"></div>
*/
})
$(‘#btn‘).mouseout(function () { // 鼠标移动上去逐渐现形
// $(‘#box‘).fadeIn(2000);
$(‘#box‘).fadeTo(2000,0.3);
})
$(‘btn‘).click(function () {
$(‘#box‘).fadeToggle(3000);
})
})
</script>
</html>十一、jquery效果——animate动画
这是用于创建自定义动画的函数。
语法：animate(params,[speed],[fn])
- params:一组包含作为动画属性和终值的样式属性和及其值的集合。
- speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
- fn:在动画完成时执行的函数，每个元素执行一次。
$(function () {
$(‘#btn‘).click(function () {
/*
// params:一组包含作为动画属性和终值的样式属性和及其值的集合
$(‘#box‘).animate({
width: ‘200px‘,
height: ‘300px‘
})
*/
// 动画效果向右下方向移动
$(‘#box‘).animate({left:‘100px‘,top: ‘200px‘});
// 动画队列:动画效果是先右移、再下移
$(‘#box‘).animate({left:‘100px‘}).animate({top: ‘400px‘});
// 在运行时，stop方法停止动画
$(‘#box‘).animate({left:‘100px‘,top:‘300px‘}, 2000);
// delay方法延迟操作
$(‘#box‘).animate({left:‘100px‘}).delay(2000).animate({top: ‘400px‘});
})
$(‘#stop‘).click(function () {
$(‘#box‘).stop()
})
})1、stop：停止所有在指定元素上正在运行的动画
语法：stop([clearQueue],[jumpToEnd])
参数：clearQueue:如果设置成true，则清空队列。可以立即结束动画。
gotoEnd:让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等
2、delay：概念：用来做延迟的操作
语法：delay(1000)，一秒之后做后面的操作
十二、利用jquery效果——弹出广告
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹出广告</title>
<style type="text/css">
</style>
</head>
<body>
<div id="box" style="width: 330px;height: 480px;position: absolute;right: 10px;bottom: 0;display: none">
<img src="广告.png" style="width: 100%;height: 100%;"/>
</div>
</body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
// 排队去干活
$(‘#box‘).slideDown(‘normal‘).slideUp(‘fast‘).fadeIn(1000).click(function () {
$(this).fadeOut(1000); // 点击盒子1秒时间淡出
});
})
</script>
</html> 