5.jQuery

最新推荐文章于 2023-05-28 23:06:35 发布

huang_kuh

最新推荐文章于 2023-05-28 23:06:35 发布

阅读量131

点赞数

分类专栏： JavaWeb 第十四章 JavaScript 自我学习总结文章标签： js

本文链接：https://blog.csdn.net/huang_kuh/article/details/107640791

版权

自我学习总结同时被 2 个专栏收录

138 篇文章 0 订阅

订阅专栏

JavaWeb 第十四章 JavaScript

7 篇文章 0 订阅

订阅专栏

文章目录

一.JQuery概述

jQuery是继prototype之后又一个优秀的Javascript框架。
jQuery是轻量级的js库，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）
jQuery是免费、开源的。
jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)

jQuery能干什么

jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。
jQuery的语法设计可以使开发者更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。

二.引入

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 引入jQuery脚本库, tomcat启动之后的方式 
<script type="text/javascript" src="/js/jquery-1.11.3.js"></script>-->

<!-- 采用相对路径的方式  , jQuery得放在前面引入-->
<script type="text/javascript" src="../../js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="indext.js"></script>
<title>Insert title here</title>
</head>
<body>
<!-- 方式三 -->
您的种子<a href="javascript:alert('您确定要删除吗')">删除</a>
<button onclick="alert('点击确定->播放')">播放</button>
</body>
</html>

indext.js

alert($);

三.jQuery初体验

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 引入jQuery脚本库, tomcat启动之后的方式 
<script type="text/javascript" src="/js/jquery-1.11.3.js"></script>-->

<!-- 采用相对路径的方式  , jQuery得放在前面引入-->
<script type="text/javascript" src="../../js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="indext.js"></script>
<title>Insert title here</title>
</head>
<body>
<!-- 方式三 -->
<button id="btn1">debug1</button>
<button id="btn2">debug2</button>

	<div id="div2" style="background-color: pink;display:none;">
	这是二
	</div>

index.js

window.onload=function(){
	var btn1= document.getElementById("btn1");
	
	//隐藏div
	btn1.onclick=function(){
		//显示
		if (div1.style.display) {
			div1.style.display='';
		}else{
			div1.style.display='none';
		}
	};
}
//jQuery方式
//页面加载完毕
$(function(){
	//通过id获取页面元素
	var btn2=$("#btn2");
	var div2=$("#div2");
	//绑定点击事件
	btn2.click(function(){
		//显示跟隐藏
		div2.toggle(1000);
	});
});

分析:
1: 页面加载完毕执行 
传统: 只能执行最后一次
 window.onload = function(){};
jQuery  可以重复执行
 $(function(){})

2: jQuery 中 $ 表示一个对象   jQuery对象

3:$(参数) 问题:
     1> 如果参数是函数, 表示马上执行这个函数
     2> 如果参数是一个字符串, 表示通过Jquery选择 一些元素,  字符串称之为选择器,
           注意: 字符串有一定格式:   #xxx    .xxx  样式     :  过滤选择

四.jQuery对象

indext.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../../js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="indext.js"></script>
<title>Insert title here</title>
</head>
<body>
	<div id="div2" style="background-color: pink;">
	这是二
	</div>
	
	<div id="div1" style="background-color: green;">
	这是一
	</div>
</body>
</html>

indext.js

//传统
window.onload=function(){
	var div1= document.getElementById("div1");
	//纯原生DOM(div)对象
	//console.log(div1);
	//原生的DOM对象转换成jQuery对象
	console.log($(div1));
	
}
//jQuery方式
//页面加载完毕
$(function(){
	//通过id获取页面元素
	var div2=$("#div2");
	//包装后的jQuery对象
	//console.log(div2.length);
	//jQuery对象转换成 原生的DOM对象
	console.log(div2.get(0));
});

五.jQuery常用方法

indext.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../../js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="indext.js"></script>
<title>Insert title here</title>
</head>
<body>
	<h1 id="h1"><i>做人要低调</i></h1><br>
	<input type="text" id="username" value="你的名字...在重修名单上~"><br>
	
	<div id="div2" style="background-color: pink;">
		jQuery常用方法<br>
		jQuery.size();//获取jQuery中包含DOM的个数<br>
		jQuery.val();//操作元素的value属性<br>
		jQuery.html();//操作元素内的HTML代码<br>
		jQuery.text();//操作元素内的文本,忽略HTML标签<br>
	</div>
		
	<div id="div1" style="background-color: green;">
		<p>1jQuery获取DOM的个数</p>
		<p>2获取id为username元素的value属性值</p>
		<p>3更变值</p>
		<p>4对比h1元素和纯文本的区别</p>
		<p>5h1改变颜色</p>
	</div>
