您的位置：首页 > Web前端 > JQuery

JQuery入门学习及简单案例

2019-10-20 16:05 1306 查看

1.JQuery的概念

JQuery是基于javascript类库的框架，它里面提供了许多javascript类库，和一些css样式表的封装，使用起来比较方便，简化了用户与浏览器的交互，提高了系统的性能和开发效率。

JQuery设计的宗旨是“write Less，DoMore”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

JQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

2.JQuery快速入门

（1）JQuery下载，【百度网盘vdnc】。
①JQuery-xxx.js是开发版本，给开发人员看的，有良好的缩进和注释；
②JQuery-xxx.min.js是生产版本，在程序中使用，没有缩进和注释，体积小，程序加载快。

（2）导入JQuery到项目中。
（3）在页面引入JQuery库。

3.JQuery对象和JS对象的区别与转换

因为，JQuery对象和JS对象方法是不通用的，所以两者需要相互转换后才能使用对应的方法。
（1）JQuery对象转换为JS对象：

JS对象[索引]

或

JS对象.get(索引)

（2）JS对象转换为JQuery对象：

$(JS对象)

4.JQuery的选择器

（1）基本选择器

举例	语法	描述
标签选择器（元素选择器）	$("html标签名")	获得所有匹配标签名称的元素
id选择器	$("#id属性值")	获得与指定id属性值匹配的元素
类选择器	$(".class属性值")	获得与指定的class属性值匹配的元素
并集选择器	$("选择器1,选择器2....")	获取多个选择器选中的所有元素

（2）层级选择器

举例	语法	描述
后代选择器	$("A B")	选择A元素内部的所有B元素
子选择器	$("A > B")	选择A元素内部的所有B子元素

（3）属性选择器

举例	语法	描述
属性名称选择器	$("A[属性名]")	包含指定属性的选择器
属性选择器	$("A[属性名='值']")	包含指定属性等于指定值的选择器
复合属性选择器	$("A[属性名='值'][]...")	包含多个属性条件的选择器

（4）过滤选择器

举例	语法	描述
首元素选择器	:first	获得选择的元素中的第一个元素
尾元素选择器	:last	获得选择的元素中的最后一个元素
非元素选择器	:not(selector)	不包括指定内容的元素
偶数选择器	:even	偶数，从 0 开始计数
奇数选择器	:odd	奇数，从 0 开始计数
等于索引选择器	:eq(index)	指定索引元素
大于索引选择器	:gt(index)	大于指定索引元素
小于索引选择器	:lt(index)	小于指定索引元素
标题选择器	:header	获得标题（h1~h6）元素，固定写法

（5）表单过滤选择器

举例	语法	描述
可用元素选择器	:enabled	获得可用元素
不可用元素选择器	:disabled	获得不可用元素
单选框选中选择器	:checked	获得单选/复选框选中的元素
下拉框选中选择器	:selected	获得下拉框选中的元素

5.JQuery的DOM操作

（1）内容操作

方法	描述
html()	获取/设置元素的标签体内容
text()	获取/设置元素的标签体纯文本内容
val()	获取/设置元素的value属性值

（2）属性操作

方法	描述
attr()	获取/设置元素的属性
removeAttr()	删除属性
prop()	获取/设置元素的属性
removeProp()	删除属性
addClass()	添加class属性值
removeClass()	删除class属性值
toggleClass()	切换class属性

attr()

和
prop()
区别？
如果操作的是元素的固有属性，则建议使用

prop()

；如果操作的是元素自定义的属性，则建议使用

attr()

。

toggleClass("one")

：判断如果元素对象上存在

class="one"

，则将属性值one删除掉。如果元素对象上不存在

class="one"

，则添加。

（2）CRUD操作

方法	描述
append()	在被选元素的结尾插入指定内容
prepend()	在被选元素的开头插入内容
appendTo()	在被选元素的结尾插入 HTML 元素
prependTo()	在被选元素的开头插入 HTML 元素
after()	在被选元素后插入指定的内容
before()	在被选元素前插入内容
insertAfter()	在被选元素后插入 HTML 元素
insertBefore()	被选元素前插入 HTML 元素
remove()	移除元素
empty()	清空元素的所有后代元素

6.JQuery的几个简单案例

