jQuery HTML

最新推荐文章于 2023-05-24 02:10:23 发布
最新推荐文章于 2023-05-24 02:10:23 发布
阅读量345 收藏
点赞数

1.1获得内容 - text()、html() 以及 val()

text() - 设置或返回所选元素的文本内容

html() - 设置或返回所选元素的内容（包括 HTML 标记）

val() - 设置或返回表单字段的值

实例

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});

----Text: 这是段落中的粗体文本。

$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

----HTML: 这是段落中的<b>粗体</b>文本。 


$("#btn1").click(function(){
  alert("Value: " + $("#test").val());
});

1.2获取属性 - attr()

jQuery attr() 方法用于获取属性值。

实例

$("button").click(function(){
  alert($("#w3s").attr("href"));
});


1.3设置内容 - text()、html() 以及 val()

实例

$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});


1.4text()、html() 以及 val() 的回调函数

上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

实例

$("#btn1").click(function(){
  $("#test1").text(function(i,origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
  });
});

----Old text: 这是粗体文本。 New text: Hello world! (index: 0)

$("#btn2").click(function(){
  $("#test2").html(function(i,origText){
    return "Old html: " + origText + " New html: Hello <b>world!</b>
    (index: " + i + ")";
  });
});

----
Old html: 这是另一段粗体文本。 New html: Hello world! (index: 0)

1.5设置属性 - attr()

jQuery attr() 方法也用于设置/改变属性值。

实例

$("button").click(function(){
  $("#w3s").attr("href","http://www.baidu.com");
});

attr() 方法也允许您同时设置多个属性。

实例

$("button").click(function(){
  $("#w3s").attr({
    "href" : "http://www.w3school.com.cn/jquery",
    "title" : "W3School jQuery Tutorial"
  });
});

jQuery 方法 attr()，也提供回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

实例

$("button").click(function(){
  $("#w3s").attr("href", function(i,origValue){
    return origValue + "/jquery";
  });
});

1.6jQuery append() 方法

jQuery append() 方法在被选元素的结尾插入内容。


实例

  $("#btn1").click(function(){
    $("p").append(" <b>Appended text</b>.");
  });

  $("#btn2").click(function(){
    $("ol").append("<li>Appended item</li>");
  });
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">追加文本</button>
<button id="btn2">追加列表项</button>


---
This is a paragraph. Appended text.
This is another paragraph. Appended text.

  
  
  1. List item 1
  2. List item 2
  3. List item 3
  4. Appended item
  5. Appended item

1.7jQuery prepend() 方法

jQuery prepend() 方法在被选元素的开头插入内容。

实例

$("#btn1").click(function(){
    $("p").prepend("<b>Prepended text</b>. ");
  });
  $("#btn2").click(function(){
    $("ol").prepend("<li>Prepended item</li>");
  });

---
Prepended text. This is a paragraph.
Prepended text. This is another paragraph.

 
 
  1. Prepended item
  2. Prepended item
  3. List item 1
  4. List item 2
  5. List item 3


1.8通过 append() 和 prepend() 方法添加若干新元素

实例

function appendText()
{
var txt1="<p>Text.</p>";              // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text.");  // 以 jQuery 创建新元素
var txt3=document.createElement("p");
txt3.innerHTML="Text.";               // 通过 DOM 来创建文本
$("body").append(txt1,txt2,txt3);        // 追加新元素
}

<p>This is a paragraph.</p>
<button οnclick="appendText()">追加文本</button>

---
This is a paragraph.
Text.
Text.
Text.

1.9jQuery after() 和 before() 方法

jQuery after() 方法在被选元素之后插入内容。

jQuery before() 方法在被选元素之前插入内容。

实例

  $("#btn1").click(function(){
    $("img").before("<b>Before</b>");
  });

  $("#btn2").click(function(){
    $("img").after("<i>After</i>");
  });

---BeforeBeforeW3School LogoAfterAfter


1.10通过 after() 和 before() 方法添加若干新元素

after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。

在下面的例子中，我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中（对 before() 同样有效）：

实例

function afterText()
{
var txt1="<b>I </b>";                    // 以 HTML 创建新元素
var txt2=$("<i></i>").text("love ");     // 通过 jQuery 创建新元素
var txt3=document.createElement("big");  // 通过 DOM 创建新元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);          // 在 img 之后插入新元素
}

---W3School LogoI love jQuery!


1.11jQuery remove() 方法

jQuery remove() 方法删除被选元素及其子元素。

jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

该参数可以是任何 jQuery 选择器的语法。

下面的例子删除 class="italic" 的所有 <p> 元素：

实例

