jQuery实现将页面上HTML标签换成另外标签的方法

本文实例讲述了jQuery实现将页面上HTML标签换成另外标签的方法。分享给大家供大家参考。具体分析如下：

替换前代码如下：

<code> A </code>
<code> B </code>
<code> C </code>

替换后代码如下：

<pre> A </pre>
<pre> A </pre>
<pre> A </pre>

实现替换代码：

代码如下:

$('code').contents().unwrap().wrap('<pre/>');

或者：

$('code').replaceWith(function(){
  return $("<pre />").append($(this).contents());
});

希望本文所述对大家的jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery标签编辑插件Tagit使用指南

    jQuery标签编辑插件Tagit使用指南

    一.Tagit插件功能 提高网站交互性,增加用户体验.至于其它的功能,还真没有.用一个input text就可以替换了它.但是text没有输入提示功能,而tagit拥有这个功能.官方示例如下图: 将关键词标签化,成为一个整体.方便删除与浏览. 二.Tagit官方地址 http://aehlke.github.io/tag-it/ 官方地址上有使用说明,也有用例.用例的颜色搭配也可以选择.不过选来选去也就是这几种,Tagit插件使用jqueryui,所以jqueryui提供的样式也兼容.jquer

  • jquery获得同源iframe内body下标签的值的方法

    test.html Html代码 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery</title> <style type="text/css"> </style> <s

  • jQuery 动态云标签插件

    jQuery 动态云标签插件

    前言: 最近对js的插件封装特别感兴趣,无耐就目前的技术想做到js的完全封装,还是有一定困难,就基于jQuery封装了一个小的插件,而且是基于对象级开发的,不是添加全局方法.高深的语法几乎没有,就有一个return:foreach()方法来返回对象实例本身,还有一个extend()函数,用来扩展参数对象的属性,这也是为了对象在调完我这个方法后方便链式操作. 插件打包下载地址:点我下载 插件名:动态云标签 插件特点: 在指定块级元素内动态生成a标签 a标签的高度.宽度.位置.层数.背景颜色随机可控

  • jQuery实现当前页面标签高亮显示的方法

    本文实例讲述了jQuery实现当前页面标签高亮显示的方法.分享给大家供大家参考.具体实现方法如下: function nav(name, csskey,cssvalue) { var url = window.location.pathname + window.location.search; var v1 = ""; $(name).each(function () { v1 = "/" + $(this).attr("href"); if

  • jQuery实现模拟marquee标签效果

    Marquee 模仿IE下面的marquee效果,鼠标移上去暂停.形成环的主要原理在于每张图片一旦判断出了外面的显示窗口就添加到尾部,用append和prepend模拟数组的push()和shift(). 代码如下: HTML <!doctype html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta c

  • jquery实现标签支持图文排列带上下箭头按钮的选项卡

    带上下箭头jquery垂直tab选项卡切换标签,技持左侧列表上下滚动,滚动到底部带信息提示. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml

  • jQuery如何获取同一个类标签的所有值(默认无法获取)

    碰巧在开发的时候遇到这个问题,因为jQuery总是只返回第一个类标签的值,所以无法达到我们的要求. 比如: 复制代码 代码如下: var btn = jQuery('.btn').val(); 获取的只是第一个类标签为btn的html元素的value值. 要获得一组类标签的所有html元素的值.就得使用jQuery的each遍历. 复制代码 代码如下: var btns = new Array(); //或者写成:var btns= []; jQuery('.btn').each(functio

  • jquery tab标签页的制作

    这里有一个内容要特别注意的那就是给标签的mouseover事件设置延迟,这样防止用户恶意的移动鼠标导致放送大量的请求而是服务器崩溃,用到setTimeout函数,主要用到已下的事件 1 $().each(function(){}) 这个是个非常重要的遍历所有标签的好办法 2 mouseover事件, 还有就是关键的css样式编写,控制显示的样式, 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN&

  • jQuery实现tab标签自动切换的方法

    本文实例讲述了jQuery实现tab标签自动切换的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xht

  • JQuery中两个ul标签的li互相移动实现方法

    本文实例讲述了JQuery中两个ul标签的li互相移动实现方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

  • jQuery EasyUI API 中文文档 - Tabs标签页/选项卡

    jQuery EasyUI API 中文文档 - Tabs标签页/选项卡

    Tabs 标签页/选项卡 用$.fn.tabs.defaults重写defaults. 依赖 panel linkbutton 用法示例 创建tabs 1. 经由标记创建Tabs 从标记创建Tabs更容易,我们不需要写任何JavaScript代码.记住把 'easyui-tabs' 类添加到<div/>标记,每个tab panel 经由子<div/>标记被创建,其用法与Panel一样. 复制代码 代码如下: <div id="tt" class="

  • jquery 实现两Select 标签项互调示例代码

    <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" c

  • jquery实现标签上移、下移、置顶

    eg:如在后台的标签列表中,实现上移.下移.置顶功能 主要实现思路是节点操作,比如说:上移,直接把点击项移动到前一个节点,以此类推,当然实际代码实现还要加些判断,如当前点击操作项是否已经是置底或置底了,如果是则给点相应提示,好让操作者知道发生了什么事情. 思路: 1.先用到的克隆方法.clone(true): 即把当前要移动的项先保存好,备于后用. 2.找到当前标签所对应的相关元素及其相关方法: 如:.prev()当前元素上面的标签 .next()当前元素下面的标签 .after()xxx之后添

  • jQuery实现平滑滚动的标签分栏切换效果

    jQuery实现平滑滚动的标签分栏切换效果

    本文实例讲述了jQuery实现平滑滚动的标签分栏切换效果.分享给大家供大家参考.具体如下: 这是一款老外的作品,后半部分的代码有点乱,具体就不细整理了,喜欢的朋友自己拷贝代码慢慢整理一下吧,呵呵,虽乱但功能不乱,预览看效果吧,很不错的标签滚动切换. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-scroll-bq-menu-cha-style-codes/ 具体代码如下: <!DOCTYPE html> <head&g

  • JQuery标签页效果的两个实例讲解（4）

    JQuery标签页效果的两个实例讲解（4）

    按照惯例,我们还是先来看一下最终要达到效果图: 和上一个菜单效果类似,当鼠标移动到标签上的时候,下面会显示相应的内容.当然,同样存在滑动门的问题.  前台页面的代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="tab.aspx.cs" Inherits="tab" %> <!DOCTYPE html PUBLIC "-//W3C/

随机推荐