Jquery中.val()与.value之间的区别_jquery val value

作者：凡人多烦事01 | 2024-02-18 21:35:34

踩

jquery val value

三年多没敲过代码了，今年打算捡起来，是需要多么大的勇气。但是为了实现自我价值，履行自我的承诺，这就是责任。没有什么难不难，晚不晚之说，是我经常对别人说的那样，再晚不过心晚，，一切努力了，实现了每一天的价值，结果也就不重要了，说起来我的经历有点像刘强东，什么事儿都干过……哈哈不说了，简短吐下槽，开始今天的总结。

1、Juqery中.val()与.value之间的区别
先说理论：
.val()方法，一个是带参：给输入框赋值，一个是不参数的方法：获取输入框的值
.value：获取Dom标签元素的value值，属于原生态JavaScript的写法

知道大概理论之后我们上code，解析一次

2、用代码区别两者的差异

A、.val()之code


 
 
   
   
    
    
   
   
   
   
    
    
     
     <!DOCTYPE HTML>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <html>
    
    
   
   

   
   
    
    
   
   
   
   
    
     
    
    
   
   

   
   
    
    
   
   
   
   
    
    	
     
     <head>
    
    
   
   

   
   
    
    
   
   
   
   
    
    		
     
     <meta charset=UTF-8 />
    
    
   
   

   
   
    
    
   
   
   
   
    
    		
     
     <title>Nothing
     
     </title>
    
    
   
   

   
   
    
    
   
   
   
   
    
    		
     
     <style type="text/css">
     
     
    
    
   
   

   
   
    
    
   
   
   
   
    
     
    
    
   
   

   
   
    
    
   
   
   
   
    
    		
     
     </style>
    
    
   
   

   
   
    
    
   
   
   
   
    
    		
     
     <script type="text/javascript" src="js/jquery-3.3.1.min.js" >
     
     
     
     </script>
    
    
   
   

   
   
    
    
   
   
   
   
    
    		
     
     <script type="text/javascript">
     
     
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     		$(
     
     document).ready(
     
     function(){
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     			$(
     
     "#txt_1").val(
     
     "");
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     			$(
     
     "#btn_submit").on(
     
     "click",
     
     function(){
    
    
   
   

   
   
    
    
   
   
   
   
    
    				
     
     //我们开始给文本框赋值
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     					$(
     
     "#txt_1").val(
     
     "大吉大利，今晚吃鸡");
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     					alert($(
     
     "#txt_1").val());
     
     //获取文本框的值
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     			})
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     		})
    
    
   
   

   
   
    
    
   
   
   
   
    
    		
     
     </script>
    
    
   
   

   
   
    
    
   
   
   
   
    
    	
     
     </head>
    
    
   
   

   
   
    
    
   
   
   
   
    
     
    
    
   
   

   
   
    
    
   
   
   
   
    
    	
     
     <body>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     		笔名：
     
     <input type="text" id="txt_1" />
    
    
   
   

   
   
    
    
   
   
   
   
    
    		
     
     <input type="button" id="btn_submit" value="赋值给笔名文本框">
    
    
   
   

   
   
    
    
   
   
   
   
    
    	
     
     </body>
    
    
   
   

   
   
    
    
   
   
   
   
    
     
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </html>
    
    
   
   
 
 
1

B、.value之code


 
 
   
   
    
    
   
   
   
   
    
    
     
     <!DOCTYPE html>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <html lang="en">
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <head>
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     <meta charset="UTF-8">
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     <title>Document
     
     </title>
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     <script type="text/javascript" src="js/jquery-3.3.1.min.js" >
     
     
     
     </script>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </head>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <body>
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     <div id="box">
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     <input type="text">
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     <input type="text">
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     <input type="text">
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     <input type="text">
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     <input type="button" id="btn" onclick="Total()" value="转化为数组">
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     </div>
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     <!--<script src="这里是jquery文件路径"></script>-->
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     <script>
     
     
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     function Total() {
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     var numArr = []; 
     
     // 定义一个空数组
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     var txt = $(
     
     '#box').find(
     
     ':text'); 
     
     // 获取所有文本框
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     var s=txt.eq(
     
     0).val(); 
     
     //jquery的写法
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     var ss=txt[
     
     0].value;
     
     //JavaScript的写法 //如果是获取btn的值就要用value了 
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             alert(s);
    
    
   
   

   
   
    
    
   
   
   
   
    
            
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         }
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     </script>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </body>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </html>
    
    
   
   
 
 
1

今天就遇到这个问题，纠结了半天，通过这个例子自己也就明白了。

小白书写中，还望各位大牛引路，有什么不正确之处希望指定

                    <li class="tool-item tool-active is-like "><a href="javascript:;"><svg class="icon" aria-hidden="true">
                        <use xlink:href="#csdnc-thumbsup"></use>
                    </svg><span class="name">点赞</span>
                    <span class="count">4</span>
                    </a></li>
                    <li class="tool-item tool-active is-collection "><a href="javascript:;" data-report-click="{&quot;mod&quot;:&quot;popu_824&quot;}"><svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-csdnc-Collection-G"></use>
                    </svg><span class="name">收藏</span></a></li>
                    <li class="tool-item tool-active is-share"><a href="javascript:;"><svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-csdnc-fenxiang"></use>
                    </svg>分享</a></li>
                    <!--打赏开始-->
                                            <!--打赏结束-->
                                            <li class="tool-item tool-more">
                        <a>
                        <svg t="1575545411852" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5717" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M179.176 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5718"></path><path d="M509.684 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5719"></path><path d="M846.175 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5720"></path></svg>
                        </a>
                        <ul class="more-box">
                            <li class="item"><a class="article-report">文章举报</a></li>
                        </ul>
                    </li>
                                        </ul>
            </div>
                        </div>
        <div class="person-messagebox">
            <div class="left-message"><a href="https://blog.csdn.net/qq_20617983">
                <img src="https://profile.csdnimg.cn/E/6/7/3_qq_20617983" class="avatar_pic" username="qq_20617983">
                                        <img src="https://g.csdnimg.cn/static/user-reg-year/2x/5.png" class="user-years">
                                </a></div>
            <div class="middle-message">
                                    <div class="title"><span class="tit"><a href="https://blog.csdn.net/qq_20617983" data-report-click="{&quot;mod&quot;:&quot;popu_379&quot;}" target="_blank">Jonckys</a></span>
                                        </div>
                <div class="text"><span>发布了56 篇原创文章</span> · <span>获赞 42</span> · <span>访问量 7万+</span></div>
            </div>
                            <div class="right-message">
                                        <a href="https://im.csdn.net/im/main.html?userName=qq_20617983" target="_blank" class="btn btn-sm btn-red-hollow bt-button personal-letter">私信
                    </a>
                                                        <a class="btn btn-sm  bt-button personal-watch" data-report-click="{&quot;mod&quot;:&quot;popu_379&quot;}">关注</a>
                                </div>
                        </div>
                </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/110721