我们主要是通过attr去获取元素的属性：

看body内容：

  1. <body>
  2. 		<p>
  3. 			账号：<input type="text" id="uname" value="张三" />
  4. 		</p>
  5. 		<p>
  6. 			密码：<input type="password" id="pwd" value="123456" />
  7. 		</p>
  8. 		<p>
  9. 			<input type="button" id="but" value="显示表单的信息" />
  10. 		</p>
  11. 	</body>

如果需要获取密码的type，我们就需要通过面的id去获取：

  1. //获取密码
  2. var pwd=$("#pwd");
  4. //获取密码的type
  5. var tp=pwd.attr("type");

获取密码的value的俩种方式：

  1. //获取密码的value(获取的是默认值)
  2. var val=pwd.attr("value");
  3. //获取value的另一种方式(获取的是表单的实时值，用的更多)
  4. var val2=pwd.val();

注意：这里获取value的俩种方式。对应的结果不同：

操作表单元素：

同样也可以用attr

  1. $("#pwd").attr("type","text");
  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>10jQuery中操作元素的属性</title>
  6. 		<script type="text/javascript" src="js/jquery-1.12.3.min.js" ></script>
  7. 		<script>
  8. 			$(function(){
  9. 				$("#but").click(function(){
  10. 					//获取密码
  11. 					var pwd=$("#pwd");
  13. 					//获取密码的type
  14. 					var tp=pwd.attr("type");
  16. 					//获取密码的value(获取的是默认值)
  17. 					var val=pwd.attr("value");
  18. 					//获取value的另一种方式(获取的是表单的实时值，用的更多)
  19. 					var val2=pwd.val();
  21. 					console.log(tp+"<--->"+val+"<--->"+val2)
  23. 					//操作表单元素
  24. 					$("#pwd").attr("type","text");
  25. 					alert("操作成功！")
  26. 				});
  27. 			})
  28. 		</script>
  29. 	</head>
  30. 	<body>
  31. 		<p>
  32. 			账号：<input type="text" id="uname" value="张三" />
  33. 		</p>
  34. 		<p>
  35. 			密码：<input type="password" id="pwd" value="123456" />
  36. 		</p>
  37. 		<p>
  38. 			<input type="button" id="but" value="显示表单的信息" />
  39. 		</p>
  40. 	</body>
  41. </html>

获取元素对象属性：

俩种方式获取checked：

  1. //第一种获取checked
  2. var fav=$("#fav").attr("checked");
  4. //第二种获取checked，如有则返回true，没有返回false
  5. var fav=$("#fav").prop("checked");

由于第二种方式获取checked的返回值是布尔类型，因此我们可以通过这个方法去手动改变元素的默认值:

  1. //通过这个将checked属性添加给表单元素
  2. $("#fav1").prop("checked",true);
  3. //通过这个将checked属性从表单元素中删除
  4. $("#fav").prop("checked",false);

完整代码：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>11jQuery中操作元素对象属性</title>
  6. 	</head>
  7. 	<body>
  8. 		<!DOCTYPE html>
  9. <html>
  10. 	<head>
  11. 		<meta charset="utf-8">
  12. 		<title>10jQuery中操作元素的属性</title>
  13. 		<script type="text/javascript" src="js/jquery-1.12.3.min.js" ></script>
  14. 		<script>
  15. 			$(function(){
  16. 				$("#but").click(function(){
  17. 					//第一种获取checked
  18. 					var fav=$("#fav").attr("checked");
  20. 					//第二种获取checked，如有则返回true，没有返回false
  21. 					var fav=$("#fav").prop("checked");
  22. 					//通过这个将checked属性添加给表单元素
  23. 					$("#fav1").prop("checked",true);
  24. 					//通过这个将checked属性从表单元素中删除
  25. 					$("#fav").prop("checked",false);
  26. 					//alert(fav);
  27. 				})
  29. 			})
  30. 		</script>
  31. 	</head>
  32. 	<body>
  33. 		<p>
  34. 			账号：<input type="text" id="uname" value="张三" />
  35. 		</p>
  36. 		<p>
  37. 			密码：<input type="password" id="pwd" value="123456" />
  38. 		</p>
  40. 		<p>
  41. 			爱好：<input type="checkbox" name="" id="" value="" />抽烟
  42. 				<input type="checkbox" name="" id="fav" value="" checked="checked"/>喝酒
  43. 				<input type="checkbox" name="" id="fav1" value="" />烫头
  44. 		</p>
  45. 		<p>
  46. 			<input type="button" id="but" value="操作元素的属性" />
  47. 		</p>
  48. 	</body>
  49. </html>
  51. 	</body>
  52. </html>