</body>
</html>

indext2.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
	/* id选择器 */
	#div1{
		background-color:yellow;
	}
	/* class选择器 */
	.myClass{
		font-size:100px;
	}
	/* 标签选择器 */
	div{
		background-color:blue;
	}
</style>
<title>Insert title here</title>
</head>
<body>
<div id="div1">div1</div>
<div class="myClass">div2</div>
<div>div3</div>

</body>
</html>

indext.js

//jQuery方式
//页面加载完毕
$(function(){
	//jQuery获取DOM的个数
	console.log($("#h1"));
	//通过属性
	console.log($("#h1").length);
	//通过长度
	console.log($("#h1").size());
	
	//获取id为username元素的value属性值
	console.log($("#username").val());
	
	//更变值
	$("#username").val("Dusk");
	
	//对比h1元素和纯文本的区别
	
	console.log($("#h1").html());//innerHTML
	console.log($("#h1").text());//innerText
	
	//h1改变颜色
	$("#h1").css("color","blue");
});

六.jQuery常用选择器

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery常用选择器</title>
<script type="text/javascript" src="../../js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="index.js"></script>
<style type="text/css"> .selected{background-color: gray;}</style>
</head>
<body>
	<div id="msg">使用ID选择器获取当前DIV元素</div>
	<ul>
		<li>item1</li>
		<li>item2</li>
		<li>item3</li>
		<li>item4</li>
	</ul>
	<ul id="myul">
		<li>item1</li>
		<li class="selected">item2</li>
		<li>item3</li>
		<li class="selected">item4</li>
	</ul>
	<hr/>
	<div>
		<p>
			问题1:获取id为msg的元素的内容
			
		</p>
		<p>
			问题2:获取所有的li元素并打印数量
			
		</p>
		<p>
			问题3:获取所有class为selected的元素,字体颜色改为red
			
		</p>
		<p>
			问题4:获取id为myul元素中有多少li,学会使用selector和get方法
			
		</p>
	</div>
</body>
</html>

index.js

$(function(){
	//问题1:获取id为msg的元素内容
	console.log($("#msg").html());
	
	//获取所有的li元素并打印数量
	console.log($("li"));
	console.log($("li").size());
	
	//获取所有class为selected的元素,修改字体颜色为red
	console.log($(".selected"));
	$(".selected").css("color","red");
	
	//获取id为myul 里面的li子元素
	console.log($("#myul li"));
	console.log($("#myul li").selector);
	//获取满足选择器的所有元素,
	console.log($("#myul li").get());
	//获取满足选择器的所有元素,制定下标
	console.log($("#myul li").get(0));
});

七.jQuery层次选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery层次获取器</title>
<script type="text/javascript" src="../../js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="indext.js"></script>
<style type="text/css"> .selected{background-color: gray;}</style>
</head>
<body>
	<ul id="myul">
		<li>item1</li>
		<li>item2</li>
		<li>item3</li>
		<li>
			<ul>
				<li>item1</li>
				<li>item2</li>
				<li>item3</li>
				<li>item4</li>
			</ul>
		</li>
	</ul>
	
	<label>LABEL1</label><input type="text" value="text1"/><input type="text" value="text2"/><br/>
	<label>LABEL2</label><input type="text" value="text3"/><input type="text" value="text4"/><br/>
	<label>LABEL3<input type="text" value="text5"/><input type="text" value="text6"/></label>
	
	<hr/>
	<div>
		<p>
			问题1:获取所有ul下的所有li元素,并分析结果
			
		</p>
		<p>
			问题2:获取id为myul下的所有子li元素,并分析结果
			
		</p>
		<p>
			问题3:获取所有label元素后的input元素,并分析结果
			
		</p>
		<p>
			问题4:获取紧跟着label元素后的input元素,并分析结果
			
		</p>
	</div>
</body>
</html>

indext.js

