1. 表单选择器 14
表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法
无论是否存在表单
，均可做出相应选择。表单选择器是为了能更加容易地操作表单，
表单选择器是根据元素类型来定义的
$(":tr"): 不能用，tr 不是 input 标签
1.1 详细解释 14
使用标签的type属性值，定位dom对象的方式。
语法： $(":type属性值")
例如： $(":text") ,选择的是所有的单行文本框，
$(":button") ,选择的是所有的按钮。
语法： $(":type 属性值")
1.1.1 例如： 14
$(":text")选取所有的单行文本框
$(":password")选取所有的密码框
$(":radio")选取所有的单选框
$(":checkbox")选取所有的多选框
$(":file")选取所有的上传按钮
1.2 例：15
代码在E:\java学习\jQuery\course\course3
form.html
<!-- 表单选择器 14-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单选择器</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
function fun1(){
//使用表单选择器 $(":type的值") 15
var obj = $(":text");
//获取value属性的值 val()是jquery中的函数, 读取value属性值
alert( obj.val());
}
function fun2(){
//定位radio 15
var obj = $(":radio");//得到的是一个数组,目前是两个对象man,woman
//循环数组,数组中的成员是 dom对象,可以dom的属性或者函数
for(var i=0;i<obj.length;i++){
//从数组值获取成员,使用下标的方式
var dom = obj[i];
//使用dom对象的属性,获取value值
alert(dom.value)
}
}
function fun3(){
//定位checkbox
var obj = $(":checkbox") //数组,有三个对象
for(var i=0;i<obj.length;i++){
var dom = obj[i];
//alert(dom.value);
//使用jqueyr的val函数, 获取value的值
//1. 需要jquery对象
var jObj = $(dom); // 这里将dom转为了jquery了，Obj是jquery对象
//2. 调用jquery函数
alert("jquery的函数调用=" + jObj.val());
}
}
</script>
</head>
<body>
<input type="text" value="我是type=text" /><br/>
<br/>
<input type="radio" value="man" /> 男 <br/> <!-- radio是单选按钮 -->
<input type="radio" value="woman" /> 女 <br/>
<br/>
<input type="checkbox" value="bike" /> 骑行 <br/>
<input type="checkbox" value="football" /> 足球 <br/>
<input type="checkbox" value="music" /> 音乐 <br/>
<br/>
<input type="button" value="读取text的值" onclick="fun1()"/>
<br/>
<input type="button" value="读取radio的值" onclick="fun2()"/>
<br/>
<input type="button" value="读取checkbox的值" onclick="fun3()"/>
</body>
</html>
2. 事件 18
2.1 jquery中给dom对象绑定事件 18
1） $(选择器).事件名称( 事件的处理函数)
$(选择器)：定位dom对象， dom对象可以有多个， 这些dom对象都绑定事件了
事件名称：就是js中事件去掉on的部分，
例如 js中的单击事件 onclick(),
jquery中的事件名称，就是click，都是小写的。
事件的处理函数：就是一个function ，当事件发生时，执行这个函数的内容。
例如给id是btn的按钮绑定单击事件
$("#btn").click(funtion(){
alert("btn按钮单击了")
})
2) on 事件绑定
$(选择器).on( 事件名称 , 事件的处理函数)
事件名称： 就是js事件中去掉on的部分， 例如js中onclick ,这里就是click
事件的处理函数： function 定义。
$("#btn").on("click", function() { 处理按钮单击 } )
3. 过滤器 16
3.1 概述 16
过滤器：在定位了dom对象后，根据一些条件筛选dom对象。
过滤器有是一个字符串，用来筛选dom对象的。
过滤器不能单独使用， 必须和选择器一起使用。
1）$("选择器:first") : 第一个dom对象
2）$("选择器:last"): 数组中的最后一个dom对象
3）$("选择器:eq(数组的下标)") ：获取指定下标的dom对象
4）$("选择器:lt(下标)") ： 获取小于下标的所有dom对象
5）$("选择器:gt(下标)") ： 获取大于下标的所有dom对象
jQuery 对象中存储的 DOM 对象顺序与页面标签声明位置关系
<div>1</div> dom1
<div>2</div> dom2
<div>3</div> dom3
$("div") == [dom1,dom2,dom3]
过滤器就是过滤条件，对已经定位到数组中 DOM 对象进行过滤筛选，过滤条件不能独立
出现在 jquery 函数，如果使用只能出现在选择器后方。
3.2 基本过滤器 16
1.选择第一个 first, 保留数组中第一个 DOM 对象
语法：$(“选择器:first”)
2.选择最后个 last, 保留数组中最后 DOM 对象
语法：$("选择器:last")
3.选择数组中指定对象
语法：$(“选择器:eq(数组索引)”)
4.选择数组中小于指定索引的所有 DOM 对象
语法：$(“选择器:lt(数组索引)”)
5.选择数组中大于指定索引的所有 DOM 对象
语法：$(“选择器:gt(数组索引)”)
代码在E:\java学习\jQuery\course\course3
filter1.html
<!-- 过滤器 17 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>过滤器</title>
<style type="text/css">
div{
background: gray;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
// $(document).ready( 函数 ): 当页面中的dom对象加载成功后,会执行ready(),
// 相当于是onLoad().
$(function(){
//当页面dom对象加载后,给对象绑定事件,因为此时button对象已经在内存中创建好了.才能使用.
$("#btn1").click(function(){
//使用过滤器
var obj = $("div:first");
obj.css("background","red");
})
//绑定事件
$("#btn2").click(function(){
var obj = $("div:last");
obj.css("background","green");
})
//绑定btn3的事件
$(function(){
$("#btn3").click(function(){
var obj = $("div:eq(3)");
obj.css("background","blue");
})
})
$("#btn4").click(function(){
var obj = $("div:lt(3)");
obj.css("background","orange");
})
$("#btn5").click(function(){
var obj = $("div:gt(3)");
obj.css("background","yellow");
})
})
</script>
</head>
<body>
<div id="one">我是div-0</div>
<div id="two">我是div-1</div>
<div>我是div-2
<div>我是div-3</div>
<div>我是div-4</div>
</div>
<div>我是div-5</div>
<br />
<span>我是span</span>
<br/>
<input type="button" value="获取第一个div" id="btn1"/>
<br/>
<input type="button" value="获取最后一个div" id="btn2"/>
<br/>
<input type="button" value="获取下标等于3的div" id="btn3"/>
<br/>
<input type="button" value="获取下标小于3的div" id="btn4"/>
<br/>
<input type="button" value="获取下标大于3的div" id="btn5"/>
</body>
</html>
3.3 表单属性过滤器 19
根据表单中dom对象的状态情况，定位dom对象的。
启用状态， enabled
不可用状态， disabled
选择状态 ， checked ， 例如radio， checkbox
1. 选择可用的文本框
$(“:text:enabled”)
2.选择不可用的文本框
$(“:text:disabled”)
3.复选框选中的元素
$(“:checkbox:checked”)
4.选择指定下拉列表的被选中元素
选择器>option:selected $("select>option:selected")
代码在E:\java学习\jQuery\course\course3 20
filter2.html
<!-- 表单属性过滤器 20 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单属性过滤器</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
//所有可以使用的text
var obj = $(":text:enabled");
//设置 jquery数组值所有dom对象的value值
obj.val("hello");
})
$("#btn2").click(function(){
//获取选中的checkbox
var obj = $(":checkbox:checked");
for(var i=0;i<obj.length;i++){
//alert(obj[i].value);
//使用jquery
alert( $(obj[i]).val() )
}
})
$("#btn3").click(function(){
//获取select选中的值
//var obj = $("select>option:selected");
//这样写也可以
var obj = $("#yuyan>option:selected");
alert(obj.val());
})
})
</script>
</head>
<body>
<input type="text" id="txt1" value="text1" /><br/>
<input type="text" id="txt2" value="text2" disabled="true"/><br/>
<input type="text" id="txt3" value="text3" /><br/>
<input type="text" id="txt4" value="text4" disabled/><br/>
<br/>
<!-- 复选框 -->
<input type="checkbox" value="游泳" />游泳 <br/>
<input type="checkbox" value="健身" checked />健身 <br/>
<input type="checkbox" value="电子游戏" checked />电子游戏 <br/>
<br/>
<!-- 下拉框 -->
<select id="yuyan">
<option value="java">java语言</option>
<option value="go" selected>go语言</option>
<option value="python">python语言</option>
</select>
<br/>
<input type="button" value="设置可以的text的value是hello" id="btn1"/>
<br/>
<button id="btn2">显示选中的复选框的值</button>
<br/>
<button id="btn3">显示选中下拉列表框的值</button>
</body>
</html>
