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 相关文章推荐
javascript动画之圆形运动,环绕鼠标运动作小球
Jul 20 Javascript
js阻止事件追加的具体实现
Oct 15 Javascript
JQuery跳出each循环的方法
Apr 16 Javascript
js滑动提示效果代码分享
Mar 10 Javascript
AngularJS  $modal弹出框实例代码
Aug 24 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
Nov 30 Javascript
微信小程序 devtool隐藏的秘密
Jan 21 Javascript
jquery实现全选、全不选以及单选功能
Mar 23 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
JavaScript中arguments和this对象用法分析
Aug 08 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
Sep 06 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服务器实现多session并发运行
2006/10/09 PHP
从性能方面考虑PHP下载远程文件的3种方法
2015/12/29 PHP
PHP基于自定义函数实现的汉字转拼音功能实例
2017/09/30 PHP
PHP实现二维数组中的查找算法小结
2018/06/09 PHP
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
2010/06/19 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
2014/03/19 Javascript
微信小程序 Video API实例详解
2016/10/02 Javascript
js编写三级联动简单案例
2016/12/21 Javascript
教你快速搭建Node.Js服务器的方法教程
2017/03/30 Javascript
AngularJs每天学习之总体介绍
2017/08/07 Javascript
简单快速的实现js计算器功能
2017/08/17 Javascript
浅析Visual Studio Code断点调试Vue
2018/02/27 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
2018/10/08 Javascript
JS动态显示倒计时效果
2019/12/12 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
2019/12/16 Javascript
JS 事件机制完整示例分析
2020/01/15 Javascript
python启动办公软件进程(word、excel、ppt、以及wps的et、wps、wpp)
2009/04/09 Python
Python文件操作,open读写文件,追加文本内容实例
2016/12/14 Python
解决.ui文件生成的.py文件运行不出现界面的方法
2019/06/19 Python
Python Lambda函数使用总结详解
2019/12/11 Python
Python netmiko模块的使用
2020/02/14 Python
Python小整数对象池和字符串intern实例解析
2020/03/21 Python
深入浅析pycharm中 Make available to all projects的含义
2020/09/15 Python
python批量生成身份证号到Excel的两种方法实例
2021/01/14 Python
django使用多个数据库的方法实例
2021/03/04 Python
Lacoste澳大利亚官网:服装、鞋类及配饰
2018/11/14 全球购物
SmartBuyGlasses德国:购买太阳镜和眼镜
2019/08/20 全球购物
销售经理竞聘书
2014/03/31 职场文书
讲解员培训方案
2014/05/04 职场文书
大专学生求职自荐信
2014/07/06 职场文书
劳模事迹材料范文
2014/12/24 职场文书
2015年光棍节活动总结
2015/03/24 职场文书
步步惊心观后感
2015/06/12 职场文书
apache基于端口创建虚拟主机的示例
2021/04/24 Servers
python代码实现扫码关注公众号登录的实战
2021/11/01 Python
python自动获取微信公众号最新文章的实现代码
2022/07/15 Python