`

JQ 创建节点

 
阅读更多
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
	var $li_1 = $("<li title='香蕉'>香蕉</li>"); //创建一个<li>元素
	//包括元素节点,文本节点和属性节点
	//其中title='香蕉' 就是创建的属性节点
	var $li_2 = $("<li title='雪梨'>雪梨</li>"); //创建一个<li>元素
	//包括元素节点,文本节点和属性节点
	//其中title='雪梨' 就是创建的属性节点  
	
	var $parent = $("ul"); // 获取<ul>节点。<li>的父节点
	$parent.append($li_1); // 添加到<ul>节点中,使之能在网页中显示
	$parent.append($li_2); // 等价于:$parent.append($li_1).append($li_2);
});
//]]>
</script>
</head>
<body>
<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
    <li title='苹果'>苹果</li>
    <li title='橘子'>橘子</li>
    <li title='菠萝'>菠萝</li>
</ul>
</body>
</html>

 

效果图:

 

 

 

 

  • 大小: 21 KB
分享到:
评论

相关推荐

    JQ 插入节点和移动节点

    在JavaScript的世界里,jQuery(简称JQ)是一个广泛使用的库,极大地简化了DOM操作,包括插入和移动节点。本文将深入探讨JQ如何帮助我们高效地处理这些任务。 首先,让我们理解DOM(Document Object Model)的基本...

    JQ 包裹节点

    本文将深入探讨“JQ包裹节点”这一概念,以及如何在实际项目中应用它。 首先,我们要理解什么是“包裹节点”。在HTML中,我们可以用一个元素来包围另一个或多个元素,这个过程就叫做包裹。在jQuery中,"包裹节点"...

    jq带节点的步骤进度条

    **jq带节点的步骤进度条**是一种在网页中显示任务进度或步骤流程的交互元素,通常用于指导用户完成一系列操作。这种进度条通过JavaScript库jQuery(简称jq)来实现,可以提供直观的视觉反馈,帮助用户理解他们所处的...

    JQ 查找节点

    "JQ查找节点"这个主题涵盖了如何在jQuery中找到并操作HTML文档中的元素,这对于网页开发至关重要。下面将详细阐述jQuery中用于查找节点的相关知识点。 1. **选择器(Selectors)**: jQuery的选择器是基于CSS选择...

    JQ 复制节点

    "JQ 复制节点"这个话题聚焦于jQuery如何复制HTML元素,这是一个常见的需求,特别是在动态构建页面或者克隆部分页面内容时。 在jQuery中,有两个主要的方法用于复制节点:`.clone()`和`.clone(true)`。它们之间的...

    JQ 滚动高亮节点插件

    JQ(jQuery)作为一款广泛使用的JavaScript库,提供了丰富的功能和便利的操作,使得创建这样的插件变得简单易行。本篇文章将深入解析JQ滚动高亮节点插件的核心原理和实现方法。 首先,我们需要理解JQ的核心概念。...

    jq_超简单树节点.rar

    jQuery(简称jq)作为一个强大的JavaScript库,提供了丰富的API来帮助开发者实现各种功能,包括创建和操作树节点。本文将详细介绍如何使用jQuery实现一个简单的树节点功能。 首先,理解树节点的基本概念。在计算机...

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

    3. **动态创建节点**:在接收到添加节点的请求时,创建新的HTML元素,包括表示节点的文本、图标以及其他必要的属性。 4. **插入节点**:使用jQuery的方法将新节点添加到流程图的适当位置,同时更新内部数据结构以...

    JQ TreeView树视图

    在给定的“JQ TreeView树视图”主题中,我们将探讨如何使用jQuery来创建一个动态加载数据的TreeView组件。 首先,`TreeView`是一种将层次结构数据以树状结构展示的UI元素,它常用于网站和应用中以展示目录结构、...

    jq的源码分析

    深入理解jq的源码有助于提升我们对JavaScript语言的理解,优化我们的代码,并可能启发我们在自己的项目中创建类似的高效解决方案。 jq的核心设计理念是“Write less, do more”,它通过提供一套简洁的API来抽象复杂...

    介绍一款功能非常全,效果非常好的jq树

    这个例子展示了如何使用JQ树创建一个包含两个根节点的树,并开启多选和拖放功能。 总的来说,JQ树凭借其强大的功能和灵活性,成为Web开发中处理树形数据的理想选择。无论是在后台管理系统中展示目录结构,还是在...

    纯JS+JQ手写web树

    3. **递归渲染**:为了将数据结构转换为可视化的树,可以使用递归函数遍历树节点,为每个节点创建DOM元素并将其插入到页面适当的位置。 4. **事件处理**:通过`addEventListener`或jQuery的`.on()`方法,可以为树...

    MingGeJs1.9.5.2016超强正式版,山寨JQ,一模一样

    1:继续加强 创建节点 接口,新增多类型数据传入 。 2:新增 prepend appendTo prependTo before after ,完全和JQ一一模一样,,而且带事件克隆效果,这些接口分别做了大量的工作,createNode接口,继续存在,...

    jQuery与JavaScript节点创建方法的对比

    var $h1 = $("创建节点' class='head'&gt;jQuery与JavaScript创建节点比较&lt;/h1&gt;"); $("div").append($h1); ``` 代码中,`$`符号是jQuery的别名,`$()`是jQuery工厂函数,它用于选取元素或者创建新元素。在这个例子中,...

    JQ-树形菜单

    总的来说,"JQ-树形菜单"项目展示了如何结合HTML、CSS和jQuery来创建交互式的树形菜单,它对于提升网站或应用的用户体验有着重要作用。通过学习和实践这个项目,开发者可以深入理解jQuery在动态网页开发中的应用。

    JQ树形菜单代码

    树形菜单是一种将数据以树状结构展示的界面元素,通常包含节点(node)、父节点(parent node)和子节点(child node)。在网页中,这些节点可以是HTML元素,通过CSS控制样式,通过JavaScript控制行为。 三、jQuery...

    jq树状导航-很好看

    "jq树状导航-很好看"这个标题表明我们将讨论使用jQuery实现的一种美观的树状导航菜单。这种导航通常用于网站后台或者二级页面,帮助用户高效地浏览和访问层次结构丰富的内容。 树状导航是一种呈现层级数据的有效...

    时间轴切换特效 JQ JS 时间轴特效

    在这个案例中,我们将专注于创建一个横向的时间轴特效,通过纯手写的JS和JQ代码实现动态的切换效果。 首先,我们需要理解时间轴的基本结构。一个典型的时间轴通常包含一系列的时间点(或节点),每个节点都有相关的...

    JQ 实现无限分级导航菜单

    "JQ 实现无限分级导航菜单"这个主题聚焦于如何利用jQuery库来创建一个可以无限层级的导航菜单。jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画设计等任务,使得开发者能够更高效地实现复杂的...

Global site tag (gtag.js) - Google Analytics