了解什么是jQuery以及其基本语法：
例如： 如何用jQuery去获取文本框的值? id="aa"
$("#aa").val();
js的window.onload在jQuery里如何表示?
$(document).ready(function(){});
$(function(){})
jQuery里如何动态设置样式css的? 单个属性和多个属性的区别?
$("div").css("color","red");
$("div").css({键:值,键:值});
jQuery的事件?点击事件?失焦事件?该如何表示?等等
$("#btn").click/blur/mouseover(function(){})
开发版本
生产版本
测试版本
推荐自学网址：
1.https://jquery.cuishifeng.cn/（在线API文档）
2.http://www.w3school.com.cn/(w3school 在线教程)
推荐使用浏览器：谷歌
推荐使用开发工具：HBuilder
案例一、
<body>
<h2>jQuery入门以及选择器</h2>
<h3>一、入门</h3>
<h4>1.1点击按钮弹出文本框的值(js对比jQuery)</h4>
<input type="text" id="aa" />
<input type="button" value="点击(纯js方式)" id="btna" />
<input type="button" value="点击(jQuery方式)" id="btnb" /><html>
<head>
<meta charset="utf-8">
<title>jQuery入门以及选择器</title>
<script type="text/javascript">
/* window.onload = function() { //页面加载函数
//找到按钮
var b = document.getElementById("btna");
//给按钮添加点击事件 匿名函数
b.onclick = function() {
//拿文本框 的值
var a = document.getElementById("aa").value;
alert(a);
}
} */
</script>
<!-- 引入外部js=jQuery类库 -->
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<!-- 另起一个script块-->
<script type="text/javascript">
//页面载入函数 相对于window.onload
$(function() {
//案例1
var b = $("#btnb"); //拿到按钮
b.click(function() { //添加点击事件
var a = $("#aa").val(); //获取文本框的值
alert(a);
})
});body 中
<h3>二、选择器</h3>
<h4>2.1-2.2 基本选择器&层次选择器</h4>
<div id="xx">
<p>这是第一个div中的段落 <span>欧：哈哈哈哈</span></p>
<span>大炮:啊啊啊啊</span>
</div>
<div class="yy">
这是第二个div
</div>
<p>这是外面的段落</p>
<span>网红:啊啊啊啊</span>写在$(function() {} 中
//二、选择器
//2.1 基本选择器-层次选择器
$("#xx").css("background","yellow");//id选择器
$(".yy").css({"background":"yellow","color":"red"});//类选择器
$("div").css("background","yellow");//标签选择器=元素选择器
$("*").css("background","yellow");//通配符: 所有页面元素
$("p,span").css("background","yellow");//并集
$("div span").css("background","yellow");//交集 所有的后代
$("div>span").css("background","yellow");//父子关系
$("p+span").css("background","yellow");//兄弟关系 body 中
<h4>2.3 过滤选择器</h4>
<ul>
<li>0-大炮</li>
<li>1-大白</li>
<li>2-大黑</li>
<li>3-大明</li>
<li>4-大黄</li>
</ul>$(function(){}) 中
//2.3过滤选择器
$("ul>li:first").css("background","yellow");//第一个
$("ul>li:last").css("background","yellow");最后一个
$("ul>li:eq(-2)").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");//小于
//注意: 先小于后大于
$("ul>li:lt(4):gt(0)").css("background","yellow");body 中
<h4>案例5</h4>
<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>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>$(function(){}) 中
//案例5: 表格隔行换色
$("table tr:even").css("background","yellow");
$("table tr:odd").css("background","pink");body 中
<h4>2.4 表单选择器</h4>
<form action="" id="myForm" >
性别：<input type="radio" value="男" name="sex" />男
<input type="radio" value="女" name="sex" />女<br/>
爱好：<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" value="确定" id="ok" />
</form>$(function(){}) 中
//2.4 表单选择器
$("#ok").click(function(){
//拿性别
var sex= $("#myForm input:radio:checked").val();
console.info(sex);
//拿爱好
$("#myForm input:checkbox:checked").each(function(){
console.info($(this).val());
})
var s= $("#myForm select option:selected").val();
console.info(s);
})
