jQuery第四章jQuery与DOM

来源：互联网发布：网络语茶叶蛋什么意思编辑：程序博客网时间：2024/05/23 00:03

jQuery第四章jQuery与DOM

jQuery常见操作

-创建节点查找节点插入节点移动节点删除节点复制节点替换节点包裹节点

克隆、移动、包裹----新，dom没有的

创建节点： var $div5 = $("<div id='div5'>我是div5</div>");

插入节点：

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

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

我想说:

jQuery代码:

$("p").after("你好");

结果:

我想说:你好

insertAfter 与after()相反 HTML代码:

我想说:

jQuery代码:

$("你好").insertAfter("p");

结果:

我想说:你好

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

我想说:

jQuery代码:

$("p").before("你好");

结果:

你好我想说:

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

我想说:

jQuery代码:

$("你好").insertBefore(“p");

结果:

你好我想说:</p

插入子级元素

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

我想说:

jQuery代码:

$("p").append("你好");

结果:

我想说:你好

appendTo() 与append相反 HTML代码:

我想说:

jQuery代码:

$("你好 ").appendTo("p");

结果:

我想说:你好

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

我想说:

jQuery代码:

$("p").prepend("你好");

结果:

你好我想说:

prependTo() 与prepend相反 HTML代码:

我想说:

jQuery代码:

$("你好 ").prependTo("p");

结果:

你好我想说:

移除节点

remove()删除

jquery对象.remove();//返回被移除的节点的jQuery对象

$("#div1").remove();

empty() 清空

$("ul li:eq(3)").empty();//清空元素中的内容

把remove()方法改成empty()演示

节点的替换(修改)

replaceWith()方法

例: 把div4替换成一个文本框

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

body中的代码

我是一个段落

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

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

节点移动： $("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);//克隆出来的对象含有事件

节点的包裹

wrap()方法

你最喜欢的水果是?

你最喜欢的水果是?

$("strong").wrap("")

包裹后的结果

你最喜欢的水果是?

你最喜欢的水果是?

wrapAll()方法

$("strong").wrapAll("")

你最喜欢的水果是?

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

$("strong").wrapInner("")

包裹后的结果

你最喜欢的水果是?

你最喜欢的水果是?

遍历子元素

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

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

jQuery对象.find() 在jQuery对象下找某个元素

var $div1 = $("#div1");

console.info($div1.find("p"));//在id为div1的元素下找p节点

遍历兄弟元素

访问下面的一个元素对象.next();

访问上面的一个元素对象.prev();

访问所有的兄弟元素对象.siblings();

遍历父元素

对象$("p").parent();// 得到p元素的父亲节点

$("p").parents() ;//得到p元素的所有父亲节点

阅读全文

0 0