技术标签: jQuery
jQuery之dom操作(查询、创建、插入、删除、复制节点)
利用选择器找到要操作的节点之后,获得节点的值、属性值、文本以及html内容。
a,html() -- html内容
b,text() -- 文本
c,val() -- 节点的值
d,attr() -- 属性值
此外,这几个方法也可以用来修改节点的内容、值、文本、属性值,只需加上相应的参数即可。
示例代码:/jQuery01/WebRoot/dom/d1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>dom操作之查询</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
function f1(){
//==innerHTML属性
//alert($('#d1').html());
//==innerText属性(存在浏览器兼容问题)
//alert($('#d1').text());
//获得value值
//alert($(':text').val());
//获得属性值
alert($('#d1').attr('id'));
}
function f2(){
//$('#d1').html('hello java');
//$('#username').val('tom');
$('#d1').attr('style','color:red;font-size:60px;')
}
</script>
</head>
<body>
<div id="d1"><span>hello jQuery</span></div>
username:<input id="username"><br/>
<input type="button" value="dom操作之查询"
οnclick="f1();">
<input type="button" value="dom操作之修改"
οnclick="f2();">
</body>
</html>
$(html);
append() -- 向每个匹配的元素内部追加内容
prepend() -- 向每个匹配的元素内部前置内容
after() -- 向每个匹配的元素之后插入内容
before() -- 向每个匹配的元素之前插入内容
示例代码:/jQuery01/WebRoot/dom/d2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>dom操作之创建和插入</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
function f1(){
//创建一个div节点
var $obj = $('<div>岳飞是一个抗金的名族英雄</div>');
//将$obj追加到body节点内部
//$('body').append($obj);
//prepend() -- 向每个匹配的元素内部前置内容
//$('body').prepend($obj);
//也可以简化
$('body').append('<div>岳飞是一个抗金的名族英雄</div>');
}
function f2(){
//after() -- 向每个匹配的元素之后插入内容
//$('ul').after('<p>hello</p>');
//before() -- 向每个匹配的元素之前插入内容
$('ul').before('<p>hello</p>');
}
</script>
</head>
<body style="font-size:30px;">
<a href="javascrpit:;" οnclick="f1();">岳飞是谁?</a><br/>
<input type="button" οnclick="f2();" value="插入节点">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</body>
</html>
remove() -- 删除节点
remove(selector) -- 删除满足选择器的节点
empty() -- 清空节点,节点还存在
示例代码:/jQuery01/WebRoot/dom/d3.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>dom操作之删除节点</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
function f1(){
//remove() -- 删除节点
//$('ul li:eq(1)').remove();
//empty() -- 清空节点,节点还存在
//$('ul li:eq(1)').empty();
//remove(selector) -- 删除满足选择器的节点
$('ul li').remove('#l2');
}
</script>
</head>
<body style="font-size:30px;">
<ul>
<li>item1</li>
<li id="l2">item2</li>
<li>item3</li>
</ul>
<a href="javascrpit:;" οnclick="f1();">删除节点</a><br/>
</body>
</html>
clone()
clone(true) -- 使复制的节点也具有行为(将事件处理代码也一块复制)
示例代码:/jQuery01/WebRoot/dom/d5.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>dom操作之复制节点</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
//给ul中的第三个li绑定一个点击事件
$('ul li:eq(2)').click(function(){
$(this).css('font-size','60px');
});
//clone()
$('#b1').click(function(){
var $obj = $('ul li:eq(2)').clone();
$('ul').append($obj);
});
//clone(true)
//使复制的节点也具有行为(将事件处理代码也一块复制)
$('#b2').click(function(){
$('ul').append($('ul li:eq(2)').clone(true));
});
});
</script>
</head>
<body style="font-size:30px;">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<input id="b1" type="button" value="dom操作之复制"><br/>
<input id="b2" type="button" value="dom操作之完全复制">
</body>
</html>
文章浏览阅读2k次,点赞3次,收藏6次。MMDeploy理解_mmdeploy
文章浏览阅读1.3k次。原文链接:http://blog.csdn.net/smallnest/article/details/38658593/Android 是目前最流行的移动操作系统之一。 随着新版本的不断发布, Android的功能也日益强大, 涌现了很多流行的应用程序, 也催生了一大批的优秀的组件。本文试图将目前流行的组件收集起来以供参考, 如果你发现本文还没有列出的组件,欢迎在评论中贴出来,我会定_android热门组件
文章浏览阅读7.7w次,点赞6次,收藏28次。题:如何判断一个数能否被3整除?(或者被其他任意一个数整除)方法一:取余 x = input(&amp;quot;input an number:&amp;quot;) if x % 3 == 0: print &amp;quot;%d 能被3整除&amp;quot; %(x) else: print &amp;quot;%d 不能被3整除&amp;quot;_用python编写一个小程序,用来判断任意一个数是否能被3整除
文章浏览阅读925次。先装好网卡,连上网线,然后开始!设置linux让网桥运行 配置网桥我们需要让linux知道网桥,首先告诉它,我们想要一个虚拟的以太网桥接口:(这将在主机bridge上执行,不清楚的看看测试场景)root@bridge:~> brctl addbr br0其次,我们不需要STP(生成树协议)等。因为我们只有一个路由器,是绝对不可能形成一个环的。我们可以关闭这个功能。(这_网桥下设备广播
文章浏览阅读1.1k次。[stu01@localhost pointer]$ tar -xzvf cnn-stories.tgztar (child): cnn-stories.tgz: Cannot open: No such file or directorytar (child): Error is not recoverable: exiting nowtar: Child returned statu_linux tgz解压 失败
文章浏览阅读596次。二维数组、字符串数组、多维数组 //声明一个二维数组 // 数据类型 + 数组名[第一维长度][第二维长度] = {值1,值2, ...}; //一般第一维 叫行 第二维叫列 //需求_创建一个字符串数组(内容是你周围一圈人的姓名),输出最长字符串的长度。
文章浏览阅读732次。随着容器技术以及容器编排技术的成熟,越来越多的中小型企业也在将服务迁移到Kubernetes中,更智能,更便捷的管理服务,降低运维成本,而在迁移过程中,业务日志的收集以及业务服务的监控,..._kubemate日志监控
文章浏览阅读796次。【前端面试】前端面试题—2021年web前端开发面试题本文章作为2021届应届毕业生在实习面试期间所接受的前端面试的面试题。2021年最新面试题CSS盒子模型的要素 ,https://www.cnblogs.com/clearsky/p/5696286.html;CSS中常用伪元素选择符;Position属性四个值:static、fixed、absolute和relative的区别和用法 ;解释CSS样式中display中inline、block、inline-block的区别 ;var和l_2021年前端开发面试题
文章浏览阅读4.5k次,点赞6次,收藏3次。1,加法#define _CRT_SECURE_NO_WARNINGS#include <stdio.h>int add(int x, int y){int z = x + y;return z;}int main(){int num1 = 0;int num2 = 0;int sum = 0;printf(“请输入两个操作数\n”);scanf("%d %..._7)编写一个函数,参数包括两个运算数x,y以及进位,通过调用全加器计算x,y的求和结果
文章浏览阅读4.1k次。tableView往上滚动, contentOffset.y为正,此时对于tableView内部控件而言,原点在哪里?如图所示:未开始滚动时,可以把contentOffset.y == 0看成一条分割线,随着向上滚动的进行,对于tableView内部控件而言原点已经滚动到原来contentOffset.y == 0这条分割线的上方了,而此时这个位置的分割线变成contentOffset.y ==_tableview.contentoffset
文章浏览阅读1.9k次。最近在Idea上开发MyBatis,准备随便先写一点东西,结果一写就出了问题。Exception in thread "main" org.apache.ibatis.exceptions.PersistenceException: ### Error querying database. Cause: java.lang.IllegalArgumentException: Mapped S..._mybatis读取resources下的mapper文件
文章浏览阅读496次。楔子达尔文曾说过,情感在人类的进化过程中起到了非常重要的作用。但他一定没有想到,有一天,机器也能读懂人类的情感了。把情感引入计算机学科,把 “主观的情感” 变得可计算,最早可追溯到上世纪..._tensorflow 分析用户收藏