<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jq入门</title>
<script>
// window.οnlοad=function(){//页面加载函数
// //找到按钮
// var b = document.getElementById("btna");
// //给按钮增加点击事件 匿名函数
// b.οnclick=function(){
// //拿到文本框的值
// var a =document.getElementById("aa").value;
// alert(a);
// }
// }
</script>
<!-- 引入外部js -->
<script src="js/jquery-3.3.1.js" type="text/javascript"></script>
<!-- 另起一个scr-->
<script type="text/javascript">
//页面载入函数
//美元符号等于jq
$(function() {
// var b = $("#btnb");//得到按钮
// b.click(function(){//添加点击事件
// var a =$("#aa").val();//获取文本框的值
// alert(a);
// })
//2.选择器
//基本选择器
//$("#xx").css("background","yellow");//id选择器
//$(".yy").css("background","yellow");//id选择器
//$(".yy").css({"background":"yellow","color":"red"});//id选择器
//$("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");//+指的兄弟关系
//过滤选择器
// $("ul>li:first").css("background","yellow");
// $("ul>li:last").css("background","yellow");
// $("ul>li:eq(3)").css("background","yellow");//取下标如果为负就为倒数
// $("ul>li:even").css("background","yellow");//偶数下标，奇数行
//$("ul>li:odd").css("background", "yellow");//奇数下标偶数行
//案例 表格的隔行换色
// $("table tr:even").css("background", "yellow");
//$("table tr:odd").css("background", "blue");
// $("ul>li:gt(0)").css("background", "blue");// gt大于
// $("ul>li:lt(4)").css("background", "blue");// lt小于
//$("ul>li:lt(4):gt(0)").css("background", "blue");//先小于后大于
//表单选择器
$("#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")
// address.each(function(){
// var cc=$(this).val();
// console.info(cc);
// })
//拿地址：第二种方法
var address = $("#myform select option:selected").val();
console.info(address);
})
})
</script>
</head>
<body>
<h2>jq入门以及选择器</h2>
<h3>1.入门</h3>
<h4>点击按钮弹出文本框的值</h4>
<input type="text" id="aa" />
<input type="button" value="点击" id="btna" />
<input type="button" value="点击(jq)" id="btnb" />
<h3>2.选择器</h3>
<h4>基本选择器</h4>
<div id="xx">
<p>这是第一个div中的段落标签 <span>李四:吾乃麻花李</span> </p>
<span>张三:吾乃法外狂徒 </span>
</div>
<div class="yy">
这是第二个div
</div>
<p>这是外面的段落</p>
<span>老王:吾乃隔壁老王</span>
<h4>3.过滤选择器</h4>
<ul>
<li>0 子鼠</li>
<li>1 丑牛</li>
<li>2 寅虎</li>
<li>3 卯兔</li>
<li>4 辰龙</li>
</ul>
<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>
</table>
<h4>4.表单选择器</h4>
<form action="" id="myform">
性别:<input type="radio" value="男" name="sex" />男
<input type="radio" value="女" name="sex" />女
爱好:<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>
</body>
</html>
