一个比较实用的jQuery例子

最新推荐文章于 2022-10-24 11:48:20 发布

haha_mingg

最新推荐文章于 2022-10-24 11:48:20 发布

阅读量1.5k

点赞数

分类专栏： Html5 && jQuery 1.x 学习文章标签： jquery input function passwords button email

本文链接：https://blog.csdn.net/haha_mingg/article/details/7732868

版权

Html5 && jQuery 1.x 学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.要使用jQuery框架，要引入如下：
<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script>

2. val函数，它表示名为userName的input标签的控件的值
var userName = $( 'input[name="userName"]' ).val();

3.append函数，css函数
$("#msg").append("<p>Passwords don't match. </p>").css("color", "red");

4.attr函数
$(this).attr("disabled", "disabled");5.each函数 $.each(states, function(index, value){
$("[name='stateCombo']").append("<option value='"
+ index + "'>"+ val + "</option>");

6.extend函数
var CA_Cities = ["San Francisco", "Los Angeles", "Mountain View"];
var cities = [];
if(selectedState == 0){
cities = $.extend([], CA_Cities);
}

7.清空函数
$("[name='cityCombo']").empty();

8.不用多说，附上代码
<!DOCTYPE html>
<html>
<head>
<title>User Registration and Validation</title>
<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script>
$(function(){
$( 'input[name="validate"]' ).click(function(){
// clear message div
$( "#msg" ).html( "" );

// get values for all input boxes
var userName = $( 'input[name="userName"]' ).val();
var email = $( 'input[name="email"]' ).val();
var pass1 = $( 'input[name="password"]' ).val();
var pass2 = $( 'input[name="chkPassword"]' ).val();

// no empty values permitted
var hasValue = userName && email && pass1 && pass2;
if( !hasValue ){
$( "#msg" )
.append( "All Fields are required." )
.css( "color","red" );
return false;
}
// check that passwords match
var passwordMatch = false;
if( pass1 === pass2 ) {
passwordMatch = true;
}

if( !passwordMatch ){
$("#msg").append("<p>Passwords don't match. </p>").css("color", "red");
return false;
}
});

$( "input[name='addLocation']" ).click(function(){
$( "body" ).append( "<select name='stateCombo'><option>"
+ "Select State</option></select>" );

// disable add location button so that we don't get
// more than one drop-down
$(this).attr("disabled", "disabled");

// add some sample states
var states = ["California", "Florida", "New York"];
$.each(states, function(index, value){
$("[name='stateCombo']").append("<option value='"
+ index
+ "'>"
+ value
+ "</option>");
});

// add another empty select list
$("body").append("<select name='cityCombo'>"
+ "<option>Select City</option></select>");
});

// use .live() since states select box doesn't exist yet
$("[name='stateCombo']").live("change", function(event){
// get name of state and fill with some data
var selectedState = $(this).val();

var CA_Cities = ["San Francisco", "Los Angeles", "Mountain View"];
var FL_Cities = ["Fort Lauderdale", "Miami", "Orlando"];
var NY_Cities = ["New York", "Buffalo", "Ithica"];
var cities = [];

if(selectedState == 0){
cities = $.extend([], CA_Cities);
} else if(selectedState == 1){
cities = $.extend([], FL_Cities);
} else if(selectedState == 2){
cities = $.extend([],NY_Cities);
}

// clear cityCombo of any previous values
$("[name='cityCombo']").empty();
$.each(cities, function(index, value){
$("[name='cityCombo']").append("<option value='"
+index
+"'>"
+value
+"</option>");
});
});
});
</script>
</head>
<body>
<div id="msg"></div>
<form name="userRegistrationForm">
<label for="userName">User</label>
<input type="text" name="userName" /><br/>
<label for="email">Email</label>
<input type="text" name="email" /><br/>
<label for="password">Password</label>
<input type="password" name="password" /><br/>
<label for="chkPassword">Re-enter Password</label>
<input type="text" name="chkPassword" /><br/>
<input type="button" name="validate" value="Validate Inputs" />
</form>
<input type="button" name="addLocation" value="Add Location" />
</body>
</html>

以上只是冰山一角,详细内容,请参考jQuery帮助文档
(完...待续)

haha_mingg

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个比较实用的jQuery例子

1.要使用jQuery框架，要引入如下： 2. val函数，它表示名为userName的input标签的控件的值 var userName = $( 'input[name="userName"]' ).val(); 3.append函数，css函数 $("#msg").append("Passwords don't match. "
复制链接

扫一扫