$(document).ready(function(){
  $("button").click(function(){
    $("p").remove(".italic");
  });
<p>This is a paragraph in the div.</p>
<p class="italic"><i>This is another paragraph in the div.</i></p>
<p class="italic"><i>This is another paragraph in the div.</i></p>
<button>删除 class="italic" 的所有 p 元素</button>

---
This is a paragraph in the div.
This is another paragraph in the div.
This is another paragraph in the div.
变

This is a paragraph in the div.

1.12jQuery empty() 方法

jQuery empty() 方法删除被选元素的子元素。


1.13jQuery addClass() 方法

下面的例子展示如何向不同的元素添加 class 属性。

实例

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").addClass("blue");
    $("div").addClass("important");
  });
});
</script>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
</head>
<body>

<h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<div>这是非常重要的文本！</div>
<br>
<button>向元素添加类</button>

您也可以在 addClass() 方法中规定多个类<script>

实例

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").addClass("important blue");
  });
});
</script>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
</head>
<body>

<div id="div1">这是一些文本。</div>
<div id="div2">这是一些文本。</div>
<br>
<button>向第一个 div 元素添加类</button>

1.14jQuery removeClass() 方法

下面的例子演示如何不同的元素中删除指定的 class 属性：

实例

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});


1.15jQuery toggleClass() 方法

下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作

实例

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

1.16jQuery width() 和 height() 方法

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

实例

<script>
$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="Width of div: " + $("#div1").width() + "</br>";
    txt+="Height of div: " + $("#div1").height();
    $("#div1").html(txt);
  });
});
</script>
</head>
<body>

<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>
<button>显示 div 的尺寸</button>
<p>width() - 返回元素的宽度。</p>
<p>height() - 返回元素的高度。</p>

1.17jQuery innerWidth() 和 innerHeight() 方法

innerWidth() 方法返回元素的宽度（包括内边距）。

innerHeight() 方法返回元素的高度（包括内边距）。

实例

<script>
$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="Width of div: " + $("#div1").width() + "</br>";
    txt+="Height of div: " + $("#div1").height() + "</br>";
    txt+="Inner width of div: " + $("#div1").innerWidth() + "</br>";
    txt+="Inner height of div: " + $("#div1").innerHeight();
    $("#div1").html(txt);
  });
});
</script>
</head>

<body>
<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>

<button>显示 div 的尺寸</button>
<p>innerWidth() - 返回元素的宽度（包括内边距）。</p>
<p>innerHeight() - 返回元素的高度（包括内边距）。</p>

1.18jQuery outerWidth() 和 outerHeight() 方法

outerWidth() 方法返回元素的宽度（包括内边距和边框）。

outerHeight() 方法返回元素的高度（包括内边距和边框）。

实例

<script>
$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="Width of div: " + $("#div1").width() + "</br>";
    txt+="Height of div: " + $("#div1").height() + "</br>";
    txt+="Outer width of div: " + $("#div1").outerWidth() + "</br>";
    txt+="Outer height of div: " + $("#div1").outerHeight();
    $("#div1").html(txt);
  });
});
</script>
</head>

<body>
<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>

<button>显示 div 的尺寸</button>
<p>outerWidth() - 返回元素的宽度（包括内边距和边框）。</p>
<p>outerHeight() - 返回元素的高度（包括内边距和边框）。</p>

outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。

outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。

实例

<script>
$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="Width of div: " + $("#div1").width() + "</br>";
    txt+="Height of div: " + $("#div1").height() + "</br>";
    txt+="Outer width of div (margin included): " + $("#div1").outerWidth(true) + "</br>";
    txt+="Outer height of div (margin included): " + $("#div1").outerHeight(true);
    $("#div1").html(txt);
  });
});
</script>
</head>
<body>

<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>
<button>显示 div 的尺寸</button>
<p>outerWidth(true) - 返回元素的宽度（包括内边距、边框和外边距）。</p>
<p>outerHeight(true) - 返回元素的高度（包括内边距、边框和外边距）。</p>

1.19jQuery - 更多的 width() 和 height()

下面的例子返回文档（HTML 文档）和窗口（浏览器视口）的宽度和高度：

实例

<script>
$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="Document width/height: " + $(document).width();
    txt+="x" + $(document).height() + "\n";
    txt+="Window width/height: " + $(window).width();
    txt+="x" + $(window).height();
    alert(txt);
  });
});
</script>
</head>
<body>

<button>显示文档和窗口的尺寸</button>

下面的例子设置指定的 <div> 元素的宽度和高度：

实例

$("button").click(function(){
  $("#div1").width(500).height(500);
});

