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为页面增加快捷键示例
Jan 31 Javascript
JavaScript利用正则表达式去除日期中的-
Jun 09 Javascript
node.js中的http.createClient方法使用说明
Dec 15 Javascript
js实现多选项切换导航菜单的方法
Feb 06 Javascript
JS实现超炫网页烟花动画效果的方法
Mar 02 Javascript
jQuery插件slides实现无缝轮播图特效
Apr 17 Javascript
JS实现的网页背景闪电闪烁效果代码
Oct 17 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
Nov 23 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
May 05 Javascript
前端程序员必须知道的高性能Javascript知识
Aug 24 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
Dec 23 Javascript
vue.js将unix时间戳转换为自定义时间格式
Jan 03 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程序
2006/10/09 PHP
php下过滤HTML代码的函数
2007/12/10 PHP
CI配置多数据库访问的方法
2016/03/28 PHP
Zend Framework入门应用实例详解
2016/12/11 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
PHP进阶学习之依赖注入与Ioc容器详解
2019/06/19 PHP
利用jQuery实现可以编辑的表格
2014/05/26 Javascript
JavaScript包装对象使用详解
2015/07/09 Javascript
轻量级网页遮罩层jQuery插件用法实例
2015/07/31 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
2015/08/31 Javascript
第一篇初识bootstrap
2016/06/21 Javascript
js 获取元素所有兄弟节点的实现方法
2016/09/06 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
微信小程序 支付简单实例及注意事项
2017/01/06 Javascript
微信小程序实现实时圆形进度条的方法示例
2017/02/24 Javascript
详解用node编写自己的cli工具
2017/05/23 Javascript
前端构建工具之gulp的语法教程
2017/06/12 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
2017/08/17 jQuery
仿照Element-ui实现一个简易的$message方法
2020/09/14 Javascript
[59:36]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第二场
2018/04/04 DOTA
python操作CouchDB的方法
2014/10/08 Python
Python pickle模块用法实例分析
2015/05/27 Python
Python中matplotlib中文乱码解决办法
2017/05/12 Python
解决Tensorflow安装成功,但在导入时报错的问题
2018/06/13 Python
Python3最长回文子串算法示例
2019/03/04 Python
face++与python实现人脸识别签到(考勤)功能
2019/08/28 Python
Python使用qrcode二维码库生成二维码方法详解
2020/02/17 Python
Python3 利用face_recognition实现人脸识别的方法
2020/03/13 Python
使用pytorch 筛选出一定范围的值
2020/06/28 Python
浅谈python处理json和redis hash的坑
2020/07/16 Python
本科生的职业生涯规划范文
2014/01/09 职场文书
2014年小学校长工作总结
2014/12/08 职场文书
婚宴祝酒词大全
2015/08/10 职场文书
CSS3实现三角形不断放大效果
2021/04/13 HTML / CSS
MySQL系列之十四 MySQL的高可用实现
2021/07/02 MySQL
「回转企鹅罐」10周年纪念展「輪るピングドラム展」海报公开
2022/03/22 日漫