jquery 设置元素内容html(),text(),val()

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>wrap</title>
 6     <script type="text/javascript" src="../jquery/jquery-1.11.3.min.js"></script>
 7     <style type="text/css">
 8     </style>
 9 </head>
10 <body>
11 <a href="http://www.baidu.com" class="baidu">百度</a>
12 <a href="http://www.souhu.com" class="souhu">百度</a>
13 <a href="http://www.xinlang.com" class="xinlng">百度</a>
14 <img src="1.jpg" alt="这是张图片"/>
15 <input type="text" value="你好"/>
16 <input type="password" value="123456"/>
17 <input type="email" value="[email protected]"/>
18 <script type="text/javascript">
19     $(document).ready(function () {
20         $("a").text(function(index,elem){
21             if(index==1){
22                 return "搜狐";
23             }else if(index==2){
24                 return "新浪";
25             }
26         });
27         //动态获取表单元素的属性和值
28         $("input").each(function(index,elem){
29             console.log($(elem).attr("type")+":"+$(elem).val());
30         });
31
32         $("input").each(function(index,elem){//index是索引 elem是当前元素
33
34             switch (index){
35                 case 0:
36                     $(elem).val("你是谁?");
37                     break;
38                 case 1:
39                     $(elem).val("65321");
40                     break;
41                 case 2:
42                     $(elem).val("[email protected]")
43             }
44         });
45
46
47         $("input").val(function(index,elem){//index是索引 elem是当前属性值
48             if(index==0){
49                 return "你不是人?";
50             }else if(index==1){
51                 return "215412121";
52
53             }else if(index==2){
54                 return "[email protected]";
55             }
56         });
57
58
59         //给元素绑定数据
60         $("img").each(function(){
61             $(this).data("product",$(this).siblings("input").val());
62         });
63         $("*").filter(function(){
64             return $(this).data !=null;
65         }).each(function(){
66             console.log($(this).data("product"));
67         });
68         $("img").removeData();
69     });
70
71 </script>
72 </body>
73 </html>
时间: 2024-10-20 03:59:05

jquery 设置元素内容html(),text(),val()的相关文章

jQuery学习-访问设置元素内容

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>访问设置元素内容</title> <script src="js/jquery.js"></script> <script type="text/javascript"> //页面加载完成简写形式 $(function()

【jQuery源码】html,text,val

jQuery封装的方法html,text,val .html()用为读取和修改元素的HTML标签 .text()用来读取或修改元素的纯文本内容 .val()用来读取或修改表单元素的value值 一.html() 1.取值 获取集合中第一个匹配元素的HTML内容 在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容. 如果选择器匹配多个元素,那么只有第一个匹配元素的 HTML 内容会被获取 源码部分可见jQuery.access在属性节点操作的时候就详解过了,就是

jquery设置元素readonly与disabled属性的方法

分享下jquery设置元素readonly与disabled属性的方法,设置元素的显示与隐藏,元素的只读属性. 以下内容转自:http://www.jbxue.com/article/15102.html 略作修改与补充. Jquery的api中提供了对元素应用disabled和readonly属性的方法: 1,设置readonly属性 $('input').attr("readonly","readonly")//将input元素设置为readonly $('in

jQuery - 设置获取内容和属性

获取选中select :$("#id option:selected").val(); 自定义radio:    $("input[name=sex][value="+data.sex+"]").attr("checked",true); 获取radio:           $("input[name='sex']:checked").val() 设置input不能编辑:$("#cashNum&

jQuery操作元素内容的相关方法

1.前言 jQuery还提供了以下几个方法来访问或设置DOM元素的内容,包含访问或设置这些DOM元素的innerHTML属性.文本内容和value属性. 1)        html():返回jQuery对象包含的第一个匹配DOM元素的HTML内容. 2)        html(val):设置jQuery对象包含的所有DOM元素的HTML内容. 3)        text():返回jQuery对象包含的所有DOM元素的文本内容. 4)        text(val):设置jQuery对象包

jquery - 设置/获取内容和属性

一般我们会遇到给某个元素添加或更改原有的文字: 1. 设置/获取内容 - text().html() 以及 val() 设置内容常用的三个方法: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() - 设置或返回表单字段的值 eg: 通过 text().html() 以及 val() 方法来设置/获取内容: $("#btn1").click(function(){ $("#test1").t

JQuery 设置元素的高度和宽度相等

有时需要设置下面的情况,即 <div> 的高度和宽度是相等的.并且随着屏幕的大小变化而变化.这样就需要用 js 来控制元素在页面上的显示. <html> <body> <div class="row text-center margin-top-20p"> <div class="col bgcolor-FF9600 border-radius-5p margin-2p height-width"> <

jquery中选择器的 html() text() val() attr() 方法的区别与使用方式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html() text() val() attr()</title> <script src="./js/jquery-1.12.4.min.js"></script> <script> $(funct

jQuery设置Select选择的 Text和Value

语法解释: 复制代码代码如下: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text 3. var checkValue=$("#select_id").val();