$(function(){
	
	//获取所有ul下的所有li元素
	console.log($("ul li"));//jQuery自动过滤重复
	console.log($("ul li").size());
	
	//获取id为myul下所有的子li元素
	console.log($("#myul > li"));
	
	//获取id为labely元素后同级input元素,并分析结果
	console.log($("label ~ input"));
	
	//获取紧跟着label元素后的input元素
	console.log($("label + input"));
	
});

八.过滤选择器

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery层次获取器</title>
<script type="text/javascript" src="../../js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="indext.js"></script>
<style type="text/css"> .selected{background-color: gray;}</style>
</head>
<body>
	<div id="check">使用ID选择器获取当前DIV元素</div>
	<ul>
		<li>item1</li>
		<li>item2</li>
		<li>item3</li>
		<li>item4</li>
		<li>item5</li>
	</ul>
	<ul>
		<li>item1</li>
		<li>item2</li>
		<li>item3</li>
		<li>item4</li>
	</ul>
	
	<table border="1">
		<thead>
			<tr>
				<td></td>
				<td>编号</td>
				<td>姓名</td>
				<td>邮件</td>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><input type="checkbox" id="acheck1"/></td>
				<td>1</td>
				<td>张无忌</td>
				<td>wujizhang@163.com</td>
			</tr>
			<tr>
				<td><input type="checkbox" id="bcheck2"/></td>
				<td>2</td>
				<td>郭靖</td>
				<td>jinguo@163.com</td>
			</tr>
			<tr>
				<td><input type="checkbox" id="check3"/></td>
				<td>3</td>
				<td>黄蓉</td>
				<td>ronghuang@163.com</td>
			</tr>
			<tr>
				<td><input type="checkbox" id="check4"/></td>
				<td>4</td>
				<td>赵敏</td>
				<td>minzhao@163.com</td>
			</tr>
		</tbody>
	</table>
	
	<hr/>
	<div>
		<p>
			问题1:获取ul的第一个li元素(:frist)
			
		</p>
		<p>
			问题2:获取每一个ul的第一个li元素(:frist-child)
			
		</p>
		<p>
			问题3:获取ul的最后一个li元素(:last)
			
		</p>
		<p>
			问题4:获取每一个ul的最后一个li元素(:last-child)
			
		</p>
		<p>
			问题5:表格隔行变色
			
		</p>
		<p>
			问题6:获取所有的奇/偶数的li元素(:odd/:even)
			
		</p>
		<p>
			问题7:获取每个ul的奇/偶数的li元素(:nth-child(?))
			
		</p>
		<p>
			问题8:获取input元素中id以check开头的元素([attr^=value])
			
		</p>
	</div>
</body>
</html>

indext.js

//页面加载完毕
$(function(){
	//找到ul的第一个li :first
	console.log($("ul li:first"));
	//获取每一个ul的第一个li元素 :first-child
	console.log($("ul li:first-child"));
	//
	console.log($("ul li:last"));
	console.log($("ul li:last-child"));
	
	//隔行变色
	$("tbody tr:even").css("background-color","pink");
	$("tbody tr:odd").css("background-color","green");
	//
	console.log($("tbody tr:even"));
	console.log($("tbody tr:odd"));
	
	//获取所有奇数偶数li元素
	console.log($("li :odd"));
	console.log($("li :even"));
	
	//获取每个ul的奇数偶数的li元素(:)
	//从1开始
	console.log($("ul li:nth-child(odd)"));//奇数
	console.log($("ul li:nth-child(even)"));//偶数
	//获取input元素中id以check开头的元素
	console.log($("input[id^='check']"));//偶数
	
	
});

九.jQuery事件绑定

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery层次获取器</title>
<script type="text/javascript" src="../../js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="indext.js"></script>
<style type="text/css"> .selected{background-color: gray;}</style>
</head>
<body>
<button id="btn1">1(传统)</button>
<button id="btn2">2(jQuery)</button>
<table border="1">
		<thead>
			<tr>
				<td></td>
				<td>编号</td>
				<td>姓名</td>
				<td>邮件</td>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><input type="checkbox" id="acheck1"/></td>
				<td>1</td>
				<td>张无忌</td>
				<td>wujizhang@163.com</td>
			</tr>
			<tr>
				<td><input type="checkbox" id="bcheck2"/></td>
				<td>2</td>
				<td>郭靖</td>
				<td>jinguo@163.com</td>
			</tr>
			<tr>
				<td><input type="checkbox" id="check3"/></td>
				<td>3</td>
				<td>黄蓉</td>
				<td>ronghuang@163.com</td>
			</tr>
			<tr>
				<td><input type="checkbox" id="check4"/></td>
				<td>4</td>
				<td>赵敏</td>
				<td>minzhao@163.com</td>
			</tr>
		</tbody>
	</table>
