JQuery一些事件text、checkbox、radio、select_KingCruel的博客-程序员宅基地

技术标签: select  JavaScript  checkbox  Radio  text  JQuery事件  

hasClass:检查css样式是否存在

if ($('#btnUpdateApartment').hasClass('disabled')) {
    return;
}

检查某个控件的某个属性是否存在

function check() {
    alert($("#btnUpdateApartment").attr("disabled"));
    if (typeof ($("#btnUpdateApartment").attr("disabled")) == "undefined") {
        $('#btnUpdateApartment').attr('disabled', 'disabled');
    }
    else {
        $('#btnUpdateApartment').removeAttr('disabled');
    }
}

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>一些事件</title>
    <script src="js/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
    ========================================================================================================<br />
    blur事件:元素失去焦点将触发<br />
    ========================================================================================================<br />
    <table>
        <tr>
            <td>
                <input id="Text1" type="text" />
            </td>
            <td>
                <input id="Text2" type="text" />
            </td>
            <td>
                <div id="Text1Div">
                </div>
            </td>
            <td>
                <div>
                </div>
            </td>
        </tr>
    </table>
    <script type="text/javascript">
        $('#Text1').blur(function () {
            $('#Text2').val('sdsd');
            $("div").text("aaa");
            $("#Text1Div").text("sdfsd");
            //alert('Handler for .blur() called.');
        });
    </script>
    ========================================================================================================<br />
    change事件:元素的值改变的时候将触发<br />
    ========================================================================================================<br />
    <table>
        <tr>
            <td>
                <input id="focus" type="text" />
            </td>
            <td>
                <input id="Text4" type="text" />
            </td>
        </tr>
    </table>
    <script type="text/javascript">
        $("#focus").change(function () {
            $("#Text4").val("文本框值改变的时候将触发");
        });
    </script>
    <select name="sweets" multiple="multiple">
        <option>Chocolate</option>
        <option selected="selected">Candy</option>
        <option>Taffy</option>
        <option selected="selected">Caramel</option>
        <option>Fudge</option>
        <option>Cookie</option>
    </select>
    <div>
    </div>
    <script type="text/javascript">
        $("select").change(function () {
            var str = "";
            $("select option:selected").each(function () {
                str += $(this).text() + " ";
            });
            $("div").text(str);
        })
        .change();
    </script>  ========================================================================================================<br />
    click事件:元素被点击时候将触发事件<br />
    ========================================================================================================<br />
    <table>
        <tr>
            <td>
                <input id="Text5" type="text" />
            </td>
            <td>
                <input id="Text6" type="text" />
            </td>
            <td>
                <input id="Button1" type="button" value="单击事件" />
            </td>
        </tr>
    </table>
    <script type="text/javascript">
        $("#Text5").click(function () {
            $("#Text6").val("文本框单击事件");
        });

        $("#Button1").click(function () {
            $("#Text6").val("按钮单击事件");
        });
    </script>
    ========================================================================================================<br />
    focus事件:获得焦点时候将触发事件<br />
    ========================================================================================================<br />
    <table>
        <tr>
            <td>
                <input id="Text7" type="text" />
            </td>
            <td>
                <input id="Text8" type="text" />
            </td>
        </tr>
    </table>
    <script type="text/javascript">
        $("#Text7").focus(function () {
            $("#Text8").val("获得焦点时候将触发事件");
        });
    </script>
    ========================================================================================================<br />
    dblclick事件:当鼠标指针进入和离开元素时被执行,hover()方法是同时绑定 mouseenter和 .hover()事件<br />
    ========================================================================================================<br />
    <table>
        <tr>
            <td>
                <input id="Text3" type="text" />
            </td>
            <td>
                <input id="Text9" type="text" />
            </td>
        </tr>
    </table>
    <script type="text/javascript">
        $("#Text3").dblclick(function () {
            $("#Text9").val("被双击时候将触发事件");
        });
    </script>
    ========================================================================================================<br />
    checkbox赋值<br />
    ========================================================================================================<br />
    <script type="text/javascript">
        $(document).ready(function () {
            var checkboxs = $(':checkbox'); //获得全部的checkbox对象,并以数组形式返回
            var data = "11,22,32,42,5,6,7,8,9";
            var items = data.split(',');
            $(':checkbox').each(function () {
                for (var i = 0; i < items.length; i++) {
                    if ($(this).val() == items[i]) {
                        $(this).attr("checked", true);
                    }
                }
            });
        });
    </script>
    <input type="checkbox" value='1' name='num666' />
    <input type="checkbox" value='2' name='num666' />
    <input type="checkbox" value='3' name='num666' />
    <input type="checkbox" value='4' name='num666' />
    <input type="checkbox" value='5' name='num666' />
    <input type="checkbox" value='6' name='num666' />
    <input type="checkbox" value='7' name='num666' />
    <input type="checkbox" value='8' name='num666' />
    <input type="checkbox" value='9' name='num666' />
    <input id="btnCheckValue" type="button" value="获取复选框被选中的值" />
    <script type="text/javascript">
        $("#btnCheckValue").click(function () {
            var str = "";
            $("[name='num666'][checked]").each(function () {
                str += $(this).val() + "\r\n";
            })
<span style="white-space:pre">	</span>    没有被选中的值
<span style="white-space:pre">	</span>    $("[name='Item']").not("[checked]").each(function () {
                        strFalse += $(this).val() + "\r\n";
            })
            alert(str);
        });
    </script>
    ========================================================================================================<br />
    radio单选按钮<br />
    ========================================================================================================<br />
    <input id="Radio1" type="radio" name="radKing" value="控件1" /><label for="Radio1">控件1</label><br />
    <input id="Radio2" type="radio" name="radKing" value="控件2" /><label for="Radio2">控件2</label><br />
    <input id="Radio3" type="radio" name="radKing" value="控件3" /><label for="Radio3">控件3</label><br />
    <input id="Radio4" type="radio" name="radKing" value="控件4" /><label for="Radio4">控件4</label><br />
    <input id="Radio5" type="radio" name="radKing" value="控件5" />控件5<br />
    <input id="Radio6" type="radio" name="radKing" value="控件6" />控件6<br />
    <br />
    <input id="Button2" type="button" value="获取选中的值" /><input id="Button3" type="button"
        value="第一个被选中" /><input id="Button4" type="button" value="第N个值被选中" />
    <script type="text/javascript">
        $("#Button2").click(function () {
            var str = $("input[name='radKing']:checked").val();
            var querytype = $(":radio[name=radKing][checked]").val(); //ie及火狐下获取通用
            alert(str + "," + querytype);
        });
        $("#Button3").click(function () {
            $('input[name=radKing]:radio:first').attr('checked', 'checked');
        });
        $("#Button4").click(function () {
            $("input[name=radKing]:radio[value='控件5']").attr('checked', 'true');
        });
    </script>
    ========================================================================================================<br />
    radio单选按钮选择图片按钮被选中<br />
    ========================================================================================================<br />
    <div class="check_pay success_pay">
        <span>请点击以下银行支付:</span>
        <ul>
            <li>
                <input id="rad1" runat="server" name="check_pay_radio" type="radio" class="check_pay_radio"
                    value="ICBC" checked />
                <img src="../images/gs.gif" alt="" onclick="checked('rad1')" /></li>
            <li>
                <input id="rad2" runat="server" name="check_pay_radio" type="radio" class="check_pay_radio"
                    value="CCB" />
                <img src="../images/gj.gif" alt="" onclick="checked('rad2')" /></li>
            <li>
                <input id="rad3" runat="server" name="check_pay_radio" type="radio" class="check_pay_radio"
                    value="CMB" />
                <img src="../images/zs.gif" alt="" onclick="checked('rad3')" /></li>
            <li>
                <input id="rad4" runat="server" name="check_pay_radio" type="radio" class="check_pay_radio"
                    value="COMM" />
                <img src="../images/ht.gif" alt="" onclick="checked('rad4')" /></li>
            <li>
                <input id="rad5" runat="server" name="check_pay_radio" type="radio" class="check_pay_radio"
                    value="ABC" />
                <img src="../images/ny.gif" alt="" onclick="checked('rad5')" /></li>
            <li>
                <input id="rad6" runat="server" name="check_pay_radio" type="radio" class="check_pay_radio"
                    value="GDB" />
                <img src="../images/gf.gif" alt="" onclick="checked('rad6')" /></li>
            <li>
                <input id="rad7" runat="server" name="check_pay_radio" type="radio" class="check_pay_radio"
                    value="CIB" />
                <img src="../images/xy.gif" alt="" onclick="checked('rad7')" /></li>
            <li>
                <input id="rad8" runat="server" name="check_pay_radio" type="radio" class="check_pay_radio"
                    value="CEB" />
                <img src="../images/gd.gif" alt="" onclick="checked('rad8')" /></li>
        </ul>
    </div>
    <script type="text/javascript">
        function checked(elm_id) {
            var danxuananniu = document.getElementById(elm_id);
            danxuananniu.checked = "checked";
            alert(document.getElementById(elm_id).value);
        }
    </script>
    ========================================================================================================<br />
    hover事件:元素被双击时候将触发事件<br />
    ========================================================================================================<br />
    <div id="oilk">
        <ul>
            <li>Milk</li>
            <li>Bread</li>
            <li class='fade'>Chips</li>
            <li class='fade'>Socks</li>
        </ul>
    </div>
    <script type="text/javascript">
        $("#oilk li").hover(
            function () {
                $(this).append($("<span> ***</span>"));
            },
            function () {
                $(this).find("span:last").remove();
            }
            );
        $("#oilk li.fade").hover(function () { $(this).fadeOut(100); $(this).fadeIn(500); });
    </script>
