分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

jQuery的节点操作

发布时间:2023-09-06 01:17责任编辑:沈小雨关键词:jQuery

1、创建节点

 ???????var aa = $("<div id=‘cccc‘>插入的内容</div>") ???????var bb = $("<a href=‘http://www.baidu.com‘>百度一下</a>")//创建节点//插入节点// ???内部插入// ???????插入到内部的前面// ???????$("div").append(bb)// ???????append:插入到节点内部的后面的// ???????$("h6").appendTo("div")// ???????appendTo:把h6这个标签移动到div标签内部的后面,原来的h6标签将不复存在// ???????插入到内部的后面// ???????$("div").prepend(bb)// ???????prepend:插入到节点内部的前面的// ???????$("div").prependTo(bb)// ???????prependTo:把h6这个标签移动到div标签内部的前面,原来的h6标签将不复存在// ???外部插入,相当于同级的插入,包括同级的后面和前面// ?????$("div").after(aa)// ?????after:在div的同级标签的下面的位置插入一个aa的标签,// ???????$("div").before(aa)// ???????before:在div的同级标签的上面的位置插入一个aa的标签,// ???????$("h6").insertBefore("div")// ???????insertBefore:将指定的标签移到div标签的前面,原来的标签则不复存在// ???????$("h1").insertAfter("div")// ???????insertAfter:将指定的标签移到div标签的后面,原来的标签则不复存在

  

2、操作节点,包括包裹,删除,替换,复制

 ???????$(function () {// ???????????$("div").wrap("<strong>包裹标签的内容</strong>")//用strong标签包裹住div标签// ???????$(function () {// ???????????$("div").wrap("<strong><em></em></strong>")// ???????})//用<strong><em></em></strong>双层标签包裹住div标签,这里是支持多层标签包裹的// ???????$("em").unwrap()//移除em标签外面的第一层包裹的标签// ???????????wrap和wrapAll对比:就用下面的例子做解释,如果只有一个div,那么二者是没有区别的,如果有多个div,那么前者会把每个div作为一个独立的标签,然后用strong// ???????????标签去分别包裹多个div标签,而后者会把两个div合为一体,也就是说用一个strong去包裹两个div// ???????????$("div").wrapAll("<strong>包裹标签的内容</strong>")// ???????????$("em").wrapInner("<div></div>")//wrapInner:的意思在里面包裹一层标签,同样,这个也支持多层标签的包裹// ???????????克隆节点// ???????????$("div").click(function () {// ???????????????alert("123")// ???????????})// ???????????$("body").append($("div").clone())// ???????????克隆一个节点,然后把这个节点append到body标签内部,如果不带参数,或者参数为false,如果原来的标签有shijian,则不会复制// ???????????$("body").append($("div").clone(true))// ???????????克隆一个节点,然后把这个节点append到body标签内部,如果带有参数,且参数为true,如果原来的标签有shijian,则会复制// ???????????删除节点,这个remove可以带有参数,参数可以做更多的过滤限制,比如id 比如class,如果为空,则会全部删除// ???????????$("em").remove("#bbb")// ???????????替换节点 ???????????$("#ccc").replaceWith("<h1>这个是被替换过的</h1>") ???????})

  

jQuery的节点操作

原文地址:http://www.cnblogs.com/bainianminguo/p/7653668.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved