jQuery 入门教程(13): HTML Set

最新推荐文章于 2025-04-26 07:40:18 发布
转载 最新推荐文章于 2025-04-26 07:40:18 发布 · 60 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://my.oschina.net/u/194743/blog/164578
文章标签：

#javascript #python #ViewUI

本文介绍了如何使用jQuery的text(), html() 和 val()方法来获取或修改网页中的元素文本内容、HTML内容以及表单输入域的值。同时展示了如何利用这些方法结合回调函数实现对元素内容的灵活控制。

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

上篇介绍HTML Get，jQuery其实使用上面同样的三个方法来赋值。

  • text() – 设置或取得指定元素的文本内容。
  • html() – 设置或取得指定元素的内容（包括HTML标记）
  • val() – 设置或取得表单某个输入域的值。

比如下面代码就是使用上面三种方法给HTML元素或Form赋值

[javascript]  view plain copy print ?
  1. $("#btn1").click(function(){  
  2.    $("#test1").text("Hello world!");  
  3.  });  
  4.  $("#btn2").click(function(){  
  5.    $("#test2").html("<b>Hello world!</b>");  
  6.  });  
  7.  $("#btn3").click(function(){  
  8.    $("#test3").val("Dolly Duck");  
  9.  });  
  10.    

用于text(),html()和val()的回调函数

text(),html()和val()方法可以和一个回调函数配合使用，这个回调函数具有两个参数，一个是选择中元素的序号，第二个为当前值（旧值），然后你可以通过回调函数的返回值做为元素的新值。
例如：

[html]  view plain copy print ?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>JQuery Demo</title>  
  6.     <script src="scripts/jquery-1.9.1.js"></script>  
  7.     <script>  
  8.         $(document).ready(function () {  
  9.             $("#btn1").click(function () {  
  10.                 $("#test1").text(function (i, origText) {  
  11.                     return "Old text: " + origText  
  12.                         + " New text: Hello world! (index: " + i + ")";  
  13.                 });  
  14.             });  
  15.   
  16.             $("#btn2").click(function () {  
  17.                 $("#test2").html(function (i, origText) {  
  18.                     return "Old html: " + origText  
  19.                         + " New html: Hello <b>world!</b> (index: " + i + ")";  
  20.                 });  
  21.             });  
  22.   
  23.         });  
  24.     </script>  
  25. </head>  
  26.   
  27. <body>  
  28.     <p id="test1">This is a <b>bold</b> paragraph.</p>  
  29.     <p id="test2">This is another <b>bold</b> paragraph.</p>  
  30.     <button id="btn1">Show Old/New Text</button>  
  31.     <button id="btn2">Show Old/New HTML</button>  
  32. </body>  
  33. </html>  
20130309001
同样为元素的属性赋值也使用attr()方法，例如：
[javascript]  view plain copy print ?
  1. $("button").click(function(){  
  2.    $("#guidebee").attr({  
  3.      "href" : "http://www.imobilebbs.com",  
  4.      "title" : "imobilebbs jQuery Tutorial"  
  5.    });  
  6.  });   

转载于:https://my.oschina.net/u/194743/blog/164578

jQuery入门第一课 jQuery选择符
10-29
jQuery是一个快速、小巧、功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互过程，使得Web开发变得更加简单。它广泛应用于网页的前端开发，对于新手来说，了解jQuery的基本操作是学习前端...
HTML Set
bbl_bbg的专栏
02-17 841
text() – 设置或取得指定元素的文本内容。 html() – 设置或取得指定元素的内容（包括HTML标记） val() – 设置或取得表单某个输入域的值。 比如下面代码就是使用上面三种方法给HTML元素或Form赋值     [javascript]   $("#btn1").click(function(){      $("#test1").text("Hello wor
js_set.html
weixin_42193179的博客
01-19 421
&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial
JQuery详细教程三之HTML(get,add,set,delete方法)
无名
07-18 772
JQuery详细教程三之HTML
jquery当中如何Set和Get文本
mark_to_win的专栏
03-27 481
例 1.3（SetGetinnerHtml.html） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> </TITLE> <script src="jquery.js"></script> &l...
JqueryMobile入门教程：班级新闻页设计实训指南
### 知识点：JqueryMobile快速上手教程 #### 一、JqueryMobile简介 JqueryMobile是jQuery在移动设备上的版本，它是一个针对手机和平板电脑等移动设备而设计的前端框架，能够让开发者仅使用HTML、CSS和JavaScript便...
jQuery入门指南：写得少，做得多
1. **单一函数实现set和get**：jQuery 的许多方法如 `.css()`、`.attr()` 可以用于设置或获取属性值。 2. **集合处理功能**：jQuery 对象通常包含多个DOM元素，可以像数组一样处理，支持链式调用，如 `$('selector')...
jQuery入门打造多功能WEB计算器教程
jQuery入门教程：实现WEB计算器的加减乘除功能 在当今的网络环境中，Web应用程序越来越受到用户的喜爱，其中计算器作为一款基础的工具应用，备受关注。使用jQuery实现WEB计算器的加减乘除功能，不仅能够帮助用户...
课题-jQuery-LigerUI-使用教程入门篇.pdf
11-11
1. **引入资源**：在HTML文件中，你需要引入jQuery库，以及LigerUI的CSS和JS文件。通常这些文件可以从LigerUI的CDN或者本地路径引用。 2. **初始化控件**：通过jQuery的选择器找到对应的DOM元素，然后调用....
无涯教程-HTML - ＜fieldset＞属性
无涯教程
04-16 588
HTML <fieldset>标签用于对相关表单元素进行分组。
HTML fieldset & legend
最新发布
monian187的博客
04-26 667
html 表单分组 fieldset & legend
HTML标签基础
小白的博客
08-20 583
HTML标签基础
html中setAttribute属性给控件赋予新属性
user_app的博客
01-02 2102
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <style> body{ background: url(img/abc.jpg) no-repeat ; backgrou
jQuery中.html() 方法?
墓亦龍的博客
03-30 1万+
.html() 方法?1、定义及用法：html()方法返回被选元素的内容，即括号内未设置参数。                          若设置参数，返回设置参数的内容。                          并且该参数内容覆盖所有想匹配的元素的内容                          参数可为函数，即function(index,dcontent)       ...
html中settransform示例
行善之人必有余庆
05-27 1061
setTransform function draw(id) { var canvas=document.getElementById(id); var context=canvas.getContext('2d'); context.strokeStyle="red"; context.strokeRect(30,10,60,20); var rad=45*Mat
jQuery动态添加html
热门推荐
天下闻的博客
08-18 3万+
在日常 web 开发中，经常遇到需要操作 HTML DOM 今天我们来总结下通过 jQuery 来动态添加 html 首先我们来对这些方法做个总结 方法 说明 html() 设置或返回匹配的元素集合中的 HTML 内容 prepend() 向匹配元素集合中的每个元素开头插入由参数指定的内容 prependTo() 向目标开头...
JQuery中的html()方法
wt_better的博客
10-26 5121
html() html(htmlString) html(function)
HTML fieldset控件
歪脖先生的博客
04-13 2476
fieldset控件如果一个表单上有很多信息需要填写，可以使用 fieldset控件将相关的元素组合在一起，使表单更容易理解。表单越容易理解，访问者就越有可能正确地填写表单。fieldset即field set，顾名思义，就是表单中field的集合。从名称就能知道，它会生成 field 的集合，用于对表单中的元素进行分组。一个表单中可以有多个fieldset控件。为了识别每个 fieldset控件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值