</body><pre name="code" class="html">    <style type="text/css">
        .check_pay
        {
            width: 864px;
            border: 1px solid #FEE0BE;
            margin: 8px 0px 0px 40px;
            display: inline;
            padding: 0px 0px 5px 0px;
        }
        .check_pay span
        {
            width: 834px;
            height: 20px;
            line-height: 20px;
            float: left;
            padding: 15px 15px 0px 15px;
            font-weight: bold;
        }
        .check_pay ul
        {
            width: 864px;
            float: left;
            padding-bottom: 10px;
        }
        .check_pay ul li
        {
            width: 185px;
            height: 40px;
            float: left;
            margin: 10px 0px 0px 15px;
            display: inline;
        }
        .check_pay ul li img
        {
            width: 138px;
            height: 38px;
            float: left;
            border: 1px solid #ddd;
        }
        .check_pay_radio
        {
            width: 14px;
            height: 14px;
            float: left;
            margin: 12px 10px 0px 0px;
            display: inline;
        }
        
        #oilk ul
        {
            margin-left: 20px;
            color: blue;
        }
        #oilk li
        {
            cursor: default;
        }
        #oilk span
        {
            color: red;
        }
    </style>

</html>

 
 
 
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/KingCruel/article/details/8277489

智能推荐

解决.找不到scaffold方法-程序员宅基地

