`
eminoda
  • 浏览: 10241 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jquery 其他api操作

jquery 
阅读更多
笔记整理，供以后参阅
1.获得指定元素（上下级元素，上一个，下一个） 
<body>
	<div>
		<a href="#">AAAA</a>
		<p>
			<a href="#">BBBB</a>
		</p>
		<a href="#">CCCC</a>
	</div>
	<hr/>
	<div>xxx<a class="del" href="#">删除</a></div>
	<div>百度 <a class="del" href="#">删除</a></div>
	<div>新浪 <a class="del" href="#">删除</a></div>
</body>


<script type="text/javascript">
	/*
		children	获取指定子元素
		find		获取指定的后代元素
		parents		获得祖父辈元素
		parent		获取父辈元素
		next/prev	获取下一个/上一个元素
		siblings	获取所有兄弟元素				*/
	$(function(){
		$('div>a').each(function(){
			alert($(this).text());
		});
		$('div').children('a').each(function(){
			//alert($(this).text()); 
		});
		
		//（区别上面多个BBBB）
		$('div').find('a').each(function(){
			//alert($(this).text());
		});
		
		$('div').find('a').each(function(){
			//$(this).parent().remove();
		});
		
	});
</script>

2.样式css和属性attr 
<body>
	<div>JQUERY</div>
	<a href="http://www.jquery.cn">hellojquery</a>
	<input type="button" value="设置" id="mybutton" />	
	<hr/>
	<a href="http://www.jquery.cn">hellojquery</a>
	<input type="button" value="显示为红色" id="mybutton2" />
	<hr/>
	<p>ABCD</p>
	<input type="button" value="开关" id="mybutton3" />	
</body>

<script type="text/javascript">
	$(function(){
		//点击一个button，动态设置 div的属性 id name class 
		$("#mybutton").click(function(){
			// 设置值
			$("div").attr({"id":"div1","name":"mydiv","class":"jquery"});
			// 获取属性
			// alert($("a").attr("href"));
			//尝试能否设置一个不存在的属性？ 
			//$("div").attr("page","http://www.jquery.cn");
		});
		
		// 点击button2，将<a> 字体设置为红色
		$("#mybutton2").click(function(){
			// 设置样式方案一 ，通过attr
			$("a").attr("style","color:red");
			// 设置样式方案二 ，通过css
			$("a").css("color","red");
			// 设置样式方案三 ，设置class
			$("a").addClass("red");
		});
		
		// 点击开关 按钮，第一次点击，button字体变为红色，第二次点击 还原
		$("#mybutton3").click(function(){
			$("p").toggleClass("red");
		});
	});
</script>
<style type="text/css">
	.red {
		color:red ;
	}
</style>

3.html和text区别
val可以添加值，来实现选中 
<body>
	<div><a>AAAA</a>BBBB</div>
		用户名 <input type="text" id="username" /> <br/>
		性别 <input type="radio" name="gender" value="男" />男  
			<input type="radio" name="gender" value="女" /> 女<br/>
		爱好<input type="checkbox" name="hobby" value="sport" />体育 	
			<input type="checkbox" name="hobby" value="read" />读书 	
			<input type="checkbox" name="hobby" value="music" />音乐 <br/>
		城市 <select id="city">
			<option value="北京">北京</option>
			<option value="上海">上海</option>
			<option value="广州">广州</option>
		</select> <br/>
		<input type="button" value="获取val" id="mybutton"/>
		
		<select name="edu" id="edu">
			<option value="本科">本科</option>
			<option value="高中">高中</option>
			<option value="小学">小学</option>
			<option value="幼儿园">幼儿园</option>
		</select>
</body>

<script type="text/javascript">
$(function(){
	// 1、区分 html() 和 text() 
	//alert($("div").html());
	//alert($("div").text());
	
	// 2、val() 取值操作
	$("#mybutton").click(function(){
		alert("用户名:" + $("#username").val());
		alert("性别:" + $("input[name='gender']:checked").val());
		
		// 对select元素用val 获取到选中option的值  $("#city option:selected").val()
		alert("城市:" + $("#city").val());
	});
	
	// 3、 通过val() 进行选中
	$("input[name='gender']").val(['男']); // radio
	$("#city").val('广州'); // select
	$("input[name='hobby']").val(['sport','music']); // checkbox 
	
	// 输出所有 学历 文本内容
	//alert($("#edu").text());
	$("#edu option").each(function(){
		alert($(this).text());
	});
});
</script>

4.dom操作：添加节点（select） 
<body>
	<select id="province">
		<option value="">请选择省份</option>
	</select>
	<hr/>
	<select id="edu" id="edu">
		<option>博士</option>
		<option>硕士</option>
		<option>本科</option>
		<option>幼儿园</option>
	</select>
	<hr/>
	<table>
		<tr>
			<td>
				<select id="select1" multiple="multiple" style="width: 80px;height: 200px">
					<option>北京</option>
					<option>上海</option>
					<option>广州</option>
					<option>深圳</option>
					<option>天津</option>
					<option>南京</option>
				</select>
			</td>
			<td>
				<input type="button" value="-->" id="toRight"/> <br/>
				<input type="button" value="-->>" id="allToRight"/><br/>
				<input type="button" value="<--" id="toLeft"/><br/>
				<input type="button" value="<<--" id="allToLeft"/>
			</td>
			<td>
				<select id="select2" multiple="multiple" style="width: 80px;height: 200px">
				</select>
			</td>
		</tr>
	</table>
</body>

<script type="text/javascript">
	$(function(){
		// JS对象数组
		var provinces = [
		  {"id":"1","name":"河北省"},               
		  {"id":"2","name":"山西省"},               
		  {"id":"3","name":"湖南省"},               
		  {"id":"4","name":"广东省"}               
		];
		// 数组内容，生成select 元素中，生成<option>元素
		// 传统 HTML DOM
		/*
		for(var i=0; i<provinces.length; i++){
			var option = new Option();
			option.text = provinces[i].name; 
			option.value = provinces[i].id;
			
			document.getElementById("province").add(option);
		}
		*/
		//数组遍历，select添加节点option
		$(provinces).each(function(){
			var option = $("<option value='"+this.id+"'>"+this.name+"</option>");
			$("#province").append(option);
		});
		
		// 添加 大专option  （本科和幼儿园） ---- 外部插入
		var option = $("<option>大专</option>");
		$("option:contains('本科')").after(option);
		
		// 左右移动
		$("#toRight").click(function(){
			$("#select2").append($("#select1 option:selected"));
		});
		$("#allToRight").click(function(){
			$("#select2").append($("#select1 option"));
		});
		$("#toLeft").click(function(){
			$("#select1").append($("#select2 option:selected"));
		});
		$("#allToLeft").click(function(){
			$("#select1").append($("#select2 option"));
		});
	});
</script>

5.dom操作：删除节点 
<body>
	<p>jquery</p> 	 	
	<div>jquery</div>
	<input type="button" value="删除p"/>
	<hr/>
	<div align="center">
		添加用户<br/>
		姓名<input type="text" name="name" />
		email<input type="text" name="email" />
		手机<input type="text" name="phone" /> <br/>
		<input type="button" value="提交" /> <br/><br/>
		<table border="1">
			<tr>
				<th>姓名</th>
				<th>email</th>
				<th>手机</th>
				<th></th>
			</tr>
		</table>
	</div>
</body>

<script type="text/javascript">
	$(function(){
		$("p").click(function(){
			alert("被点了");
		});
		
		
		$(":button").click(function(){
			// 删除p 元素
			// var $p = $("p").remove(); // 元素和事件一起删除
			var $p = $("p").detach(); // 元素删除，事件保留
			// 使用remove删除元素，事件也被删除了
			$("body").append($p);
		});
		
		
		// 清除 div 的内容
		// document.getElementsByTagName("div")[0].innerHTML = "" ;
		// $("div").empty();
		
		// 添加 "提交" 按钮点击事件
		$("input[value='提交']").click(function(){
			var name = $("input[name='name']").val();
			var email = $("input[name='email']").val();
			var phone = $("input[name='phone']").val();
			// 生成tr
			var $tr = $("<tr><td>"+name+"</td><td>"+email+"</td><td>"+phone+"</td><td><a href='#' class='del'>删除</a></td></tr>");
			$("table").append($tr);
		});
		
		// 删除链接注册事件
		$(".del").live("click",function(){
			$(this).parents("tr").remove();
		});
	});
</script>

6.dom操作：全选等 
<body>
	<div>A</div>
	<hr/>
	<p>B
		<a href="#">C</a>
	</p>
	<input type="button" value="clone" />
	<hr/>
	请选择您的爱好 
	<input type="checkbox" name="checkAll" /> 全选/全不选 <br/>
	<input type="checkbox" name="hobby" value="篮球"/> 篮球
	<input type="checkbox" name="hobby" value="足球"/> 足球
	<input type="checkbox" name="hobby" value="唱歌"/> 唱歌
	<input type="checkbox" name="hobby" value="游泳"/> 游泳<br/>
	<input type="button" value="全选" />
	<input type="button" value="全不选" />
	<input type="button" value="反选" />
</body>
<script type="text/javascript">
	$(function(){
		$("p").click(function(){
			alert("p");
		});
		
		$("a").click(function(){
			alert("a");
		});
		
		// 将p元素赋值到 div 元素
		//$("div").append($("p").clone()); // 复制节点，不复制事件
		$("div").append($("p").clone(true)); // 复制节点, 复制事件
		
		// 将所有p元素 ，替换 <span>元素  保留原有内容
		$("p").each(function(){
			$(this).replaceWith("<span>"+$(this).html()+"</span>");
		});
		
		//全选 练习
		/*
		// 全选checkbox
		$("input[name='checkAll']").click(function(){
			if($("input[name='checkAll']").attr('checked')=="checked"){
				// 选中
				$("input[name='hobby']").attr("checked","checked");
			}else{
				// 不选
				$("input[name='hobby']").removeAttr("checked");
			}
		});
		
		// 全选按钮 
		$(":button[value='全选']").click(function(){
			$("input[name='hobby']").attr("checked","checked");
		});
		// 全不选按钮
		$(":button[value='全不选']").click(function(){
			$("input[name='hobby']").removeAttr("checked");
		});
		// 反选按钮
		$(":button[value='反选']").click(function(){
			$("input[name='hobby']").each(function(){
				if($(this).attr("checked")=="checked"){
					// 当前选中 ---- 不选
					$(this).removeAttr("checked");
				}else{
					// 当前没有选中  --- 选中
					$(this).attr("checked","checked");
				}
			});
		});
		*/
		// 全选checkbox
		$("input[name='checkAll']").click(function(){
			var isChecked = this.checked;
			$("input[name='hobby']").each(function(){
				this.checked = isChecked ;
			});
		});
		
		// 全选按钮 
		$(":button[value='全选']").click(function(){
			$("input[name='hobby']").attr("checked","checked");
		});
		// 全不选按钮
		$(":button[value='全不选']").click(function(){
			$("input[name='hobby']").removeAttr("checked");
		});
		// 反选按钮
		$(":button[value='反选']").click(function(){
			$("input[name='hobby']").each(function(){
				this.checked = !this.checked ;
			});
		});
	});
</script>
分享到：
| jquery 9种选择器
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery1.2API 本地 帮助文档

    《jQuery1.2 API 本地帮助文档》是一个用于学习和参考jQuery 1.2版本API的重要资源，以CHM（Compiled Help Manual）格式提供。CHM文件是一种微软编译后的帮助文件，通常包含丰富的索引、搜索功能以及组织有序的内容...

    jQuery中文API

    **jQuery中文API**是JavaScript库jQuery的中文文档，它为开发者提供了一个全面、直观的参考指南，便于在JavaScript编程中高效地使用jQuery。jQuery因其简洁的语法和强大的功能，在Web开发领域广泛应用，尤其是在处理...

    jQuery_api_for_dwcs5为dw安装jquery插件

    jQuery是JavaScript库中最受欢迎的一个，它极大地简化了DOM操作、事件处理、动画设计以及Ajax交互。在本教程中，我们将探讨如何使用jQuery_api_for_dwcs5这个插件将其集成到Dreamweaver（DWCS5）中，从而在DW环境下...

    jquery api 3.2.1

    总结来说，jQuery API 3.2.1版本为开发者提供了高效、便捷的前端开发工具，无论是在DOM操作、事件处理、动画制作，还是在与服务器的异步通信上，都展现出卓越的性能。通过深入学习和熟练运用，开发者可以大大提高...

    JQUERY的API中文文档

    **jQuery API中文文档详解** jQuery，作为一款广泛使用的JavaScript库，极大地简化了DOM操作、事件处理、动画设计以及Ajax交互。其丰富的API使得开发者能够高效地编写出高性能的Web应用程序。这篇文档将深入探讨...

    jqueryApi版本集合

    这个名为"jqueryApi版本集合"的压缩包，很可能是包含不同版本的jQuery API文档，对于开发者来说是极具价值的学习和参考资源。 首先，我们来了解一下jQuery的核心概念。jQuery由John Resig于2006年创建，其设计目标...

    jQuery 3.3.1 api docs 中文手册 [chm]

    **jQuery 3.3.1 API Docs 中文手册** jQuery 是一个广泛使用的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互。这个“jQuery 3.3.1 API Docs 中文手册”是开发人员的重要参考资料，为理解...

    jquery_api.mxp

    总结，jQuery API不仅涵盖了DOM操作、事件处理、动画和AJAX，还提供了方便的API接口和强大的插件系统。熟练掌握jQuery，能有效提升前端开发效率，为项目带来更加流畅、优雅的用户体验。无论你是初学者还是经验丰富的...

    Jquery 1.6.4 js And Jquery 1.4 API 中文

    **jQuery 1.6.4 和 jQuery 1.4 API 中文详解** jQuery 是一个流行的 JavaScript 库，它极大地简化了 JavaScript 的 DOM 操作、事件处理、动画制作以及Ajax交互。这里我们主要讨论的是 jQuery 1.6.4 和 jQuery 1.4 ...

    jQuery EasyUI的api

    以下是对jQuery EasyUI API的一些核心知识点的详细说明： 1. **基本概念**： - **jQuery**: jQuery 是一个轻量级的JavaScript库，它使得DOM操作、事件处理、动画设计以及Ajax交互变得更加简单。 - **EasyUI 组件*...

    jQueryAPI中文手册3.1.rar

    《jQuery API 中文手册 3.1》是一个针对jQuery库的详细参考文档，旨在帮助中文用户更好地理解和使用这个广泛应用于Web开发的JavaScript框架。jQuery以其高效、易用和丰富的功能特性，深受开发者喜爱。这份手册提供了...

    JQuery_Api文档

    在Dw5这样的早期Web开发工具中，结合JQueryAPI文档的使用，可以更好地实现动态效果和交互性。 JQuery API（应用程序接口）文档详细介绍了JQuery的各种函数和方法，这些功能包括： 1. **选择器（Selectors）**：...

    jQuery api 1.4.1

    jQuery API 1.4.1 是一个非常重要的版本，它为开发者提供了强大的工具，使得JavaScript编程更为便捷。在这个版本中，jQuery进一步优化了其核心功能，增强了性能，并引入了一些新的特性和方法。以下是对这个API的一些...

    给Dreamweaver安装jQuery插件jQuery_API.mxp

    在本篇中，我们将深入探讨如何在Dreamweaver中安装jQuery插件jQuery_API.mxp，以及这个插件对开发者的工作带来的便利。 首先，我们要明确的是，jQuery_API.mxp是一个专为Dreamweaver设计的插件，它的主要作用是集成...

    jQuery_easyui+jQuery1.7API

    《jQuery EasyUI与jQuery 1.7 API深度解析》 jQuery EasyUI和jQuery 1.7 API是Web开发中广泛使用的两个工具，它们为开发者提供了强大的功能和便捷的使用体验。本文将深入探讨这两个组件的核心概念、使用方法以及在...

    jquery文档JQuery API手册与JQuery UI API手册_1.2.rar

    **jQuery API手册与jQuery UI API手册** jQuery是一个广泛使用的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。这个压缩包包含的“jQuery API手册”和“jQuery UI API手册”...

    jQuery3.2.1API中文手册

    **jQuery 3.2.1 API中文手册** jQuery是一个广泛使用的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。jQuery 3.2.1是这个库的一个稳定版本，提供了丰富的功能和优化。中文版...

    jquery-API_CHM

    本资源包含了两个版本的jQuery API文档：一个是针对jQuery 1.7.2的2012年4月20日更新的中文版（"jquery1.7.2_20120420中文版.chm"），另一个是jQuery API 1.4.1的中文版（"jQueryAPI-1.41.chm"）。 jQuery是一个...

    jquery实例+锋利的jquery+api

    4. **插件和库的使用**：介绍如何利用jQuery与其他库（如Bootstrap、jQuery UI等）配合工作，以及如何选择和使用jQuery插件。 5. **实战项目**：可能包含实际的Web开发项目案例，让你有机会将所学应用于实践。 API...

    jQuery UI API 1.8 CHM格式

    - 方法：API提供了多种操作组件的方法，如`open()`、`close()`、`disable()`等，可以控制组件的状态。 - 事件：如`dragstart`、`sortstop`等，开发者可以监听并响应这些事件，实现更复杂的业务逻辑。 **jQuery UI...

Magicbox
Global site tag (gtag.js) - Google Analytics