3.jquery常用基本操作
2017-12-02 10:37
155 查看
HTML DOM常见操作
-创建节点-查找节点
-插入节点
-移动节点
-删除节点
-复制节点
-替换节点
-包裹节点
多了克隆、移动、包裹
一.创建节点
var $div5 = $("<div id='div5'>我是div5</div>");二.插入节点
1.插入同级元素(兄弟元素)
after() 在每个匹配的元素之后插入内容 HTML代码:<p>我想说:</p>
jQuery代码:
$("p").after("<b>你好</b>");
结果:
<p>我想说:</p><b>你好</b>
insertAfter 与after()相反 HTML代码:
<p>我想说:</p>
jQuery代码:
$("<b>你好</b>").insertAfter("p");
结果:
<p>我想说:</p><b>你好</b>
before() 在每个匹配的元素之前插入内容 HTML代码:
<p>我想说:</p>
jQuery代码:
$("p").before("<b>你好</b>");
结果:
<b>你好</b><p>我想说:</p>
insertBefore() 与before()相反 HTML代码:
<p>我想说:</p>
jQuery代码:
$("<b>你好</b>").insertBefore(“p");
结果:
<b>你好</b><p>我想说:</p
2.插入子级元素
append() 向每个匹配的元素内部追加内容 HTML代码:<p>我想说:</p>
jQuery代码:
$("p").append("<b>你好</b>");
结果:
<p>我想说:<b>你好</b></p>
appendTo() 与append相反 HTML代码:
<p>我想说:</p>
jQuery代码:
$("<b>你好 </b>").appendTo("p");
结果:
<p>我想说:<b>你好</b></p>
prepend() 向每个匹配的元素内部前置内容 HTML代码:
<p>我想说:</p>
jQuery代码:
$("p").prepend("<b>你好</b>");
结果:
<p><b>你好</b>我想说:</p>
prependTo() 与prepend相反 HTML代码:
<p>我想说:</p>
jQuery代码:
$("<b>你好 </b>").prependTo("p");
结果:
<p><b>你好</b>我想说:</p>
三.移除节点
1.remove()删除
jquery对象.remove();//返回被移除的节点的jQuery对象
$("#div1").remove();
2.empty() 清空
$("ul li:eq(3)").empty();//清空元素中的内容
把remove()方法改成empty()演示
三.节点的替换(修改)
1.replaceWith()方法
例: 把div4替换成一个文本框$("#div4").replaceWith("<input type='text' name='pname' value='产品名称'><br/>");
body中的代码
<p>我是一个段落</p>
<input type="button" name="" id="" value="替换节点" onclick="test();"/>
2.replaceAll()方法 (和replaceWith()相反)
$("<input type='text' name='pname' value='产品名称'><br/>").replaceAll($("#div4"));
课堂演示:文件上传
添加删除文件域
点击more按钮添加一个文件域、remove按钮
点击remove按钮移除对应的文件与和remove按钮
<body>
<input type="button" value="more..." id="btn1" /><br/>
<input type="file" />
<div id="div1"></div>
</body>
1.原生js实现
生成dom对象 、设置属性、绑定事件
<script>
window.onload = function(){
var btn1 = document.getElementById("btn1");
btn1.onclick = function(){
var div1 = document.getElementById("div1");
//创建一个文件域
var file = document.createElement("input");
var button = document.createElement("input");
var br = document.createElement("br");
file.type = "file";
button.type = "button";
button.value = "remove";
button.onclick = function(){
div1.removeChild(file);
div1.removeChild(button);
div1.removeChild(br);
}
div1.appendChild(file);
div1.appendChild(button);
div1.appendChild(br);
}
}
</script>
2.jQuery实现
生成jquery对象、设置属性、绑定事件
<script>
$(function(){
$("#btn1").click(function(){
var file = $("<input type='file'/>");
var button = $("<input type='button' value='remove'/>");
var br = $("<br/>");
button.click(function(){
file.remove();
button.remove();
br.remove();
});
$("#div1").append(file);
$("#div1").append(button);
$("#div1").append(br);
});
});
</script>
学生练习:
实现购物车
四.节点移动
$("ul li:eq(2)").insertAfter("ul li:eq(0)");移动前 移动后
演示代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>演示表格的作用一:
使用表格来显示表格数据</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="../../js/jquery/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
* {
margin: 0px;
}
a {
border: 1px solid #e4393c;
display: block;
width: 150px;
background: #e4393c;
height: 26px;
line-height: 26px;
color: #fff;
font-size: 15px;
font-family: '微软雅黑';
text-align:center;
text-decoration:none;
white-space:pre;
}
ul {
list-style-type:none;
padding:0px;/*新浏览器 firefox safari
都是使用内边距控制缩进的 新ie也是*/
margin:0px;/*老ie是使用外边距缩进的 所以光设置padding:0px
老id
不会去掉索引 为了兼容老ie*/
}
li a:hover {
background-color:#F7F7F7;
color:#e4393c;
border-right:#F7F7F7;
}
</style>
<script src="../../js/jquery/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("ul li:eq(2)").insertAfter("ul li:eq(0)");
});
</script>
</head>
<body>
<ul>
<li><a href="">手 机</a></li>
<li><a href="">笔记本</a></li>
<li><a href="">图书音像</a></li>
<li><a href="">服装鞋帽</a></li>
</ul>
</body>
</html>
五.克隆节点
jQuery对象.clone();//返回克隆出来的对象,相当于 对象.clone(false);jQuery对象.clone(true);//克隆出来的对象含有事件
练习:单击任何一个li,复制出这个li,附着在ul后面
演示代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>演示克隆节点</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="../../../js/jquery/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
* {
margin: 0px;
}
li {
width: 152px;
}
a {
border: 1px solid #e4393c;
display: block;
width: 150px;
background: #e4393c;
height: 26px;
line-height: 26px;
color: #fff;
font-size: 15px;
font-family: '微软雅黑';
text-align:center;
text-decoration:none;
white-space:pre;
}
ul {
list-style-type:none;
padding:0px;/*新浏览器 firefox safari
都是使用内边距控制缩进的 新ie也是*/
margin:0px;/*老ie是使用外边距缩进的 所以光设置padding:0px
老id
不会去掉索引 为了兼容老ie*/
}
li a:hover {
background-color:#F7F7F7;
color:#e4393c;
border-right:#F7F7F7;
}
</style>
<script type="text/javascript">
$(function(){
//需求:
单击任何一个li,复制出这个li,附着在ul后面
//给所有li绑定单击事件
$("ul>li").click(function(){
var $obj = $(this).clone(true);
$("ul").append($obj);
});
});
</script>
</head>
<body>
<ul>
<li><a href="#">手 机</a></li>
<li><a href="#">笔记本</a></li>
<li><a href="#">图书音像</a></li>
<li><a href="#">服装鞋帽</a></li>
</ul>
</body>
</html>
六.节点的包裹
1.wrap()方法
<strong>你最喜欢的水果是?</strong><br/>
<strong>你最喜欢的水果是?</strong>
$("strong").wrap("<b></b>")
包裹后的结果
<b>
<strong>你最喜欢的水果是?</strong>
</b>
<br>
<b>
<strong>你最喜欢的水果是?</strong>
</b>
2.wrapAll()方法
$("strong").wrapAll("<b></b>")
<b>
<strong>你最喜欢的水果是?</strong>
<strong>你最喜欢的水果是?</strong>
</b>
<br>
2.wrapInner()方法 包裹里面的文本
例:
$("strong").wrapInner("<b></b>")
包裹后的结果
<strong>
<b>你最喜欢的水果是?</b>
</strong>
<br>
<strong>
<b>你最喜欢的水果是?</b>
</strong>
七.遍历子元素和兄弟元素
代码见 jQuery API手册 筛选 查找1.遍历子元素
children() 获得所有孩子节点,不包括孙子节点
var v1 = $("body").children();//查找body的孩子结点,不包括孙子节点,返回集合元素
演示代码:
<script type="text/javascript">
$(function(){
//遍历body的子元素
//先得到body
var $body = $("body");
var childArr = $body.children();
console.info(childArr.length);//3
});
</script>
<body>
<div>
<p>我是div中的p标签</p>
</div>
<p>我是p标签</p>
<h1>我是h1</h1>
</body>
jQuery对象.find() 在jQuery对象下找 某个元素
var $div1 = $("#div1");
console.info($div1.find("p"));//在id为div1的元素下找p节点
2.遍历兄弟元素
访问下面的一个元素 对象.next();
访问上面的一个元素 对象.prev();
访问所有的兄弟元素 对象.siblings();
3.遍历父元素
原生JS方式: dom对象.parentNode
jQuery方式
对象$("p").parent();//
得到p元素的父亲节点
$("p").parents()
;//得到p元素的所有父亲节点
代码参见:jQuery手册中的 筛选--查找--parent和parents
Parent演示代码:
<!DOCTYPE
html>
<html>
<head>
<meta
charset="UTF-8">
<title></title>
<script
src="../../../js/jquery-3.1.0.js"
type="text/javascript"
charset="utf-8"></script>
<script
type="text/javascript">
$(function() {
var $parents
= $("p").parent();
console.dir($parents);
});
</script>
</head>
<body>
<div>
<p>Hello</p>
<p>Hello</p>
</div>
</body>
</html>
相关文章推荐
- MySql的基本操作以及以后开发经常使用的常用指令
- linux常用基本操作命令
- linux常用基本操作命令
- vba基本操作 -- 常用功能
- 电脑基本操作常用快捷键
- oracle基本操作 oracle常用命令
- ORACLE 10g常用管理工具和基本操作(第二次上机)
- STL中常用数据结构基本操作
- sqoop环境配置AND常用基本操作01
- 堆的基本概念及常用操作
- Linux下MySQL数据库常用基本操作 一
- Python 列表(list)、字典(dict)、字符串(string)常用基本操作小结
- Python SQLAlchemy基本操作和常用技巧(包含大量实例,非常好)
- Linux下MySQL数据库常用基本操作 一
- zookeeper使用(二)--常用命令及在java中基本操作
- UNIX常用命令行指令(3)(基本输入输出操作)
- 【Memcached】linux centos 安装memcached和它的常用基本操作
- Git常用指令集合 (基本操作)
- linux常用基本操作命令
- PHP基本的文件和文件夹操作常用的汇总