JQuery
JQuery
文章目录
- JQuery
-
-
-
- 什么是JQuery
- JQuery使用
- 为什么使用jQuery
- 开始jQuery
-
-
- 选择器
- jQuery对象的写法
- js的DOM对象和jQuery对象的区别
- DOM操作
-
- 属性的获取与操作
- class的操作
- dom操作
- html事件
-
- jQuery动画
- dom遍历
- 五角星案例
-
-
-
https://www.jquery123.com/
https://jquery.cuishifeng.cn/
什么是JQuery
jquery一个高效的，精简的且功能丰富的JavaScript工具库，满足了各种浏览器的兼容问题
web应用发展的过程中，jquery起到了不可或缺的推动作用
当下框架流行的时代，jquery不再那么适用
使用jquery感受，简单简洁，链式调用，读写一体
JQuery使用
下载—— 引入、
下载
https://jquery.com/download/
引入
版本 1.x ie6+ ,2.X IE 9+ ,3.X IE10+
入口
为什么使用jQuery
写少的代码，做多的事情
免费 轻量级的js库，容量很小
兼容市面上的主流浏览器
注意jQuery不是将所有的js封装，只是有选择的封装
完善的Ajax应用，使Ajax变得简单
DOM操作简单化
丰富的插件支持，强大的易扩展性
开始jQuery
选择器
- 基本选择器
- 属性选择器
- 层级选择器
- …
- 过滤选择器
- 选择的方法
jQuery对象的写法
// console.log(document.getElementById('box')) null
// window.onload = function () {
// console.log(document.getElementById('box'))
// }
// window.onload = function () {
// console.log(1)
// }
// console.log($('#box'))
// 为了防止文档结构还没有完全加载就运行jQusery代码
// $(document).ready(function () {
// // 写jquery代码
// })
// 简写
$(function () {
// 写jquery代码
console.log($('#box'))
})
$(function () {
// 写jquery代码
console.log(123)
})
// 以上两种写法 相当于js中的window.onload = function(){}
// 区别
/*
1：执行时机
window.onload必须再网页中所有的内容都加载完毕之后才可执行(包括图片img)
$(document).ready(function () {})页面当中的DOM结构绘制加载完毕即可执行，可能
与dom元素关联的并未完全加载完
2：编写个数
window.onload只能写一个
$(document).ready(function () {})可以编写多个 并且都会执行
3：简化写法
window.onload没有简化写法
( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) ) 可以简化为 (document).ready(function () {})可以简化为 (document).ready(function())可以简化为(function(){})
js的DOM对象和jQuery对象的区别
<div id="box">123</div>
<script>
// JavaScript通过js相关对象方法获取的对象
var box = document.getElementById('box')
// console.log(box)
// 通过jQuery包装后产生的对象 jQuery对象
// console.log($('#box'))
// 注意:jQuery对象无法应用Dom对象的任何方法，Dom对象无法应用jquery的任何方法
// jQuery对象和js对象可以相互转换
// var $c = $('#box')
// 第一种 转换为js对象
// var c = $c[0]
// console.log(c)
// 第二种 转换为js对象
// var c = $c.get(0)
// console.log(c)
// javascript对象转jQuery对象
var $cr = $(box)
console.log($cr)
</script>
DOM操作
val()
html()
width()
height()
text()
innerWidth()
attr()
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
<style>
.mytext {
width: 300px;
height: 200px;
padding: 50px;
border: 10px solid red;
}
.one {
color: red;
}
.two {
color: blue;
}
</style>
</head>
<body>
<div class="mytext">
jquery是js的工具库
<span>span标签</span>
</div>
<button id="btn">删除</button>
<div class="box"></div>
<a href="#">连接</a>
</body>
<script>
// 属性操作与获取
// console.log($('.mytext').text())
// console.log($('.mytext').html())
// // $('.box').text("超链接")
// $('.box').html("超链接")
// console.log($('.mytext').width())
// console.log($('.mytext').height())
// $('.mytext').width(100)
// $('.mytext').height(100)
// console.log($('.mytext').innerWidth()) //width +padding
// console.log($('.mytext').innerHeight()) //height +padding
// console.log($('.mytext').outerHeight()) //width +padding+border
// console.log($('.mytext').outerWidth()) //height +padding+border
console.log($('a').attr('href'))
$('a').attr('href', 'http://www.baidu.com')
</script>
</html>
属性的获取与操作
class的操作
$('.mytext').addClass('one')
$('.mytext').removeClass('one')
$('.mytext').toggleClass('two')
console.log($('.mytext').hasClass('two')) //true
dom操作
// dom节点的操作
// 添加
// $('.mytext').append('我是h1标签
')
// $('.mytext').prepend('我是h1标签
')
// $('.mytext').before('我是h1标签
')
// $('.mytext').after('我是h1标签
')
$('#btn').click(function () {
// $('.mytext').remove()//当前dom全部删除
$('.mytext').empty() //清空子元素 当前dom还在
})
html事件
jQuery动画
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
<style>
.box {
width: 300px;
height: 300px;
background-color: green;
}
</style>
</head>
<body>
<div class="box"></div>
<button id="btn">显示</button>
<button id="btn1">隐藏</button>
<button id="btn2">显示/隐藏</button>
<button id="btn3">滑入</button>
<button id="btn4">滑出</button>
<button id="btn5">滑入/滑出</button>
<button id="btn6">淡入</button>
<button id="btn7">淡出</button>
<button id="btn8">淡入/淡出</button>
</body>
<script>
/*
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。
*/
$('#btn').click(function () {
// $('.box').show()
// $('.box').show('slow')
// $('.box').show(3000)
$('.box').show(3000, function () {
alert('wo的动画执行完成')
})
})
$('#btn1').click(function () {
// $('.box').hide()
$('.box').hide(3000)
})
$('#btn2').click(function () {
$('.box').toggle(3000)
})
$('#btn3').click(function () {
$('.box').slideDown(3000, function () {
alert('wo的动画执行完成')
})
})
$('#btn4').click(function () {
$('.box').slideUp(3000)
})
$('#btn5').click(function () {
$('.box').slideToggle(3000)
})
$('#btn6').click(function () {
$('.box').fadeIn(3000, function () {
alert('wo的动画执行完成')
})
})
$('#btn7').click(function () {
$('.box').fadeOut(3000)
})
$('#btn8').click(function () {
$('.box').fadeTo(3000, 0.6)
})
</script>
</html>
dom遍历
// 遍历子孙节点 children find
// $('ul').children('.list1').addClass('one') //查找符合某种选择器的孩子节点 参数选填
// $('ul').find('.list5').addClass('one') //查找符合某种选择器的孩子节点 参数必填
// 遍历祖先节点 parent parents parentUntil
// $('span').parent().addClass('one')
// $('span').parents().addClass('one')
// 查找span的祖先元素 但是不包含body
// $('span').parentsUntil('body').addClass('one')
// 遍历同级节点 siiblings next nextUntil nextAll prev prevUntil prevAll
// $('.list').siblings().addClass('one')
// $('.list3').next().addClass('one')
// $('.list').nextAll().addClass('one')
// $('.list').nextUntil('.list5').addClass('one')
// $('.list3').prev().addClass('one')
// $('.list3').prevAll().addClass('one')
// 给.list3前面直到.list前的元素加上类 one
$('.list3').prevUntil('.list').addClass('one')
五角星案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.comment{
font-size: 40px;
color: red;
}
.comment li{
float: left;
cursor: pointer;
}
ul{
list-style: none;
}
</style>
</head>
<body>
<ul class="comment">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
<script>
$(function(){
var wjx_none='☆'
var wjx_sel='★'
//鼠标放上去当前的li和之前的所有的li的内容全部变为实心五角星 移开变成空心
$('.comment li').on('mouseenter',function(){
//$(this).text(wjx_sel).prevAll('li').text(wjx_sel)
//$(this).nextAll('li').text(wjx_none)
//end() 结束之后再使用，相当于重新一行再次使用this
$(this).text(wjx_sel).prevAll('li').text(wjx_sel).end().nextAll('li').text(wjx_none)
$('.comment li').on('mouseleave', function () {
// current用来记录离开时的星星
if ($('li.current').length === 0) {
$('.comment li').text(wjx_none)
} else {
$('li.current')
.text(wjx_sel)
.prevAll('li')
.text(wjx_sel)
.end()
.nextAll('li')
.text(wjx_none)
}
})
$('.comment li').on('click', function () {
$(this).attr('class', 'current').siblings('li').removeAttr('class')
})
})
})
</script>
</body>
</html>