一起happy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jqueryhtml文件
10-12
jquery提供的波形图html文档，纯粹的html布局与框架
jQuery--内容操作（html()、text()、val()）详解
吴声子夜歌的博客
10-01 1716
样式操作 在jQuery中，提供了html()和text()方法用于操作页面元素的内容，val()方法用于操作表单元素的值。以上方法的使用方式基本相同，当方法没有提供参数时，表示获取匹配元素的内容或值；当方法携带参数时，表示对匹配元素的内容或值进行修改。 1. html()方法： html()方法用于获取第一个匹配元素的HTML，内容或修改匹配元素的HTML内容，方方法仅对XHTML文档有效，不能...
jqury中的html方法,jQuery中html()方法用法实例
weixin_35421203的博客
06-19 2044
本文实例讲述了jQuery中html()方法用法。分享给大家供大家参考。具体分析如下：此方法能够设置和取得匹配元素的HTML内容，原来的内容将会被新设置的内容替换。特别说明:HTML内容就是内容中可以包含HTML标签，并且能够被浏览器渲染。文本内容是先将内容中的HTML预定义字符转换成html字符实体，这样HTML标签就不会被渲染。语法结构一:复制代码 代码如下:$(selector).html(...
jQuery html( )方法
m0_57835615的博客
06-06 1354
jQuery html( )方法可以设置或返回所选元素的内容，值得一提的是，该方法可以解析HTML代码。 （1）获取内容 示例：
05-jQuery-DOM操作-内容操作html()、text()、val()
记录java学习日常~
05-24 525
jQuery 提供了三个用于内容操作的方法，分别是 html()、text() 和 val()，它们分别用来获取或设置指定元素的 HTML 内容、文本内容和值属性。下面分别进行详细介绍。
jquery html5三维线性人物关系图特效代码
11-24
jquery html5三维线性人物关系图特效代码
jquery html导出excel
05-18
jquery html导出excel
jQuery HTML5人物介绍卡片特效特效代码
03-20
jQuery HTML5人物介绍卡片特效是一款基于jquery.material-cards插件实现的人物介绍卡片形式特效代码。
jQuery HTML5添加到购物车特效代码
03-20
jQuery HTML5添加到购物车代码是一款支持选择颜色跟样式的添加购物车代码。
jQuery中html()方法用法实例
12-10
本文实例讲述了jQuery中html()方法用法。分享给大家供大家参考。具体分析如下： 此方法能够设置和取得匹配元素的HTML内容，原来的内容将会被新设置的内容替换。 特别说明: HTML内容就是内容中可以包含HTML标签，并且能够被浏览器渲染。 文本内容是先将内容中的HTML预定义字符转换成html字符实体，这样HTML标签就不会被渲染。 语法结构一: 代码如下:$(selector).html() 此时方法不带参数时候是取得第一个匹配元素的html内容。 此方法与text()方法没有参数用法类似，但是还是有很大区别： 一.html()方法取得第一个匹配元素的内容，而text()方法是取得
jQuery html()方法使用不了无法显示内容的问题
12-12
$("#content").html(data.content); $("#content")[0][removed] = data.content; 今天遇到jquery中的html方法使用不了，只能用完最基本的innerHTML把内容展示出来。具体原因还没找到，肯定跟内容有关，展示不了的html放上来供以后检查原因，是我收到csdn的一封邮件。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><meta http-equiv="Content-Type" content="text
jQuery - 获取设置 CSS 类
work hard
02-17 334
通过 jQuery，可以很容易地对 CSS 元素进行操作。 jQuery 操作 CSS jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些： addClass() - 向被选元素添加一个或多个类removeClass() - 从被选元素删除一个或多个类toggleClass() - 对被选元素进行添加/删除类的切换操作css() - 设置或返回样式属性
JQuery text(),html()
houyanhua1的专栏
12-17 234
text(),html()。相当于JavaScript中的innerHTML属性。 $(function () { //将jquery对象转换成dom对象：通过jquery的选择器得到的数组,通过[下标]的形式返回dom对象 //将dom对象转换成jquery对象：dom对象加$()就转换成do
HTML中引用jquery不生效
热门推荐
大爱无疆的疯子的博客
09-01 1万+
今天写测试的文件，在html中引用jquery库的时候，被自己犯下的错误蠢哭了 上传图片 $(function(){ function upload() { alert(111); } }) 最后发现是script类型写错了，应该是type="text/javascript"; $(function(){ f
jQuery html（）示例
一名可爱的技术搬运工
05-23 163
jQuery html（）用于获取匹配元素的第一个元素的html内容； 而html（'new html content'）用于替换或设置所有匹配元素的html内容。 例如，两个包含相同类名“ AClass”的div元素。 <div class="AClass">ABC 1</div> <div class="AClass">ABC 2</div&...
jQuery中的html(),text(),val()三种方法
weixin_49757916的博客
05-17 981
jQuery 一·jQuery中的html()方法的讲解： 公共代码css： <style> div{ width:200px; height:200px; background-color:red; } </style> 1·JavaScript中的html()方法，代码如下： <body> <div id="box"&gt
android手机应用源码Imsdroid语音视频通话源码.rar
最新发布
05-20
android手机应用源码Imsdroid语音视频通话源码.rar
jQuery html2canvas
08-09
jQuery html2canvas是一个开源的JavaScript库，用于将网页上的HTML元素转换为Canvas图像。它可以帮助我们实现网页截图、图像生成和图像处理等功能。 使用jQuery html2canvas，你可以通过以下步骤来实现将HTML元素...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值