系统学习jQuery.核心知识.局部.jQuery操作.DOM操作.创建结点

最新推荐文章于 2022-11-10 14:42:46 发布
最新推荐文章于 2022-11-10 14:42:46 发布
阅读量86 收藏
点赞数
文章标签： javascript xhtml ViewUI

　　1.创建元素节点

　　 ①创建jQuery对象
　　 $(html)
　　 原理：根据传入字符串html创建DOM对象然后封装此DOM对象为 jQuery对象并返回
　　 ②插入jQuery对象
　　 使用相应jQuery对象的append方法插入。
　　 ③注意
　　 动态创建的新元素不会被自动加入文档，需要使用其他方法将其插入。
　 创建单个元素时，要注意闭合标签和使用标准的XHTML格式。如
　　 $(“<p/>”)或$(“<p></p>”)，而不是$(“<p>”)或大写的$(“/P”)。

　　2.创建文本节点

　　 ①创建jQuery对象
　　 $(html) html中既包括元素结点也包括文本结点。
　　 ②插入jQuery对象
　　 使用相应jQuery对象的append方法插入。
　　 ③注意
　　 与创建元素节点几乎相同，$(html)中的html更多复杂了。
　　 其实，html是可以非常复杂的。

　　3.创建属性节点

　　 ①创建jQuery对象
　　 $(html) html中既包括元素结点也包括属性结点，只是多title属性
　　 ②插入jQuery对象
　　 使用相应jQuery对象的append方法插入。
　　 ③注意
　　 与创建文本节点几乎相同，$(html)中的html更多复杂了。
　　 其实，html是可以非常复杂的。

4.实例

<html>
	<head>
		<title>jQuery中的DOM操作.创建结点</title>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script>
			$(document).ready(function(){
				//var $elementNode=$("<li></li>");//创建元素结点
				//$("ul").append($elementNode);

				//var $textNode=$("<li>Strawberry</li>");
				//$("ul").append($textNode);

				//var $complexNode=$("<li><strong>中国梦</strong><a href='http://www.gov.cn' title='中国政府网站'>点击此查看</a></li>");
				//$("ul").append($complexNode);
				
				var $attrNode=$("<li title='A kind of wonderful fruit'>Strawberry</li>");
				$("ul").append($attrNode);
			});
		</script>
	</head>

	<body>
		<p title="Choose your favorite fruit.">What's your favorite fruit?</p>
		<ul>
			<li>Apple</li>
			<li>Banana</li>
			<li>Pineapple</li>
		</ul>
	</body>
</html>


