jquery作品（增删改查）实现教程

1.增加功能

（1）简单思路：点击添加按钮之后，通过改变盒子中的innerHTML来实现功能

代码如下：

let shipin_index = 2,insert_index = $(".col-md-3").length-2;
$("#tianjia").click(function(){
	let textVal = $("#uname").val();
	if(textVal != ""){
		let str = "<div class='col-md-3 l"+shipin_index+"i' style = 'overflow-x = hidden;overflow-y = auto;'><div class='thumbnail' style='width: 262px;height: 222px;'> <img src='img/img_01.webp' alt=''><span class='justify small text"+shipin_index+"' style='font-size: 20px;' >"+textVal+"</span><span class='dropdown col-md-offset-1' style='position: absolute;right: 20px;bottom: 25px;'><button class='btn btn-default dropdown-toggle' data-toggle = 'dropdown'> <span class='glyphicon glyphicon-list'></span></button><ul class='dropdown-menu' style='min-width: 110px;'><li class='shanchu' id='l"+shipin_index+"i' ><a href='#'>取消收藏</a></li></ul></span></div></div>";
		$(".row_main").append(str);
		document.cookie += str;
		localStorage.setItem('l'+(shipin_index++)+'i',textVal);
	}
	else{
		alert("信息不能为空！");
	}
	$(".shanchu").click(function(){
		$("."+this.id).remove();
		localStorage.removeItem(this.id);
	});
	
	{
		{
			let b,localNum,str = "";; 
			for(var i=0;i<$(".justify").length;i++){
				document.getElementsByClassName("justify")[i].onclick = function(){
					str = "";
					b = this;
					if(isNaN(Number(b.innerHTML)) && (b.innerHTML+"").slice(0,1) != "<"){
						b.innerHTML = "<input type = 'text' class = 'form-control' value = '"+b.innerHTML+"' onblur = '$.test(this)'/>";
					}
					if(!isNaN(Number(b.innerHTML))){
						b.innerHTML = "<input type = 'text' class = 'form-control' value = '"+b.innerHTML+"' onblur = '$.test(this)'/>";
					} 
					for(var j=0;j<this.className.length;j++){
						if(this.className.charAt(j) >= '0' && this.className.charAt(j) <= '9'){
							str += this.className.charAt(j);
						}
					}
					localNum = "l"+str+"i";
				}
			}
			$.test = function update(inp2){
				b.innerHTML = inp2.value;
				localStorage.setItem(localNum,inp2.value);
			}
		}
	}
});

2.删除功能

思路介绍：点击删除按钮之后，通过改变盒子中的innerHTML实现功能

代码如下：

$(".shanchu").click(function(){
	$("."+this.id).remove();
	localStorage.removeItem(this.id);
});

3.修改功能

思路介绍：双击文案之后，改变该元素为input框，并且value值也随之改变，点击别处之后，该元素再回归原样，同样文本内容也随之改变

代码如下：

let b,localNum,str = "";
for(var i=0;i<$(".justify").length;i++){
	document.getElementsByClassName("justify")[i].onclick = function(){
		str = "";
		b = this;
		if(isNaN(Number(b.innerHTML)) && (b.innerHTML+"").slice(0,1) != "<"){
			b.innerHTML = "<input type = 'text' class = 'form-control' value = '"+b.innerHTML+"' onblur = '$.test(this)'/>";
		}
		if(!isNaN(Number(b.innerHTML))){
			b.innerHTML = "<input type = 'text' class = 'form-control' value = '"+b.innerHTML+"' onblur = '$.test(this)'/>";
		} 
		for(var j=0;j<this.className.length;j++){
			if(this.className.charAt(j) >= '0' && this.className.charAt(j) <= '9'){
				str += this.className.charAt(j);
			}
		}
		localNum = "l"+str+"i";
	}
}
$.test = function update(inp2){
	b.innerHTML = inp2.value;
	localStorage.setItem(localNum,inp2.value);
}

查找功能

思路介绍：输入内容，点击查找按钮，会遍历盒子中所有的元素，匹配到元素的都加个外框

代码如下：

let flag = 0;
$(".sousuokuang").click(function(){
	let souText = $("#sousuo").val(),jian;
	for(let i=0;i<$(".thumbnail").length;i++){
		jian = document.getElementsByClassName("thumbnail")[i].children[1];
		if(jian.innerText == souText){
			$(jian).parent().css("border","5px solid #5cb85c");
			flag = 1;
		}
		if(flag == 1){
			$(".thumbnail").click(function(){
				for(let j=0;j<$(".thumbnail").length;j++){
					var $obj = $(document.getElementsByClassName("thumbnail")[j].children[1]);
					$obj.parent().css("border","1px solid #ddd");
				}
			});
			flag = 0;
		}
	}
});

作品外观