本文介绍了jQuery库的基本使用，包括下载、入口函数、DOM对象与jQuery对象转换、基本选择器、层级选择器、属性选择器、过滤选择器等，并展示了在实际场景中的应用，如事件绑定、元素筛选与操作。此外，还通过示例演示了如何利用siblings方法实现选项卡功能。
jquery介绍
jquery时一个快速、小巧、功能丰富的javascript库，只是封装了js的dom操作和ajax。
jquery下载
压缩版：用于生产环境，jquery-3.3.1…min.js
未压缩版：用于开发环境，jquery-3.3.1.js
使用jquery
引入包：<script type="text/javascript" src="jquery-3.3.1.js"></script>
jquery是全局的一个函数，当调用$()时，内部会帮我们new jQuery，创建出对象之后，使用对象的属性和方法。
自执行函数：把当前函数的声明直接用括号包起来，再加括号直接调用。
(function add(){
return 1;
})();
入口函数
在使用window.onload时候是有很多问题的，如有覆盖现象、需等待图片资源加载完成才调用脚本代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-3.6.0.js"></script>
</head>
<body>
<script>
// 入口函数
console.log($(document)); // 返回的是jQuery对象
console.log($(document[0])) // 获取js的document对象
// 1.jquery入口函数，等待文档资源加载完成之后调用此方法。
$(document).ready(function(){
alert(1);
})
// 2.jquery简便写法入口函数，等待文档资源加载完成之后调用此方法，使用较多
$(function(){
alert(2);
})
// 表示图片资源加载完成之后调用
$(window).ready(function(){
alert(3);
})
// 不会出现入口函数覆盖现象
</script>
</body>
</html>
jQuery对象和js对象互相转换
如果是js对象更加希望转换成jquery来操作简单的DOM，因为js是包含jquery的，jquery只封装了DOM事件ajax动画。
如果是jquery对象一定要调用jquery对象的属性和方法，如果是js对象一定要调用js的属性和方法，千万不要将这两个对象混淆，在jquery中大部分都是api。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-3.6.0.js"></script>
</head>
<body>
<div class="box1"></div>
<div id="box2"></div>
<script>
$(function(){
// 获取jQuery对象
console.log($('#box2'));
// 获取js对象
var oBox2 = document.getElementById('box2');
console.log(oBox2);
//jQuery对象 ===> js对象
console.log($('#box2')[0]);
console.log($('#box2').get(0));
//js对象 ===>jQuery对象
console.log($(oBox2)); // $(js对象)
})
</script>
</body>
</html>
jQuery基本选择器和基本DOM使用
标签选择器：$('div')
id选择器：$('#标签id值')
类选择器：$('.类值')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-3.6.0.js"></script>
<style>
div{
width:100px;
height:100px;
background-color:red;
margin-top:10px;
}
</style>
</head>
<body>
<div class="box1">三藏</div>
<div id="box2">悟空</div>
<div>八戒</div>
<script>
$(function(){
// jquery内部自己遍历
$('div').click(function(){
// this 指的是js对象
console.log(this.innerText);
// 转换为jQuery对象
console.log($(this).text());
alert($(this).text());
});
})
</script>
</body>
</html>
选择器
层级选择器
- 空格 后代选择器，选择所有的后代元素
-
子代选择器，选择所有的子代元素
- +紧邻选择器，紧挨着的下一个元素
$('div+p') - ~兄弟选择器，选择后面的所有兄弟元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-3.6.0.js"></script>
</head>
<body>
<ul class="lists">
<li>
附加
<ol>
<li>1</li>
</ol>
</li>
<li class="item">
<a href="">是一个a标签</a>
</li>
<li>3</li>
<li class="item2">4</li>
<li>5</li>
<li>6</li>
</ul>
<script>
$(function(){
// 后代选择器, 修改样式属性, 选中所有的后代标并设置字体颜色为红色
$('.lists li').css('color', 'red');
// 子代选择器 亲儿子
$('.item>a').css({'font-size':'20px'}); // 设置多个属性样式
// 紧邻过滤器
$('.item+li').css({'color':'green'}); //紧挨着item的下面的li标签
// 兄弟选择器
$('.item2~li').css({'color':'purple'}); //item下的所有兄弟标签
})
</script>
</body>
</html>
效果：
基本过滤选择器
选出了10个标签，想选择第二个，第四个，该怎么选？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-3.6.0.js"></script>
</head>
<body>
<ul class="lists">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
$(function(){
// :eq
// 写法: $('ul li:eq(0)') 选中第一个元素
// 1. :eq(index) 选择序号为index的元素
$('ul li:eq(0)').css('background', 'red');
// 2. :gt(index) 选择序号大于index的元素
// 3. :lt(index) 选择序号小于 index的元素
// 4. :add 选取的是序号为奇数的元素
// 5. :even 选取的是序号为偶数的元素
// 6. :first 选取第一个元素
// 7. :last 选取最后一个元素
})
</script>
</body>
</html>
效果：
属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-3.6.0.js"></script>
</head>
<body>
<ul class="lists">
<li>1</li>
<li class="l">2</li>
<li class="l2">3</li>
<li>4</li>
<form action="">
<input type="text">
<input type="password">
</form>
</ul>
<script>
$(function(){
// 1. 包含class的所有元素， 标签名[属性名] 查找所有含有class属性的改标签的元素
$('li[class]').css('color', 'red');
// 2. class属性值为"l2"的li元素
$('li[class="l2"]').css('font-size', '20px');
// 3. $('li[class!="l"]') 选择li标签中class值不等于"l"的所有标签
// 4. $('li[class^="l"]') 选择li标签中class值以l"开头的所有标签
// 5. $= 以什么结尾的
// 6. *= 选择所有包含某个字符的
// 选择input标签的type属性值为text的标签
$('input[type="text"]').css('background', 'red');
})
</script>
</body>
</html>
效果：
筛选选择器(通过方法调用)
- find(selector) 查找制定元素的所有后代元素（包括子子孙孙）
- children() 查找指定元素的直接子元素（亲儿子）
- siblings() 查找所有的兄弟元素，不包括自己
- parent() 查找父元素（亲的）
- eq(index) 查找制定元素的第index个元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-3.6.0.js"></script>
</head>
<body>
<div class="box">
<p><span class="child">悟空1</span></p>
<p><span class="active">悟空2</span></p>
<p class="item3">悟空3</p>
<p>悟空4</p>
<p>悟空5</p>
<p>悟空6</p>
<div class="child">哈哈</div>
</div>
<script>
$(function(){
//1. find(selector) 括号中放选择器，查找后代包括子子孙孙，返回jQuery对象
$('.box').find('.item3').css('color', 'red'); // 此时返回的依旧是jQuery对象，叫链式编程
$('.box').find('p>.active').css('color', 'green').click(function(){
alert($(this).text());
});
//2. children(selector) 获取的是亲儿子
$('.box').children('.child').css('color','yellow');
// 3. parent 获取的是亲爹
// eq(index) index是从0开始的
$('.box').children().eq(0).css("font-size", 30);
})
</script>
</body>
</html>
效果：
siblings
使用siblings实现选项卡功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-3.6.0.js"></script>
<style>
button{
width:100px;
height:20px;
}
</style>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<script>
$(function(){
$('button').click(function(){
// 实现选项卡
$(this).css('background', 'red').siblings('button').css('background', 'transparent');
})
})
</script>
</body>
</html>
效果：
siblings实现tab栏选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-3.6.0.js"></script>
<style>
*{
padding:0;
margin:0;
}
ul{
list-style:none;
}
#tab{
width:480px;
margin:20px auto;
border: 1px solid red;
}
ul{
overflow:hidden;
}
#tab ul li{
float:left;
width:160px;
height:60px;
line-height:60px;
text-align:center;
background-color:#ccc;
}
#tab ul li a{
color:black;
display:inline-block;
width:100%;
height:100%;
text-decoration:none;
}
#tab ul li.active{
background-color:red;
}
#tab p{
display:none;
}
#tab p.active{
display:block;
height:200px;
text-align:center;
line-height:200px;
background-color:red;
}
</style>
</head>
<body>
<div id="tab">
<ul>
<li class="active">
<a href="javascript:void(0)">首页</a>
</li>
<li>
<a href="javascript:void(0)">新闻</a>
</li>
<li>
<a href="javascript:void(0)">照片</a>
</li>
</ul>
<p class="active">首页内容</p>
<p>新闻内容</p>
<p>图片内容</p>
</div>
<script>
// 需求是鼠标放在li上，li本身变色，对应p标签也显示出来
$('#tab ul li a').click(function(){
$(this).parent('li').attr('class','active').siblings('li').attr('class', '');
// 获取对应li的标签的元素索引，要找的是有兄弟元素的索引。
var i = $(this).parent('li').index();
$('p').eq(i).attr('class', 'active').siblings('p').removeClass('active');
})
</script>
</body>
</html>
效果
扫一扫
569
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
