对应HTML dom，学习jQuery常见操作

来源：互联网发布：seo日志分析编辑：程序博客网时间：2024/05/19 13:42

创建节点

例：创建一个div标签节点
var $div = $('<div id = "div">我是div</div>');

插入节点

1.插入同级节点
after() 在所有匹配元素之后插入内容，例：

HTML代码:                    <p>我想说:</p>                    jQuery代码:                    $("p").after("<b>你好</b>");                    结果:                    <p>我想说:</p><b>你好</b>

insertAfter() 与after语法相反，$("<b>你好</b>").insertAfter("p");

before() 在所有匹配元素之前插入内容，例：

HTML代码:                    <p>我想说:</p>                    jQuery代码:                    $("p").before("<b>你好</b>");                    结果:                    <b>你好</b><p>我想说:</p>

insertBefore() 与before()语法相反，例：

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

2.插入子级元素

append() 向所有匹配到的元素内部追加内容，例：

HTML代码:                    <p>我想说:</p>                    jQuery代码:                    $("p").append("<b>你好</b>");                    结果:                    <p>我想说:<b>你好</b></p>

appendTo() 与append相反，例：

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

prepend() 向所有匹配到的元素内部前置内容，例：

HTML代码:                    <p>我想说:</p>                    jQuery代码:                    $("p").prepend("<b>你好</b>");                    结果:                    <p><b>你好</b>我想说:</p>

prependTo() 与prepend相反，例：

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

移除节点

1.remove()删除
2.empty()清空

//移除p标签                $("#btn1").click(function () {//                  $("p").remove();                    $("p").empty();                });

节点的替换

1.replaceWith()
2.replaceAll()和replaceWith()相反

例: 把div4替换成一个文本框$("#div4").replaceWith("<input type='text' name='pname' value='产品名称'><br/>");body中的代码<p>我是一个段落</p>               <input type="button" name="" id="" value="替换节点" onclick="test();"/>

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

演示：文件上传添加删除文件域

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script src="../../jsJava库/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>        <script type="text/javascript">             $(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);                    $("#div1").append(file).append(button).append(br);                });             });        </script>    </head>    <body>         <input type="button" value="more..." id="btn1" /><br/>        <input type="file" />        <div id="div1"></div>     </body></html>

节点移动

演示：将图书音像移动到笔记本前

<!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="../../jsJava库/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">    //$("ul li:eq(2)").insertAfter("ul li:eq(0)"); 节点移动     $(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="../../jsJava库/jquery-2.1.4.min.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>

节点的包裹

jQuery对象.wrap(“html代码”)；包裹匹配到的每一个节点。
jQuery对象.wrapAll(“html代码”)；包裹全部。
jQuery对象.wrapInner(“html代码”)；包裹内部元素

<script type="text/javascript">            $(function () {                //变成斜体//              $("strong").wrap("<i></i>");//$("strong").wrapAll("<b></b>");$("strong").wrapInner("<b></b>");            });        </script>html代码:<strong>你最喜欢的水果是?</strong><br/>        <strong>你最喜欢的水果是?</strong>

遍历子元素和兄弟元素

1.遍历子元素

<script type="text/javascript">            $(function(){                //遍历body的子元素                //先得到body                var $body = $("body");                var childArr = $body.children();                console.info(childArr.length);//3            });        </script>html代码：<div>                <p>我是div中的p标签</p>            </div>            <p>我是p标签</p>            <h1>我是h1</h1>

2.遍历兄弟元素

<script type="text/javascript">            $(function(){                //遍历body的子元素                //先得到body                var $body = $("body");                var childArr = $body.children();                console.info(childArr.length);//3//              访问下面的一个元素 对象.next();//              访问上面的一个元素 对象.prev();//              访问所有的兄弟元素 对象.siblings();            });        </script>html代码：<div>                <p>我是div中的p标签</p>            </div>            <p>我是p标签</p>            <h1>我是h1</h1>

3.遍历父元素
①.parent() 直接父元素②.parents() 所有父元素

<script type="text/javascript">            $(function() {                var $parents = $("p").parent();                console.dir($parents);            });        </script>html代码：<div>            <p>Hello</p>            <p>Hello</p>        </div>

<script type="text/javascript">            $(function() {                var $parents = $("span").parents();                console.dir($parents);            });        </script>html代码：<div>            <p>                <span>Hello</span>            </p>            <span>Hello Again</span>        </div>

补充：

find(),在某个节点下查找，jQuery对象.find()提高查询效率，比dom方式快。

这里写图片描述

阅读全文

0 0