jQuery select和change事件

上节教程中我们已经学过，jQuery 常用的表单事件有 3 种，focus 和 blur 事件上节已有介绍，本节教程就来介绍 select 和 change 事件。

jQuery select事件

在 jQuery 中，当我们选中 单行文本框 或 多行文本框 中的内容时，就会触发 select 事件。

举例：

 !DOCTYPE html 

 html 

 head 

 meta charset= utf-8 / 

 title /title 

 script src= js/jquery-1.12.4.min.js /script 

 script 

 $(function () {

 $( #txt1 ).select(function(){

 alert( 你选中了单行文本框中的内容 )

 $( #txt2 ).select(function () {

 alert( 你选中了多行文本框中的内容 )

 /script 

 /head 

 body 

 input id= txt1 type= text value= C语言中文网，给你初恋般的感觉 / br / 

 textarea id= txt2 cols= 20 rows= 5 C语言中文网，给你初恋般的感觉 /textarea 

 /body 

 /html 

预览效果如图 1 所示。

图 1：select 事件的效果

当我们选中单行文本框或多行文本框中的内容时，都会弹出相应的对话框。select 事件在实际开发中用得极少，我们了解一下即可，不需要深入。

再回到实际开发中，我们在使用搜索框的时候，每次点击搜索框，它就自动帮我们把文本框内的文本全选中了（大家先去看看百度搜索是不是这样的），这个效果又是怎么实现的呢？其实这用到的也是 select() 方法。

举例：全选文本

 !DOCTYPE html 

 html 

 head 

 meta charset= utf-8 / 

 title /title 

 script src= js/jquery-1.12.4.min.js /script 

 script 

 $(function () {

 $( #search ).click(function(){

 $(this).select();

 /script 

 /head 

 body 

 input id= search type= text value= 百度一下，你就知道 / 

 /body 

 /html 

默认情况下，预览效果如图 2 所示。

图 2：默认时的效果

当我们点击文本框时，预览效果如图 3 所示。

图 3：点击文本框时的效果

与 focus() 一样，select() 不仅可以作为一个事件，还可以作为一个方法。

 jQuery change事件

在 jQuery 中，change 事件常用于 具有多个选项的表单元素 中 change 事件在以下 3 种情况下被触发：

label input type= radio name= fruit value= 苹果 / 苹果 /label label input type= radio name= fruit value= 香蕉 / 香蕉 /label label input type= radio name= fruit value= 西瓜 / 西瓜 /label /div p /p /body /html

默认情况下，预览效果如图 4 所示。

图 4 默认效果

当我们选中任意一项时，就会立即显示出结果来，预览效果如图 5 所示。

图 5：选中时的效果

$( input[type= radio ] )表示选取所有单选框，这是一种属性选择器，之前我们已经接触过了。$(this).prop( checked )表示获取单选框 checked 属性的取值。

我们之前学过对于表单元素的 checked、selected、disabled 这些属性，我们使用 attr() 方法是没法获取的，必须使用 prop() 方法来获取。

举例：复选框的全选与反选

 !DOCTYPE html 

 html 

 head 

 meta charset= utf-8 / 

 title /title 

 script src= js/jquery-1.12.4.min.js /script 

 script 

 $(function () {

 $( #selectAll ).change(function(){

 var bool = $(this).prop( checked 

 if(bool){

 $( .fruit ).prop( checked , checked 

 }else{

 $( .fruit ).removeProp( checked 

 /script 

 /head 

 body 

 div 

 p label input id= selectAll type= checkbox / 全选/反选： /label /p 

 label input type= checkbox >

预览效果如图 6 所示。




图 6：复选框全选/反选的效果

当【全选】复选框被选中时，下面所有的复选框就会被选中。再次点击【全选】按钮，此时下面所有的复选框就会被取消选中。

哪个元素在 搞事（触发事件） ，$(this)就是哪个。后面经常会碰到，我们一定要清楚这一点。

举例：下拉列表


 !DOCTYPE html 

 html 

 head 

 meta charset= utf-8 / 

 title /title 

 script src= js/jquery-1.12.4.min.js /script 

 script 

 $(function () {

 $( select ).change(function () {

 var link = $( :selected ).val();

 window.open(link);

 /script 

 /head 

 body 

 select 

 option value= http://c.biancheng.net/ C语言中文网 /option 

 option value= https://www.92python.com/ Python教程网 /option 

 option value= https://www.cpp100.com C++教程网 /option 

 /select 

 /body 

 /html 

预览效果如图 7 所示。




图 7:下拉列表的效果

当我们选择下拉列表的某一项时，就会触发 change 事件，然后在新的窗口打开对应的页面。下拉菜单这种效果还是比较常见的，我们可以了解一下。

$( :selected ).val()表示选取被选中的下拉菜单的选项（即被选中的 option 元素），然后获取该选项的 value 值。其中，$( :selected )是一个 表单属性 伪类选择器，我们在之前的表单属性 伪类选择器 这一节已经详细介绍过了。

 
23827.html
 

 cC语言htmlpython