（1）隔行换色

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>隔行换色</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
//需求：将数据行的奇数行背景色设置为gray，偶数行背景色设置为pink
$(function () {
//1. 获取数据行的奇数行的tr，设置背景色为gray
$("tr:gt(1):odd").css("backgroundColor", "gray");
//2. 获取数据行的偶数行的tr,设置背景色为pink
$("tr:gt(1):even").css("backgroundColor", "pink");
});
</script>
</head>
<body>
<table id="tab1" border="1" width="800" align="center">
<tr>
<td colspan="5"><input type="button" value="删除"></td>
</tr>
<tr style="background-color: #999999;">
<th><input type="checkbox"></th>
<th>ID</th>
<th>名称</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>0</td>
<td>Atlantis</td>
<td>男</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1</td>
<td>Andersen</td>
<td>男</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>2</td>
<td>长安</td>
<td>女</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>3</td>
<td>安徒生</td>
<td>男</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</table>
</body>
</html>

（2）全选全不选

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全选和全不选</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
//分析：需要保证下边的选中状态和第一个复选框的选中状态一致即可
function selectAll(obj){
//获取下边的复选框
$(".itemSelect").prop("checked",obj.checked);
}
</script>

</head>
<body>
<table id="tab1" border="1" width="800" align="center">
<tr>
<td colspan="5"><input type="button" value="删除"></td>
</tr>
<tr style="background-color: #999999;">
<th><input type="checkbox" onclick="selectAll(this)"></th>
<th>ID</th>
<th>名称</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>0</td>
<td>Atlantis</td>
<td>男</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>1</td>
<td>Andersen</td>
<td>男</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>2</td>
<td>长安</td>
<td>女</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>3</td>
<td>安徒生</td>
<td>男</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</table>
</body>
</html>

（3）QQ表情选择

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>QQ表情选择</title>
<script src="js/jquery-3.3.1.min.js"></script>
<style type="text/css">
* { margin: 0;padding: 0;list-style: none;}
.emoji { margin: 50px;}
ul { overflow: hidden;}
li { float: left;width: 48px;height: 48px;cursor: pointer;}
.emoji img { cursor: pointer;}
</style>
<script>
//需求：点击qq表情，将其追加到发言框中
$(function () {
//1.给img图片添加onclick事件
$("ul img").click(function(){
//2.追加到p标签中即可。
$(".word").append($(this).clone());
});
});
</script>
</head>
<body>
<div class="emoji">
<ul>
<li><img src="img/01.gif" height="22" width="22" alt=""/></li>
<li><img src="img/02.gif" height="22" width="22" alt=""/></li>
<li><img src="img/03.gif" height="22" width="22" alt=""/></li>
<li><img src="img/04.gif" height="22" width="22" alt=""/></li>
<li><img src="img/05.gif" height="22" width="22" alt=""/></li>
<li><img src="img/06.gif" height="22" width="22" alt=""/></li>
<li><img src="img/07.gif" height="22" width="22" alt=""/></li>
<li><img src="img/08.gif" height="22" width="22" alt=""/></li>
<li><img src="img/09.gif" height="22" width="22" alt=""/></li>
<li><img src="img/10.gif" height="22" width="22" alt=""/></li>
<li><img src="img/11.gif" height="22" width="22" alt=""/></li>
<li><img src="img/12.gif" height="22" width="22" alt=""/></li>
</ul>
<p class="word">
<strong>请发言：</strong>
<img src="img/12.gif" height="22" width="22" alt=""/>
</p>
</div>
</body>
</html>

（4）多选下拉列表的左右移动

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左右移动</title>
<script src="js/jquery-3.3.1.min.js"></script>
<style>
#leftName, #btn, #rightName { float: left;width: 100px;height: 300px;}
#toRight, #toLeft { margin-top: 100px;margin-left: 30px;width: 50px;}
.border { height: 500px;padding: 100px;}
</style>
<script>
//需求：实现下拉列表选中条目左右选择功能
$(function () {
//toRight
$("#toRight").click(function () {
//获取右边的下拉列表对象，append(左边下拉列表选中的option)
$("#rightName").append($("#leftName > option:selected"));
});

//toLeft
$("#toLeft").click(function () {
//appendTo   获取右边选中的option，将其移动到左边下拉列表中
$("#rightName > option:selected").appendTo($("#leftName"));
});
});
</script>
</head>
<body>
<div class="border">
<select id="leftName" multiple="multiple">
<option>Atlantis</option>
<option>Andersen</option>
<option>长安</option>
<option>安徒生</option>
</select>
<div id="btn">
<input type="button" id="toRight" value="-->"><br>
<input type="button" id="toLeft" value="<--">
</div>
<select id="rightName" multiple="multiple">
<option>格林</option>
</select>
</div>
</body>
</html>