</body>
</html>

indext.js

	//方式2
	var btn1=document.getElementById("btn1");
	btn1.οnclick=function(){
		alert("方式一传统");
	}
	
	//方式3
	btn1.addEventListener("click",function(){
		alert("方式三又被点了");
		
	});
}


//页面加载完毕
$(document).ready(function(){
	//alert("jQuery");
});

//上面的简化版(推荐)
$(function(){
	//alert("二次弹窗");
})
//jQuery可以加载多次执行页面完毕执行函数

$(function(){
	//jQuery方式绑定事件
	$("#btn2").bind("click",function(){
		alert("jQuery2被点");
	});
	//可以重复绑定
	$("#btn2").bind("click",function(){
		alert("jQuery3被点");
	});
	//将bind封装成方法
	$("#btn2").click(function(){
		alert("jQuery4简化");
	});
	
	//在表格中,鼠标移上去显示blue颜色,移除后显示白色
	//1:找到表格,tr鼠标移上事件
	$("tbody tr").mouseover(function(){
		//在jQuery相应函数中this是一个纯原生的Dome对象
		//this.style.backgroundColor="blue";
		$(this).css("background-color","blue");
	})
	//移出去
	$("tbody tr").mouseout(function(){
		//在jQuery相应函数中this是一个纯原生的Dome对象
		//this.style.backgroundColor="blue";
		$(this).css("background-color","");
	})
	
	//链式编程
	$("tbody tr").mouseover(function(){
		//在jQuery相应函数中this是一个纯原生的Dome对象
		//this.style.backgroundColor="blue";
		$(this).css("background-color","blue");
	}).mouseout(function(){
		//在jQuery相应函数中this是一个纯原生的Dome对象
		//this.style.backgroundColor="blue";
		$(this).css("background-color","");
	})
	
	//针对鼠标的切换事件 hover
	$("tbody tr").hover(function(){
		//在jQuery相应函数中this是一个纯原生的Dome对象
		//this.style.backgroundColor="blue";
		$(this).css("background-color","blue");
	},function(){
		//在jQuery相应函数中this是一个纯原生的Dome对象
		//this.style.backgroundColor="blue";
		$(this).css("background-color","");
	});
	
})

十.jQueryDOM操作

jquery_dom.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 引入jQuery -->
<script type="text/javascript" src="../../js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="indext.js"></script>
<style type="text/css">
	.other {
		background-color: orange;
		font-size: 20px;
	}
	.myBtn{
		background-color: red;
	}
</style>
</head>
<body>
	<span style="background-color : blue;color: red;" id="span">SPAN</span>
	<div id="div1" style="background-color: gray;" title="title-div1">DIV1</div>
	<div id="div2" style="background-color: green;" title="title-div2">DIV2</div>
	
	<ul id="ul">
		<li>item1</li>
		<li>item2</li>
		<li>item3</li>
		<li>item4</li>
		<li>item5</li>
	</ul>
		
	<input id="btn" type="button" value="删除我"/> 

	<form>
  		<fieldset>
    		<legend>内部插入节点(插入子节点)</legend>
	  		<input type="button" value="append" id="append"/>
	  		<input type="button" value="appendTo" id="appendTo"/>
	  		<input type="button" value="prepend" id="prepend"/>
	  		<input type="button" value="prependTo" id="prependTo"/>
  		</fieldset>
	</form>

	<form>
  		<fieldset>
    		<legend>外部插入节点(插入兄弟节点)</legend>
	  		<input type="button" value="after" id="after"/>
	  		<input type="button" value="before" id="before"/>
	  		<input type="button" value="insertAfter" id="insertAfter"/>
	  		<input type="button" value="insertBefore" id="insertBefore"/>
  		</fieldset>
	</form>

	<form>
  		<fieldset>
    		<legend>删除节点</legend>
			<input type="button" value="删除所有子节点" id="empty"/>
	  		<input type="button" value="删除节点" id="remove"/>		
  		</fieldset>
	</form>

	<form>
  		<fieldset>
    		<legend>克隆/替换节点</legend>
	  		<input type="button" value="克隆节点" id="clone"/>
	  		<input type="button" value="替换所有节点" id="replaceWith"/>
	  		<input type="button" value="替换所有节点" id="replaceAll"/>
  		</fieldset>
	</form>

	<form>
  		<fieldset>
    		<legend>属性操作</legend>
	  		<input type="button" value="获取属性值" id="getAttr"/>
	  		<input type="button" value="设置属性值" id="setAttr"/>
  		</fieldset>
	</form>

	<form>
  		<fieldset>
    		<legend>CSS操作</legend>
	  		<input type="button" value="添加CSS" id="addClass"/>
	  		<input type="button" value="删除CSS" id="removeClass"/>
	  		<input type="button" value="轮换CSS" id="toggleClass"/>
	  		<input type="button" value="判断CSS" id="hasClass"/>
  		</fieldset>
	</form>

