3.jquery常用基本操作

来源：互联网发布：淘宝查号代收怎么做编辑：程序博客网时间：2024/06/06 03:17

HTML DOM常见操作

-创建节点

-查找节点

-插入节点

-移动节点

-删除节点

-复制节点

-替换节点

-包裹节点

多了克隆、移动、包裹

一.创建节点

var $div5 = $("<div id='div5'>我是div5</div>");

二.插入节点

1.插入同级元素(兄弟元素)

after() 在每个匹配的元素之后插入内容 HTML代码:

jQuery代码:

$("p").after("<b>你好</b>");

结果:

insertAfter 与after()相反 HTML代码:

jQuery代码:

$("<b>你好</b>").insertAfter("p");

结果:

before() 在每个匹配的元素之前插入内容 HTML代码:

jQuery代码:

$("p").before("<b>你好</b>");

结果:

insertBefore() 与before()相反 HTML代码:

jQuery代码:

$("<b>你好</b>").insertBefore(“p");

结果:

<b>你好</b><p>我想说:</p

2.插入子级元素

append() 向每个匹配的元素内部追加内容 HTML代码:

jQuery代码:

$("p").append("<b>你好</b>");

结果:

appendTo() 与append相反 HTML代码:

jQuery代码:

$("<b>你好 </b>").appendTo("p");

结果:

prepend() 向每个匹配的元素内部前置内容 HTML代码:

jQuery代码:

$("p").prepend("<b>你好</b>");

结果:

prependTo() 与prepend相反 HTML代码:

jQuery代码:

$("<b>你好 </b>").prependTo("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>

2.replaceAll()方法 (和replaceWith()相反)

$("<input type='text' name='pname' value='产品名称'><br/>").replaceAll($("#div4"));

课堂演示:文件上传添加删除文件域

点击more按钮添加一个文件域、remove按钮

点击remove按钮移除对应的文件与和remove按钮

<body>

</body>

1.原生js实现

生成dom对象、设置属性、绑定事件

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对象、设置属性、绑定事件

$(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>

* {

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>

$(function(){

$("ul li:eq(2)").insertAfter("ul li:eq(0)");

});

</script>

</head>

<body>

<ul>

</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>

* {

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>

$(function(){

//需求:单击任何一个li,复制出这个li,附着在ul后面

//给所有li绑定单击事件

$("ul>li").click(function(){

var $obj = $(this).clone(true);

$("ul").append($obj);

});

</script>

</head>

<body>

<ul>

</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>

</b>

<br>

2.wrapInner()方法包裹里面的文本

例：

$("strong").wrapInner("<b></b>")

包裹后的结果

<b>你最喜欢的水果是?</b>

</strong>

<br>

<b>你最喜欢的水果是?</b>

</strong>

七.遍历子元素和兄弟元素

代码见 jQuery API手册筛选查找

1.遍历子元素

children() 获得所有孩子节点,不包括孙子节点

var v1 = $("body").children();//查找body的孩子结点,不包括孙子节点,返回集合元素

演示代码:

$(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>

</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演示代码:

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<scriptsrc="../../../js/jquery-3.1.0.js"type="text/javascript"charset="utf-8"></script>

<scripttype="text/javascript">

$(function() {

var $parents= $("p").parent();

console.dir($parents);

});

</script>

</head>

<body>

<div>

<p>Hello</p>

</div>

</body>

</html>

阅读全文

0 0

3.jquery常用基本操作

HTML DOM常见操作

一.创建节点

二.插入节点

1.插入同级元素(兄弟元素)

2.插入子级元素

三.移除节点

1.remove()删除

2.empty() 清空

三.节点的替换(修改)

1.replaceWith()方法

2.replaceAll()方法 (和replaceWith()相反)

课堂演示:文件上传 添加删除文件域

学生练习: 实现购物车

四.节点移动

五.克隆节点

六.节点的包裹

七.遍历子元素和兄弟元素

1.遍历子元素

2.遍历兄弟元素

3.遍历父元素

课堂演示:文件上传添加删除文件域