JQuery中操作元素的属性_对象属性的更多相关文章

  1. JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...

  2. 【转发】JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法 //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#t ...

  3. 区分元素特性attribute和对象属性property

    × 目录 [1]定义 [2]共有 [3]例外[4]特殊[5]自定义[6]混淆[7]总结 前面的话 其实attribute和property两个单词,翻译出来都是属性,但是<javascript高 ...

  4. js进阶 11-18 jquery中操作选择器的方法有哪些

    js进阶 11-18 jquery中操作选择器的方法有哪些 一.总结 一句话总结:add().addBack().end() 1.add()方法是干嘛的,举一例? 将add()方法后选择器选择的jqu ...

  5. Jquery中删除元素方法

    empty用来删除指定元素的子元素,remove用来删除元素,或者设定细化条件执行删除 语法: empty() remove(expr); empty用来删除指定元素的子元素,remove用来删除元素 ...

  6. 如何在js或者jquery中操作EL表达式的一个List集合

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 先说明此篇博客看明白了可以干嘛: 就是在js或者jquery中操作一个EL表达式的一个list集合或者复杂类型 ...

  7. python-类属性和对象属性(转)

    class People(object): # 类属性是指定义在类的内部而且在方法的外部的属性 money = 10000 def __init__(self,name,age,gender=1): ...

  8. python类属性和对象属性、类的普通方法和静态方法

    类属性和对象属性的定义 class LearnClass(): #类属性 cls_attr = None def __init__(self,arg): #对象属性 self.obj_attr = a ...

  9. 锋利的jQuery读书笔记---jQuery中操作DOM

    一般来说,DOM的操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM jQuery中的DOM操作主要包括以下种类: 查找节点 查找元素节点 查找属性节点 创建节点 创建元素节点 创 ...

随机推荐

  1. java架构之路（MQ专题）kafka集群配置和简单使用

    前面我们说了RabbitMQ和RocketMQ的安装和简单的使用,这次我们说一下Kafka的安装配置,后面我会用几个真实案例来说一下MQ的真实使用场景.天冷了,不愿意伸手,最近没怎么写博客了,还请见谅 ...

  2. tp5验证码的使用

    <div><img id="verify_img" src="{:captcha_src()}" alt="验证码" on ...

  3. MySQL如何永久解决由dos编码格式导致MySQ的显示乱码

    MySQL如何永久解决由dos编码格式导致MySQ的显示乱码 Ⅰ.新建文件 changeCode.txt Ⅱ.粘贴下面代码(作用:将默认的GBK(936)修改为UTF-8(65001)) Window ...

  4. requests模块发送带headers的Get请求和带参数的请求

    1.在PyCharm开发工具中新建try_params.py文件: 2.try_params.py文件中编写代码: import requests#设置请求Headers头部header = {&qu ...

  5. jQuery—— 选择器汇总

    jQuery里的选择器有3种: 元素选择器,id选择器, 类选择器:   $("div") // 选择所有<div>元素 $("#test") // ...

  6. 如何评价 Vue 的 Function-based Component？

    作者:匿名用户链接:https://www.zhihu.com/question/325397290/answer/708418099来源:知乎 事实性错误: 那 vue 呢?它连 HOC 都没有,r ...

  7. scrapy_redis分布式爬虫

    文章来源:https://github.com/rmax/scrapy-redis Scrapy-Redis Documentation: https://scrapy-redis.readthedo ...

  8. docker中部署项目时遇到的问题

    容器和宿主机时间不同步问题? 将本地时间复制到docker容器内的etc文件夹下即可 docker cp /etc/localtime scrapy_8:/etc/ 启动crontab错误? 报错: ...

  9. CSS如何设置列表样式属性，看这篇文章就够用了

    列表样式属性 在HTML中有2种列表.无序列表和有序列表,在工作中无序列表比较常用,无序列表就是ul标签和li标签组合成的称之为无序列表,那什么是有序列表呢?就是ol标签和li标签组合成的称之为有序列 ...

  10. ubuntu 16.04源码编译OpenCV教程 | compile opencv on ubuntu 16.04

    本文首发于个人博客https://kezunlin.me/post/15f5c3e8/,欢迎阅读! compile opencv on ubuntu 16.04 Series Part 1: comp ...