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 replace方法与正则表达式
Feb 19 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
Dec 28 Javascript
一个JavaScript变量声明的知识点
Oct 28 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
Dec 24 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
Feb 27 Javascript
AngularJS基础 ng-class-odd 指令示例
Aug 01 Javascript
Jquery树插件zTree实现菜单树
Jan 24 Javascript
javascript设计模式之模块模式学习笔记
Feb 15 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
Aug 27 Javascript
Vue-input框checkbox强制刷新问题
Apr 18 Javascript
JS校验与最终登陆界面功能完整示例
Jan 13 Javascript
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
Mar 17 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和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
5款适合PHP使用的HTML编辑器推荐
2015/07/03 PHP
Javascript入门学习资料收集整理篇
2008/07/06 Javascript
JQuery读取XML文件数据并显示的实现代码
2009/12/16 Javascript
js 表单提交后按钮变灰的实例代码
2013/08/16 Javascript
弹出最简单的模式化遮罩层的js代码
2013/12/04 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
JavaScript数据类型检测代码分享
2015/01/26 Javascript
10条建议帮助你创建更好的jQuery插件
2015/05/18 Javascript
jquery及js实现动态加载js文件的方法
2016/01/21 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
2016/05/17 Javascript
老生常谈JavaScript数组的用法
2016/06/10 Javascript
AngularJS中的JSONP实例解析
2016/12/01 Javascript
Bootstrap模态框使用详解
2017/02/15 Javascript
搭建简单的nodejs http服务器详解
2017/03/09 NodeJs
seajs模块压缩问题与解决方法实例分析
2017/10/10 Javascript
element-ui 表格实现单元格可编辑的示例
2018/02/26 Javascript
解决vue 更改计算属性后select选中值不更改的问题
2018/03/02 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
2019/02/21 Javascript
vue prop传值类型检验方式
2020/07/30 Javascript
Python 冒泡,选择,插入排序使用实例
2015/02/05 Python
Python检测一个对象是否为字符串类的方法
2015/05/21 Python
Python 正则表达式入门(初级篇)
2016/12/07 Python
Python内置函数 next的具体使用方法
2017/11/24 Python
用于业余项目的8个优秀Python库
2018/09/21 Python
利用python循环创建多个文件的方法
2018/10/25 Python
Pyqt QImage 与 np array 转换方法
2019/06/27 Python
浅析Python 引号、注释、字符串
2019/07/25 Python
python主线程与子线程的结束顺序实例解析
2019/12/17 Python
伦敦一家非常流行的时尚精品店:Oxygen Boutique
2017/01/15 全球购物
最耐用行李箱,一箱永流传:Briggs & Riley(全球终身保修)
2017/12/07 全球购物
餐厅采购员岗位职责
2014/03/06 职场文书
大专毕业生自我鉴定范文(2篇)
2014/09/27 职场文书
子女赡养老人协议书
2016/03/23 职场文书
Python3 如何开启自带http服务
2021/05/18 Python