JQuery:设置HTML
1、Query - 设置内容和属性
设置内容 - text()、html() 以及 val()
我们将使用前一章中的三个相同的方法来设置内容：
　　text() - 设置或返回所选元素的文本内容
　　html() - 设置或返回所选元素的内容（包括 HTML 标记）
　　val() - 设置或返回表单字段的值
下面的例子演示如何通过 text()、html() 以及 val() 方法来设置内容：
实例1：
$("#btn1").click(function(){
　　$("#test1").text("Hello world!");
});
　　$("#btn2").click(function(){
　　$("#test2").html("<b>Hello world!</b>");
});
　　$("#btn3").click(function(){
　　$("#test3").val("RUNOOB");
});
代码如下：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>

    <script>

        $(function(){

            //设置文本

            $("#btn1").click(function(){

                $("#test1").text("hello world!");

            });

            //设置HTML

            $("#btn2").click(function(){

                $("#test2").html("<i>hello world!</i>")

            });

            //设置Value

            $("#btn3").click(function(){

                $("#test3").val("hello world!");

            });

        });

    </script>

</head>

<body>

    <p id="test1">真是一个段落</p>

    <p id="test2">这是另外一个段落</p>

    <p>Input:<input type="text" value="这是文本框值" id="test3"></p>

    <button id="btn1">设置文本</button>

    <button id="btn2">设置HTML</button>

    <button id="btn3">设置Value</button>

</body>

</html>

  

text()、html() 以及 val() 的回调函数
上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
下面的例子演示带有回调函数的 text() 和 html()：
实例2：
$("#btn1").click(function(){
　　$("#test1").text(function(i,origText){
　　　　return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";
　　});
});
$("#btn2").click(function(){
　　$("#test2").html(function(i,origText){
　　　　return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")";
　　});
});
代码如下：

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="utf-8">

    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>

    <script>

        $(function(){

            //显示新/旧文本

            $("#btn1").click(function(){

                $("#test1").text(function(i,origText){

                    return "旧文本："+ origText + "    新文本：Hello World!(index:" + i +")";

                });

            });

            //显示新/旧HTML

            $("#btn2").click(function(){

                $("#test2").html(function(i,origText){

                    return "旧HTML："+ origText + "    <b>新HTML：Hello World!(index:" + i +")</b>";

                });

            });

        });

    </script>

</head>

<body>

    <p id="test1">真是一个旧的段落</p>

    <p id="test2">这是另外一个旧的段落</p>

    <button id="btn1">显示新/旧文本</button>

    <button id="btn2">显示新/旧HTML</button>

</body>

</html>

 

2、Query - 设置属性
jQuery attr() 方法也用于设置/改变属性值。
下面的例子演示如何改变（设置）链接中 href 属性的值：
实例1：
$("button").click(function(){
　　$("#runoob").attr("href","http://www.runoob.com/jquery");
});
代码如下：
attr() 方法也允许您同时设置多个属性。
下面的例子演示如何同时设置 href 和 title 属性：
实例2：
$("button").click(function(){
　　$("#runoob").attr({
　　　　"href" : "http://www.runoob.com/jquery",
　　　　"title" : "jQuery 教程"
　　});
});
代码如下：

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="utf-8">

    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>

    <script>

        $(function(){

            //显示新/旧文本

            $("button").click(function(){

                alert("更换前："+$("#test").attr("href"));

                $("#test").attr("href","https://github.com");

                alert("更换后："+$("#test").attr("href"));

            });

        });

    </script>

</head>

<body>

    <p><a href="http://www.baidu.com" id="test">链接</a></p>

    <button>点击按钮更换href链接</button>

</body>

</html>

 

3、attr() 的回调函数
jQuery 方法 attr()，也提供回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
下面的例子演示带有回调函数的 attr() 方法：
实例1：
$("button").click(function(){
　　$("#runoob").attr("href", function(i,origValue){
　　　　return origValue + "/jquery";
　　});
});
代码如下：

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="utf-8">

    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>

    <script>

        $(function(){

            //显示新/旧文本

            $("button").click(function(){

                alert("更换前："+$("#test").attr("href"));

                $("#test").attr("href",function(i,orinHerf){

                    return  orinHerf + "/xiayuanquan";

                });

                alert("更换后："+$("#test").attr("href"));

            });

        });

    </script>

</head>

<body>

    <p><a href="http://www.baidu.com" id="test">链接</a></p>

    <button>点击按钮更换href链接</button>

</body>

</html>

 

