jQuery中prop()方法用法实例


Posted in Javascript onJanuary 05, 2015

本文实例讲述了jQuery中prop()方法用法。分享给大家供大家参考。具体分析如下:

此方法可以获取或者设置匹配元素的属性值。
根据方法参数的不同,作用也有所不同。

语法结构一:
当参数为属性名称时,此方法能够匹配元素集合中,第一个匹配元素指定属性名称的属性值。

$("selector").prop(name)

参数列表:

参数 描述
name 定义要获取其值的属性名称。

实例代码:

实例一:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>prop()函数-三水点靠木</title>

<style type="text/css">

ul{

  list-style:none;

}   

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  alert($("input[type='checkbox']").prop("checked"));

})

</script>

</head>

<body>

<ul>

  <li><input type="checkbox" checked="checked" value="1" /></li>

  <li><input type="checkbox" value="2" /></li>

</ul>   

</body>

</html>

以上代码可以返回被选中的checkbox的属性值。

实例代码二:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>prop()函数-三水点靠木</title>

<style type="text/css">

ul{

  list-style:none;

}   

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  alert($("li").prop("id"));

})

</script>

</head>

<body>

<ul>

  <li>三水点靠木欢迎您</li>

  <li id="mytest"><input type="checkbox" checked="checked" value="1" /></li>

  <li id="second"><input type="checkbox" value="2" /></li>

</ul>   

</body>

</html>

以上代码中,由于li元素集合中第一个li元素并没有id属性,所以返回值为空。

语法结构二:

以属性的“名/值对”对象方式设置所有匹配元素的属性值。

$(selector).prop(properties)

参数列表:

参数 描述
attribute:value 定义属性名/值对

实例代码:

实例一:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>prop()函数-三水点靠木</title>

<style type="text/css">

ul{

  list-style:none;

}   

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("input[type='checkbox']").prop({disabled:true})

})

</script>

</head>

<body>

<ul>

  <li><input type="checkbox" value="1" /></li>

  <li><input type="checkbox" value="2" /></li>

</ul>   

</body>

</html>

以上代码能够将选中所有复选框。

实例二:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>prop()函数-三水点靠木</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("td").prop({width:"200",height:"300"});

})

</script>

</head>

<body>

<table border="1">

<tr>

  <td>欢迎来到三水点靠木</td>

</tr>

</table>

</body>

</html>

以上代码可以设置td的宽度和高度。

语法三:

以属性名/值对方式设置所有匹配元素的属性值。

$(selector).prop(key,value)

参数列表:

参数 描述
key 定义要设置值的属性名称。
value 定义要设置的属性值。

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>prop()函数-三水点靠木</title>

<style type="text/css">

div{

  width:200px;

  height:200px;

  border:1px solid blue

}

.font{

  font-size:18px;

  color:yellow

}

.bg{

  background:#336;

}

.reset{

  color:green;

  font-size:20px;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("#btn").click(function(){

    $("div").prop("class","reset");

  })

})

</script>

</head>

<body>

<div class="font bg">三水点靠木欢迎您</div>

<button id="btn">点击查看效果</button>

</body>

</html>

以上代码可以为div设置指定的样式。

语法结构四:

通过函数返回值设置属性值。

$(selector).prop(name,function(index,oldvalue))

参数列表:

参数 描述
name 定义要设置值的属性的名称。
function(index,oldvalue) 定义返回属性值的函数 index - 可选,接受选择器的索引位置。 class - 可选,接受选择器的当前的属性值。

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>prop()函数-三水点靠木</title>

<style type="text/css">

div{

  height:200px;

  width:200px;

  border:1px solid blue

}

.font{

  font-size:18px;

}

.bg{

  background:#336;

  color:red;

}

.reset{

  font-size:20px;

  color:green;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("#btn").click(function(){

    $("div").prop("class" ,function(){

      return "reset"

    })

  })

})

</script>

</head>

<body>

<div class="font bg">三水点靠木欢迎您</div>

<button id="btn">点击查看效果</button>

</body>

</html>

以上代码可以为div设置指定的样式。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
jquery text()要注意啦
Oct 30 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
Mar 05 Javascript
用html+css+js实现的一个简单的图片切换特效
May 28 Javascript
js判断浏览器是否支持html5
Aug 17 Javascript
JavaScript操作cookie类实例
Mar 31 Javascript
javascript 动态脚本添加的简单方法
Oct 11 Javascript
vue-cli配置文件——config篇
Jan 04 Javascript
Vue数据绑定简析小结
May 07 Javascript
js实现搜索提示框效果
Sep 05 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
Oct 28 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
Nov 09 Javascript
Js类的构建与继承案例详解
Sep 15 Javascript
jQuery中removeAttr()方法用法实例
Jan 05 #Javascript
jQuery实现鼠标滚轮动态改变样式或效果
Jan 05 #Javascript
jquery.cookie.js使用指南
Jan 05 #Javascript
在Google 地图上实现做的标记相连接
Jan 05 #Javascript
js获取时间并实现字符串和时间戳之间的转换
Jan 05 #Javascript
jQuery中attr()方法用法实例
Jan 05 #Javascript
jQuery实现自定义下拉列表
Jan 05 #Javascript
You might like
PHP.MVC的模板标签系统(四)
2006/09/05 PHP
Smarty安装配置方法
2008/04/10 PHP
深入解析php之sphinx
2013/05/15 PHP
php实现图片局部打马赛克的方法
2015/02/11 PHP
PHP常用正则表达式精选(推荐)
2019/05/28 PHP
Javascript 刷新全集常用代码
2009/11/22 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
2015/10/13 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
2015/12/31 Javascript
Angularjs整合微信UI(weui)
2016/03/15 Javascript
js给table赋值的实例代码
2016/10/13 Javascript
原生js实现倒计时功能(多种格式调用)
2017/01/12 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
2021/01/27 Javascript
浅谈Angular 中何时取消订阅
2017/11/22 Javascript
JS中的JSON对象的定义和取值实现代码
2018/05/09 Javascript
解决eclipse中没有js代码提示的问题
2018/10/10 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
2019/09/19 Javascript
vue学习笔记之给组件绑定原生事件操作示例
2020/02/27 Javascript
[02:06]DOTA2英雄基础教程 暗影萨满
2013/12/16 DOTA
Python线程协作threading.Condition实现过程解析
2020/03/12 Python
python tkinter GUI绘制,以及点击更新显示图片代码
2020/03/14 Python
一款css实现的鼠标经过按钮的特效
2014/09/11 HTML / CSS
HTML5是否真的可以取代Flash
2010/02/10 HTML / CSS
倩碧美国官网:Clinique美国
2016/07/20 全球购物
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
加拿大时装零售商:Influence U
2018/12/22 全球购物
介绍一下ICMP(Internet Control Message Protocol)Internet控制信息协议
2016/11/26 面试题
单位成立周年感言
2014/01/26 职场文书
乡镇镇长个人整改措施
2014/10/01 职场文书
领导干部作风建设剖析材料
2014/10/11 职场文书
教师三严三实学习心得体会
2014/10/11 职场文书
万能检讨书开头与结尾怎么写
2015/02/17 职场文书
2015年七七事变78周年纪念活动方案
2015/05/06 职场文书
毕业班工作总结
2015/08/10 职场文书
简历中的自我评价怎么写呢?
2019/04/30 职场文书
2019自荐信该如何写呢?
2019/07/05 职场文书
JAVA 线程池(池化技术)的实现原理
2022/04/28 Java/Android