<html>
<head>
<meta charset="utf-8" />
<title>JQurey入门以及选择器</title>
<script type="text/javascript"></script>
<script type="text/javascript">
/* window.onload=function(){//页面加载函数
//找到按钮
var b=document.getElementById("btna");
//给按钮添加点击事件 匿名函数
b.onclick=function(){
//拿到文本框的值
var a=document.getElementById("aa");
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(){
//案例一
// var b=$("#btnb");//拿到按钮
// b.click(function(){//添加点击事件
// var a=$("#aa").val();//获取文本框的值
// alert(a);
// })
//二.选择器
//2.基本选择器——层次选择器
// $("#xx").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");//父子关系
// $("div p+span").css("background","yellow");//兄弟关系
//2.3过滤选择器
// $("ul>li:first").css("background","yellow");第一个
// $("ul>li:last").css("background","yellow");//最后一个
// $("ul>li:eq(1)").css("background","yellow");//正数 加-号倒数
// $("ul>li:even").css("background","yellow");//偶数下标 奇数行
// $("ul>li:odd").css("background","yellow");//奇数下标 偶数行
// $("ul>li:lt(0)").css("background","yellow");//大于
// $("ul>li:gt(4)").css("background","yellow");小于
//注意:先小于后大于
// $("ul>li:lt(4):gt(0)").css("background","yellow");
//案例5:表格隔行换色
// $("table tr:even").css("background","yellow");
// $("table tr:odd").css("background","pink");
// 2.4 表单选择器
$("#ok").click(function(){
// //拿性别
// var sex=$("#myForm inpuy:radio:checked").val();
// console.info(sex);
// //拿爱好
// $("#myForm inpuy:checkbox:checked").each(function(){
// console.info($(this).val());
// })
// //拿地址
// vat addrsss=$("#myForm select option:selected").val();
// console.info(address);
})
})
</script>
</head>
<body>
<h2>JQurey入门以及选择器</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"/>
<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>
<pre>
<!-- 空行或者其他 -->
</pre>
<h4>2.3过滤选择器</h4>
<ul>
<li>0-大炮</li>
<li>1-欧董</li>
<li>2-王俊</li>
<li>3-睡梦</li>
<li>4-罗汉</li>
</ul>
<pre>
</pre>
<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>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="看美女" />看美女<br/>
地址：
<select>
<option value ="湖南">湖南</option>
<option value ="广东">广东</option>
<option value ="湖北">湖北</option><br/>
</select><br/>
<input type="button" id="ok" value="提交" />
</form>
</body>
</html>
1.基本选择器
#ID #+id 根据id选择
.Name .+Name 根据Name选择
通配符 ：* 类选择器：.class 元素选择器：element
多个选择器并集 ：select 1 ，select 2
多个选着器交集 ：select1（空格）select2
2.层次选择器
1.使用层次选择器选择某个元素下面的的所有元素和子元素
3.过滤选择器
1.ul 有序排列
2.first 第一个开始 last 最后一个开始
eq( )正数 加-号倒数 even 偶数下标 奇数行
odd奇数下标 偶数行
1020
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