</body>
</html>

indext.js

//内部操作
$(function(){
	//在div1添加一个span标签
	//参数一个字符串或者html格式字符串
	//$("#div1").append("<span>23323</span>");
	//添加一个原生的DOM对象
	//$("#div1").append(document.getElementById("span"));
	$("#append").click(function(){
		//插入 父<---子
		//$("#div1").append($("#span"));
		$("div").append($("#span"));
	});
	
	$("#appendTo").click(function(){
		//插入 子--->父
		$("#span").appendTo($("#div1"));
	});
	
	$("#prepend").click(function(){
		//往div2的前面添加一个span标签
		$("#div2").prepend($("#span"));
	});
	
	$("#prependTo").click(function(){
		//将span标签添加到div2前面
		$("#span").prependTo($("#div2"));
	});
});	
	

//外部插入
$(function() {
	$("#after").click(function() {
		//在匹配的元素之后插入内容
		//在div1后面插入span标签
		$("#div1").after($("#span"));
	});
	$("#before").click(function() {
		//在匹配的元素之前插入内容
		//在div2前面插入span标签
		$("#div2").before($("#span"));
	});
	$("#insertAfter").click(function() {
		//把内容插入到匹配的元素之后
		//将span标签插入div1后面
		$("#span").insertAfter($("#div1"));
	});
	$("#insertBefore").click(function() {
		//把内容插入到匹配的元素之前
		//将span标签插入div2前面
		$("#span").insertBefore($("#div2"));
	});
});

//删除节点
$(function() {
	$("#empty").click(function() {
		//删除所有子节点
		//只删除子节点,自己不删除
		$("#ul").empty();
	});
	$("#remove").click(function() {
		//删除选中的节点
		//remove,所有删除,仅仅是页面的删除,内存中还存在
		//如果在添加到页面中,该元素绑定事件会丢失
		$("#ul").remove();
		//var ret=$("#btn").remove();
		//ret.appendTo($("#div1"));
		
		//这个跟remove功能一样,但会保留绑定事件
		var ret=$("#btn").detach();
		ret.appendTo($("#div1"));
	});
});	

//克隆/替换节点
$(function() {
	$("#btn").click(function() {
		alert("克隆按钮");
	});
	
	$("#clone").click(function() {
		//克隆节点
		//克隆"删除我"这个按钮追加到div1中
		//克隆方法没有参数,表示不克隆事件,该元素绑定事件
		//$("#btn").clone().appendTo($("#div1"));
		//为true时,会克隆元素绑定的事件
		$("#btn").clone(true).appendTo($("#div1"));
		
	});
	$("#replaceWith").click(function() {
		//$(源).replaceWith(目标)
		
		//将所有button替换成span
		$(":button").replaceWith($("#span"));
		
	
	});
	$("#replaceAll").click(function() {
		//$(目标).replaceAll(源)
		
		$("#span").replaceAll($(":button"));
	});
});	


