首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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程序设计有所帮助。

jQuery中prop()方法用法实例

- Author -

shichen2014

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript replace方法与正则表达式
Feb 19 Javascript
动感效果的TAB选项卡jquery 插件
Jul 09 Javascript
基于jQuery+JSON的省市二三级联动效果
Jun 05 Javascript
两种js监听滚轮事件的实现方法
May 13 Javascript
jquery easyui datagrid实现增加，修改，删除方法总结
May 25 Javascript
解决vue select当前value没有更新到vue对象属性的问题
Aug 30 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
Jul 03 Javascript
ES6 Class中实现私有属性的一些方法总结
Jul 08 Javascript
Layui多选只有最后一个值的解决方法
Sep 02 Javascript
小程序调用微信支付的方法
Sep 26 Javascript
ZK中使用JS读取客户端txt文件内容问题
Nov 07 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
Mar 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
巴西购物网站(71) 韩国购物网站(27) 新加坡购物网站(41) 爱尔兰购物网站(30) 中国购物网站(172) SLi Minor 2020(63) 英国购物网站(954) 香港购物网站(84) 加拿大购物网站(185) 美国购物网站(1542)
You might like
PHP如何透过ODBC来存取数据库
2006/10/09 PHP
Yii框架where查询用法实例分析
2019/10/22 PHP
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
2011/09/02 Javascript
iframe父页面获取子页面参数的方法
2014/02/21 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
2014/10/30 Javascript
Javascript中this关键字的一些小知识
2015/03/15 Javascript
jquery插件之文字间歇自动向上滚动效果代码
2016/02/25 Javascript
js实现随机数字字母验证码
2017/06/19 Javascript
将jquery.qqFace.js表情转换成微信的字符码
2017/12/01 jQuery
vue.js根据代码运行环境选择baseurl的方法
2018/02/28 Javascript
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
详解vue-router数据加载与缓存使用总结
2018/10/29 Javascript
vue实现点击隐藏与显示实例分享
2019/02/13 Javascript
Vue商品控件与购物车联动效果的实例代码
2019/07/21 Javascript
vue实现移动端图片上传功能
2019/12/23 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
vue 清空input标签 中file的值操作
2020/07/21 Javascript
javascript实现一款好看的秒表计时器
2020/09/05 Javascript
javascript实现固定侧边栏
2021/02/09 Javascript
Python中使用Boolean操作符做真值测试实例
2015/01/30 Python
python使用socket向客户端发送数据的方法
2015/04/29 Python
Python导出数据到Excel可读取的CSV文件的方法
2015/05/12 Python
Python3.x对JSON的一些操作示例
2017/09/01 Python
Python图像滤波处理操作示例【基于ImageFilter类】
2019/01/03 Python
详解python实现交叉验证法与留出法
2019/07/11 Python
Python配置文件处理的方法教程
2019/08/29 Python
叙述DBMS对数据控制功能有哪些
2016/06/12 面试题
介绍一下linux文件系统分配策略
2012/11/17 面试题
Linux机考试题
2015/07/17 面试题
什么是抽象
2015/12/13 面试题
《赵州桥》教学反思
2014/02/17 职场文书
小学红领巾广播稿（3篇）
2014/09/13 职场文书
学生未请假就回家检讨书
2014/09/22 职场文书
会计简历自我评价
2015/03/10 职场文书
怒海潜将观后感
2015/06/11 职场文书
公司新员工欢迎词
2015/09/30 职场文书