JQuery简介
一。JQUERY学习重点:
1.熟练背诵JQUERY[选择器和过滤器]语法
2.熟练掌握【JQUERY对象】提供【功能函数】
二。jquery学习方式
1.一天理论介绍
2.分段提供jquery练习内容
三。JQUERY技术介绍:
1.就是JavaScript的封装版
2.简化JavaScript对DOM对象定位以及对DOM对象属性操作开发步骤
四。JQUERY使用：
1.下载jquery工具文件，并导入到工程中.
2.将jquery文件加载到浏览上。
五。jquery对象与DOM对象区别:
1. DOM对象:
1)在浏览器加载网页时，由浏览器负责创建的.
2)一个html标签对应一个DOM对象.
3)可以通过管理DOM对象，来对关联html标签中属性进行操作。
2. jquery对象：
1)是[jquery函数 $() ]负责创建的
2)jquery对象就是一个【数组】
3)jquery对象中存放的本次定位【dom对象】
4)可以通过jquery对象中【功能函数】,来快速的对定位【dom对象】进行操作管理
六。JQUERY对象与DOM对象转换:
1.如何将JQUERY对象转换为DOM对象.
for(var i=0;i<$obj.length;i++){
var domObj = $obj[i];
}
2.如何将DOM对象转换为JQUERY对象
var $obj = $(domObj);
***** jquery对象与DOM对象之间属性和函数彼此不能调用.
案例：
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
<script type="text/javascript">
function selectAll(){
//1.获得第一个checkbox的选中状态
var flag= $("#selectAllBut").prop("checked");
//2.为所有数据行checkbox的选中状态设置
var $obj=$(".ah");//jquery对象名称一般是以$为开头的.
$obj.prop("checked",flag);
}
</script>
</head>
<body>
<!-- this表示触发当前事件的HTML元素对象 -->
<input type="checkbox" onclick="selectAll()" id="selectAllBut"/>全选<br />
<input type="checkbox" class="ah" />吃<br />
<input type="checkbox" class="ah" />喝<br />
<input type="checkbox" class="ah"/>玩<br />
</body>
</html>
JQUERY选择器语法
一。什么是选择器语法:
1.就是对DOM对象进行定位的条件，比如根据ID定位，根据标签类型名
2.jquery中只有三种选择器
二。基本选择器:
1.【定位条件】：可以根据ID编号，根据标签类型名,根据标签采用样式选择器
2.【使用】：
1） $("#id编号")：代替 document.getElementById("id")
根据ID编号定位对应的DOM对象。让DOM对象保存到一个数组中
并返回。返回这个数组就是【jquery对象】
2） $(".样式选择器名称")：代替document.getElementsByClassName("样式选择器名")
将使用了指定的样式选择器的dom对象保存到同一个数组中，
并返回。返回这个数组就是【jquery对象】
3） $("标签类型名"): 代替document.getElementsByTagName()
将所有指定的标签类型关联的DOM对象保存到同一个数组中并返回
，返回的这个数组就是【jquery对象】
4) $("*"): 定位浏览器中所有的DOM对象保存到同一个数组中并返回。
返回的这个数组就是【jquery对象】
5） $("条件1,条件2")：只要DOM对象满足其中的一种条件，就会被定位到数组中
相当于mysql or where sal>=3000 or job='mangaer'
案例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
<script>
function fun1(){
var $obj = $("#one");
$obj.css("background-color","red");
}
function fun2(){
var $obj = $(".two");
$obj.css("background-color","green");
}
function fun3(){
var $obj = $("div");
$obj.css("background-color","aqua");
}
function fun4(){
var $obj = $("*");
$obj.css("background-color","yellow");
}
function fun5(){
var $obj = $("#one,span");
$obj.css("background-color","blue");
}
</script>
<title>jQuery基本选择器</title>
<meta charset="utf-8">
<style type="text/css">
div{
background: gray;
width: 200px;
height: 100px;
}
.two{
}
</style>
</head>
<body>
<!--定义被选择对象-->
<div id="one" class="two"></div><br>
<div class="two"></div><br>
<div></div><br>
<span>我是span标签</span>
<br>
<!--定义按钮-->
<input type="button" id="btn01" value="选择id为one的元素" onclick="fun1()"/>
<input type="button" id="btn02" value="选择class为two的元素" onclick="fun2()"/>
<input type="button" id="btn03" value="选择所有div元素" onclick="fun3()"/>
<input type="button" id="btn04" value="选择所有元素" onclick="fun4()"/>
<input type="button" id="btn05" value="选择id为one与所有span元素" onclick="fun5()"/>
</body>
</html>
三。层级选择器:
1.[定位条件]：可以根据标签之间父子关系定位
可以根据标签之间兄弟关系定位
2.[标签之间关系]:
1)父子关系：就是包含关系
<tr>
<td>
<input type="checkbox">
</td>
</tr>
TD 是 TR 的 【直接子标签】
INPUT 是 TD 的 【直接子标签】
INPUT 是 TR 的 【间接子标签】
2）兄弟关系: 两个标签拥有相同的父标签，并且彼此之间没有包含关系
<body>
<div>1</div> 大哥
<div>2</div> 二哥
<p>段落标签</p> 三弟
</body>
3.【使用】：
1） $("定位父标签条件>定位子标签条件")
定位当前父标签下，所有满足条件的【直接子标签】
2） $("定位父标签条件 定位子标签条件")
定位当前父标签下，所有满足条件的【直接子标签】和【间接子标签】
3) $("定位当前标签条件~定位兄弟标签条件"):
定位当前标签【后面】，所有满足条件的兄弟标签
4） $("定位当前标签条件+定位兄弟标签条件"):
定位当前标签【后面与之紧邻的】，并且满足条件的所有兄弟标签
5） $("定位当前标签条件").siblings("定位兄弟标签条件")
定位当前标签[前面与后面]所有满足条件的兄弟标签
案例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery层级选择器</title>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
<script>
function fun1(){
$("body div").css("background-color","pink");
}
function fun2(){
$("body>div").css("background-color","orange");
}
function fun3(){
$("#one+div").css("background-color","aqua")
}
function fun4(){
$("#two~div").css("background-color","red")
}
function fun5(){
$("#two").siblings("div").css("background-color","green")
}
</script>
<style type="text/css">
div{
background: gray;
}
</style>
</head>
<body>
<!--定义被选择对象-->
<div id="one">我是div01</div>
<div id="two">我是div02</div>
<div>
我是div03
<div class="son">我是div03的子div</div>
<div class="son">我是div03的子div</div>
</div>
<div>我是div04</div>
<span>我是span标签</span>
<br>
<!--定义按钮-->
<input type="button" id="btn01" value="选择body中的所有div子标签" onclick="fun1()"/>
<input type="button" id="btn02" value="选择body下的直接div子标签" onclick="fun2()"/>
<input type="button" id="btn03" value="选择id为one的下一个兄弟div" onclick="fun3()"/>
<input type="button" id="btn04" value="选择id为two的所有后面的兄弟div" onclick="fun4()"/>
<input type="button" id="btn05" value="选择id为two的所有兄弟div" onclick="fun5()"/>
</body>
</html>
四。INPUT标签选择器:
1.INPUT标签组成:
<input type="text">
<input type="password">
<input type="radio">
<input type="checkbox">
<input type="file">//文件选择框
<input type="button">
<input type="submit">
<input type="reset">
2.INPUT标签作用：
作为浏览器向网站发送请求是携带请求参数
3.[使用]: $(":type属性名字")
4.【例子】:
$(":button"):定位页面中所有的button关联的DOM
$(":checkbox")：定位页面中所有的checkbox关联的DOM
$(":table"):无法定位任何内容，因为input标签类型中没有table。
案例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery表单input框选择器</title>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
<script>
//ReferenceError: $ is not defined ：jquery文件没有加载到浏览器中
function fun1(){
var $obj = $(":text");
var value = $obj.val();
alert("文本框的value值 "+value)
}
function fun2(){
var value = $(":password").val();
alert("密码框内容 "+value)
}
function fun3(){
var $obj = $(":radio");
$obj.each(myFun);
}
function myFun(index,domObj){
alert("第"+(index+1)+"个radio标签的value是 "+domObj.value)
}
function fun4(){
alert($(":file").val());
}
function fun5(){
var $obj=$(":checkbox:checked");//定位的被用户选中的checkbox
$obj.each(test);
}
function test(i,domObj){
alert("第"+(i+1)+"个checkbox的value值 "+domObj.value);
}
</script>
</head>
<body>
<!--定义表单-->
<form id="myForm" action="">
用户名：
<input type="text" name="username"/><br><br>
密 码：
<input type="password" name="password"/><br><br>
性 别：
<input type="radio" name="gender" value="1" checked/>男
<input type="radio" name="gender" value="0"/>女<br><br>
照 片：
<input type="file" name="photo"/><br><br>
兴 趣：
<input type="checkbox" name="interest" value="music" checked/>音乐
<input type="checkbox" name="interest" value="food"/>美食
<input type="checkbox" name="interest" value="travel"/>旅游
<input type="checkbox" name="interest" value="shopping"/>购物
<br><br>
<input type="submit" value="提交"/>
</form>
<br><br>
<!--定义按钮-->
<button id="btn01" onclick="fun1()">选择文本输入框并输出用户输入的值</button>
<button id="btn02" onclick="fun2()">选择密码输入框输出用户输入的密码</button>
<button id="btn03" onclick="fun3()">选择单选框的value属性值</button>
<button id="btn04" onclick="fun4()">选择文件上传框并输出用户选择的文件</button>
<button id="btn05" onclick="fun5()">选择复选框并输出用户选择的值</button>
</body>
</html>
JQUERY中过滤器
一。过滤器语法介绍:
1.对已经定位到jquery对象中DOM对象，进行二次过滤筛选的。
2.过滤器不能独立使用，必须声明在选择器后面
3.六种过滤器（三种常见过滤器）
4.将多个过滤器放到同一个jquery函数，进行层层过滤
二。基本过滤器:
1.[过滤器条件]: 根据已经定位的DOM对象在jquery对象中存储位置进行二次过滤筛选
2.[使用]:
$("选择器:first")：留下满足条件中的第一个DOM对象
例子：$(":button:first"):定位页面中第一个button
$("选择器:last")：留下满足条件中的最后一个DOM对象
例子：$(":button:last"):定位页面中最后一个button
$("选择器:eq(下标值)"):留下满足条件中的指定位置的DOM对象
例子：$("div:eq(2)") 定位页面中第三个DIV
$("选择器:lt(下标值)")：留下满足条件中的指定位置之前的所有Dom
例子： $(":checkbox:lt(2)"):页面中前两个checkbox
$("选择器:gt(下标值)"):留下满足条件中的指定位置之后的所有Dom
例子: $(":button:gt(3)"):位置在第四个butotn之后的所有的button
案例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery基本过滤选择器</title>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
<script>
function fun1(){
$("div:first").css("background-color","yellow");
}
function fun2(){
$("div:eq(3)").css("background-color","green");
}
function fun3(){
$("div:lt(3)").css("background-color","red");
}
function fun4(){
$("div:gt(3)").css("background-color","red");
}
</script>
<style type="text/css">
div{
background: gray;
}
</style>
</head>
<body>
<!--定义被选择对象-->
<h2>以下是div</h2>
<div id="one">我的序号是0</div>
<div id="two" class="c02">我的序号是1</div>
<div>
我的序号是2
<div class="son">我的序号是3</div>
<div class="son">我的序号是4</div>
</div>
<div>我的序号是5</div>
<h3>以下是span</h3>
<span>我是span标签</span>
<br><br>
<!--定义按钮-->
<input type="button" id="btn01" value="选择第一个div" onclick="fun1()"/>
<input type="button" id="btn02" value="选择最后一个div"/>
<input type="button" id="btn03" value="选择id值不是one的div"/>
<input type="button" id="btn04" value="选择class不包含c02的div"/>
<input type="button" id="btn05" value="选择索引号为奇数的div元素"/>
<input type="button" id="btn06" value="选择索引号为偶数的div元素"/>
<input type="button" id="btn07" value="选择索引号等于3的div元素" onclick="fun2()"/>
<input type="button" id="btn08" value="选择索引号小于3的div元素" onclick="fun3()"/>
<input type="button" id="btn09" value="选择索引号大于3的div元素" onclick="fun4()"/>
<input type="button" id="btn10" value="选择所有标题元素"/>
</body>
</html>
三。基本属性过滤器
1.[过滤条件]: 根据标签在声明时是否为指定属性进行手动赋值
根据标签的属性内容与【指定内容】关系进行过滤器
2.[例子]:
<div>1</div>
<div name="two">2</div>
<div name="three">3</div>
<div name="four">4</div>
问题1,哪一个DIV中没有name属性
所有DIV标签都有name属性
问题2：哪一个DIV中name属性的值是""
第一个DIV手动为name属性赋值，因此name属性值是默认值，就是""
3.[使用]:
1) $("选择器[属性名]"):留下满足定位条件的并且在声明时为指定属性进行手动赋值的DOM对象
例子: $("div[name]") <div name="two">2</div>
<div name="three">3</div>
2) $("选择器[属性名='值']")：留下满足定位条件的并且指定属性内容【等于】指定内容DOM
例子: $("div[name='two']") <div name="two">2</div>
$("div[name='']") <div>1</div>
$("div[name!='four']") <div>1</div>
<div name="two">2</div>
<div name="three">3</div>
3.$("选择器[属性名^='值']"):留下满足定位条件的并且指定属性内容以【指定内容为开头】所有DOM
例子: $("div[name^='t']") <div name="two">2</div>
<div name="three">3</div>
4.$("选择器[属性名$='值']")留下满足定位条件的并且指定属性内容以【指定内容为结尾】所有DOM
例子:$("div[name$='e']") <div name="three">3</div>
5.$("选择器[属性名*='值']")留下满足定位条件的并且指定属性内容【包含】指定内容的所有DOM
例子: $("div[name*='o']") <div name="two">2</div>
<div name="four">4</div>
6.$("选择器[属性名1][属性名2*='值'][属性名3^='值']")
案例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery过滤选择器</title>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
<script>
function fun1(){
$("div[title]").css("background-color","red");
}
function fun2(){
$("div[title='test']").css("background-color","yellow");
}
function fun3(){
$("div[title!='test']").css("background-color","yellow");
}
function fun4(){
$("div[title^='te']").css("background-color","blue");
}
function fun5(){
$("div[title$='st']").css("background-color","green");
}
function fun6(){
$("div[title*='es']").css("background-color","pink");
}
function fun7(){
$("div[title*='es'][id]").css("background-color","pink");
}
function fun8(){
$("div[title*='es']:first").css("background-color","pink");
}
</script>
<style type="text/css">
div{
background: gray;
width: 200px;
height: 100px;
}
.son{
background: cyan;
width: 180px;
height: 20px;
}
</style>
</head>
<body>
<!--定义被选择对象-->
<div id="one" title="test">zero</div>
<div class="c02" title="myTest">one</div>
<div>
two
<div id="three" class="son">three</div>
<div title="test" class="son">four</div>
</div>
<div title="testCase" id="">five</div>
<div>six</div>
<span>我是span标签</span>
<br><br>
<!--定义按钮-->
<input type="button" id="btn01" value="选择包含title属性的div元素" onclick="fun1()"/>
<input type="button" id="btn02" value="选择title属性值为test的div元素" onclick="fun2()"/>
<input type="button" id="btn03" value="选择title属性值不为test的div元素" onclick="fun3()"/>
<input type="button" id="btn04" value="选择title属性以'te'开头的div元素" onclick="fun4()"/>
<input type="button" id="btn05" value="选择title属性以'st'结尾的div元素" onclick="fun5()"/>
<input type="button" id="btn06" value="选择title属性包含'es'的div元素" onclick="fun6()"/>
<input type="button" id="btn07" value="选择title属性包含'es'的并且含有id属性的div元素" onclick="fun7()"/>
<input type="button" id="btn08" value="选择title属性包含'es'的第一个DIV" onclick="fun8()"/>
</body>
</html>
四。工作状态属性过滤器
1.html标签属性分类：
1）基本属性：绝大多数标签都拥有的属性，【id,name,title,rowspan】
2) 样式属性：背景，字体，边框
3) value属性： 只存在【表单域标签中 （input,select,textarea）】
4) 工作状态属性:只存在表单域标签[chekced，disabled，selected]
5) 监听事件属性 ： onclick ,onchange....
2.[使用]:
1) $("选择器:enabled")：留下满足条件的并且处于【可用状态】的DOM
例子: $(":button:enabled")：定位所有处于可用的button
2) $("选择器:disabled")：留下满足条件的并且处于【不可用状态】的DOM
例子: $(":button:disabled")：定位所有处于不可用的button
3）$("选择器:checked")： 留下满足条件的并且处于【选中状态的】DOM
例子:$(":checkbox:checked:first"):页面中第一个被选中的checkbox
4) $("选择器:selected")：留下满足条件的并且处于【选中状态的】DOM
例子：$("select>option:selected")：下拉列表中被选中的option
案例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery表单相关元素选择器</title>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
<script>
function fun1(){
$(":text:enabled").val("可用文本框");
}
function fun2(){
$(":text:disabled").val("不可用文本框");
}
function fun3(){
$(":checkbox:checked").each(loop);
}
function loop(index,domObj){
alert("第"+(index+1)+"个被选中的checkbox的value "+$(domObj).val())
}
function fun4(){
//alert($("#city>option:selected").val());
alert($("#city").val())
}
</script>
</head>
<body>
<!--定义文本框-->
文本01：<input type="text" id="text01" value="value01" /><br>
文本02：<input type="text" id="text02" value="value02" disabled/><br>
文本03：<input type="text" id="text03" value="value03"/><br>
文本04：<input type="text" id="text04" value="value04" disabled/><br>
<br>
<!--定义复选框-->
<input type="checkbox" name="interest" value="reading" checked/>读书
<input type="checkbox" name="interest" value="food"/>美食
<input type="checkbox" name="interest" value="travel" checked/>旅游
<input type="checkbox" name="interest" value="music"/>音乐
<input type="checkbox" name="interest" value="shopping" checked/>购物
<br><br>
<!--定义下拉列表-->
<select id="city" >
<option value="bj" title="beijing" title="" selected>北京</option>
<option value="sh" title="shanghai">上海</option>
<option value="gz" title="guangzhou">广州</option>
<option value="sz" title="shenzhen">深圳</option>
<option value="hz" title="hangzhou">杭州</option>
</select>
<br><br>
<!--定义测试按钮-->
<button id="btn01" onclick="fun1()">选择可用文本框并修改其值</button>
<button id="btn02" onclick="fun2()">选择不可用文本框并修改其值</button>
<button id="btn03" onclick="fun3()">选择复选框被选中的元素</button>
<button id="btn04" onclick="fun4()">选择下拉列表中被选中的元素</button>
</body>
</html>
JQUERY对象中【功能函数】
一。show() & hide()：
show():负责让jquery对象包含的所有DOM对象关联的标签在浏览上显示 style="display:block"
hide():负责让jquery对象包含的所有DOM对象关联的标签在浏览上隐藏 style="display:none"
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width:200px;
height: 200px;
background-color: green;
font-size: 30px;
color: red;
}
</style>
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
<script>
function fun1(){
$("div").hide();
}
function fun2(){
$("div").show();
}
</script>
</head>
<body>
<div>
我是一个DIV
</div>
<input type="button" value="隐藏DIV" onclick="fun1()"/>
<input type="button" value="显示DIV" onclick="fun2()"/>
</body>
</html>
二。remove() & empty():
empty：将当前标签子标签进行清除处理
remove：将当前标签及其子标签一并删除
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
<script>
function fun1(){
$("#one").remove();
}
function fun2() {
$("#two").empty();
}
</script>
</head>
<body>
大臣1：<select id="one">
<option value="">大儿子</option>
<option value="">二儿子</option>
</select>
大臣2：<select id="two">
<option value="">大儿子</option>
<option value="">二儿子</option>
</select> <br />
<input type="button" value="大臣1满门抄斩" onclick="fun1()"/>
<input type="button" value="大臣2断子绝孙" onclick="fun2()"/>
</body>
</html>
三. append() & appendTo()
1.共同点:都是操作标签中innerHTML，为当前标签添加子标签
2.append(): 父标签.append（子标签）；父亲给自己找了一个儿子
appendTo(): 子标签.appendTo(父标签); 儿子各自找了一个爹
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#father{
width:400px;
height: 400px;
background-color: green;
font-size: 30px;
color: red;
margin-bottom: 10px;
}
#son{
width:80px;
height: 80px;
background-color: yellow;
font-size: 20px;
color: red;
margin-bottom: 10px;
}
.two{
width:200px;
height: 200px;
background-color: pink;
font-size: 20px;
color: red;
}
</style>
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
<script>
function fun1(){
$("#father").append($("#son"));
}
function fun2(){
$("#son").appendTo($("#father"));
}
</script>
</head>
<body>
<div id="father">
我是爸爸
</div>
<div class="two">
<div id="son">
我是儿子
</div>
</div>
<input type="button" value="爸爸给自己找了个儿子" onclick="fun1()"/>
<input type="button" value="儿子给自己找了个爹" onclick="fun2()"/>
</body>
</html>
四。属性操作函数
1. val函数: value
1) $obj.val(): 读取jquery对象中第一个DOM对象的【value属性值】
2) $obj.val(值):为jquery对象中所有DOM对象的[value属性]进行统一赋值
2.prop函数: 工作状态属性 checked,disabled,selected
1) $obj.prop("checked",true)：为jquery对象中所有DOM对象的checked属性值赋值为true
2) $obj.prop（"checked"）：读取jquery对象中第一个DOM对象的【checked属性值】
3.attr函数: 基本属性 id name title rowspan
1) $obj.attr("name","ck")：为jquery对象中所有DOM对象的【name属性】统一赋值为[ck]
2) $obj.attr("title")：读取jquery对象中第一个DOM对象的【title属性】的值
4.text函数：操作属性innerText，双目标签的文本显示内容
双目标签：<div>123<div> 单目标签：<br/>123
1) $obj.text("123"):为jquery对象中所有DOM对象的innerText属性赋值为"123"
2）$obj.text(); 读取jquery对象中所有DOM对象的innerText属性内容，拼接为一个字符串返回
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
<script>
function fun1(){
var $option = $("#city>option:selected");
alert("value = "+$option.val());
alert("title = "+$option.attr('title'));
alert("文字显示内容 = "+$option.text());
alert("selected = "+$option.prop("selected"));
}
</script>
</head>
<body>
<center>
<select id="city" onchange="fun1()">
<option value="bj" title="beijing" title="" selected>北京</option>
<option value="sh" title="shanghai">上海</option>
<option value="gz" title="guangzhou">广州</option>
<option value="sz" title="shenzhen">深圳</option>
<option value="hz" title="hangzhou">杭州</option>
</select>
</center>
</body>
</html>
JQUERY中事件绑定方式
一。JavaScript中事件绑定方式:
1.嵌入式绑定: <input type="button" onclick="fun1()">
缺点：一次只能为一个标签绑定监听事件
2.基于DOM对象绑定方式:
var array = docuemnt.getElementsByName("ck");
for(var i=0;i<array.length;i++){
var domObj = array[i];
domObj.onclick = fun1;
}
缺点：需要开发人员自行遍历数组，来绑定监听事件
二。jquery中事件绑定方式:
1. $obj.jquery监听事件函数(处理函数)
[例子]:
$(":button").click(fun1);
为页面中所有的btton绑定onclick以及对应处理函数fun1
[jquery监听事件函数]:
html监听事件名称 jquery监听事件函数
onclick $obj.click(fun1);
onchange $obj.change(fun1);
onmouseover $obj.mouseover(fun1);
*******jquery监听事件函数名字就是【jquery监听事件函数】去掉[on]
2.$obj.bind("jquery监听事件函数名",处理函数):以这种方式绑定监听事件，可以解除的
$obj.unbind("jquery监听事件函数名"):将指定监听事件从DOM对象身上移除。
$obj.unbind(): 将所有监听事件从DOM对象身上移除。
案例：
事件绑定第一种方式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
<script>
window.onload=main;
function main(){
$(":button").click(fun1);
}
function fun1 () {
// this 被单击的button的DOM对象
alert($(this).val());
}
</script>
</head>
<body>
<input type="button" value="我是大哥">
<input type="button" value="我是二哥">
<input type="button" value="我是三哥">
</body>
</html>
事件绑定第二种方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
<script>
function fun1 () {
//$(":button:lt(3)").bind("click",dealFun);
$(":button:lt(3)").click(dealFun);
}
function fun2(){
$(":button:lt(2)").unbind("click");
}
function dealFun(){
alert($(this).val());
}
</script>
</head>
<body>
<input type="button" value="我是大哥">
<input type="button" value="我是二哥">
<input type="button" value="我是三哥">
<br/>
<input type="button" value="为前三个button绑定onclick" onclick="fun1()">
<input type="button" value="为前两个个button解除onclick绑定" onclick="fun2()">
</body>
</html>