//属性操作
$(function() {
	$("#getAttr").click(function() {
		//jQuery中查询只查询第一个对象的值

		//获取div1的title属性
		console.log($("#div1").attr("title"));
		
	});
	$("#setAttr").click(function() {
		//jQuery中设置值则是操作所有匹配的元素
		//$("#div").attr("title","div1--->div1");
		//$("div").attr("title","div--->div");
		
		//自定义设置title属性
		//function 用来自定义设置迭代每一个div的title属性
		//index:div索引
		//item:属性值
		$("div").attr("title",function(index,item){
			console.log(index,item);
			//返回值为title属性值
			return index+"______------"+item;
		});
	});
});	

//CSS操作
$(function() {
	$("#addClass").click(function() {
		//给元素添加样式
		
		//给所有的button元素,添加other样式
		$(":button").addClass("other");
		
	});
	$("#removeClass").click(function() {
		//删除元素样式
		$(":button").removeClass("other");
		
	});
	$("#toggleClass").click(function() {
		//切换元素样式
		//如果元素有这个样式,删除,没有添加
		$(":button").toggleClass("myBtn");
	});
	$("#hasClass").click(function() {
		//判断是否有某样式
		console.log($(":button").hasClass("myBtn"));
	});
});

###　十一．综合练习

全选

checkbox.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>checkbox</title>
<script type="text/javascript" src="../../js/jquery-1.11.3.js"></script>
<script type="text/javascript"  src="checkbox.js" ></script>
</head>
<body>
	请选择你的爱好:<br/>
	<div age="18" id="div1" style="background-color: pink"
		data-url="www.baidu.com"
	>div1</div>
	<input type="checkbox" onchange="checkChange(this)" id="checkAll"/>全选/全不选<br/>
	<div>
		<input type="checkbox" name="hobby"/>JAVA&nbsp;
		<input type="checkbox" name="hobby"/>打篮球&nbsp;
		<input type="checkbox" name="hobby"/>上网&nbsp;
		<input type="checkbox" name="hobby"/>撩妹&nbsp;
	</div>
	
	<div>
		<input type="button" id="btn_checkAll" onclick="checkAll(true)" value="全选"/>
		<input type="button" onclick="checkAll(false)" value="全不选"/>
		<input type="button" onclick="checkUnAll()" value="反选"/>
	</div>
</body>
</html>

checkbox.js

$(function(){
	//获取自定义属性(获取属性推荐)
	console.log($("#div1").attr("age"));
	//获取原生属性(获取属性推荐)
	console.log($("#div1").prop("age"));
	//html5方式(自定义属性推荐)
	//自动义属性格式 data-属性名(属性名必须全部小写)
	console.log($("#div1").data("url"));
	
})

//全选
function checkAll(checked){
	//1.有找name="hobby"所有input
	var hobby=$("input[name='hobby']");
	//hobby.attr("checked",checked);
	hobby.prop("checked",checked);
}
//反选
function checkUnAll(){
	var hobby=$("input[name='hobby']")
	/*for(var i=0;i<hobby.length;i++){
		hobby[i].checked=!hobby[i].checked;
	}*/
	
	//迭代匹配checkbox元素,function用来操作每一个checkbox元素的checked属性
	//index:checkbox元素索引
	//item:checkbox元素 制定的checked属性值
	//返回值:修改之后的checked属性值
	hobby.prop("checked",function(index,item){
		return !item;
	})
}

//全选/全不选
function checkChange(srcEl){
	checkAll(srcEl.checked);
}

添加

item.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>明细</title>
<script type="text/javascript" src="../../js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="item.js"></script>
</head>
<body>
	<table border="1" width="50%" align="center">
		<caption>
			<input id="addMore" type="button" value="添加更多"/>
		</caption>
		<thead>
			<tr>
				<th>商品名称</th>
				<th>单价</th>
				<th>数量</th>
				<th>小计</th>
			</tr>
		</thead>
		<tbody id="data">
			<tr>
				<td>
					<select>
						<option>电脑</option>
						<option>手机</option>
						<option>平板</option>
					</select>
				</td>
				<td><input type="text" value="0"/></td>
				<td><input type="text" value="0"/></td>
				<td><span>0</span></td>
			</tr>
		</tbody>
	</table>
</body>
</html>

intem.js

$(function(){
	//添加更多
	$("#addMore").click(function(){
		var trClone=$("#data tr:first").clone(true);
		//添加之后才可以查找这个值
		trClone.appendTo($("#data"));
		//根据type:text找到克隆节点的value并设置
		trClone.find($(":text")).val(0);
	})
	
})

