`

尚硅谷:jQuery的删除节点

阅读更多

1、jQuery的删除节点

 

2、代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>jQuery的删除节点</title>		
		<script type="text/javascript" src="jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
				//1. 为#city的每一个li添加click响应函数: 点击时, li被删除
				$("#city li").click(function(){
					$(this).remove();
				});

				//2. 删除#city节点,并会将其全部后代节点都清空
				$("#city").remove();

				//3. 清空#game节点
				//jQuery对象的empty()方法: 清空jQuery对象对应的 
				//DOM对象的所有的子节点. 
				$("#game").empty();
			})
		</script>
	</head>
	<body>
		<p>你喜欢哪个城市?</p>
		<ul id="city"><li id="bj" name="BeiJing">北京</li>
			<li>上海</li>
			<li id="dj">东京</li>
			<li id="se">首尔</li>
		</ul>
		<br><br>
		<p>你喜欢哪款单机游戏?</p>
		<ul id="game">
			<li id="rl">红警</li>
			<li>实况</li>
			<li>极品飞车</li>
			<li>魔兽</li>
		</ul>
		<br><br>
		gender: 
			<input type="radio" name="gender" value="male"/>Male
			<input type="radio" name="gender" value="female"/>Female
		<br><br>
		name: <input type="text" name="username" value="atguigu"/>
	</body>
</html>

 

3、原始界面

 

4、案例1

 

5、案例2

 

6、案例3

 

 

 

  • 大小: 188.4 KB
  • 大小: 26.9 KB
  • 大小: 26.1 KB
  • 大小: 24.4 KB
  • 大小: 24.3 KB
分享到:
评论

相关推荐

    尚硅谷jQuery视频教程(25集)

    教程名称:尚硅谷jQuery视频教程(25集)课程目录:【】1.尚硅谷_佟刚_jQuery_HelloWorld【】10.尚硅谷_佟刚_jQuery_表单元素过滤选择器【】11.尚硅谷_佟刚_jQuery_第一天小结【】12.尚硅谷_佟刚_jQuery_选择器的...

    尚硅谷_教学课件_jQuery

    "尚硅谷"的这个jQuery教学课件提供了深入学习和理解jQuery的宝贵资源。 **jQuery 的核心特性** 1. **简洁的语法**:jQuery通过其特有的链式调用和选择器机制,使得编写DOM操作的代码变得简洁易读。 2. **高效的DOM...

    尚硅谷JQuery视频教程

    尚硅谷JQuery视频教程尚硅谷JQuery视频教程尚硅谷JQuery视频教程尚硅谷JQuery视频教程

    jQuery第4天知识点:jQuery节点操作、jQuery特殊属性操作、jQuery事件机制.zip

    今天我们将主要关注jQuery中的节点操作、特殊属性操作以及事件机制。 一、jQuery节点操作 1. 选择器:jQuery提供了丰富的选择器,如ID选择器(#id)、类选择器(.class)、元素选择器(element)等,用于快速定位DOM元素...

    尚硅谷_jQuery

    jQuery 是继 Prototype 之后又一个优秀的 JavaScript 库 jQuery 理念: 写得少, 做得多. 优势如下: 轻量级 强大的选择器 出色的 DOM 操作的封装 可靠的事件处理机制 完善的 Ajax 出色的浏览器兼容性 链式操作方式 ...

    04_尚硅谷_jQuery_王振国 - 课堂笔记1

    在本节课程“04_尚硅谷_jQuery_王振国 - 课堂笔记1”中,主要讲解了jQuery中的一些核心操作,包括属性操作、练习、CSS样式操作、动画操作和事件操作。以下是对这些知识点的详细说明: 1. jQuery 的属性操作: - `...

    todo:jQuery +节点+猫鼬

    标题中的"jQuery + 节点+ 猫鼬"提到了三个重要的技术:jQuery、Node.js和Mongoose。这三者在IT行业中都扮演着关键角色,尤其在Web开发领域。 jQuery是一款广泛使用的JavaScript库,它简化了JavaScript的DOM操作、...

    jquery插入节点.

    本文将详细讲解jQuery中的节点插入方法,帮助你更好地理解和应用这一强大的功能。 首先,我们需要理解什么是DOM(Document Object Model)。DOM是HTML和XML文档的一种结构化表示,它将网页内容组织成一棵树形结构,...

    jquery 插件集合

    jquery 及其插件集合 包含 AddTxtToCaret:添加文本到光标位置 jquery.colorbox:完美的jquery弹出层支持图片播放 jquery.contextmenu.r2:jquery右键菜单 jquery.cookie:jquery Cookie操作 jquery.form:jquery...

    jquery 实例 经典呀

    jQuery 是一个广泛使用的 JavaScript 库,它极大地简化了 JavaScript 的 DOM 操作、事件处理和动画设计。这个"jQuery 实例 经典呀"的压缩包很可能是包含了一系列经典的 jQuery 使用示例,帮助开发者更好地理解和应用...

    jQuery DOM节点操作源码

    在"jQuery DOM节点操作源码"中,我们可以深入理解jQuery是如何优雅地处理DOM(Document Object Model)节点的。以下是关于jQuery DOM操作的一些关键知识点: 1. **选择器**:jQuery 的核心功能之一就是强大的选择器...

    尚硅谷_佟刚_jQuery_PPT课件及源码.zip

    在"尚硅谷_佟刚_jQuery_PPT课件及源码.zip"这个压缩包中,包含的资源主要围绕jQuery的学习展开,由专业讲师佟刚提供。我们可以期待从这些材料中学到以下关键知识点: 1. **jQuery基础**:了解jQuery的基本语法,...

    DateTimePicker:jQuery日期和时间插件

    DateTimePicker是jQuery的一个强大插件,它为网页表单提供了日期和时间选择功能。这个插件使得用户在输入日期和时间时能有一个直观且易于操作的界面,提升了用户体验。以下是对DateTimePicker插件的详细说明: 1. *...

    jQuery带节点步骤进度条插件.zip

    jQuery带节点步骤进度条插件是一款专为网页设计者打造的高效工具,它主要用于呈现具有节点的步骤进度样式。在创建交互式用户界面时,这种插件尤其有用,例如在线表单提交、购物车结账流程或者任何需要按顺序进行多...

    锋利的jquery:jquery学习资料和中文参考文档

    学习资料包括: ...1.JQuery简介 2.JQuery语法 3.JQuery选择器 4.JQuery事件 5.JQuery Callback函数 6.JQuery常用函数 另外还有jquery中文参考文档,希望能对想要学习jquery的朋友有所帮助!

    jQuery步骤节点进度条代码

    "jQuery步骤节点进度条代码"是一个基于jQuery实现的动态展示步骤流程的示例,常用于诸如注册、购物车结账或募捐等多步骤过程的用户界面。这个例子使用了jQuery 1.10.2版本,一个稳定且广泛使用的jQuery库。 首先,...

    jquery包裹节点

    在本篇文章中,我们将深入探讨jQuery中的包裹节点方法及其应用。 首先,jQuery提供了三种主要的包裹节点的方法: 1. `.wrap()`:这个方法将每个匹配的元素都包裹在一个指定的HTML结构内。例如,如果你有一个`&lt;p&gt;`...

    【推荐】高清jquery视频教程下载

    37:特殊符号 38:创建节点 39:追加节点1 40:追加节点2 41:插入节点1 42:插入节点2 43:删除节点1 44:删除节点2 45:参数删除 46:清空节点 47:克隆节点 48:替换节点1 49:替换节点2 50:包裹节点1 51:包裹节点2 52:...

    jQuery步骤节点进度条代码.zip

    jQuery的核心功能包括选择器(用于选取DOM元素)、DOM操作(添加、删除、修改元素)、事件处理、动画效果以及Ajax请求。 2. **步骤节点**:在多步骤过程中,每个独立的步骤被称为节点。这些节点通常以列表形式呈现...

    jQuery动态添加节点循环流程图表代码.zip

    本资源“jQuery动态添加节点循环流程图表代码.zip”提供了一个使用jQuery实现动态添加节点并构建循环流程图的实例。下面将详细阐述相关知识点。 1. **jQuery选择器**:jQuery的核心功能之一就是选择器,它允许...

Global site tag (gtag.js) - Google Analytics