jQuery 选择器（2）

最新推荐文章于 2023-04-23 17:34:04 发布

aimartt

最新推荐文章于 2023-04-23 17:34:04 发布

阅读量492

点赞数

分类专栏： jQuery 文章标签： jquery input function html string 出版

本文链接：https://blog.csdn.net/aimartt/article/details/7848576

版权

jQuery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

jQuery 选择器（2）

参考资料：
《锋利的jQuery》作者：单东林张晓菲魏然出版社: 人民邮电出版社

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
	    <base href="<%=basePath%>">
	    <title></title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">    
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
		<script type="text/javascript">
			$(function() {
				//3.6、表单对象属性过滤选择器
				// :enabled
				$("#form1 input:enabled").val("new enabled value");	//设置表单中可用 <input> 元素的值
				
				// :disabled
				$("#form1 input:disabled").val("new disabled value");	 //设置表单中不可用<input>元素的值
				
				// :checked
				//提示选中复选框的个数
				$("#checkResult").html("选中了" + $("input:checked").length + "个复选框"); 
				$("#form1 input[type = checkbox]").click(function() {
					//当点击复选框时，提示选中复选框的个数
					$("#checkResult").html("选中了" + $("input:checked").length + "个复选框");	
				});
				
				// :selected
				var t = "";
				//遍历选中的元素
				$("select :selected").each(function() {
					t += "\t" + $(this).val();
				});
				$("#selectedResult").html("选中了：" + t);	//显示选中的元素的文本
				//当改变下拉列表的选择时，遍历选中的元素，显示选中元素的文本
				$("select").change(function() {
					var text = "";
					$("select :selected").each(function() {
						text += "\t" + $(this).val();
					});
					$("#selectedResult").html("选中了：" + text);
				});
			});
		</script>  	
  	</head>
  
  	<!-- HTML -->
  	<body>
    	<form id="form1" action="#">
    		可用元素：<input name="add" value="可用文本框" /><br />
    		不可用元素：<input name="email" disabled="disabled" value="不可用文本框" /><br />
    		可用元素：<input name="che" value="可用文本框" /><br />
    		不可用元素：<input name="name" disabled="disabled" value="不可用文本框" /><br /><br />
			复选框：<br />
			<input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
			<input type="checkbox" name="newsletter" value="test2" />test2
			<input type="checkbox" name="newsletter" value="test3" />test3
			<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
			<input type="checkbox" name="newsletter" value="test5" />test5
			<div id="checkResult"></div><br />
			下拉列表1：<br />
			<select name="test" multiple="multiple" style="height: 100px;">
				<option>卢塞恩</option>
				<option selected="selected">伯尔尼</option>
				<option>日内瓦</option>
				<option selected="selected">苏黎世</option>
				<option>华沙</option>
				<option>布拉格</option>
			</select><br /><br />
			下拉列表2：<br />
			<select name="test2">
				<option>卢塞恩</option>
				<option>伯尔尼</option>
				<option selected="selected">日内瓦</option>
				<option>苏黎世</option>
				<option>华沙</option>
				<option>布拉格</option>
			</select>
			<div id="selectedResult"></div>
    	</form>
  	</body>
</html>

aimartt

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery 选择器（2）

jQuery 选择器（2）参考资料：《锋利的jQuery》作者：单东林张晓菲魏然出版社: 人民邮电出版社<%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServe
复制链接

扫一扫

专栏目录