1.什么是jQuery?
类库——封装了很多js代码
JavaScript库:jQuery(90%)、ExtJS
官方地址:http://jquery.com/
2.为什么要学习jQuery
为了简化JavaScript开发:选择器、CSS、HTML事件处理、JS动画、浏览器兼容、丰富插件
3.使用jQuery的步骤
1.下载jQuery库
2.引入:将js文件复制到项目中
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
3.使用
4.jQuery的简单案例
案例1:拿到文本框的值
window.onload=function(){
//拿到按钮
var btn=document.getElementById("btna");
//给按钮添加点击事件
btn.onclick=function(){//匿名函数
//拿到文本框的值
var a=document.getElementById("aa").value;
alert(a);
}
}
//身体部分
<body>
<input id="btna" type="button" value="点击[js方式]" />
</body>
5.jQuery的选择器
1.基本选择器
常用选择器:
ID选择器:#ID
类选择器:.class
元素选择器:element
通配符:*
多个选择器(并集):selector1,selector2
多个选择器(交集):selector1 selector2
案例2:分别使用基本选择器,改变元素的背景颜色和字体颜色(div、p、span)
<head>
<script type="text/javascript">
//页面载入函数加载DOM
$(function(){//相当于window.onload
//基本选择器
$("#xx").css("background","yellow");//id选择器
$(".yy").css({"background":"yellow","color":"red"});//类选择器
$("div").css("background","yellow");//标签选择器=元素选择器
$("*").css("background","yellow");//通配符:全部
})
</head>
<body>
<div id="xx">
<p>这是第一个div中的段落 <span>单身xx羡慕</span></p>
<span>xxx和xxx的内部爱情故事</span>
</div>
<div class="yy">
这是第二个div
</div>
<p>这是第一个外面的段落</p>
<span>麻拐和蛤蟆的外部爱情故事</span>
</body>
2.层次选择器
查找所有元素,查询子元素
案例3:使用层次选择器,选择某个元素下面的所有元素和子元素
<head>
<script type="text/javascript">
//页面载入函数加载DOM
$(function(){//相当于window.onload
//层次选择器
$("p,span").css("background","yellow");//并集
$("div span").css("background","yellow");//交集 后代标签span
$("div>span").css("background","yellow");//父子关系
$("p+span").css("background","yellow");//兄弟关系p紧跟的span
})
</head>
<body>
<div id="xx">
<p>这是第一个div中的段落 <span>单身xx羡慕</span></p>
<span>xxx和xxx的内部爱情故事</span>
</div>
<div class="yy">
这是第二个div
</div>
<p>这是第一个外面的段落</p>
<span>麻拐和蛤蟆的外部爱情故事</span>
</body>
3.过滤选择器
参考jQuery文档
获取第一个元素:first
最后一个元素:last
获取偶数下标的元素:even
获取奇数下标的元素:odd
获取某一范围元素
:gt大于
:lt小于
案例4:使用过滤选择器,选择li中的元素
<head>
<script type="text/javascript">
//页面载入函数加载DOM
$(function(){//相当于window.onload
//过滤选择器
$("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");//大于0
$("ul>li:lt(4)").css("background","yellow");//小于4;
//0>x>4先小于后大于
$("ul>li:lt(4):gt(0)").css("background","yellow");//大于0小于4
})
</head>
<body>
<ul>
<li>0-单身xx</li>
<li>1-单身xx</li>
<li>2-单身xx</li>
<li>3-单身xx</li>
<li>4-单身xx</li>
</ul>
</body>
案例5:表格隔行换色
<head>
<script type="text/javascript">
//页面载入函数加载DOM
$(function(){//相当于window.onload
$("table tr:even").css("background","pink");
$("table tr:odd").css("background","blue");
})
</head>
<body>
<table border="1px" width="50%">
<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>
4.表单选择器
参考jQuery文档
获取选择单选框的值
获取选择多选框的值
获取选择下拉值
案例6:获取表单中的单选、多选、下拉值
<head>
<script type="text/javascript">
//页面载入函数加载DOM
$(function(){//相当于window.onload
$("#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);
})
})
</head>
<body>
<form action="" id="myForm">
性别:<input type="radio" name="sex" value="男" />男
<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>
<option value ="广东省">广东省</option>
</select><br>
<input type="button" value="提交" id="ok"/>
</form>
</body>
5.思维导图解析