您的位置：首页 > Web前端 > JQuery

JQuery一些事件text、checkbox、radio、select

2012-12-10 13:24 393 查看

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 />
下拉列表change事件：获取元素的选择的“value值”与“text文本”<br />
========================================================================================================<br />
<select id="selKK" name="sweets">
<option value="1">Candy</option>
<option value="2">Taffy</option>
<option value="3">Caramel</option>
<option value="4">Fudge</option>
<option value="5">Cookie</option>
<option value="6">Chocolate</option>
</select>
<input id="Text10" type="text" style="width: 300px;" />
<input id="btnSetSelect" type="button" value="设置selectvalue" />
<div>
</div>
<script type="text/javascript">
$("#selKK").change(function () {
var val1 = $('#selKK').val();
var text1 = $('#selKK').find("option:selected").text();
$("#Text10").val("value值是：" + val1 + "；text文本值是：" + text1);
})
$("#btnSetSelect").click(function () {
$("#selKK").val("6");
});
</script>
<br />
<a href="http://www.cnblogs.com/shengxiang/archive/2011/09/06/2168557.html" target="_blank"> http://www.cnblogs.com/shengxiang/archive/2011/09/06/2168557.html</a> <br />
========================================================================================================<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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航