jQuery修改标签的内容或值

最新推荐文章于 2024-05-15 16:01:44 发布
最新推荐文章于 2024-05-15 16:01:44 发布
阅读量3.4w 收藏 4
点赞数 2
分类专栏： 学习日记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/licanty/article/details/71629288
版权

我一直知道要修改标签的内容和值有三种方式，但是最近遇到一项目却让我在改变表单元素的值上浪费了很多时间，其实我大概都知道他们的区别在哪里，只是有的时候总是会忘记，现在就来给几个简单的例子，希望以后不要再犯糊涂；

1.关于表单

这里我就写一个关于textarea的例子吧，

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style type="text/css">
.modle-wrap{
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 999;
    left: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5
    )!important;
    background: #000;
    filter: alpha(opacity=80); 	/*ie6/7/8*/
    display: none;
}
.modle-container{
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
}
.refuse{
	width: 740px;
	height: 350px;
	position: absolute;
	left:50%;
	top:50%;
	margin-top:-175px;
	margin-left:-370px;
	background: #fff;
}
.refuse_title{
	height: 50px;
	font-size: 16px;
	line-height: 50px;
	background: #1A8CDC;
	color: #fff;
}
.refuse_content{
	padding:40px 30px 0;
	width: 100%;
}
.refuse_word_height{
	width: 628px;
	height: 150px;
	overflow:scroll;
	overflow-x: hidden;
}
.refuse_word{
	width: 628px;
	border:1px solid #CCCCCC;
	resize: none;
	min-height: 150px;
	height: auto;
	color: #999;
	line-height: 30px;
	padding:0 5px;
}
.refuse_btn{
	width: 160px;
	line-height: 36px;
	height: 36px;
	text-align: center;
	border:1px solid #1A8CDC;
	background: #fff;
	margin-top:40px;
	border-radius: 2px;
}
.refuse_btn+.refuse_btn{
	margin-left: 40px;
}
.refuse_btn.on{
	background: #1A8CDC;
	color: #fff;
}

</style>
<body>
<p class="agreen text_center">
	<button class="pc_btn on pointer pc_yes">同意</button>
	<button class="pc_btn pointer pc_no" id="">拒绝</button>
</p>
<div class="modle-wrap refuse_box">
	<div class="modle-container">
		<div class="refuse">
			<h5 class="refuse_title">拒绝原因</h5>
			<div class="refuse_content">
				<span class="float_left">原因</span>
				<div class="float_right" id="refuse_word_height">
					<textarea class="refuse_word" id="refuse_word">拒绝原绝原因拒绝原因拒绝原因拒绝原因拒绝原因拒绝原因拒绝原因拒绝原因拒绝原因拒绝原</textarea>
				</div>
			</div>
			<p class="refuse_btnOut">
				<button class="on refuse_btn yes" id="yes">确定</button>
				<button class="refuse_btn close" id="close">关闭</button>
			</p>
		</div>
	</div>
</div>
<script type="text/javascript" src="jquery-3.0.0.min.js"></script>
<script type="text/javascript">
	$(function(){
		$(".pc_no").click(function(){
				$(".refuse_box").show();
		})

	  	var refuse_word=$("#refuse_word").text();
	  	var focus=0;
	      $("#refuse_word").focus(function(){
	          focus+=1;
	          console.log(focus);
	          if(focus==1){
	              $("#refuse_word").text("");
	          }
	      });
	      $(".close").click(function(){
	          $(".modle-wrap").hide();
	      })
	        $(".yes").click(function () {
	          focus = 0;
	          $(".refuse_box").hide();
	          refuse_word="请输入拒绝原因";
	          console.log(refuse_word);
	          $("#refuse_word").val(refuse_word);
	      })
	     $(".refuse_btnOut .refuse_btn").click(function(){
			$(this).addClass("on").siblings('.refuse_btn').removeClass('on');
		})
	})
