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 数组的 uniq 方法
Jan 23 Javascript
jquery提升性能最佳实践小结
Dec 06 Javascript
JQuery1.6 使用方法三
Nov 23 Javascript
原生js实现跨浏览器获取鼠标按键的值
Apr 08 Javascript
JavaScript简单实现鼠标拖动选择功能
Mar 06 Javascript
js模仿php中strtotime()与date()函数实现方法
Aug 11 Javascript
Javascript的表单验证-提交表单
Mar 18 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
Mar 29 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
Jul 21 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
Mar 29 Javascript
JS实现点星星消除小游戏
Mar 24 Javascript
详解JS WebSocket断开原因和心跳机制
May 07 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代码片段
2015/09/24 PHP
php实现的双色球算法示例
2017/06/20 PHP
禁止js文件缓存的代码
2010/04/09 Javascript
JQuery优缺点分析说明
2010/06/09 Javascript
推荐20家国外的脚本下载网站
2011/04/28 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
2013/08/07 Javascript
Checbox的操作含已选、未选及判断代码
2013/11/07 Javascript
Javascript解析URL方法详解
2014/12/05 Javascript
JavaScript获取当前网页标题(title)的方法
2015/04/03 Javascript
js利用appendChild对标签进行排序的实现方法
2016/10/16 Javascript
浅析Node.js:DNS模块的使用
2016/11/23 Javascript
JavaScript对象封装的简单实现方法(3种方法)
2017/01/03 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
2019/04/20 Javascript
使用js实现一个简单的滚动条过程解析
2019/09/10 Javascript
JavaScript实现单点登录的示例
2020/09/23 Javascript
JavaScript实现前端倒计时效果
2021/02/09 Javascript
[03:22]DSPL第一期精彩集锦:酷炫到底!
2014/11/07 DOTA
[01:46]DOTA2上海特锦赛小组赛英文解说KotlGuy采访
2016/02/27 DOTA
python cookielib 登录人人网的实现代码
2012/12/19 Python
使用Python开发windows GUI程序入门实例
2014/10/23 Python
python绘制铅球的运行轨迹代码分享
2017/11/14 Python
对python生成业务报表的实例详解
2019/02/03 Python
Django 反向生成url实例详解
2019/07/30 Python
详解mac python+selenium+Chrome 简单案例
2019/11/08 Python
Django Form设置文本框为readonly操作
2020/07/03 Python
python绘制雷达图实例讲解
2021/01/03 Python
HTML5输入框下拉菜单功能的示例代码
2020/09/08 HTML / CSS
eDreams加拿大:廉价航班、酒店和度假
2019/03/29 全球购物
公司拓展活动方案
2014/02/13 职场文书
元旦活动感言
2014/03/08 职场文书
公务员保密承诺书
2014/03/27 职场文书
2014年计生协会工作总结
2014/11/21 职场文书
2015年店长工作总结范文
2015/04/08 职场文书
党支部审查意见
2015/06/02 职场文书
2015年语言文字工作总结
2015/07/23 职场文书
Python Pandas读取Excel日期数据的异常处理方法
2022/02/28 Python