ホームページ ウェブフロントエンド jsチュートリアル jQuery_jqueryのprop()メソッドの使用例

jQuery_jqueryのprop()メソッドの使用例

May 16, 2016 pm 04:22 PM
jquery 方法 使用法

この記事の例では、jQuery での prop() メソッドの使用法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

このメソッドは、一致する要素の属性値を取得または設定できます。
効果はメソッドのパラメータによって異なります。

文法構造 1:
パラメータが属性名の場合、このメソッドは、要素コレクション内で最初に一致する要素の属性値を、指定された属性名と照合できます。

コードをコピー コードは次のとおりです:
$("selector").prop(name)

パラメータリスト:

参数 描述
name 定义要获取其值的属性名称。

实例代码:

实例一:

复制代 代码如下:

<!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>

上記のコードは、選択中のチェックボックスのプロパティ値を返すことができます。

实例代码二:

复制代 代码如下:
<!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($("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>

上記のコードでは、li 要素セットの最初の li 要素に id 属性がないため、値は空として返されます。

语法结构二:

プロパティの「名前/値対」オブジェクト形式で、すべての適合要素のプロパティ値を設定します。


复制代码代码如下:$(selector).prop(properties)

パラメータリスト:

参数 描述
attribute:value 定义属性名/值对

实例代码:

实例一:

复制代 代码如下:

<!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>

上記のコードはすべての選択肢の中から選択できます。

实例二:

复制代 代码如下:
<!DOCTYPE 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>

上記のコードは td の高さと高さを設定できます。

语法三:

プロパティ名/値対形式で、すべての適合要素のプロパティ値を設定します。


复制代码代码如下:$(selector).prop(key,value)

パラメータリスト:

参数 描述
key 定义要设置值的属性名称。
value 定义要设置的属性值。

实例代码:

复制代 代码如下:

<!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 設定の形式にすることができます。

语法结构四:

関数を通じて設定プロパティ値が返されます。


复制代码代码如下:
$(selector).prop(name,function(index,oldvalue))

パラメータリスト:

参数 描述
name 定义要设置值的属性的名称。
function(index,oldvalue) 定义返回属性值的函数
index - 可选,接受选择器的索引位置。
class - 可选,接受选择器的当前的属性值。

实例代码:

复制代码 代码如下:

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

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

トマト無料小説アプリで小説を書く方法. トマトノベルで小説を書く方法に関するチュートリアルを共有します。 トマト無料小説アプリで小説を書く方法. トマトノベルで小説を書く方法に関するチュートリアルを共有します。 Mar 28, 2024 pm 12:50 PM

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

Colorful マザーボードに BIOS を入力するにはどうすればよいですか? 2つの方法を教えます Colorful マザーボードに BIOS を入力するにはどうすればよいですか? 2つの方法を教えます Mar 13, 2024 pm 06:01 PM

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

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

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

Win11で管理者権限を取得する方法まとめ Win11で管理者権限を取得する方法まとめ Mar 09, 2024 am 08:45 AM

Win11で管理者権限を取得する方法まとめ

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

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

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

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

Oracleバージョンの問い合わせ方法の詳細説明 Oracleバージョンの問い合わせ方法の詳細説明 Mar 07, 2024 pm 09:21 PM

Oracleバージョンの問い合わせ方法の詳細説明

携帯電話の文字サイズの設定方法(携帯電話の文字サイズを簡単に調整できます) 携帯電話の文字サイズの設定方法(携帯電話の文字サイズを簡単に調整できます) May 07, 2024 pm 03:34 PM

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

See all articles