在项目目录下输入 ruby script/plugin install scaffolding

程序员宅基地—— 我的2014 年度征文活动火爆开启_cmmi 征文-程序员宅基地

程序员宅基地—— 我的2014 年度征文活动火爆开启_cmmi 征文

Hexagon GDB Debugger介绍(2)-程序员宅基地

Hexagon GDB Debugger介绍(2)2 使用调试器2.1 概述2.2 使用调试器2.3 启动调试器2 使用调试器2.1 概述调试器使程序员能够研究程序执行时“内部”发生的事情,或者确定程序在崩溃时正在做什么。 程序存储在目标文件中,目标文件是用编译器和二进制实用程序创建的二进制文件。本章涵盖以下主题:使用调试器启动调试器调试器选项调试器命令退出调试器加载程序调试程序停止和继续检查堆栈检查源文件检查数据C 预处理器宏跟踪点切换源语言检查符号表改变执行调_hexagon gdb debugger介绍(2)

你知道怎么点击按钮跳转到第三方软件line里面吗_网页怎么点击跳转到line号-程序员宅基地

网页点击按钮跳转到第三方 line后台,求例子了_网页怎么点击跳转到line号

门控时钟--低功耗设计_asic低功耗设计 门控时钟-程序员宅基地

一、门控时钟做什么用?门控时钟包括分离门控时钟和集成门控时钟(integrate clock gating,ICG),用于降低功耗。二、什么是门控时钟?结构是什么?如何实现门控作用?Clockgating:在数据无效时,将寄存器时钟关闭的技术,能够有效降低功耗, 是低功耗设计的重要方法之一。门控时钟其实就是一个逻辑模块,在寄存器的输入数据无效时,将寄存器的输入时钟置为0,而此时寄存器值..._asic低功耗设计 门控时钟

