<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
// window.onload=function(){
// //拿到按钮
// var btn=document.getElementById("btn")
// //给按钮添加点击事件
// btn.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">
//页面载入函数 加载DOM
$(function() { //相当与window.onload
// var b= $("#btnb")//拿到按钮
// b.click(function(){//添加点击事件
// var a=$("#aa").val()//拿到文本框的值
// alert(a)
// })
//2.1基本选择器
// $("#xx").css("background","yellow")//id选择器
// $(".yy").css({"background":"yellow","color":"red"})//类选择器
// $("div").css("background","pink")//标签选择器=元素选择器
// $("*").css("background","yellow")//统配符：全部
// $("p,span").css("background","yellow")
// $("div>span").css("background","yellow");//交集 后代span
// $("div>span").css("background","yellow");//父子关系
//$("p+sapan").css("background","yellow");//兄弟关系
// //2.3过滤器
// $("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");
//案例5
// $("table tr :even").css("background","pink");
// $("table tr :odd").css("background","blue");
//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 address = $("#myForm select option:selected").val();
// console.info(address);
})
})
</script>
</head>
<body>
<h2>jQuery入门&选择器</h2>
<h3>一,jQuery入门</h3>
<h4>案列1：点击按钮弹出文本框的值</h4>
<input type="text" id="aa" />
<input id="btna" type="button" value="点击【js方式】" />
<input id="btnb" type="button" value="点击【jQuery方式】" />
<h3>二，jQuery选择器</h3>
<h4>2.1基本选择器</h4>
<div id="xx">
这是第一个div
</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>
<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>
</table>
<h4>2.5表单选择器</h4>
<form action="" id="myForm">
性别:<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女<br />
爱好:<input type="checkbox" name="hobby" value="看帅哥" />看帅哥
<input type="checkbox" name="hobby" value="看美女" />看美女
<input type="checkbox" name="hobby" value="看丑b" />看丑b
地址:<select name="address">
<option value="湖南省">湖南省</option>
<option value="浙江省">湖北省</option>
<option value="广东省">广东省</option>
</select><br>
<input type="button" value="提交" />
</form>
</body>
</html>
一.了解什么是jQuery&为什么要学jQuery？
二.jQuery的基本语法？
三.jQuery如何使用?
四.jQuery的选择器？
五.推荐使用开发工具：HBuilder X
一，jQuery是什么？
jQuery是javaScript的类库 里面封装了许多js代码
二，为什么我们要学习jQuery？
write less ，do more 是一些前端的基础
三、如何使用
1.下载jQuery库
2.复制到js中
3.使用·js
四、jQuery选择器
1.基本选择器：{
ID选择器:#ID
类选择器:.class
元素选择器:element
}
2.层次选择器{
a,b :并集
a+b:兄弟关系
a>b:父子关系
a b 交集
}
3.过滤选择器{
first：第一个元素
last：最后一个元素
even ：奇数下标
odd：偶数下标
}
4.表单选择器{
1.如何获取单选框
2.如何获取复选框
3.如何获取下拉框
}
四思维导图
1105
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
