HTML 学习笔记 JQuery(DOM 操作2)_ddiv24492的博客-程序员秘密

技术标签: ViewUI  javascript  

接着上一节的将,这一节从复制节点讲起

复制节点

继续使用之前的例子 如果单击<li>元素后 需要在复制一个<li>元素,可以使用clone()方法完成。全部代码如下

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/jquery-2.1.1.min.js"></script>
    </head>
    <body>
        <p title="选择你喜欢的水果">你最喜欢的水果?</p>
        <ul>
            <li title="苹果">苹果</li>
            <li title="橘子">橘子</li>
            <li title="菠萝">菠萝</li>
        </ul>
        <script>
            
            $("ul li").click(function() {
                $(this).clone().appendTo("ul");
            })
            
        </script>
    </body>
</html>

复制节点后,被复制的新元素并不具备任何行为,如果需要新元素也具有复制功能 可以修改以上代码成为下面的代码

$("ul li").click(function() {
                $(this).clone(true).appendTo("ul");
            })

在clone()方法中传入了一个true 他的含义是复制元素的同时复制元素中所绑定的事件,因此该元素也同样具有复制功能


 

替换节点

如果替换某个节点,JQuery提供了相应的方法 即ReplaceWith()和ReplaceAll()。

ReplaceWith()方法的作用是将所有的匹配元素替换成指定的HTML或者DOM元素。

例如将上例中的<p title = "选择你最喜欢的水果">你最喜欢的水果?</p> 替换一下

$("p").replaceWith("<strong>你最喜欢的水果是什么呢</strong>");

也可以使用replaceAll()来实现,该方法于replaceWith()方法的作用相同,只是颠倒了replaceWith()操作

$("p").replaceWith("<strong>你最喜欢的水果是什么呢</strong>");
//下面的代码和上面是一样的
$("<strong>你最喜欢的水果是什么呢</strong>").replaceAll("p");

注意 如果在替换之前 已经为元素绑定事件,替换后原先绑定的事件将会与被替换的元素一起消失 需要在新元素上重新绑定事件

包裹节点

如果要将某个节点用其他标记包裹起来,可以使用wrap(),该方法对于需要在文档中插入额外的结构化标记非常有用。而且他不会破坏原始文档的语义。

$("strong").wrap("<b>一二</b>")

包裹节点 还有其他两个方法

wrapAll()

该方法用于将所有匹配的元素用一个元素来包裹(匹配的所有元素放在一起被包裹一次),它不同于wrap()方法。wrap()方法是将所有的元素进行单独包裹,就是每个匹配的元素都会被包裹一次。

<p title="选择你喜欢的水果">你最喜欢的水果?</p>
<p title="选择你最喜欢的水果">你的最爱</p>

执行一下代码

$("p").wrap("<b></b>");

会变成一下效果

<b><p>你最喜欢的水果</p></b>
<b><p>你的最爱</p></b>

而使用wrapAll()呢

$("p").wrapAll("<b></b>");

是这样的效果

<b>
            <p title="选择你喜欢的水果">你最喜欢的水果?</p>
            <p title="选择你最喜欢的水果">你的最爱</p>
        </b>

wrapinner()方法

该方法是将每一个匹配的元素的字内容(包括文本节点)用其他结构化的标记包裹起来

例如

$("p").wrapInner("<b style='color: red;'></b>")

运行后是这样的

<p title="选择你喜欢的水果"><b>你最喜欢的水果?</b></p>

效果


属性操作

1.获取属性和设置属相

在JQuery中使用attr()方法来获取属性 使用removeattr()来删除属性

//获取属性 移除属性
alert($("p").attr("title"));
if ($("p").length > 0) {
    $("p").removeAttr("title");
}
alert($("p").attr("title") + "哈哈哈");//undefined哈哈哈哈
//设置属性
$("p").attr("title","我是新的title");
alert($("p").attr("title"));//我是新的title

样式操作

1.获取样式和设置样式

HTML代码如下

<p class="myClass" title="选择你喜欢的水果">你最喜欢的水果?</p>

CSS 样式表

<style>
            .addStyle {
     
                font-weight: bold;
                color: red;
                /*斜体*/
                font-style: italic;
            }
        </style>

给p元素添加样式

//给p元素添加样式
$("p").addClass("addStyle");

效果

移除样式

$("p").removeClass("addStyle");

效果

切换样式

JQuery中有一种方法toggle() 代码如下

$("p").toggle(function() {
       代码3     
    },function() {
       代码4 
});

toggle()方法此处的作用就是交替之行代码3和代码4两个函数。在这种情况下toggle()方法主要是控制行为上的重复切换

此外JQuery也提供了toggleClass()方法控制样式上的重复切换 如果类名存在久删除它 如果类名不存在就添加它.

对p元素进行操作

$("p").click(function(){
    $(this).toggleClass("addStyle");
})

当单击p元素后 会变成这样

<p class="myClass addStyle" title="选择你喜欢的水果">你最喜欢的水果?</p>

