一.JQuery介绍
1.介绍
(1)概念
jQuery 是一个 JavaScript 库，也是一个JS文件。 JQ中封装实现了很多方法，让使用变得更加简单不再像js那样需要使用大量的方法调用。但JQ也只是实现了一些方法，还有些没有实现，因此能够使用JQ是实现的，JS都能做，但是能够用JS做的，JQ不一定能够实现
(2)理念
JQ总的来说，体现了：write less， do more。简单来说，就是代码量少，功能强大。
(3)特性
1、丰富的强大的语法（CSS选择器），来查询文档元素
2、高效的查询方法，用来找到与CSS选择器匹配的文档元素集
3、一套有用的方法，用来操作选中的元素
4、强大的函数式编程技巧，用来批量操作元素集，而不是每次只操作单个
5、简介的语言用法（链式用法），用来表示一系列顺序操作。
2.jq库
(1)官网
官网地址：https://jquery.com/
国内翻译参考：http://jquery.cuishifeng.cn/
前端资源查找：https://www.bootcdn.cn/
(2)标准版本
JQuery完整版本，包含注释等，学习时可以参考，建议学习使用
下载地址：https://cdn.bootcss.com/jquery/3.4.1/jquery.js
(3)压缩版
压缩版去除了不必要的注释和空格，变量名等内部标识符也替换成更短的名字
下载地址：https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js
3.引用jq库
<!--引用jq的库-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<!--<script src="../JS/jq1.js"></script>-->
<script type="text/javascript">
//在script书写js和jq的代码
$(function () {
alert(1111)
})
</script>
在JQ中，$()是最重要的方法，可以传递CSS选择器、Element、Document或者Window对象、HTML文本字符串、函数、字符串等对象
注意：JQ的API只对自己开放，JQ不能用js的API，js也不能用JQ的API
二.JQuery获取元素
<div class="box">圣美</div>
<!--引用jq的库-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script type="text/javascript">
//js获取元素
// obox = document.querySelector('.box')
//jq获取元素,css如何获取元素，jq就怎么获取
$box = $('.box')
console.log($box)
</script>
1.jq修改标签内容
html()
$box = $('.box')
// $box.innerText = '小千' //不可以使用js的方法去引用jq对象
$box.text('小千') //修改文本内容
console.log($box.text()); //jq获取文本内容
text()
$box = $('.box')
// $box.innerHTML = '小千' //不可以使用js的方法去引用jq对象
$box.html('<h1>小千</h1>') //修改标签内容
console.log($box.html()); //jq获取标签
val()
<input type="text">
<button>单击</button>
<!--引用jq的库-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script type="text/javascript">
inp = document.querySelector('input')
btn = document.querySelector('button')
btn.onclick = function () {
console.log($(inp).val()); //jq获取表单值
}
</script>
jq与js对比
<ul>
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
</ul>
<!--引用jq的库-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script type="text/javascript">
//修改所有无序列表下li的内容
//js实现
// obox = document.querySelectorAll('ul li')
// obox[0].innerText = 'python'
// obox[1].innerText = 'python'
// obox[2].innerText = 'python'
// obox[3].innerText = 'python'
// jq实现 一次性操控所有元素
$li = $('ul li')
// $li.text('python')
// console.log($li.text());
//eq(索引)选取指定元素操控
$li.eq(1).text('python')
</script>
2.jq与js对象相互转换
//js对象
box = document.querySelector('.box')
//js转jq对象 -->直接将js对象丢入$()内
box1 = $(box)
console.log(box1.text()) //可以
js—>jq
// $li = $('ul li')[1] //直接使用索引转换
$li = $('ul li').get(0) //get选取索引
console.log($li.innerText) //可以
jq—>特定的jq
$li = $('ul li').eq(1) //eq选取索引，jq特定
console.log($li.innerText) //不可以
each()遍历
each内部可以使用js方法，也可以用jq的形式
$('ul li').each(function (i) {
// console.log($('ul li').eq(i).text())
//this表示当前遍历的元素,js对象
// console.log(this.innerText);
//js转jq再去获取文本内容
console.log($(this).text());
})
三.JQuery操作HTML属性
1.attr属性操作
<div id="box">
<span class="sp1"></span>
<span class="sp2"></span>
<span class="sp3"></span>
</div>
<!--引用jq的库-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script type="text/javascript">
//attr属性操作
console.log($('#box').attr('id')); //获取属性值
//获取属性值是默认输出第一个【0】
// console.log($('span').attr('class')); //sp1
// console.log($('span').eq(1).attr('class')); //sp2
//有则改，无则增
$('#box').attr('class','box') //添加属性值
$('span').attr('class','box') //修改属性值
</script>
removeAttr删除属性
$('#box').removeAttr('id')
$('span').removeAttr('class')
2.class属性操作
addClass添加属性值
$('#box').addClass('box') //添加class属性值
$('#box').addClass('box1') //添加class属性值,只添加不修改
removeClass删除属性值
$('#box').removeClass('box1')
toggleClass无则增，有则删
$('#box').toggleClass('box') //增
$('#box').toggleClass('box1') //增
$('#box').toggleClass('box1') //删
四.JQuery操作CSS样式
//更改一个样式
// $('#box').css('height','400px')
//更改多个样式 {键：值}
$('#box').css({
'width':'400px',
'height':'400px',
'backgroundColor':'blue'
})
五.JQuery事件
1.click 单击事件
$('#box').click(function () {
alert('圣美')
})
2.dbclick 双击事件
$('#box2').dblclick(function () {
$('#box2').text('圣美0')
})
3.hover 移入移出
$('#box3').hover(function () {
$('#box3').text('子冧'); //移入函数
},function () {
$('#box3').text('圣美'); //移出函数
})
4.移入mouseenter移出mouseleave
$('#box3').mouseenter(function () {
$('#box3').text('子冧'); //移入函数
})
$('#box3').mouseleave(function () {
$('#box3').text('圣美'); //移出函数
})
5.on 绑定事件
//on 绑定单个事件
// $('div').on('click',function () {
// $(this).text('圣美')
// $(this).css('color','red')
// })
//on 绑定多个事件
$('div').on({
'click':function () { //单击
$(this).text('圣美')
},
'mouseenter':function () { //移入
$(this).text('子')
},
'mouseleave':function () { //移除
$(this).text('冧')
}
})
6.off 移除事件
$('div').click(function () {
// $('div').off('click') //移除单个事件
$('div').off() //移除所有事件
})
六.JQuery动画
show 显示
hide 隐藏
toggle 自动显示隐藏
fadeIn 淡入
fadeOut 淡出
fadeTo(1000, 0.1) 自动淡入淡出，可以把透明度设置一个值，时间参数不能省略
slideDown 向上收缩
slideUp 向下隐藏
slideToggle 自动向上隐藏和向下显示
<div id="box" style="width: 200px;height: 200px;background: pink;"></div>
<button id="btn1">隐藏</button>
<button id="btn2">显示</button>
<button id="btn3">淡入</button>
<button id="btn4">淡出</button>
<button id="btn5">向上</button>
<button id="btn6">向下</button>
<!--引用jq的库-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script type="text/javascript">
//元素隐藏和显示
$('#btn1').click(function () {
$('#box').hide(1000) //隐藏 毫秒时间
// $('#box').toggle(1000) //自动隐藏和显示
})
$('#btn2').click(function () {
$('#box').show(1000) //显示 毫秒时间
// $('#box').toggle(1000) //自动隐藏和显示
})
//淡入淡出
$('#btn3').click(function () {
// $('#box').fadeIn(2000) //淡入 毫秒时间
$('#box').fadeTo(2000,0.3) //淡入和淡出 毫秒时间 透明度
})
$('#btn4').click(function () {
// $('#box').fadeOut(2000) //淡出 毫秒时间
$('#box').fadeTo(2000,0.8) //淡入和淡出 毫秒时间 透明度
})
//元素的缩放
$('#btn5').click(function () {
// $('#box').slideUp(2000) //向上隐藏 毫秒时间
$('#box').slideToggle(2000) //向上隐藏和向下显示 毫秒时间
})
$('#btn6').click(function () {
// $('#box').slideDown(2000) //向下显示 毫秒时间 透明度
$('#box').slideToggle(2000) //向上隐藏和向下显示 毫秒时间
})
</script>
animate 自定义动画
<button id="btn1">展示动画</button>
<button id="btn2">暂停动画</button>
<div id="box" style="width: 200px;height: 200px;background: pink;position: absolute;"></div>
<!--引用jq的库-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script type="text/javascript">
// animate 自定义动画
$('#btn1').click(function () {
$('#box').animate({
'width':'400px',
'height':'400px',
//让块移动（默认静态定位） 定位：绝对、相对、固定
"left":"+=250px", //可以累加
// "top":"+=250px", //可以累加
//透明度
"opacity":"0.5",
},2000).delay(4000) //delay 动画延迟一段时间
})
//stop 暂停动画
$('#btn2').click(function () {
$('#box').stop()
})
</script>
1190
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
