<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery li</title>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function appendli()
{
jQuery("#chens").append("<li><img src=/"http://img1.gtimg.com/worldcup/pics/hv1/81/146/572/37231611.jpg/" /></li>");
}
</script>
</head>
<body>
<ul id="chens">
<li>1</li>
<li>2</li>
</ul>
<input type="button" value="addli" id="chen" />
<script type="text/javascript">
jQuery("#chen").bind("click",function(){appendli();});
jQuery("#chens li").click(function(){
jQuery(this).css("color","#f00");
jQuery(this).remove();
});
</script>
</body>
</html>
分享到:
相关推荐
在给出的示例中,JQuery被用来实现在一个无序列表(ul元素)中动态添加和删除列表项(li元素)的功能。以下是利用JQuery实现这些功能的详细知识点: 1. 引入JQuery库:在文档的部分通过标签引入了JQuery的库文件。...
在本文中,我们将深入探讨如何使用jQuery来实现一个功能丰富的输入框,用户可以在其中通过回车键添加标签,同时支持预设标签的选择、显示和删除,并能有效防止标签的重复添加。这个功能常用于博客系统、论坛或者社交...
在IT领域,jQuery是一款广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。本篇文章将详细讲解基于jQuery的动态添加、删除和移动列表插件的实现方法,以及如何利用相关代码进行...
每个已选标签会以`<li>`或`<span>`的形式呈现,同时带有删除按钮供用户移除。 2. **CSS样式**: - `css`文件夹中的样式表将定义页面的外观和布局。我们需要为下拉框、已选标签区域以及删除按钮设定合适的样式,使...
然后,这个文本可以被添加到页面上的某个元素(如一个`<ul>`列表)作为新的`<li>`标签项。同时,为了防止重复标签,代码可能还会检查新输入的标签是否已经存在。 接着,为了实现删除功能,每个标签项旁边通常会有一...
在JavaScript和jQuery中,获取`<ul>`中的`<li>`标签是常见的需求,这在构建动态网页和交互式用户界面时尤其重要。以下是一些关于如何实现这一目标的方法: ### JavaScript 获取`<ul>`中`<li>`的实现 在JavaScript...
在事件处理函数中,可以改变选中状态(比如通过添加/移除特定的CSS类),并更新页面上显示的值(比如一个假想的`<span>`元素来展示当前选择)。 4. 如果需要,还可以监听`<select>`的原始元素,确保其`value`与用户...
本知识点将详细介绍如何使用jQuery实现删除列表项(li节点)的方法。 ### jQuery简介 jQuery是一个快速、小巧、功能丰富的JavaScript库,它以简化HTML文档遍历和操作、事件处理、动画和Ajax交互而闻名。通过利用...
- 通过 `$("#hot_wordsli").hover(...` 绑定鼠标悬停事件,当鼠标悬停在 `<li>` 上时,移除其他所有 `<li>` 的选中状态,并将当前 `<li>` 设置为选中状态。 - 同时,将 `<li>` 中 `.suggest-key` 的文本赋值给...
这段代码会在鼠标进入和离开`<li>`元素时分别添加和移除一个类`active`,并可以在CSS中定义`active`类的样式以实现悬停效果。 4. **固定定位(Fixed Positioning)** 当页面滚动时,可以使用jQuery检测滚动位置,...
在IT行业中,jQuery是一个非常流行的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。本示例中的“jquery点击列表菜单选择添加联系人代码”是一个利用jQuery实现的功能,用于在网页上展示...
`hidden`类可以用来隐藏内容区域,然后在jQuery中通过添加和移除这个类来控制显示和隐藏。 ```css .tab-content { display: none; } .tab-content.active { display: block; } ``` 现在,我们可以编写jQuery...
这段代码首先将可见的列表项移除并存储在一个数组中,然后通过`localeCompare()`方法进行排序,最后将排序后的列表项重新插入到`<ul>`元素的开头。 为了提高用户体验,还可以添加一些额外的优化,比如设置延迟加载...
利用jQuery的DOM操作能力,可以很方便地对DOM树进行各种操作,如新建(创建节点)、增加(添加节点)、删除(移除节点)、修改(更新节点内容)和查找(定位节点)。 ### 查找节点 在DOM树中查找节点是基于节点的...
1. **选择列表元素**:使用jQuery的选择器如`$('ul > li')`来选取所有的列表项。这将返回一个jQuery对象,可以对其中的元素进行进一步操作。 2. **排序逻辑**:定义一个函数来确定排序规则。例如,你可以根据文本...
列表可能以<ul>和<li>标签形式展示,每个li元素对应一个联系人。这些元素可能带有特定的类名或ID,方便jQuery进行操作。 在CSS方面,样式设计会使得这两个区域具有明显的视觉差异,例如通过边框、背景色或者浮动等...
在IT行业中,jQuery是一个非常流行的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。本教程将聚焦于"jquery_Tags",这显然是关于使用jQuery来实现标签(tag)功能的,特别是快速添加和...
在这个例子中,我们创建了一个`#menu-toggle`按钮,当点击时,导航菜单的`open`类将被添加或移除,从而实现展开/关闭效果。同时,我们监听窗口的resize事件,当屏幕宽度超过768px时自动关闭菜单。 **响应式设计** ...
在 jQuery 中,我们可以使用遍历和选择器来处理这些节点。例如,`$(selector).children()` 可以获取所有直接子元素,而 `$(selector).append()` 或 `$(selector).prepend()` 则可以添加新的子节点。 实现树状图的...
通常,菜单项会嵌套在`<ul>`和`<li>`元素中,通过`<ul>`表示层级关系,`<li>`表示菜单项。例如: ```html <ul id="treeMenu"> <li> 菜单1 <ul> <li>子菜单1-1</li> <li>子菜单1-2</li> </ul> </li> <li> ...