在此点击会变成原来的样子

<p class="myClass" title="选择你喜欢的水果">你最喜欢的水果?</p>

就这样不断的切换

判断是否还有某个样式使用方法hasClass("yangshi");

 

转载于:https://www.cnblogs.com/huanying2000/p/6259934.html

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/ddiv24492/article/details/102234992

智能推荐

百度地图离线开发demo(初始化地图)_oliver666666的博客-程序员秘密_百度地图初始化

使用百度地图api,只要瓦片对应上,api对上了,地图的使用还是较为简单的,demo官网上的也可参考,只需将BMapGL后边的gl去掉即可&lt;!--地图初始化 --&gt;&lt;template&gt; &lt;div id="allmap" style="width: 100%;height: 100%;" /&gt;&lt;/template&gt;&lt;script&gt;export default { components: {}..

opencv和HALCON坐标系的不同_冯相文要加油呀的博客-程序员秘密

opencv的坐标原点在左上角,往右为X轴正方向,往下为Y轴正方向(用Image Watch可以很容易看出来)HALCON的坐标原点在左上角,往右为Y轴正方向,往下为X轴正方向(HALCON窗口左下角可以出来)

Python自学之路:第二课_MIYAGI_Desu的博客-程序员秘密

第2课0. 什么是BIF?BIF 就是 Built-in Functions,内置函数。为了方便程序员快速编写脚本程序(脚本就是要编程速度快快快!!!),Python 提供了非常丰富的内置函数,我们只需要直接调用即可,例如 print() 的功能是“打印到屏幕”,input() 的作用是接收用户输入(注:Python3 用 input() 取代了 Python2 的 raw_input(),用法如有不懂请看视频讲解)。太多BIF学不过来怎么办?看不懂英文说明怎么办?Python3的资料太少怎么办?没事

MemCache详解_Quiet_boy的博客-程序员秘密

MemCache是什么MemCache是一个自由、源码开放、高性能、分布式的分布式内存对象缓存系统,用于动态Web应用以减轻数据库的负载。它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高了网站访问的速度。MemCaChe是一个存储键值对的HashMap,在内存中对任意的数据(比如字符串、对象等)所使用的key-value存储,数据可以来自数据库调用、API调用,或者页面渲染的结果。

apiDoc 详解 api接口文档生成_Dom_留声机的博客-程序员秘密_apidoc

PHP使用apiDoc api接口文档安装apidocapidoc 命令参数列表配置(apidoc.json)apidoc.json配置项apidoc注释参数@[email protected]@[email protected]@[email protected]@[email protected]@[email protected]@apiHeaderExam...

随便推点

python cnn 回归模型_CNN学习笔记:线性回归_三川啦啦啦的博客-程序员秘密

CNN学习笔记:Logistic回归线性回归二分类问题Logistic回归是一个用于二分分类的算法,比如我们有一张图片,判断其是否为一张猫图,为猫输出1,否则输出0。基本术语进行机器学习,首先要有数据,比如我们收集了一批关于西瓜的数据,例如(色泽=青绿;根蒂=收缩;敲声=浊响)(色泽=乌黑;根蒂=稍蜷;敲声=沉闷)(色泽=浅白;根蒂=硬挺;敲声=清脆)每对括号内是一条记录,这组记录的集合称为一个数...

网页JS方法中动态加载文件_weixin_34387284的博客-程序员秘密

为什么80%的码农都做不了架构师?&gt;&gt;&gt; ...

PCL学习笔记(一)_weixin_33857230的博客-程序员秘密

由于项目需要,开始学习一下HP公司的PCL打印语言,发现这方面的中文资料非常少,我做下记录也为后人提供便利。关于PCL的介绍可以参考wiki百科http://zh.wikipedia.org/zh-cn/PCL相关文档也可以在此链接下载。我参考的是PCL 5E technical reference manual 主要做一下翻译工作。。。一、概述PCL ,是Printer Comm...

Tomcat内存优化第二篇 - 个别优化参数详解_路克森的博客-程序员秘密_tomcat内存优化参数

博主个人主页前言今天我们接着来说tomcat这部分的小知识哦 上一篇我们提到了如何设置我们tomcat的内存大小 这一篇主要来说一下tomcat的优化思路 以及如何能够让tomcat抗住并发呢?开发众所周知 我们一个完整的系统肯定不是一个单体应用就能扛得住的 在大并发的压迫下 如果我们的程序还是个单机系统 那肯定会会快就挂了 所以我们就不得不做出改变 那么常见的tomcat优化或者说高可用...

科大讯飞指定录音文件转文字(异步)_XStorms的博客-程序员秘密_科大讯飞录音文件转文字

/** * 指定录音文件转文字(异步) * @param bo * @return */ @Override public JSONObject recognizeAudio(QueryRecognizeBo bo){ Map&lt;String,Object&gt; recordMap = extLxccCdrMapper.queryRelativePath(bo.getCallId()); String fileP.

推荐文章

热门文章

相关标签