jquery增、删实例——用户信息注册界面

我们看看该用户信息注册界面的结构与需要实现的功能

页面要求

1.页面的布局
2.用户与email邮箱的判断
3.添加功能
3.1数据的获取
3.1数据的动态加入
4.删除功能

业务逻辑

1. 页面的布局不需要过多说明 HTML + css可以实现
2. 添加功能实现之前我们需要给用户名与email做正则判断与非空判断
所以在添加按钮之后先写个一函数开关msg()来做判断
3. 当用户输入的用户名与邮箱格式正确后再执行数据的获取与添加以及删除，该部分用一个函数来完成(push())
简单的逻辑就是 ：
用户名与email判断——>数据获取——>数据添加——>数据删除
重点：
1.jquery对象的增删改查API
2.省/直辖市与城市的二级联动
此页面涉及到的api：
.parent() ：参数可选 查询直接父级，可以添加确定条件
.append() 剪切操作 将元素追加到父元素的最后
.remove() ：删除指定元素 并返回该元素 remove删除返回的元素中事件没有了，而detach事件仍然
添加父级元素
$(’’) 创建元素 使用正确的标签语法 ，写成字符串，可以创建
.val() 主要用于获取表单相关的value值
.text() 基于innerText
.html() 类似于 innerHTML 注：只能读写到双标签
附上二级联动的js代码 与 页面业务功能的js代码
二级联动js

var select_option_province;
var select_option_cities;

function addinfoSelect(){
	//为籍贯二级联动下拉框加入数据
	// 获取显示直辖市、省的下拉框
	select_option_province = document.getElementsByName('select_option_province')[0];
	// 获取显示直辖市、地级市的下拉框
	select_option_cities = document.getElementsByName('select_option_cities')[0];
	// console.log(select_option_province)
	// ，默认设置为请选择项
	select_option_province.innerHTML = "<option>选择省份</option>";
	select_option_cities.innerHTML = "<option>选择城市</option>";
	//循环遍历城市列表
	for(var i = 0;i < cityData.length;i++){
		// 将城市列表中的每个元素的text和value作为参数，生成新的option项
		 var opt = new Option(cityData[i].text,cityData[i].value);
		//将新生成的option加入到直辖市、省的下拉框中
		select_option_province.appendChild(opt);
	}
    //为直辖市，省的下拉框加入onchange事件
    select_option_province.onchange = function(){

    	//每次改变省份后，地级市级和县级的下拉框类容清空，设置为选择城市
    	select_option_cities.innerHTML = "<option>选择城市</option>";
    	//获取当前选中的option的下标，-1是为了清除加了“选择城市”带来的影响
    	var a = this.selectedIndex-1;
    	// console.log(a);
    	// 循环遍历城市列表
    	for(var j = 0; j < cityData[a].children.length; j++){
    		//将城市的列表中的第a个元素的每个children的text和value作为参数，生成新的option项
    		var opt = new Option(cityData[a].children[j].text,cityData[a].children[j].value);
    		// 将新生成的option加入到地级市的下拉框中
    		select_option_cities.appendChild(opt);

    	}

    }
}
addinfoSelect();

业务功能js

	// 定义一个布局变量
		var result = false;
		$('#addbtn').click(function(){
			msg();
		})
		// 判断函数
		function msg(){
			var val1 = $('#usename').val();
			var val2 = $('#email').val();
			//正则验证
			var reg_usename = /^[\u0391-\uFFE5]+$/; 
			var reg_email = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
			if (val1 == '') {
				result = false;
				alert("请输入姓名");
			}else if (!reg_usename.test(val1)) {
				result = false;
				alert("姓名格式不正确")
				
			}else if (val2 == '') {
				result = false;
				alert("请输入邮箱");	
			}else if (! reg_email.test(val2)) {
				result = false;
				alert("邮箱格式不正确")
			}
			else {
				result = true;
			};
			if (result) {
				push();
			};
		}
       var $id = $(".wrapper ul").length+1;
	
	// 功能函数
	function push(){
		var $name =$('#usename').val();
		var $sex = $("input[type='radio']:checked").val();
		// var $sex = $('input:').val();
		var $prov =  $("#prov option:selected").text();
		var $city =  $("#city option:selected").text();
		var $email = $('#email').val();
		// 把信息添加到相应的位置
		// 创建节点
		var ul = $("<ul id='listul'></ul>");
		var li1 = $("<li></li>").html($id);
		var li2 = $("<li></li>").html($name);
		var li3 = $("<li></li>").html($sex);
		var li4 = $("<li></li>").html($prov + $city);
		var li5 = $("<li></li>").html($email);
		var li6 = $("<li><input type='button' value='删除'' id='delbtn'/></li>")
		ul.append(li1,li2,li3,li4,li5,li6);
		var thb = $('.wapper');
		thb.append(ul);
		$id ++; 
		$(":button").click(function () {
            $(this).parent().parent().remove();
        });
	}

html与css代码代码就不展示了，自己脑补吧。
功能实现效果：