JQuery（2）

来源：互联网发布：如何管理淘宝网店编辑：程序博客网时间：2024/06/06 19:34

五.JQuery中的DOM操作
DOM（Document Object Model-文档对象模型）：一种与浏览器，平台，语言无关的接口，使用该接口可以轻松访问页面中的标准组件。
（一）
1.append(content)：向每一个匹配的元素的内部的结尾处追加内容。
2.appendTo(content)：将每个匹配的元素追加到指定的元素中的内部结构结尾处。
3.prepend(content)：向每一个匹配的元素的内部的开始处插入内容。
4.prependTo(content)：将每个匹配的元素插入到指定的元素内部开始处。

function myclick(){            var count = $("li").length;            //在ul内追加li元素            //创建一个li元素            var js_li = $("<li>列表项"+(++count)+"</li>");            //1.append()向元素内部末尾追加元素            //$("ul").append(js_li);            //2.appendTo()将某一个创建的元素追加元素内部结尾处            /* var jq_li = $("ul");            js_li.appendTo(jq_li); */            //3.prepend()向元素内部开始处开始追加元素            //$("ul").prepend(js_li);            //4.prependTo()将某一个创建的元素追加元素内部开始处            var jq_li = $("ul");            js_li.prependTo(jq_li);        }        <ul>        <li>列表项1</li>        <li>列表项2</li>        <li>列表项3</li>        <li>列表项4</li>    </ul>

（二）外部插入节点
1.after（content）：在每一个匹配元素之后插入内容
2.before（content）：在每一个匹配元素之前插入内容
3.insertAfter（content）：把所有匹配的元素插入到另一个、指定的元素集合的后面。
4.insertBefore（content）：把所有匹配的元素插入到另一个、指定的元素集合的前面。
这些方法不仅能将新创建的DOM元素插入到文档中，也能对原有的DOM元素进行移动。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><c:set var="path" value="${pageContext.request.contextPath}"></c:set><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>标签移动</title>    <script type="text/javascript" src="${path}/js/jquery-1.10.2.js"></script>    <script type="text/javascript">        $(function(){        });        //1.after（content）：在每一个匹配元素之后插入内容        /* function check(){            var jq_p = $("<p>用户名已存在</p>");            $("#username").after(jq_p);        } */        //2.before（content）：在每一个匹配元素之前插入内容        /* function check(){            var jq_p = $("<p>用户名已存在</p>");            $("#username").before(jq_p);        } */        //3.insertAfter（content）：把所有匹配的元素插入到另一个、指定的元素集合的后面。        /* function check(){            var jq_p = $("<p>用户名已存在</p>");            jq_p.insertAfter($("#username"));        } */        //4.insertBefore（content）：把所有匹配的元素插入到另一个、指定的元素集合的前面。        function check(){            var jq_p = $("<p>用户名已存在</p>");            jq_p.insertBefore($("#username"));        }    </script></head><body><table>    <tr>        <td>            用户名：<input id="username" name="username" type="text">                   </td>           </tr></table>    <input type="button" value="提交" onclick="check()"></body></html>

（三）创建节点
创建节点：使用jQuery的工厂函数():(html);会根据传入的HTML标记字符串创建一个DOM对象，并把这个DOM对象包装成jQuery对象返回。
注意：
动态创建的新元素节点不会被自动添加到文档中，而是需要使用其他方法将其插入到文档中；
当创建单个元素时，需注意合闭标签和使用标准的xhtml格式。例如创建一个

元素，可以使用("<p/>")或(“

“),但不能使用

("<p>")或者(“”)
创建文本节点就是在创建元素节点时直接把文本内容写出来；创建属性节点也是在创建元素节点时一起创建。
（四）删除节点
（1）remove（）：从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式来筛选元素，当某个节点用remove（）方法删除后，该节点所包含的所有后代节点将被同时删除，这个方法的返回值是一个指向已被删除的节点的引用。
（2）empty（）：清空节点—清空元素中的所有后代节点（不包含属性节点）。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><c:set var="path" value="${pageContext.request.contextPath}"></c:set><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>点击按钮，添加一个li标签</title>    <script type="text/javascript" src="${path}/js/jquery-1.10.2.js"></script>    <script type="text/javascript">        $(function(){        });        function myclick(){            //1.remove()：从DOM中删除所有匹配的元素,该节点所包含的所有后代节点将被同时删除            /* var jq = $("li:first").remove();            alert(jq.html()); */            //2.empty()：清空节点，清空元素中的所有后代节点（不包含属性节点）            $("ul").empty();        }    </script></head><body>    <ul>        <li>列表项1</li>        <li>列表项2</li>        <li>列表项3</li>        <li>列表项4</li>    </ul>    <input type="checkbox">多选项1    <input type="checkbox">多选项2    <input type="checkbox">多选项3    <input type="checkbox">多选项4    <input type="checkbox">多选项5    <input type="button" onclick="myclick()" value="点击"></body></html>

（五）复制节点
（1）clone（）：克隆匹配的DOM元素，返回值为克隆后的副本，但此时复制的新节点不具有任何行为。
（2）clone（true）：复制元素的同时也复制元素中的事件

<button>保存</button><p>段落</p>$("button").click(function(){    alert("点击按钮");});//克隆节点，不克隆事件$("button").clone().appendTo("p");//克隆节点，克隆事件$("buttone").clone(true).appendTo("p");

六.属性的操作
attr()：获取属性和设置属性
当为该方法传递一个参数时，即为某元素的获取指定属性。
当为该方法传递两个参数时，即为某个元素设置指定属性的值
jQuery中有很多方法都是一个函数实现获取和设置，如attr(),html(),text(),val(),height(),width(),css()等，
removeAttr():删除指定元素的指定属性。
设置属性时，可以使用json形式，比如：{width:100,alt:”图片不存在”}

阅读全文

0 0