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 相关文章推荐
初学prototype,发个JS接受URL参数的代码
Sep 25 Javascript
用js实现上传图片前的预览(TX的面试题)
Aug 14 Javascript
JavaScript是否可实现多线程  深入理解JavaScript定时机制
Dec 22 Javascript
jQuery之过滤元素操作小结
Nov 30 Javascript
调用HttpHanlder的几种返回方式小结
Dec 20 Javascript
浅谈JavaScript中的对象及Promise对象的实现
Nov 15 Javascript
javascript图片延迟加载实现方法及思路
Dec 31 Javascript
JavaScript中数组的22种方法必学(推荐)
Jul 20 Javascript
angular.JS实现网页禁用调试、复制和剪切
Mar 31 Javascript
react实现菜单权限控制的方法
Dec 11 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
May 18 Javascript
JavaScript 类的封装操作示例详解
May 16 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
smarty的保留变量问题
2008/10/23 PHP
PHP 命名空间实例说明
2011/01/27 PHP
PHP中使用GD库绘制折线图 折线统计图的绘制方法
2015/11/09 PHP
Laravel 实现数据软删除功能
2019/08/21 PHP
IE event.srcElement和FF event.target 功能比较
2010/03/01 Javascript
中国地区三级联动下拉菜单效果分析
2012/11/15 Javascript
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
nodejs 整合kindEditor实现图片上传
2015/02/03 NodeJs
jQuery插件windowScroll实现单屏滚动特效
2015/07/14 Javascript
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
基于JavaScript实现点击页面任何位置返回
2016/08/31 Javascript
AngularJS前端页面操作之用户修改密码功能示例
2017/03/27 Javascript
jquery实现图片轮播器
2017/05/23 jQuery
Vue 中使用vue2-highcharts实现top功能的示例
2018/03/05 Javascript
快速解决vue-cli不能初始化webpack模板的问题
2018/03/20 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
2018/12/26 Javascript
vue.js实现只能输入数字的输入框
2019/10/19 Javascript
vue下canvas裁剪图片实例讲解
2020/04/16 Javascript
Python去掉字符串中空格的方法
2014/03/11 Python
Python中使用wxPython开发的一个简易笔记本程序实例
2015/02/08 Python
python的numpy模块安装不成功简单解决方法总结
2017/12/23 Python
Python实现动态图解析、合成与倒放
2018/01/18 Python
python版大富翁源代码分享
2018/11/19 Python
Python生成词云的实现代码
2020/01/14 Python
Pycharm添加虚拟解释器报错问题解决方案
2020/10/13 Python
python 删除系统中的文件(按时间,大小,扩展名)
2020/11/19 Python
Reformation官网:美国女装品牌
2018/09/14 全球购物
现代化办公人员工作的自我评价
2013/10/16 职场文书
专家推荐信模板
2014/05/09 职场文书
三八妇女节超市活动方案
2014/08/18 职场文书
2014年精神文明建设工作总结
2014/11/19 职场文书
2015年度培训工作总结范文
2015/04/02 职场文书
社区法制宣传日活动总结
2015/05/05 职场文书
vue中使用mockjs配置和使用方式
2022/04/06 Vue.js
Hive导入csv文件示例
2022/06/25 数据库