jQuery_jqueryのprop()メソッドの使用例
May 16, 2016 pm 04:22 PMこの記事の例では、jQuery での prop() メソッドの使用法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。
このメソッドは、一致する要素の属性値を取得または設定できます。
効果はメソッドのパラメータによって異なります。
文法構造 1:
パラメータが属性名の場合、このメソッドは、要素コレクション内で最初に一致する要素の属性値を、指定された属性名と照合できます。
パラメータリスト:
实例代码:
实例一:
<!DOCTYPE html>
<html>
<頭>
<meta charset=" utf-8">
<meta name="著者" content="http://www.jb51.net/" />
<title>prop()関数数- 脚本之家</title>
<style type="text/css">
ウル{
リストスタイル:なし;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<スクリプトタイプ="text/javascript">
$(document).ready(function(){
alert($("input[type='checkbox']").prop("checked"));
})
</script>
</head>
<ul>
<li><input type="checkbox" selected="checked" value="1" /></li>
<li><input type="checkbox" value="2" /></li>
</ul>
</body>
</html>
上記のコードは、選択中のチェックボックスのプロパティ値を返すことができます。
实例代码二:
<html>
<頭>
<meta charset=" utf-8">
<meta name="著者" content="http://www.jb51.net/" />
<title>prop()関数数- 脚本之家</title>
<style type="text/css">
ウル{
リストスタイル:なし;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<スクリプトタイプ="text/javascript">
$(document).ready(function(){
alert($("li").prop("id"));
})
</script>
</head>
<ul>
<li>脚本之家欢迎您</li>
<li id="mytest"><input type="checkbox" selected="checked" value="1" /></li>
<li id="second"><input type="checkbox" value="2" /></li>
</ul>
</body>
</html>
プロパティの「名前/値対」オブジェクト形式で、すべての適合要素のプロパティ値を設定します。
パラメータリスト:
实例代码:
实例一:
<!DOCTYPE html>
<html>
<頭>
<meta charset=" utf-8">
<meta name="著者" content="http://www.jb51.net/" />
<title>prop()関数数- 脚本之家</title>
<style type="text/css">
ウル{
リストスタイル:なし;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<スクリプトタイプ="text/javascript">
$(document).ready(function(){
$("input[type='checkbox']").prop({disabled:true})
})
</script>
</head>
<ul>
<li><input type="checkbox" value="1" /></li>
<li><input type="checkbox" value="2" /></li>
</ul>
</body>
</html>
上記のコードはすべての選択肢の中から選択できます。
实例二:
<html>
<頭>
<meta charset=" utf-8">
<meta name="著者" content="http://www.jb51.net/" />
<title>prop()関数数- 脚本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<スクリプトタイプ="text/javascript">
$(document).ready(function(){
$("td").prop({幅:"200",高さ:"300"});
})
</script>
</head>
<テーブルボーダー="1">
<tr>
<td>欢迎来到脚本之家</td>
</tr>
</テーブル>
</body>
</html>
プロパティ名/値対形式で、すべての適合要素のプロパティ値を設定します。
パラメータリスト:
实例代码:
<!DOCTYPE html>
<html>
<頭>
<meta charset=" utf-8">
<meta name="著者" content="http://www.jb51.net/" />
<title>prop()関数数- 脚本之家</title>
<style type="text/css">
div{
幅:200px;
高さ:200px;
ボーダー:1px 青一色
}
.font{
フォントサイズ:18px;
色:黄色
}
.bg{
背景:#336;
}
.reset{
色:緑;
font-size:20px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<スクリプトタイプ="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$("div").prop("クラス","リセット");
})
})
</script>
</head>
<div class="font bg"> 脚本之家欢迎您</div>
<button id="btn">点击查看效果</button>
</body>
</html>
上記のコードは、指定された div 設定の形式にすることができます。
语法结构四:
関数を通じて設定プロパティ値が返されます。
パラメータリスト:
实例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<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程序设计有所帮助。

人気の記事

人気の記事

ホットな記事タグ

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











トマト無料小説アプリで小説を書く方法. トマトノベルで小説を書く方法に関するチュートリアルを共有します。

Colorful マザーボードに BIOS を入力するにはどうすればよいですか? 2つの方法を教えます

WeChat で削除された連絡先を回復する方法 (簡単なチュートリアルでは、削除された連絡先を回復する方法について説明します)

すぐにマスター: Huawei 携帯電話で 2 つの WeChat アカウントを開く方法が明らかに!

モバイルドラゴンの卵を孵化させる秘密が明らかに(モバイルドラゴンの卵をうまく孵化させる方法を段階的に教えます)

携帯電話の文字サイズの設定方法(携帯電話の文字サイズを簡単に調整できます)
