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 相关文章推荐
自己写了一个展开和收起的多更能型的js效果
Mar 05 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
Oct 28 Javascript
js substring从右边获取指定长度字符串(示例代码)
Dec 23 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
Aug 12 Javascript
纯JavaScript实现的分页插件实例
Jul 14 Javascript
基于AngularJS+HTML+Groovy实现登录功能
Feb 17 Javascript
JS添加或修改控件的样式(Class)实现方法
Oct 15 Javascript
angular实现spa单页面应用实例
Jul 10 Javascript
函数式编程入门实践(一)
Apr 20 Javascript
Node.js开发之套接字(socket)编程入门示例
Nov 05 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
Dec 09 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
Nov 12 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编写PDF文档生成器
2006/10/09 PHP
测试您的 PHP 水平的题目
2007/05/30 PHP
PHP 组件化编程技巧
2009/06/06 PHP
PHP 向右侧拉菜单实现代码,测试使用中
2009/11/03 PHP
php实现的短网址算法分享
2014/06/20 PHP
php使用substr()和strpos()联合查找字符串中某一特定字符的方法
2015/05/12 PHP
php计算title标题相似比的方法
2015/07/29 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
去除链接虚线全面分析总结
2006/08/15 Javascript
从阿里妈妈发现的几个不错的表单验证函数
2007/09/21 Javascript
nodeJS代码实现计算交社保是否合适
2015/03/09 NodeJs
基于JavaScript如何实现ajax调用后台定义的方法
2015/12/29 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
2016/07/10 Javascript
DOM事件探秘篇
2017/02/15 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
2017/08/26 Javascript
Vue2.0生命周期的理解
2018/08/20 Javascript
vue使用codemirror的两种用法
2019/08/27 Javascript
OpenLayers加载缩放控件使用方法详解
2020/09/25 Javascript
微信小程序实现单个或多个倒计时功能
2020/11/01 Javascript
vue.js+element 默认提示中英文操作
2020/11/11 Javascript
Python常用模块用法分析
2014/09/08 Python
python编写爬虫小程序
2015/05/14 Python
基于asyncio 异步协程框架实现收集B站直播弹幕
2016/09/11 Python
浅谈机器学习需要的了解的十大算法
2017/12/15 Python
python机器学习库scikit-learn:SVR的基本应用
2019/06/26 Python
使用jupyter Nodebook查看函数或方法的参数以及使用情况
2020/04/14 Python
Python OrderedDict字典排序方法详解
2020/05/21 Python
css3 边框、背景、文本效果的实现代码
2018/03/21 HTML / CSS
贝尔帐篷精品店:Bell Tent Boutique
2019/06/12 全球购物
信息专业个人的自我评价
2013/12/27 职场文书
优秀团支部事迹材料
2014/02/08 职场文书
高中生操行评语大全
2014/04/25 职场文书
2014年化验室工作总结
2014/11/21 职场文书
3.15消费者权益日活动总结
2015/02/09 职场文书
2015年教师节广播稿
2015/08/19 职场文书
PHP中国际化的字符串排序和比较对象详解
2021/08/23 PHP