列表

select.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../../js/jquery-1.11.3.js"></script>
<title>选择列表</title>
<script type="text/javascript"  src="select.js" ></script>
</head>
<body>
	<table border="1">
		<tr>
			<td>
				<select id="select1" style="width:100px;height:200px" size="10" multiple="multiple">
					<option value="选项1">选项1</option>
					<option value="选项2">选项2</option>
					<option value="选项3">选项3</option>
					<option value="选项4">选项4</option>
					<option value="选项5">选项5</option>
					<option value="选项6">选项6</option>
					<option value="选项7">选项7</option>
					<option value="选项8">选项8</option>
					<option value="选项9">选项9</option>
				</select>
			</td>
			<td align="center">
				<input type="button" onclick="moveSelected('select1','select2')" value="-->"/><br/>
				<input type="button" onclick="moveAll('select1','select2')" value="==>"/><br/>
				<input type="button" onclick="moveSelected('select2','select1')" value="<--"/><br/>
				<input type="button" onclick="moveAll('select2','select1')" value="<=="/>
			</td>
			<td>
				<select id="select2" style="width:100px;height:200px" size="10" multiple="multiple"></select>
			</td>
		</tr>
	</table>
</body>
</html>

select.js

//全部移动
function moveAll(srcId,targetId){
	$("#"+srcId+" option").appendTo($("#"+targetId));
}
function moveSelected(srcId,targetId){
	$("#"+srcId+" option:selected").appendTo($("#"+targetId));
}

用户新增
user.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户新增</title>
<script type="text/javascript" src="../../js/jquery-1.11.3.js"></script>
<script type="text/javascript"  src="user.js" ></script>
</head>
<body>
	<form name="userForm">
		<center>
			用户录入<br/>
			用户名:<input id="username" name="username" type="text" size=15/>
			E-mail:<input  id="email" name="email" type="text"  size=15/>
			电话:<input id="tel" name="tel" type="text" size=15/>
			<input type="button" value="添加" id="btn_submit"/>
			<input type="button" value="删除所有" id="btn_removeAll"/>
		</center>
	</form>
	<hr/>
	<table border="1" align="center" cellpadding=0 cellspacing=0 width=400> 
		<thead>
			<tr>
				<th>用户名</th>
				<th>E-mail</th>
				<th>电话</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody id="userTbody">
			<tr id="0001">
				<td>张无忌</td>
				<td>wujizhang@163.com</td>
				<td>18212345678</td>
				<td><a href="javascript:delRow('0001')">删除</a></td>
			</tr>
		</tbody>
	</table>
	
	
</body>
</html>

user.js

$(function(){
	//添加操作
	$("#btn_submit").click(function(){
		var nameV=$("#username").val();
		var emailV=$("#email").val();
		var telV=$("#tel").val();
		
		var idV=new Date().getTime();
		//方式1
		//var trEl="<tr id='"+idV+"'><td>"+nameV+"</td><td>"+emailV+"</td><td>"+telV+"</td><td><a href=\"javascript:delRow("+idV+")\">删除</a></td></tr>";
		var trEl="<tr id="+idV+"><td>"+nameV+"</td><td>"+emailV+"</td><td>"+telV+"</td>" +
				"<td><a href='javascript:;' onclick='delRow2(this)'>删除</a></td></tr>";
		$("#userTbody").append(trEl);
		
	})
	
	//删除所有
	$("#btn_removeAll").click(function(){
		$("#userTbody").empty();
	})
	
	
	
})
//方式2
function delRow2(srcEl){
	console.log($(srcEl).closest("tr"));
	//从当前元素向上走,找第一个能匹配的祖宗
	$(srcEl).closest("tr").remove();
}
//删除方式1
function delRow(trId){
	$("#"+trId).remove();
}

huang_kuh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
5.jQuery

文章目录一.JQuery概述二.引入三.jQuery初体验四.jQuery对象五.jQuery常用方法六.jQuery常用选择器七.jQuery层次选择器八.过滤选择器九.jQuery事件绑定十.jQueryDOM操作一.JQuery概述jQuery是继prototype之后又一个优秀的Javascript框架。jQuery是轻量级的js库，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）jQuery是免费、开源的。jQue
复制链接

扫一扫