JQuery：JQuery设置HTML的更多相关文章

  1. jQuery中设置form表单中action的值的方法

    下面介绍在jQuery中设置form表单中action的值的方法. $("#myFormId").attr("action", "userinfo.s ...

  2. jQuery中设置form表单中action值与js有什么不同。。。。

    jQuery中设置form表单中action值与js有什么不同.... HTML代码如下: <form action="" method="post" i ...

  3. jquery 获取设置值、添加元素详解

    jQuery 获取内容和属性 jQuery DOM 操作 jQuery 中非常重要的部分,就是操作 DOM 的能力. jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易 ...

  4. 转载JQuery 获取设置值，添加元素详解

    转载原地址 http://www.cnblogs.com/0201zcr/p/4782476.html jQuery 获取内容和属性 jQuery DOM 操作 jQuery 中非常重要的部分,就是操 ...

  5. jQuery中设置form表单中action值的方法

    jQuery中设置form表单中action值的方法 (2011-03-17 10:18:19) 转载▼ 标签: 杂谈   html代码: <form id="myFormId&quo ...

  6. jQuery扩展函数设置所有对象只读

    jQuery(function ($) {             $.fn.disable = function () {                 return this.each(func ...

  7. jquery datagrid设置pageSize不起作用

    http://www.2cto.com/kf/201212/178098.html —————————————————————————————————————————————————————————— ...

  8. jQuery之设置元素内容(移动和复制元素,使用append(),appendTo()方法)

    jQuery之设置元素内容(移动和复制元素,使用append(),appendTo()方法) ---------- 如果想把内容添加到现有内容末尾,可以利用append()命令.append()命令语 ...

  9. jquery datatable设置垂直滚动后，表头(th)错位问题

    jquery datatable设置垂直滚动后,表头(th)错位问题 问题描述: 我在datatable里设置:"scrollY": '300px',垂直滚动属性后,表头的宽度就会 ...

  10. jquery获取设置服务器控件的方法

    jquery获取设置服务器控件的方法 获取TextBox,HiddenField,Label的值.例如: <asp:TextBox ID="txtBoxID" runat=& ...

随机推荐

  1. java图片处理——多张图片合成一张Gif图片并播放或Gif拆分成多张图片

    1.多张jpg图合成gif动画 /** * 把多张jpg图片合成一张 * @param pic String[] 多个jpg文件名 包含路径 * @param newPic String 生成的gif ...

  2. SVN 中trunk、branches、tags

    SVN 中trunk.branches.tags   我们在一些著名开源项目的版本库中,通常可以看到trunk, branches, tags等三个目录.由于SVN固有的特点,目录在SVN中并没有特别 ...

  3. VTK 6.3.0 Qt 5.4 MinGW 4.9.1 Configuration 配置

    Download VTK 6.3.0 Download Qt 5.4 with MinGW 4.9.1 Download CMake 3.2.0 I assume you've already ins ...

  4. thinkphp模板中foreach循环没数据的错误解决

    从控制器方法中$this->assign();函数将值传递给html模板 但是模板不显示数据,直接出来的是代码,效果就和html中写了php代码不能解析一样. 原来是我将thinkphp框架的引 ...

  5. checking在浏览器为应用缓存查找更新时触发

    离线的Web应用,就是在设备不能上网的时候还能运行应用.html5把离线应用作为重点,主要是开发人员的心愿.离线应用的开发的步骤有:首先应该知道设备是否能够上网;然后应该还能访问一定的资源(如图像.C ...

  6. ASP.NET WEB API的服务托管(Self-HOST)

    如果我们想对外发布RESTful API,可以基于ASP.NET来构建Restful APIs,但需要部署IIS吗?答案是不必.你可以把它托管到一个Windows Service.具体如何把WEB A ...

  7. html5shiv.js-让IE浏览器支持HTML5标准

    兼容性IE8及以下IE版本 浏览器IE8及以下IE版本对HTML5标签的支持是有限的,我们可以通过在网页中添加脚本的方式来解决目前IE浏览器对HTML5支持的问题. <!–[if IE]> ...

  8. java.sql.SQLException: 关闭的连接 解决办法

    程序如果长时间不进行数据库操作,那么数据源中的 Connection 很可能已经断开.其原因有可能是防火墙,或者连接的数据库设置的超时时间.这里使用的是 C3P0 连接 oracle 数据库,引起的异 ...

  9. SSH+Oracle10G抛Disabling contextual LOB creation as createClob() m

    在使用Oracle10G时候,实体类使用了CLOB字段,结果抛了Disabling contextual LOB creation as createClob() method threw error ...

  10. 关于0x000000c2问题解决方法

    首先大家要用进入PE系统,按照我说的顺序做就可以解决了! 1,进入PE后找到系统盘,默认一般为C盘-->进入WINDOWS文件夹-->进入system32文件夹-->找到regedt ...