</script>
</body>
</html>
描述一下这个例子吧，点击“拒绝”会弹出拒绝原因填写页面，让文本框第一次获取焦点清空文本，在未提交（未按确定）之前关闭此页再次用过“拒绝”按钮打开此页任然保留数据，当点击“确认”就会将框类的值跟换成“请输入拒绝原因”；

我之前用text（）来获取值改更改值，发现始终在页面显示不出来，只能打印出来

总结，表单元素顺利修改他的内容，就的使用val（）；

2.再说说html（）与text（）的区别

不同点一：

   html()在获取元素内容时，如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。

   text()在获取元素内容时，结果是由所有匹配元素包含的文本内容组合起来的文本

  1. <p>段落一</p>  
  2. <p>段落二<p>   
  3.   
  4.   
  5. $(function(){  
  6.  alert($("p").text());  
  7. })  
  8.   
  9. 弹出框结果为： 段落一段落二  

 

 

 

 
 
 
  
 
   [javascript]  
   view plain 
    copy 
   
 
   
 
     
   在CODE上查看代码片 
   派生到我的代码片 
  
 
 
 
 
  1. $(function(){  
  2.     alert($("p").html());  
  3. })  
 

 

 不同点二：
 

html()在获取内容时，会将其中的其他标签也读取出来
 

  text()在获取内容时，会忽略其中的标签
 

不同点三：
 

    html()在更改内容时，可以加入标签
 

    text()更改的全是内容
 

 


                

        

        

    




    

      

        

            

              
                
                  lqdcanty
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    2
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    4
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
jQuery修改标签内容实例

				
			

			

				

					06-29
				

			

		

		

			
				
jQuery修改标签内容：超链接a标签、span标签、div标签以及form表单标签。

			
		

	



                

              
                



	

		

			

				
					
JS和Jquery获取和修改label的值的示例代码

				
			

			

				

					10-26
				

			

		

		

			
				
然而，与输入控件（如`<input>`）不同，`<label>` 标签并没有 `value` 属性来直接获取或设置其文本内容。在JavaScript (JS) 和 jQuery 中，处理`<label>`标签的值时需要采用不同的方法。本文将详细介绍如何在JS和...

			
		

	



                


  
              

                


	

		

			

				
					
jQuery获取更改标签内容、操作标签属性：html()、text()、val()、attr()、prop()

				
			

			

				

					YY的博客
				

				

					11-11
					
					2309
					
				

			

		

		

			
				
html()、text()、val()、attr()、prop()、

			
		

	





	

		

			

				
					
jQuery（二）修改元素、查找元素_jquery修改元素内容

					
最新发布

				
			

			

				

					2401_84572577的博客
				

				

					05-15
					
					358
					
				

			

		

		

			
				
Python所有方向的技术点做的整理，形成各个领域的知识点汇总，它的用处就在于，你可以按照下面的知识点去找对应的学习资源，保证自己学得较为全面。工具都帮大家整理好了，安装就可直接上手！当我学到一定基础，有自己的理解能力的时候，会去阅读一些前辈整理的书籍或者手写的笔记资料，这些笔记详细记载了他们对一些技术点的理解，这些理解是比较独到，可以学到不一样的思路。观看全面零基础学习视频，看视频学习是最快捷也是最有效果的方式，跟着视频中老师的思路，从基础到深入，还是很容易入门的。

			
		

	



		

			
		



	

		

			

				
					
django开发-使用jquery修改标签的属性值

				
			

			

				

					潮流 M I 的博客
				

				

					07-20
					
					356
					
				

			

		

		

			
				
django开发-使用jquery修改标签的属性值

			
		

	





	

		

			

				
					
javascript和jquery修改a标签的href属性

				
			

			

				

					10-26
				

			

		

		

			
				
