<%@ page language="java" import="java.util.*" pageEncoding="GBK"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>dom</title><script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/TestJquery/jq/jquery-1.3.2.js"></script><script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/TestJquery/js/dom.js"></script></head><body><p title="选择你最喜欢的水果">选择你最喜欢的水果？</p><p title="选择你最喜欢的水果">选择你最喜欢的水果？</p><ul><li title="苹果">苹果</li><li title="橘子">橘子</li><li title="菠萝">菠萝</li></ul></body><script type="text/javascript">$(document).ready(function(){//获取标签的文本内容//var $li = $('ul li:eq(1)');//获取<ul>里的第二个<li>节点//var li_txt = $li.text();//获取第二个<li>元素节点的文本内容//alert(li_txt);//获取标签的属性//var $p = $('p');//获得<p>节点//var p = $p.attr('title');//获得<p>元素节点属性title//alert(p);//创建标签var $li_1 = $('<li title="香蕉">香蕉</li>');var $li_2 = $('<li title="葡萄">葡萄</li>');//$('ul').append($li_1).append($li_2);/** append()向每个匹配的元素内部追加内容* appendTo()将所有匹配的元素追加到制定的元素中。实际上，使用该方法是颠倒了常规的$(A).append(B)的操作，即不是讲B追加到A中，而是将A追加到B中。* prepend()向每个匹配的原色内部前置内容（填到匹配内容的前面，这个事最前面和before有区别）* prependTo()将所有匹配的元素前置到制定的元素中。实际上，使用该方法是颠倒了常规的$(A).append(B)的操作，即不是讲B追加到A中，而是将A追加到B中。* after()在每个匹配的元素之后插入内容* insertAfter()将所有匹配的元素插入到指定元素的后面。实际上，使用该方法是颠倒了常规的$(A).append(B)的操作，即不是讲B追加到A中，而是将A追加到B中。* before()在每个匹配的元素之前插入内容(不一定是最前面，没有制定的效果)* insertBefore()将书喲有匹配的元素插入到指定元素的前面。实际上，使用该方法是颠倒了常规的$(A).append(B)的操作，即不是讲B追加到A中，而是将A追加到B中。* */var $parent = $('ul');//获得<ul>节点，即<li>的父节点var $two_li = $('ul li:eq(1)');//$parent.append($li_1);$parent.prepend($li_2);var $li_3 = $('<li title="其他">其他</li>');$li_3.insertAfter($two_li);//删除节点//第一种$('ul li:eq(1)').remove();//获取第二个<li>$('ul li').remove("li[title='香蕉']");//remove()方法可以通过传递参数来实现删除效果//第二种$('ul li:eq(2)').empty();//清空而不是删除//复制节点$('ul li').click(function(){$(this).clone().appendTo('ul');//复制当前单击的节点，并将它追加到<ul>元素中//复制节点后，被复制的新元素并不具备任何行为。如果需要新元素也具有复制功能(本例中是单击事件)，可以使用如下jquery$(this).clone(true).appendTo("body");//注意参数是true，它的含义就是复制元素的同时复制元素中所绑定的时间});//替换节点//第一种//$('p').replaceWith('<strong>你最不喜欢的水果是什么呢？</strong>');//replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML或者DOM元素//第二种$('<strong>颠倒顺序</strong>').replaceAll('p');//与replaceWith()的作用相同，只不过是颠倒了替换顺序//包裹节点//$('strong').wrap("<b></b>");//用<b>标签把<strong>元素包裹起来 效果：<b><strong></strong</b> <b><strong></strong</b>//$('strong').wrapAll("<b></b>");//改方法是把所有匹配的元素都用一个元素来包裹，wrap()方法是将所有的元素进行单独的包裹。<b><strong></strong <strong></strong </b>$('strong').wrapInner('<b></b>');//改方法是将每个匹配的元素的子内容(包括文本节点)用其他结构化的标记包裹起来。 效果 <strong><b>把里面的内容包裹起来了</b></strong>});</script></html>
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