jQuery入门
【摘要】 一、jQuery3.3.1 1、jQuery是什么？简介：jQuery是一个快速、简洁的JavaScript框架，于2006年1月由John Resig发布。jQuery设计的宗旨是"write Less，Do More"，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Aj...
一、jQuery3.3.1
1、jQuery是什么？
简介：jQuery是一个快速、简洁的JavaScript框架，于2006年1月由John Resig发布。jQuery设计的宗旨是"write Less，Do More"，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
2、为什么要学习jQuery？
正如简介所说，jQuery的设计宗旨是“write Less，Do More”，可以简化JavaScript开发；用更少的代码做更多的事。
3、哪些情况下使用jQuery
jQuery一般应用于中大型网站开发
是一些前端框架的基础
4、怎么使用jQuery
使用工具：HBuilder
下载jQuery库，将其引入到项目中，调用外部js
二、案例1：点击按钮获取输入框的值（js方式与jQuery方式对比）
js代码：
<script type="text/javascript">
window.onload = function(){
//拿到按钮
var btn = document.getElementById("btna");
//给按钮添加点击事件
btn.onclick=function(){
//拿到文本框的值
var a = document.getElementById("aa").value;
alert(a)
}
}
</script>
jQuery代码：
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// $(document).ready(function() {
//页面载入函数 加载DOM
$(function() {
var b = $("#btnb")//拿到按钮
b.click(function(){//添加点击事件
var a = $("#aa").val();
alert(a);
})
})
</script>
三、css
1、单个属性访问
对象.css(“width”);
2、单个属性修改
对象.css(“width”,“100px”)
3、多个属性修改
对象.css({‘width’:‘100px’,‘height’:‘100px’});
四、案例2：分别使用基本选择器，改变元素的背景颜色和字体颜色
演示：
<body>
<div id="xx">
<p>这是第一>个div中的段落 </span>单身羡慕</span></p>
<span>他们的内部爱情故事</span>
</div>
<div class="yy">
这是第二个div
</div>
</body>
html代码：
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf- 8"></script>
<script>
$(function(){
$("#xx").css("color","red");
$(".yy").css({"background":"yellow","color":"pink"});
})
</script>
五、层次选择器：查找所有元素，查询子元素 以及案例3选择某个元素下面的所有元素和子元素 改变其样式
1、selector1,selector2：并集，即两者相同的部分
2、selector1 selector2：交集，即两者的和
3、例如：div>span 是找到div下的子级span即“他们的内部爱情故事”。“单身羡慕”不是。
4、例如：p+div 是找和p同一级的span 即 “单身羡慕” 和 “这些人的外部爱情故事”
html代码：
<body>
<div id="xx">
<p>这是第一>个div中的段落 </span>单身羡慕</span></p>
<span>他们的内部爱情故事</span>
</div>
<div class="yy">
这是第二个div
</div>
<p>这是第一个外面的段落</p>
<span>这些人的外部爱情故事</span>
<h4>2.3过滤选择器</h4>
<ul>
<li>0-单身强</li>
<li>1-好男人朱</li>
<li>2-高冷男</li>
<li>3-逗比波</li>
<li>4-清高刘</li>
</ul>
</body>
JQuery代码：
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function(){
$("p,span").css("background","yellow");
$("div span").css("background","yellow");
$("div>span").css("background","yellow");
$("p+span").css("background","yellow");
})
</script>
六、过滤选择器 及其 案例
html代码：
<body>
<div id="xx">
<p>这是第一>个div中的段落 </span>单身羡慕</span></p>
<span>他们的内部爱情故事</span>
</div>
<div class="yy">
这是第二个div
</div>
<p>这是第一个外面的段落</p>
<span>这些人的外部爱情故事</span>
<h4>2.3过滤选择器</h4>
<ul>
<li>0-单身强</li>
<li>1-好男人朱</li>
<li>2-高冷男</li>
<li>3-逗比波</li>
<li>4-清高刘</li>
</ul>
</body>
JQuery代码：
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function(){
$("ul>li:first").css("background","yellow");
$("ul>li:last").css("background","yellow");
$("ul>li:even").css("background","yellow");
$("ul>li:odd").css("background","yellow");
$("ul>li:gt(0)").css("background","yellow");
$("ul>li:lt(4)").css("background","yellow");
//0>x>4先小于后大于
$("ul>li:lt(4):gt(0)").css("background","yellow");
})
</script>
七、案例：表格隔行换色
html代码：
<body>
<h4>案例5：表格隔行换色</h4>
<table border="1px" width="50%px">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>
JQuery代码：
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("table tr:even").css("background","pink");
$("table tr:odd").css("background","blue");
})
</script>
获取偶数下标的元素:even、获取奇数下标的元素:odd
八、表单选择器 及其 案例
html代码：
<body>
<h4>2.4 表单选择器</h4>
<form action="" id="myForm">
性别：<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女<br />
爱好：<input type="checkbox" value="看美女" />看美女
<input type="checkbox" value="看帅哥" />看帅哥
<input type="checkbox" value="打王者" />打王者
<input type="checkbox" value="装清高" />装清高<br />
地址：
<select>
<option value="湖南省">湖南省</option>
<option value="浙江省">浙江省</option>
<option value="广东省">广东省</option>
</select><br />
<input type="button" id="ok" value="提交" />
</form>
</body>
jQuery代码：
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#ok").click(function() {
//拿性别
var sex = $("#myForm input:radio:checked").val();
console.info(sex);
//拿爱好
$("#myForm input:checkbox:checked").each(function(){
console.info($(this).val());
})
//拿地址
var address = $("#myForm select option:selected").val();
console.info(address);
console.info(address);
})
})
</script>
九、总结
使用jQuery的感觉，比js的代码量相对减少，但是代码量少做的功能一点不少，还是比较好上手的。今天的学习笔记分享就到这，886~
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）