要修改 a 标签的 href 属性，我们可以使用 `getElementById` 方法来获取特定 ID 的元素，然后通过 `setAttribute` 或直接访问其 `href` 属性来修改它。以下是具体的代码示例：  ```javascript // 使用 setAttribute ...

			
		

	





	

		

			

				
					
jQuery第三课 修改元素属性及内容的代码

				
			

			

				

					10-29
				

			

		

		

			
				
在jQuery中，对元素进行操作是其核心功能之一，尤其是修改元素的属性和内容，这在网页动态交互中非常常见。本节我们将深入探讨如何使用jQuery来改变HTML元素的属性和内容。  首先，jQuery提供了`each(iterator)`函数...

			
		

	





	

		

			

				
					
jquery设置text的值示例(设置文本框 DIV 表单值)

				
			

			

				

					10-26
				

			

		

		

			
				
在jQuery中，设置元素内容是常见的操作，特别是对于动态更新页面上的文本或表单值。本文将详细讲解如何使用`text()`、`html()`和`val()`方法来完成这一任务。  1. `text()`方法：  `text()`方法用于设置或获取元素的...

			
		

	





	

		

			

				
					
jquery获取对象方法 及修改标签内容

				
			

			

				

					陈福国的博客
				

				

					06-29
					
					1313
					
				

			

		

		

			
				
使用jQuery获取对象的方法及步骤
1.在文件中导入jQuery文件
2.在title位置导入
3.使用jQuery方法调用div或被调用元素的id 此处以div为例
$("#id名")；即获取jq对象
4.调用jq对象的方法：
1.对象.html();获得对象本身
2.对象.html(“新的内容”)；即显示新的内容  原有标签内容被修改
<!DOCTYPE html>
<ht...

			
		

	





	

		

			

				
					
jq设置html的fontsize,Jquery 设置字体大小（font-size）与行高(line-height)

				
			

			

				

					weixin_34652034的博客
				

				

					06-20
					
					820
					
				

			

		

		

			
				
Jquery 设置字体大小(font-size)与行高(line-height)var cssfontSize=$(".txt_container").css('font-size');var csslineHeight=$(".txt_container").css('line-height');var unit=cssfontSize.slice(-2);var fontSize=parseF...

			
		

	





	

		

			

				
					
jquery 对标签 文本 ，值，属性等操作

				
			

			

				

					qq_42335551的博客
				

				

					08-18
					
					1146
					
				

			

		

		

			
				
1  jquery给一个元素添加自定义属性目前见过两种方式

方式一：attr

方式二：data

这两种放方式都可以给元素添加自定义属性 

如：$('div').attr( " data-zidingyi" ，“dig” )

　　$('div').data( " data-zidingyi"  ，“dig”)　　

两种情况都可以；但一般情况用data因为他兼容性更好（注意！data是保存...

			
		

	





	

		

			

				
					
jQuery修改HTML属性、CSS样式、元素内容和位置宽高

				
			

			

				

					齐丶光
				

				

					12-17
					
					1002
					
				

			

		

		

			
				
理解jQuery中的getter和setter

getter和setter方是指获取和设置对象中的属性值的一类方法。jQuery中的也存在这类方法。在jQuery中，这类方法有一些基础的规则。

jQuery使用同一个方法既当getter用又当setter用，而不是定义一对方法。如果传入一个新值给该方法，则它设置此值；如果没有指定值，则它返回当前值。
	用作setter时，这些方法会给jQuer...

			
		

	





	

		

			

				
					
c# 通过字体对话框获取字体名称和字体大小_一次搞懂CSS 字体单位：px、em、rem 和 %...

				
			

			

				

					weixin_39924198的博客
				

				

					11-29
					
					553
					
				

			

		

		

			
				
对于绘图和印刷而言，「单位」很相当重要的，然而在网页排版里，单位也是同样具有重要性，在CSS3 普及以来，更添加了一些方便好用的单位( px、em、rem.. .等)，这篇文章将整理这些常用的CSS 单位，希望能够帮助到你在工作上能使用的更加得心应手。「网页」和「印刷」的单位目前我们接触的范围来说，若要把单位做区分，最简单可以分为「网页」和「印刷」两大类，通常对于CSS来说只会应用到网页的样​​式...

			
		

	





	

		

			

				
					
【jQuery】jQuery操作之如何修改元素_03

				
			

			

				

					青春木鱼的博客
				

				

					07-07
					
					2925
					
				

			

		

		

			
				
我们一说到jQuery中对于元素的修改，就是元素的内容、属性、样式的修改。我们利用html()   .text() .val()3个方法对元素内容进行修改；使用attr()、prop()方法来修改已获取到元素对象的属性 ，语法为“$元素对象.attr("属性名", "属性值")”；利用css()方法来设置CSS属性，修改元素css属性值；css()方法可以设置匹配的元素的一个或多个样式属性，语法“$(selector).css("属性","属性值");”..................

			
		

	





	

		

			

				
					
jQuery属性操作------03

				
			

			

				

					俗人世界
				

				

					01-05
					
					221
					
				

			

		

		

			
				
  jQuery属性操作详解

			
		

	





	

		

			

				
					
[前端 2]常用的JQuery和Dom页面取值与赋值

				
			

			

				

					该怎么解释？我懒得解释
				

				

					04-09
					
					2016
					
				

			

		

		

			
				
导读：书到用时方恨少，需要基础知识的时候，才悔恨自己没有总结学习好。前段时间调了好长时间的页面，突然发现自己之前不怎么在意的取值和赋值，真的是自己一个很薄弱的地方，有时候查半天都找不到一个对的，现在用自己的博客总结总结。以后直接查自己的博客，本篇博客纯属笔记性的文章。


一、基本取值和赋值
1.1，比较通用的方法：
$("#id").val();和document.getElement

			
		

	





	

		

			

				
					
jquery 取值 赋值

					
热门推荐

				
			

			

				

					quxiuer
				

				

					08-20
					
					4万+
					
				

			

		

		

			
				
$("")是一个jquery对象，而不是一个dom element value是dom element的属性 jquery与之对应的是val val() :获得第一个匹配元素的当前值。  val(val):设置每一个匹配元素的值。  取值：val = $("#id")[0].value; 赋值：可以   $

			
		

	





	

		

			

				
					
Jquery attr()方法 属性赋值和属性获取

				
			

			

				

					weixin_33834075的博客
				

				

					11-04
					
					4493
					
				

			

		

		

			
				
jquery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写，在jQuery DOM操作中会经常用到attr()，attr()有4个表达式。
1.attr(属性名)   //获取属性的值（取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined ）


2.at...

			
		

	





	

		

			

				
					
Jquery全面控制文本框技巧大全！（获取值和赋值、清空等）

				
			

			

				

					【敦厚的曹操】的专栏
				

				

					10-01
					
					1万+
					
				

			

		

		

			
				
$("#Text1").val("公交"); //赋值

           $("#Text1").val(""); //清空

          var mbt = $("#Text1").val();  // 获取值

    $(”#Text1”)[0].focus()// 文本框获得焦点


 
           $("#Text1").val("公交");

			
		

	





	

		

			

				
					
jQuery监听标签值是否被修改

				
			

			

				

					05-04
				

			

		

		

			
				
可以使用 `MutationObserver` 监听标签内容的变化。具体的实现可以参考下面的示例代码：

```javascript
// 监听标签内容变化
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    // 处理标签内容变化的逻辑
    console.log('标签内容被修改啦！', mutation.target.innerHTML);
  });    
});

// 配置监听选项
var config = { childList: true, subtree: true };

// 监听标签内容变化
observer.observe(document.getElementById('myTag'), config);
```

上面的代码中，`MutationObserver` 接受一个回调函数作为参数，该回调函数会在监听到标签内容变化时被触发。在回调函数中，我们可以获取到被修改的标签的内容，并作出相应的处理。同时，我们还需要指定监听选项，以告诉浏览器我们要监听哪些内容的变化。在本例中，我们指定了 `childList` 和 `subtree` 选项，表示我们要监听子节点的变化以及它们的子节点的变化。

			
		

	



              



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

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值