使用jquery选择器操作form元素

最新推荐文章于 2024-03-18 04:00:16 发布

2哥的成长记录

最新推荐文章于 2024-03-18 04:00:16 发布

阅读量1w

点赞数

文章标签： jquery input function border html 测试

本文链接：https://blog.csdn.net/zyb243380456/article/details/7786583

版权

/***************************************/
//>jquery 关于包装集选择器的使用demo
/***************************************/

//0.概要
/***************************************/
//最近花了50多块钱买了一本<<jquery in Action>>书
//看了一番,现在开始做练习了从中学到了不少东西
//从内心发出的感受就是jquery就像葵花宝典,一但使用
//上了她,你绝对会被他强大的元素查找和众多针对性的
//功能函数给着迷......
/***************************************/

/**
 * //测试元素
 * <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 * "http://www.w3.org/TR/html4/loose.dtd">
 *<html xmlns="http://www.w3.org/1999/xhtml">
 *	<head>
 *		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 *		<title>form选择器</title>
 *		<script type="text/javascript" src="../jquery-1.7.2.js"></script>
 *		<script type="text/javascript" src="form.js"></script>
 *	</head>
 *	<body>
 *		<form>
 *			<select>
 *				<optgroup label="a">
 *					<option id="a1" label="a1" value="a1" selected="selected"> a1</option>
 *					<option id="a2" label="a2" value="a2" > a2</option>
 *				</optgroup>
 *				<option label="b" id="b" label="b" value="b" > b </option>
 *			</select>
 *			<input type="radio"  name="sex" value="女"/>女
 *			<input type="radio" name="sex" value="男"/>男
 *			<input type="checkbox" name="habit" value="ball"/>篮球
 *			<input type="checkbox" name="habit" value="swiming"/>游泳
 *			<input type="checkbox" name="habit" value="inline"/>上网
 *		</form>
 *	</body>
 *</html>
 * */

$(document).ready(function(){
	//什么是函数上下文
	//上下文一般指一个段代码执行的一个环境
	//这个环境相当于一个大的容器他提供了执行某一段程序的架构性的东西
	//比如环境就像房子的梁柱门撑起来整个房子的重量,而房子里面的东西就是一些小零件
	//正如在这个函数上下文就是document怎么知道函数的上下文是什么可以通过alert(this)
	
	//this instanceof Function
	//目标对象   是      期望对象的对象吗 ?
	
	//typeof(document)
	//typeof(目标对象)
	//测试目标对象的class是什么返回名字
	
	//js中三元运算符
	//alert("a"=="b"? true:false);
	//表示a==b就返回true否则返回false
	//$("select option:selected").val()得到下拉列表被选中的option值
	//$("select option:selected")[0].innerHTML="AAA";
	//$("select option:selected").val("x");//不能改变已经渲染号的下拉列表中的选项
	
	//form [type='radio']这是一种层级关系表示form下面的类型为radio的所有元素
	//这是jquery非常强大的地方 还有很多的选中器特性 一一在后面介绍
	//document.body表示指定在特定的上下文中查找form元素下的radio元素
	//如果没有指定默认为document.body
	$("form [type='radio']",document.body).click(function(){
		if(!(undefined == $("[name='sex']:checked").val())){
			alert($("[name='sex']:checked").val());//选中名字为sex的元素并他的状态为选中状态
		}else{
			alert("请选中性别~~~");
		}
	});
	
	
	//如何同时为一个包装集 注册多个事件
	$("input[type='checkbox']").on("click dblclick",function(){
		var cked = $("[type='checkbox']:checked","form");
		//cked.size()返回包装集中元素的个数
		//如果想把某个元素从jquery对象变成dom原始对象可以使用 var domElemenmt = jqueryObject[0];
		//alert(cked.val());
	});
	
	//form input:last-child查找某个容器中最后一个包含的子容器
	//查找所有form中最后那个input元素
	//alert($("form input:last-child").val());
	
	
	//查找包装集中第一个元素
	//查找form的第一个子元素并得到其选中的值
	//alert($("form :first-child").val());
	
	
	//跟高级的父子元素选中方式
	//查找form中input索引为2的元素
	alert($("form input:nth-child(2)").val());
	
	//改变input索引值为偶数的元素的css
	$("form input:nth-child(even)").css({
		"border":"1px solid black",
		"background-color":"red"
	});
	
	//改变input索引为基数的元素的css
	$("form input:nth-child(odd)").css({
		"border":"1px solid blue",
		"background-color":"blue"
	});
	
	//查找某个元素中包含某些字符窜
	//alert($("form:contains('篮球')")[0].nodeName);	
	
});

2哥的成长记录

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用jquery选择器操作form元素

/***************************************///>jquery 关于包装集选择器的使用demo/***************************************///0.概要/***************************************///最近花了50多块钱买了一本>书//看了一番,现在开始做练习了
复制链接

扫一扫