jquery 其他api操作

最新推荐文章于 2024-05-28 22:16:31 发布
最新推荐文章于 2024-05-28 22:16:31 发布
阅读量132 收藏
点赞数
文章标签： jquery ViewUI
笔记整理，供以后参阅
[size=x-large][color=darkred]1.获得指定元素（上下级元素，上一个，下一个）[/color][/size] 

<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>

[size=x-large][color=darkred]2.样式css和属性attr[/color][/size] 
<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>

[size=x-large][color=darkred]3.html和text区别[/color][/size]
[color=orange]val可以添加值，来实现选中[/color] 
<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>

[size=x-large][color=darkred]4.dom操作：添加节点（select）[/color][/size] 
<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>

[size=x-large][color=darkred]5.dom操作：删除节点[/color][/size] 
<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>

[size=x-large][color=darkred]6.dom操作：全选等[/color][/size] 
<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 api 3.2.1
11-14
总结来说，jQuery API 3.2.1版本为开发者提供了高效、便捷的前端开发工具，无论是在DOM操作、事件处理、动画制作，还是在与服务器的异步通信上，都展现出卓越的性能。通过深入学习和熟练运用，开发者可以大大提高...
jQuery1.2API 本地 帮助文档
12-28
《jQuery1.2 API 本地帮助文档》是一个用于学习和参考jQuery 1.2版本API的重要资源，以CHM（Compiled Help Manual）格式提供。CHM文件是一种微软编译后的帮助文件，通常包含丰富的索引、搜索功能以及组织有序的内容...
jquery的常用API汇总
前端小贤
10-17 2883
1.$.contains()方法 定义与用法：$.contains() 方法用于判断指定元素内是否包含另一个元素。即判断另一个DOM元素是否是指定DOM元素的后代。 语法： $.contains( container, contained ); container: Element类型 指定可能包含其他元素的祖辈容器元素 contained: Element类型 ...
input 基础用法
anjignren的博客
06-01 2070
1.单选框 <input type="radio" value="是" name="type">是 <input type="radio" value="否" name="type">否 //获取单选框的值（jquery） $(input[name="type"]).click(function(){ //获取被选中的那个input的value值 let val=$(input[name="type"]:checked).val(); //在知道这个值之后，可以写你..
jQuery 常用API
surx123456的博客
05-28 1879
1、语法用户自己给元素添加的属性，我们称为自定义属性。
jQuery——常用API
@一只躺平的猪@的博客
08-01 926
JavaScript 库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。 简单理解： 就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。 比如 jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）。 ......
jQuery常用API
TaoYuan
02-21 7401
准备 所有jQuery方法都是由$开始的，通常称作为 美元符号，或者简称为bling。 语法如下 <script> $(document).ready(function(){}); </script>jQuery 使用选择器获取HTML元素 jQuery通过选择器来选择一个元素的，然后操作元素做些改变。 添加按钮回弹效果 $("button")来选中按钮 用.addC
jquery常见操作总结
林中有神君
12-09 1440
这里写自定义目录标题1、jquery介绍2、jquery简单应用3、jQuery核心函数4、jquery对象与DOM对象5、jquery对象与DOM对象的区别6、dom对象与jquery对象的互转7、jquery选择器7.1、基本选择器7.2、层级选择器7.4、过滤选择器7.4.1、基本过滤器7.4.2、内容过滤器7.4.3、属性过滤器：7.4.4、表单过滤器7.4.5、表单对象属性过滤器7.4.6、jQuery 元素筛选8、jquery属性操作9、jquery操作css样式10、jquery动画11、jq
jQuery常用API-上
qq_52822043的博客
03-29 1196
目录 jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm 1. jQuery选择器 1）jQuery基础选择器 2）jQuery层级选择器 3）隐式迭代 4）jQuery筛选选择器 5） jQuery筛选方法 6） jQuery里面的排他思想 7）链式编程 2. jQuery样式操作 1）操作css方法 2）设置类样式方法 3）类操作与className区别 3. jQuer..
jQuery入门与常用API
battledao的博客
03-11 1642
前言 ❤️ 你所见即是我，好与坏我都不反驳 ❤️
jQuery 学习归纳1 --- jQuery 常用API
SPIRITE_SYF的博客
05-05 1534
（1）params: 想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号， 如果是复合属性则需要采 取驼峰命名法 borderLeft。其余参数都可以省略。（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。<script>
CDN介绍和jQuery常用API
qq_44681872的博客
01-10 2419
先导知识及网站推荐 CDN ​ CDN全称为Content Delivery Network，即内容分发网络。其行为模式及作用就像是快递站点，快递都集中在一起，根据地点不同，再次分发到各地的站点。网络将信息集中起来，利用CDN的分发性能，快速实现信息的传送，降低中心平台的负荷。但CDN是构建在现有网络基础上的智能虚拟网络，依靠各地的边缘服务器，通过这种新平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥堵，提高用户访问的响应速度和命中率。 ​ CDN的关键技术主要有内容存储和分发技
jQuery api 1.4.1
12-28
jQuery API 1.4.1 是一个非常重要的版本，它为开发者提供了强大的工具，使得JavaScript编程更为便捷。在这个版本中，jQuery进一步优化了其核心功能，增强了性能，并引入了一些新的特性和方法。以下是对这个API的一些...
jQuery 3.3.1 api docs 中文手册 [chm]
04-01
**jQuery 3.3.1 API Docs 中文手册** jQuery 是一个广泛使用的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互。这个“jQuery 3.3.1 API Docs 中文手册”是开发人员的重要参考资料，为理解...
jQueryAPI中文手册3.1.rar
07-15
《jQuery API 中文手册 3.1》是一个针对jQuery库的详细参考文档，旨在帮助中文用户更好地理解和使用这个广泛应用于Web开发的JavaScript框架。jQuery以其高效、易用和丰富的功能特性，深受开发者喜爱。这份手册提供了...
山东石油化工学院在辽宁2020-2024各专业最低录取分数及位次表.pdf
10-04
那些年，与你同分同位次的同学都去了哪里？全国各大学在辽宁2020-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
2024嵌入式大厂面经50套大厂高频面试题资料
最新发布
10-04
2024嵌入式大厂面经50套大厂高频面试题资料
eclipaint-eclipse插件
10-04
eclipaint-eclipse插件
基于XUI、XUtil、XAOP等框架的TemplateAppProject设计源码
10-04
该TemplateAppProject是一个基于XUI、XUtil、XAOP等框架构建的Android模版空壳工程，包含172个文件，涵盖68个Java源文件、64个XML配置文件、17个PNG图片文件、6个Gradle脚本文件、2个YAML配置文件、2个Git忽略文件、2个文本文件和1个Markdown文件。该工程集成了XPage、XUpdate和XHttp2等功能，旨在快速搭建Android应用开发环境。
jQuery1.7.1 API 手册解析
"jQuery1.7.1 API手册" jQuery是一个广泛使用的JavaScript库，它极大地简化了DOM操作、事件处理、动画设计和Ajax交互。jQuery1.7.1 API手册是开发者的重要参考资料，涵盖了这个版本中的所有核心功能和方法。 0、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值