基本业务CRUD的过程思路_crud 封装思路-程序员宅基地

一般是要进入系统,请求后台数据存入List集合,会在jsp页面进行列表展示。增加的过程是展开一个表单,输入数据后提交到后台进行封装,然后后台调用Dao中的add的方法(此时传过去的一般是获取的数据库连接con,和封装的数据)进行插入。修改的过程是jsp页面点击修改后会传过去一个相应的要修改的数据的Id(此Id一般是EL表达式获取的ID值),后台会根据此Id查询获取相应的实体,转发到修改页面(此..._crud 封装思路

随便推点

过滤HTML标签,校验ueditor富文本中字符长度_vue-ueditor-wrap 判断输入长度-程序员宅基地

过滤HTML标签,校验ueditor富文本中字符长度vue+element中使用了ueditor富文本编辑器,它在计算字符长度时,是不包含HTML标签的所以会和form表单的rules校验规则冲突,在定义字符长度时,rules的校验规则是包含隐式的html标签的例如:rules规则字符限制300长度在富文本编辑器中输入300个字符,实际长度包含了HTML标签所以无法通过校验,怎么办呢?可以自定义校验规则,过滤掉HTML标签,校验实际字符的长度 messageContent:_vue-ueditor-wrap 判断输入长度

配置管理漫漫谈之典型配置库结构(转)-程序员宅基地

在现实操作中,开发库一般分为开发库(DevelopLibrary)和管理库(ManagementLibrary),受控库一般称为基准库(BaselineLibrary),产品库一般称为发布库(ReleaseLibrary)/产品...

python excel 数据分析统计服_数据分析从入门到进阶(透彻讲解EXCEL.SQL.TABLEAU、PYTHON四项数据分析必会工具.免费提供1GB数据集...-程序员宅基地

透彻讲解Excel、SQL、Tableau、Python四项数据分析必会工具,数据分析工作者的案头推荐工具书。系统介绍数据分析的策略、方法(数据分析之道);实例讲解引导、快速掌握数据分析工具(数据分析之术);免费提供书中涉及的全部数据集文件、数据库源文件、程序代码(1GB)。很好实用的数据分析学习用书。本书由一线数据分析师精心编写,通过大量案例介绍了数据分析工作中常用的数据分析方法与工具。本书包括...

Java Timer 定时器的使用-程序员宅基地

设置定时任务很简单,用Timer类就搞定了。 一、延时执行首先,我们定义一个类,给它取个名字叫TimeTask,我们的定时任务,就在这个类的main函数里执行。代码如下:package test;import java.util.Timer;public class TimeTaskTest { public static void main(Strin

学习博客:jdbc事务处理---数据回滚和提交_jdbc提交回滚指的是什么-程序员宅基地

package cn.zsp.transation;import cn.zsp.uil.JDBCUtils;import org.junit.Test;import java.sql.Connection;import java.sql.PreparedStatement;import java.sql.SQLException;public class TransationTest { @Test public void testUpdate() { _jdbc提交回滚指的是什么