jQuery中的对象与动态增删

最新推荐文章于 2021-10-13 18:08:43 发布

Tsuyuri kanawu

最新推荐文章于 2021-10-13 18:08:43 发布

阅读量116

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/zwb1365237878/article/details/111565920

版权

笔记专栏收录该内容

41 篇文章 0 订阅

订阅专栏

jQuery对象的获取

<body>
		<button>click 01</button>
		<button>click 02</button>
		<button>click 03</button>
		
		<script src="./js/jquery-3.1.1.js"></script>
		<script>
			/*//eq等于 （0）下标
			$("button:eq(0)").click(function(){
				alert($(this).html());
			})
			//大于
			$('button:gt(0)').click(function(){
				alert("大于");
			})
			//小于
			$('button:lt(2)').click(function(){
				alert("小于");
			}) */
			
			let $btns = $('button');
			$btns.eq(0).click(function(){
				alert($(this).html());
			})
			
			$btns.eq(1).click(function(){
				alert($(this).html());
			})
			let btns = document.getElementsByTagName("button");
		</script>
	</body>

在这里插入图片描述由于java中不存在json对象，所以，前台在进行json数据传输时，需要将其转换为json字符串，而后台向前台传递数据的时候也需要转换成一个json对象

<body>
		<script>
			
			let json={"name":"xixi","age":23};
			let jsonStr=JSON.stringify(json);//把json对象转换成字符串
			
			let jsonobj=JSON.parse(jsonStr);//把字符串转换成json对象
		</script>
	</body>

jQuery中的动态增删
创建button按钮

<button>create Element</button>
		<div style="border:1px solid black;"></div>

添加

let i=1;
		$("button").eq(0).click(function(){
	    //父元素.append(子元素) 每次都添加到父元素的末尾
		$("div").append("<a href='http://www.baidu.com'>百度"+(i++)+"</a>");
		//子元素.appendTo(父元素)
		$("<a href='http://www.baidu.com'>百度"+(i++)+"</a>").appendTo($('div'));
				
	    //父元素.prepend(子元素) 每次都添加到父元素的开头
		$('div').prepend("<a href='http://www.baidu.com'>百度"+(i++)+"</a>");*/
				})

在这里插入图片描述

json对象的添加

let jsonArr=[
				{"number":1,"name":"奶茶","price":30},
				{"number":2,"name":"牛奶","price":80}
			]

let i=1;
	$("button").eq(0).click(function(){
			
	$.each(jsonArr,function(index,json){
	$('table').append("<tr style='height:45px'
	<td>"+json.number+"</td><td>"+json.name+"</td><td>"+json.price
	+"</td><td><span style='cursor:pointer;color:white;border:none;background-color:darkcyan;padding:5px;'>删除</span></td></tr>");
				})		
			})
	//删除
    $("table").on("click","span",function(){
	$(this).parent().parent().remove();
			})

在这里插入图片描述

Tsuyuri kanawu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jQuery中的对象与动态增删

jQuery对象的获取<body> <button>click 01</button> <button>click 02</button> <button>click 03</button> <script src="./js/jquery-3.1.1.js"></script> <script> /*//eq等于（0）下标 $("button:e
复制链接

扫一扫