（5）广告显示和隐藏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>广告的自动显示与隐藏</title>
<style>
#content { width: 100%;height: 500px;background: #999}
</style>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
/*  需求：
1. 当页面加载完，3秒后。自动显示广告
2. 广告显示5秒后，自动消失。
分析：
1. 使用定时器来完成。setTimeout (执行一次定时器)
2. 分析发现JQuery的显示和隐藏动画效果其实就是控制display
3. 使用  show/hide方法来完成广告的显示
*/
//入口函数，在页面加载完成之后，定义定时器，调用这两个方法
$(function () {
//定义定时器，调用adShow方法 3秒后执行一次
setTimeout(adShow, 3000);
//定义定时器，调用adHide方法，8秒后执行一次
setTimeout(adHide, 8000);
});

//显示广告
function adShow() {
//获取广告div，调用显示方法
$("#ad").show("slow");
}

//隐藏广告
function adHide() {
//获取广告div，调用隐藏方法
$("#ad").hide("slow");
}
</script>
</head>
<body>
<div>
<!-- 广告DIV -->
<div id="ad" style="display: none;">
<img style="width:100%" src="img/adv.jpg"/>
</div>
<!-- 下方正文部分 -->
<div id="content">
正文部分
</div>
</div>
</body>
</html>

（6）抽奖

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery案例之抽奖</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script language='javascript' type='text/javascript'>
/* 分析：
1. 给开始按钮绑定单击事件
1.1 定义循环定时器
1.2 切换小相框的src属性
* 定义数组，存放图片资源路径
* 生成随机数。数组索引
2. 给结束按钮绑定单击事件
1.1 停止定时器
1.2 给大相框设置src属性
*/
var imgs = ["img/man00.jpg", "img/man01.jpg", "img/man02.jpg", "img/man03.jpg",
"img/man04.jpg", "img/man05.jpg", "img/man06.jpg",
];
var startId;//开始定时器的id
var index;//随机角标
$(function () {
//处理按钮是否可以使用的效果
$("#startID").prop("disabled",false);
$("#stopID").prop("disabled",true);
//1. 给开始按钮绑定单击事件
$("#startID").click(function () {
// 1.1 定义循环定时器 20毫秒执行一次
startId = setInterval(function () {
//处理按钮是否可以使用的效果
$("#startID").prop("disabled",true);
$("#stopID").prop("disabled",false);
//1.2生成随机角标 0-6
index = Math.floor(Math.random() * 7);//0.000--0.999 --> * 7 --> 0.0-----6.9999
//1.3设置小相框的src属性
$("#img1ID").prop("src",imgs[index]);
},20);
});

//2. 给结束按钮绑定单击事件
$("#stopID").click(function () {
//处理按钮是否可以使用的效果
$("#startID").prop("disabled",false);
$("#stopID").prop("disabled",true);
// 1.1 停止定时器
clearInterval(startId);
// 1.2 给大相框设置src属性
$("#img2ID").prop("src",imgs[index]).hide();
//显示1秒之后
$("#img2ID").show(1000);
});
});
</script>
</head>
<body>
<!-- 小像框 -->
<div style="border-style:dotted;width:160px;height:100px">
<img id="img1ID" src="img/man00.jpg" style="width:160px;height:100px"/>
</div>
<!-- 大像框 -->
<div style="border-style:double;width:400px;height:300px;position:absolute;left:500px;top:10px">
<img id="img2ID" src="img/man00.jpg" width="400px" height="300px"/>
</div>
<!-- 开始按钮 -->
<input id="startID" type="button" value="点击开始" style="width:150px;height:150px;font-size:22px">
<!-- 停止按钮 -->
<input id="stopID" type="button" value="点击停止" style="width:150px;height:150px;font-size:22px">
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航