iteye_11495
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JQuery创建DOM节点的方法
01-19
本文实例讲述了JQuery创建DOM节点的方法。分享给大家供大家参考。具体分析如下： 用JQuery选择器能够快捷而轻松地查找到文档中的某个特定的元素节点，然后可以用attr()方法来获取元素的各种属性的值。但真正的DOM操作并非这么简单。在DOM操作中，常常需要动态创建HTML内容，使文档在浏览器里的呈现效果发生变化，并且达到各种各样的人机交互的目的。 HTML DOM结构如下： <p class=nm_p title=欢迎访问软件开发网>欢迎访问软件开发网</p> <ul class=nm_ul> <li title='PHP\u7f16\u7a0b'>简单易懂的PHP编程</li>
jquery创建dom
weixin_30394333的博客
02-28 80
首先，区别创建dom和html append的区别， 其次，看代码是这样写的 var tbody = $(this).parent().parent().parent().next(); var a = $("<tr><td><input type='text' style='width:100px' /...
jquery的DOM节点操作(创建和插入元素节点)
qq_45308912的博客
11-24 1850
1.创建元素节点 2.插入节点 动态创建新元素节点后，需要执行插入或追加操作，否则不会在页面显示出来。 按照元素的层次关系来分，可以分为内部和外部两种方法 元素内部插入子节点 元素内部插入子节点有两种方式，推荐使用红框框的方式 元素外部插入子节点 元素内部插入子节点也有两种方式，推荐使用红框框的方式 ...
jquery之Dom操作
m0_72694993的博客
11-04 1014
().toggleClass("类名");语法格式：$().each(function(index,element){});jQuery对象.attr("属性名", "属性值");$("div").empty()清空div下的内容和元素。$("div").remove()删除所有div元素。$().css("属性名", "属性值");$().removeClass("类名");$().addClass("类名");$().css("属性名");$().html("内容");$().text("内容");
JQuery实现对html结点的操作（创建，添加，删除）.rar
09-16
在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作，包括对HTML节点的创建、添加和删除。本教程将深入探讨如何利用jQuery高效地处理这些基本任务。 一、HTML节点的创建 在jQuery中，创建...
vue基本语法讲解.pdf
最新发布
05-11
以前要想修改视图的数据，是通过 js 或者jquery 操作 dom ，改变 dom 中的内容实现。现在只修改数据，数据改变， Vue 会自动渲染 dom 更新，而不用我们再来操作 dom 。 二、 Vue 基本结构 1. 模板（template）：...
JQuery.closest(),parent(),parents()寻找父结点
10-28
在JavaScript的jQuery库中，`closest()`, `parent()`, 和 `parents()` 是三个非常重要的方法，用于在DOM树中查找元素的父级。这些方法在网页开发中常常被用来定位和操作元素，特别是在处理复杂的DOM结构时。下面将...
Jquery 表单取值赋值的一些基本操作
12-11
首先，我们要了解jQuery的选择器系统，它是基于CSS选择器的，但提供了更多的功能和便利。 限定子节点选择器如`$(“mix1[mix2]”)`，它用于选取包含特定子元素的节点。例如，`$(“div[a]”)`会选择包含`<a>`标签的`...
8--Jquery中的DOM操作(创建节点)
qwy715229258163的博客
02-19 236
创建节点使用Jquery的工厂函数$ (): $ (html);根据传入的HTML标记字符串就会创建一个DOM对象。Jquery就会把这个DOM对象包装成一个Jquery对象。 注意：动态创建的额新元素节点不会自动添加到文档中。而是需要使用其他方法将其插入到文档中。 创建单个元素时，需要注意闭合标签和使用标准的xhtml格式。例如创建一个元素，可以使用$ (“”) 或者 $ (“”),但是不能使用$ (“”) 或者 $ (“”)或者$ (“p”) . 创建文本节点就是在创建元素节点时直接将文本内容写出来.
JQuery(外部插入DOM节点)
21号先锋者
02-05 330
@{ Layout = null; } &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta name="viewport" content="width=device-width" /&gt; &lt;title&gt;ChapterTwoExternal&lt;/title&gt
Jquery（二）Dom元素的操作
weixin_51760209的博客
07-29 2697
1.表单类型过滤器1.2text单行文本框3.password密码框4radio单选框5checkbox复选框6.submit提交按钮7.image图像域2.表单状态过滤器1.enabled可用的2disabled禁用的3.checked被选中的4.selected下拉框被选择的3.内部插入4.外部插入5.Jquery操作dom元素httpshttpshttps。...
jQuery基础——操作DOM
weixin_57575133的博客
11-10 660
DOM操作可分为3个方面：DOM Core(核心）、HTML DOM和CSS DOM。jQuery作为一种JavaScript库，继承优化了JavaScript访问DOM对象的特性，使开发人员更加方便地操作DOM对象。
JQuery(内部插入DOM节点)
21号先锋者
02-05 2530
@{ Layout = null; } &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta name="viewport" content="width=device-width" /&gt; &lt;title&gt;ChapterTwoInternal&lt;/title&gt
JQuery创建DOM元素方法解析
as42536491的博客
06-25 1482
你知道如何创建DOM元素吗，这里向大家描述一下，到目前为止可以看出，jQuery的作者使得$()函数（你的记忆里它只是jQuery()函数的别名而已）足够通用以便履行许多职责，从而避免把一堆全局性的名称引入JavaScript命名空间。 创建DOM元素 到目前为止可以看出，jQuery的作者使得$()函数（你的记忆里它只是jQuery()函数的别名而已）足够通用以便履行许多职责，从而避免把一堆全局...
jQuery动态创建DOM之后，给新创建的DOM绑定事件。
CherryLee_1210的博客
07-09 2704
先上两张图，说明一下将要实现的效果 根据下拉列表的选择的不同，展示不同的内容。 刚开始我的做法是，找到dom元素，直接绑定change事件，结果什么效果没有。 上代码。。 $("#select-type").change(function () { console.log(1); if($("#select-type option:selected").tex...
六、jQuery中动态创建dom元素
云深不知处的博客
02-25 3098
1.创建dom元素 var txt=$(“1234”); 2.内部追加 （1）追加到当前父级元素内容之后 // 父级元素.append(追加元素) $(&quot;#my&quot;).append(txt); //追加元素.appendTo(父级元素) txt.appendTo($(&quot;#my&quot;)); //将原来里面的内容用一个新的标签包上 $(&quot;.my&quot;).append(function(in..
jquery创建dom html,HTML DOM对象之createElement（）方法
weixin_39654848的博客
06-11 1149
今天在学习DOM节点操作时，发现了创建DOM节点的createElement()方法的一个有意思的现象。代码如下：var box=document.getElementById("box");//假设网页中已经有个ID为box的元素；var bbb=document.getElementById("bbb");//假设网页中已经有个ID为box的元素;var aaa=document.create...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值