jQuerey学习

最新推荐文章于 2022-08-15 15:52:03 发布

Yuncoco

最新推荐文章于 2022-08-15 15:52:03 发布

阅读量202

点赞数

本文链接：https://blog.csdn.net/Yuncoco/article/details/90815532

版权

学习专栏收录该内容

13 篇文章 1 订阅

订阅专栏

一.万能的 $ ($===jQuery)

$ 是一个对象，也是一个方法
1.1 直接获取页面的元素
$ (“选择器”) 例:$ ("#id值")
1.2 dom就绪后执行相应的代码
- window.onload = function(){…} -> 页面加载完毕后执行(所有数据读取完毕)
- $ (function(){…}) -> dom加载就绪(只需要读取到标签与属性即可【速度更快，性能更好】)
1.3 把一个原生的dom对象转成jQuery对象
- jQuery对象的功能更加强大【object{…}】，是一个伪数组
- 原生 -> jQuery : $(原生对象)
- jQuery -> 原生 : jQuery对象[0]/jQuery对象.get(0)
1.4 直接创建一个元素 $("
")
1.5 直接调用相应的方法 $ .get(…)/$.parseJSON(…)
代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入一个jQuery文件 -->
<script type="text/javascript" src="jquery/jquery-1.11.2.js"></script>
<script type="text/javascript">
//因为代码是从上往下执行的，此方法是为了拿到数据
//方法一
//页面加载完毕之后再执行里面的代码
/*
window.onload = function(){
	//1.可以获取天页面中的元素
	var mydiv = $("#mydiv");
	console.debug(mydiv);
}
*/

// 方法二  当DOM载入就绪可以查询及操纵时绑定一个要执行的函数
/*
$(document).ready(function(){
	  //1.可以获取当前页的元素
	  var mydiv = $("#mydiv");
	  console.debug(mydiv);
});
*/
//方法二的简写
//2.可以执行 DOM载入就绪的功能
$(function(){
	  //1.可以获取当前页的元素
	  //  jQuery的方案获取的元素
	  //  jQuery对象就是伪数组(它不是数组，但是可以当作数组用，数组中装的就是原生对象)
	  var mydiv = $("#mydiv");
	  console.debug(mydiv);
	  //怎么把jQuery对象转成原生对象
	  console.debug(mydiv[0]);
	  console.debug(mydiv.get(0));
	  
	  /*
	  //  原生dom方案获取的元素
	  var mydivDom = document.getElementById("mydiv");
	  console.debug(mydivDom);
	  //3.把原生对象转成jQuery对象
	  console.debug($(mydivDom));
	  */
})

//4.可以直接创建dom元素  document.createElement("div");
var div = $("<div><span>sdfasdfsdf</span></div>");

//5.可以直接调用方法
//$.get(...)
console.debug($.isNumeric(10));
console.debug($.isNumeric("10z"));

</script>
</head>
<body>

<div id="mydiv" style="width:100px;height:100px;background-color: red;"></div>


</body>
</html>

二.选择器

2.1 基本选择器(id,class,标签,多选择器)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入一个jQuery文件 -->
<script type="text/javascript" src="jquery/jquery-1.11.2.js"></script>
<script type="text/javascript">

$(function(){
	
	//id选择器,必需加一个#
	console.debug($("#monkey"));
	//class(类)选择器,必需加一个.
	console.debug($(".animal"));
	//标签选择器
	console.debug($("li"));
	//* 匹配所有元素
	console.debug($("*"));
	//多选择器(可以组合所有选择器)
	console.debug($("#monkey,.snake"));
})

</script>
</head>
<body>
	<ul>
		<li class="animal">白龙马</li>
		<li class="animal" id="monkey">孙猴子</li>
		<li class="animal">猪刚烈</li>
		<li>和尚</li>
	</ul>
	<ul>
		<li class="snake">白蛇</li>
		<li class="snake">青蛇</li>
		<li>法海</li>
		<li>许先</li>
	</ul>


</body>
</html>

2.2 层级选择器(父子，后代)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入一个jQuery文件 -->
<script type="text/javascript" src="jquery/jquery-1.11.2.js"></script>
<script type="text/javascript">
	$(function(){
		//拿到 #book这个选择器里面的所有li (后代选择器)
		console.debug($("#book li"))
		//拿到 #book这个选择器里面 第一层li (儿子选择器)
		console.debug($("#book>li"));
	})
</script>
</head>
<body>
	<ul id="book">
		<li>
			四大名著
				<ul>
					<li>西游记</li>
					<li>红楼梦</li>
					<li>水许传</li>
					<li>三国志</li>
				</ul>
		</li>
		<li>悟空</li>
		<li>黛玉</li>
		<li>林冲</li>
	</ul>
	<ul>
		<li class="animal">白龙马</li>
		<li class="animal" id="monkey">孙猴子</li>
		<li class="animal">猪悟能</li>
		<li>沙和尚</li>
	</ul>
	<ul>
		<li class="snake">白蛇</li>
		<li class="snake">青蛇</li>
		<li>法海</li>
		<li>许仙</li>
	</ul>
</body>
</html>

2.3 伪类选择器(:名称)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery/jquery-1.11.2.js"></script>
<script type="text/javascript">
	$(function() {
		console.debug($("li[class]"))//属性选择器
		//:first -> 只拿第一个元素
		console.debug($("li:first"))//伪类选择器，拿第一个元素
		//:eq(index) -> 确定拿第几个 index:下标
		console.debug($("li:eq(3)"))//拿下标为3的元素
	})
</script>
</head>
<body>
	<ul id="deity">
		<li>天宫
			<ul>
				<li>电母</li>
				<li>哪吒</li>
			</ul>
		</li>
		<li>无常</li>
	</ul>
	<ul>
		<li class="deity">巨灵神</li>
		<li class="deity">雷公</li>
	</ul>
	<ul>
		<li>判官</li>
		<li>无常</li>
	</ul>
</body>
</html>

2.4 属性选择器 -> $ ( div[name])/$(div[name=xx])

三.事件注册

$(元素).click(function(){…})
$(元素).bind(“click”,function(){…}) / unbind
$(元素).on(“click”,function(){…}) / off

复制功能的实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery/jquery-1.11.2.js"></script>
<script type="text/javascript">
	$(function(){
		$("#mybtn").on("click",function(){
			alert(0)
		})
		$("#cloneBtn").on("click",function(){
			//$("#mybtn").appendTo("#mydiv");
			//clone():就是复制一个元素
			// true:代表方法也一样复制
			$("#mybtn").clone(true).appendTo("#mydiv");
		})
	})
</script>

<style type="text/css">
	div{
		height:120px;
		border: 5px red dotted;
		margin-top: 10px;
	}
</style>
</head>
<body>
<button id="cloneBtn">影分身</button>
<div>
	<button id="mybtn">鸣人</button>
</div>
<div id="mydiv"></div>

</body>
</html>

===事件委派=

$(“tbody”).on(“click”,".delBtn",function(){})
监听tbody的点击事件,当你点击的位置(元素)符合 .delBtn -> 就触发事件

四.学习的内容的列举

1.each() -> 遍历咱们的元素
jQuery对象.each(function(index,ele){
//index:遍历的下标
//ele:遍历的每一个元素
})
2.length -> 一个jQuery元素(伪数组)的长度
jQuery对象.length/jQuery.size()
3.attr/prop -> 获取与设置某个元素的属性
prop:支持多选与单选(attr支持有问题)
var 属性值 = jQuery元素.attr/prop(“属性名”);
jQuery元素.attr/prop(“属性名”,“属性值”);
4.HTML代码/文本/值
var html = jQuery对象.html() -> 获取一个对象中的所有html的内容
jQuery对象.html(“
xxx
”) -> 设置一个对象中的所有html的内容
//val只用于设置表单元素(input,textarea,select)的值
var html = jQuery对象.val()
jQuery对象.val(“
xxx
”)
5.css -> 获取与设置元素的某个样式
jQuery元素.css(“样式名”,“样式值”);
jQuery元素.css(“background-color”,“red”);
6.文本操作
jQuery元素.append(“元素”); -> 把括号中的元素放到jQuery元素中
jQuery元素.appendTo(“元素”); -> 把jQuery元素追加到元素中
jQuery元素.empty():清空所有子元素
jQuery元素.remove():删除自己
jQuery元素.clone([true/false]):当前元素复制一下 (加true可以连事件一起复制)
7.查询
jQuery元素.closest(“条件”) -> 从当前元素向上查询,找到第一个满足条件的元素为止
jQuery元素.parent() -> 找到当前元素的父元素
8.ready(fn) :页面载入 [dom就绪后执行相应的代码]
$(function(){…})

jQuery二级联动（掌握）

在这里插入图片描述
city.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery/jquery-1.11.2.js"></script>
<script type="text/javascript">
	$(function(){
		//获取所有的省数据  result:是后台传回来的数组(里面装的是每一个省)
		$.get("/listProvince",function(result){
			for(var i=0;i<result.length;i++){
				//json就是某一个省的数据
				var json = result[i];
				$("#provinceSelect").append("<option value='"+json.id+"'>"+json.name+"</option>")
			}
		})
		
		//监听省的change【值的改变】事件
		$("#provinceSelect").on("change",function(){
			//拿到对应的省的id
			// $(this).val():就是当前下拉对应的值
			var provinceId = $(this).val();
			//新的选择请把旧的数据清空(进行初始化)
			//$("#citySelect").empty();
			$("#citySelect").html("<option value=''>--请选择--</option>");
			if(provinceId==-1){
				return;
			}
			//根据省的id到后台拿到对应的市
			$.get("/listCity",{id:provinceId},function(result){
				for(var i=0;i<result.length;i++){
					//json就是某一个省的数据
					var json = result[i];
					$("#citySelect").append("<option value='"+json.id+"'>"+json.name+"</option>")
				}
			})
		})
	})
</script>

</head>
<body>
	<!-- 这个选择框中装的是所有的省，应该从后台读取 -->
	<select id="provinceSelect">
		<option value="-1">--请选择--</option>
	</select>
	
	<!-- 这个选择框中装的是所有的市，应该从后台读取 -->
	<select id="citySelect">
		<option value="">--请选择--</option>
	</select>


</body>
</html>

domain:

City.java

package cn.itsource.domain;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

/**
 * 城市对象
 * 
 * @author ZhaoYi
 */
public class City {
	private Long id;
	private String name;

	public Long getId() {
		return id;
	}

	public void setId(Long id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public City() {

	}

	public City(Long id, String name) {
		super();
		this.id = id;
		this.name = name;
	}

	/**
	 * 根据省份id查询省份中的城市!
	 * 
	 * @return
	 */
	public static List<City> getCityByProvinceId(Long id) {
		
		List<City> citys = new ArrayList<City>();
		
		if (id == 1) {
			citys = Arrays.asList(
					new City(1L,"成都"),
					new City(2L,"南充"),
					new City(3L,"绵阳"),
					new City(4L,"遂林"),
					new City(5L,"达州"),
					new City(6L,"德阳"),
					new City(7L,"乐山")
			);
		} else if (id == 2) {
			citys = Arrays.asList(
					new City(11L,"广州"),
					new City(12L,"佛山"),
					new City(13L,"东莞")
			);
		} else if (id == 3) {
			citys = Arrays.asList(
					new City(21L,"昆明"),
					new City(22L,"玉溪"),
					new City(23L,"丽江")
			);
		} else if(id==4){
			citys = Arrays.asList(
					new City(25L,"渝北区"),
					new City(26L,"沙坪坝"),
					new City(27L,"江北区")
			);
		}
		return citys;
	}
}

Province.java

package cn.itsource.domain;

import java.util.ArrayList;
import java.util.List;

public class Province {

	private Long id;
	private String name;

	public Province(Long id, String name) {
		super();
		this.id = id;
		this.name = name;
	}

	public Long getId() {
		return id;
	}

	public void setId(Long id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public Province() {
		super();
	}

	public static List<Province> getAllProvince() {
		List<Province> provinces = new ArrayList<Province>();
		provinces.add(new Province(1L, "四川"));
		provinces.add(new Province(2L, "广东"));
		provinces.add(new Province(3L, "云南"));
		provinces.add(new Province(4L, "重庆"));
		return provinces;
	}
}

controller:
CityController.java

package cn.itsource.controller;

import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import cn.itsource.domain.City;
import cn.itsource.domain.Province;

@Controller
public class CityController {

	@RequestMapping("/listProvince")
	@ResponseBody
	public List<Province> listProvince(){
		return Province.getAllProvince();
	}
	
	@RequestMapping("/listCity")
	@ResponseBody
	public List<City> listCity(Long id){
		return City.getCityByProvinceId(id);
	}
	
}

练习题

在这里插入图片描述代码：

<!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="../jquery/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
	$(function() {
		//1.注册事件的方式
		/*
		$("#btn").click(function(){
			alert("haha")
		})
		*/
		//2.绑定事件的方式
		/*
		$("#btn").bind("click",function(){
			alert("hehe");
		})
		//取消绑定事件
		$("#btn").unbind();
		*/
		/*
		//3.注册事件
		$("#btn").on("click",function(){
			alert("xixi");
		})
		$("#btn").off();
		*/
		//3.注册事件
		//点击获取选中个数
		$("#btn").on("click",function(){
			// :checked -> 被选中的元素
			console.debug($("input[name=hobbies]:checked").length)
		})
		
		//点击p标签隐藏
		// this:谁调用,this就指向谁
		$("p").on("click",function(){
			//console.debug(this);
			//this是一个普通dom对象，我要把它转成一个jQuery对象
			$(this).hide(1000);
		})
		
		//给不同的行添加颜色
		$("tr:even").css("background-color","yellow").css("font-size","30px");
		
	});
</script>

</head>
<body>
	篮球
	<input type="checkbox" name="hobbies" /> 足球
	<input type="checkbox" name="hobbies" /> 羽毛球
	<input type="checkbox" name="hobbies" />

	<input value="点击获取选中个数" type="button" id="btn"  />

	<br />点击p标签隐藏
	<br />
	<p>p1</p>
	<p>p2</p>
	<p>p3</p>

	<br />给不同的行添加颜色<br/>
	<table border="1" width="200px">
		<tr>
			<td>item1</td>
		</tr>
		<tr>
			<td>item2</td>
		</tr>
		<tr>
			<td>item3</td>
		</tr>
		<tr>
			<td>item4</td>
		</tr>
		<tr>
			<td>item5</td>
		</tr>
	</table>
</body>
</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>select</title>
<script language="javascript" src="../jquery/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
	$(function(){
	//移动选中的到右边
		$("#btn1").on("click",function(){
			//:selected -> 匹配所有选中的option元素
			//console.debug($("#select1>option:selected"));
			//左边被选中的option元素追加到右边
			$("#select1>option:selected").appendTo("#select2");
		})
		//移动全部到右边
		$("#btn2").on("click",function(){
			$("#select1>option").appendTo("#select2");
		})
		//移动选中的到左边
		$("#btn3").on("click",function(){
			$("#select2>option:selected").appendTo("#select1")
		})
		//移动所有到左边
		$("#btn4").on("click",function(){
			$("#select2 option").appendTo("#select1")
		})
	});
</script>
</head>
<body>
	<table border="1">
		<tr>
			<td>
				<select id="select1" style="width:100px" 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" id="btn1" value="-->"/><br/>
				<input type="button" id="btn2" value="==>"/><br/>
				<input type="button" id="btn3" value="<--"/><br/>
				<input type="button" id="btn4"  value="<=="/>
			</td>
			<td>
				<select id="select2" style="width:100px" size="10" multiple="multiple"></select>
			</td>
		</tr>
	</table>
</body>
</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="../jquery/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
	$(function(){
		/**
			attr/prop:设置/获取 元素的属性(多选与单选的选择是有问题的)
			  var 值 =$(元素).prop(属性名)
			  $(元素).prop(属性名,属性值)
		*/
		//全选
		$("#checkAll").on("click",function(){
			//prop:设置相应的属性
			$("input[name=hobbies]").prop("checked",true);
		})
		//全不选
		$("#checkNotAll").on("click",function(){
			//prop:设置相应的属性
			$("input[name=hobbies]").prop("checked",false);
		})
		//反选
		$("#checkUnAll").on("click",function(){
			//拿到所有元素后直接当作数组使用即可
			/*
			var hobbies = $("input[name=hobbies]");
			for(var i=0;i<hobbies.length;i++){
				var hobby = hobbies[i];
				console.debug(hobby);
			}
			*/
			//index:下标
			//ele:对应的元素
			$("input[name=hobbies]").each(function(index,ele){
				ele.checked = !ele.checked;
			})
		})
	});
	
	function checkChange(src){
		//console.debug(src.checked);
// 		var flag = src.checked;
// 		if(flag){
// 			$("input[name=hobbies]").prop("checked",true);
// 		}else{
// 			$("input[name=hobbies]").prop("checked",false);
// 		}
		$("input[name=hobbies]").prop("checked",src.checked);
	}
	
</script>

</head>
<body>
	请选择你的爱好:<br/>
	<div>
		<input type="checkbox"  name="hobbies"/>打篮球&nbsp;
		<input type="checkbox"  name="hobbies"/>踢足球&nbsp;
		<input type="checkbox"  name="hobbies"/>上网&nbsp;
	</div>
	
	<div>
	  <input type="checkbox" onchange="checkChange(this)"/>全选/全不选<br/>
		<input type="button" id="checkAll" value="全选"/>
		<input type="button" id="checkNotAll" value="全不选"/>
		<input type="button" id="checkUnAll" value="反选"/>
	</div>
</body>
</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="../jquery/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
	$(function() {
		//使单选下拉框‘2号’选中
		$("#btn1").on("click",function(){
			$("#select").val("2号");
		})
		//使多选下拉框‘2号’和‘5号’选中
		$("#btn2").on("click",function(){
			$("#selectMultiple").val(["2号","5号"]);
		})
		//使复选框‘2号’和‘4号’选中
		$("#btn3").on("click",function(){
			$("input[name=checkbox]").val(["复选2","复选4"]);
		})
		//使单选框‘单选2’选中
		$("#btn4").on("click",function(){
			$("input[name=radio]")[1].checked = true;
		})
		//打印已被选中的值（拿到所有被选中的元素）
		$("#btn5").on("click",function(){
			//:checked匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
			console.debug($(":checked"));
		})
	});
</script>
<title>练习5</title>
</head>
<body>
	<input id="btn1" type="button" value="使单选下拉框‘2号’选中"/><br/>
	<input id="btn2" type="button" value="使多选下拉框‘2号’和‘5号’选中"/><br/>
	<input id="btn3" type="button" value="使复选框‘2号’和‘4号’选中"/><br/>
	<input id="btn4" type="button" value="使单选框‘单选2’选中"/><br/>
	<input id="btn5" type="button" value="打印已被选中的值"/><br/>
	
	<form name="userForm">
		单选下拉框<select id="select" name="select">
			<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>	
		</select>
		
		多选下拉框<select id="selectMultiple" multiple="multiple" size="6" name="selectMultiple">
			<option value="1号">01号</option>
			<option value="2号">02号</option>
			<option value="3号">03号</option>
			<option value="4号">04号</option>
			<option value="5号">05号</option>
			<option value="6号">06号</option>	
		</select>
		<br/>
		复选框<input value="复选1" type="checkbox" name="checkbox"/>复选1
		<input value="复选2" type="checkbox" name="checkbox"/>复选2
		<input value="复选3" type="checkbox" name="checkbox"/>复选3
		<input value="复选4" type="checkbox" name="checkbox"/>复选4
		<input value="复选5" type="checkbox" name="checkbox"/>复选5
		<br/>
		单选框<input value="单选1" type="radio" name="radio"/>单选1
		<input value="单选2" type="radio" name="radio"/>单选2
		<input value="单选3" type="radio" name="radio"/>单选3
		<input value="单选4" type="radio" name="radio"/>单选4
	</form>
</body>
</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 language="javascript" src="../jquery/jquery-1.11.2.min.js"></script>
<script language="javascript">
	$(function(){
		//添加一条数据
		$("#btn_submit").on("click",function(){
			/**
				val()/html()
				表单元素(input,textarea,select)使用val()
				其它元素使用html()
			*/
			var username = $("#username").val();
			var email = $("#email").val();
			var tel = $("#tel").val();
			$("#userTbody").append("<tr><td>"+username+"</td><td>"+email+"</td><td>"
					+tel+"</td><td><button class='delBtn'>删除</button></td></tr>")
		})
		//删除所有数据
		$("#btn_removeAll").on("click",function(){
			//empty():把它的所有儿子全部干掉
			$("#userTbody").empty();
		})
		
		//为所有的删除按钮添加事件
		/*
		$(".delBtn").on("click",function(){
			alert(0)
		})
		*/
		/**
			事件委派:
			$("#userTbody"):监听的范围
			click：监听的事件
			.delBtn：限定的条件
		*/
		//删除一条
		$("#userTbody").on("click",".delBtn",function(){
			//找到元素的父元素
			//$(this).parent().parent().remove();
			//closest:从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素。。
			$(this).closest("tr").remove();
		})
		
	});
</script>
</head>
<body>
	<a href="http://www.itsource.cn">首页</a>
	<form name="userForm">
		<center>
		用户录入<br/>
		用户名:<input id="username" name="username" type="text"/>
		E-mail:<input  id="email" name="email" type="text"/>
		电话:<input id="tel" name="tel" type="text"/>
		
		<input type="button" value="提交" id="btn_submit"/>
		<input type="button" value="删除所有" id="btn_removeAll"/>
		
		</center>
	</form>
	<hr/>
	<table border="1" align="center"> 
		<thead>
			<tr>
				<td>用户名</td>
				<td>E-mail</td>
				<td>电话</td>
				<td>操作</td>
			</tr>
		</thead>
		<tbody id="userTbody">
		</tbody>
	</table>
	
	
</body>
</html>

Yuncoco

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuerey学习

一.万能的 $ ($===jQuery)$ 是一个对象，也是一个方法1.1 直接获取页面的元素$ (“选择器”) 例:$ ("#id值")1.2 dom就绪后执行相应的代码window.onload = function(){…} -> 页面加载完毕后执行(所有数据请取完毕)$ (function(){…}) -> dom加载就绪(只需要读取到标签与属性即可【速度更快，...
复制链接

扫一扫