Jqueryでプロパティとスタイルを設定する方法

属性を設定する方法: attr()、構文「attr(attribute, value)」を使用します。スタイルの設定方法: 1. addClass() を使用し、構文は「addClass(クラス名)」です; 2. css() を使用します、構文は「css("プロパティ名", "スタイル値")」です。

このチュートリアルの動作環境: Windows7 システム、jquery3.2.1 バージョン、Dell G3 コンピューターこの方法は、すべてのブランドのコンピューターに適しています。

Jquery でプロパティとスタイルを設定するメソッド:

1. Jquery プロパティの取得と設定

//找到第一个input，通过attr设置属性value的值
$("input:first").attr('value','新设值');
//同时为多个属性赋值
$("input:first").attr({'attr1':'v1','attr2':'v2'...});
//找到最后一个input，通过使用removeAttr删除属性
$("input:last").removeAttr('value');
//得到.first-div内的文本，并以此来设置最后一个p内的文本
$('p:last').text( $(".first-div").text() )
//.html() 不传入值，就是获取.first-div类的HTML内容，不仅仅是文本
//.html( htmlString ) 用之前得到的内容来设置第一个p标签的html内容
$('p:first').html( $(".first-div").html() ) ;
//.val()获取表单id为single元素的值
$("p").text( $("#single").val() );
//设置表单text字段内的值
$("input[type='text']").val('修改表单的字段')

.html(),.text(),.val()3 つのメソッドはすべて、選択された要素のコンテンツを読み取るために使用されます。.html() のみが使用されます。要素の HTML コンテンツ (HTML タグを含む) を読み取るために使用され、.text() はそのサブ要素を含む要素のプレーン テキスト コンテンツを読み取るために使用され、.val() は「値」を読み取るために使用されます。 form 要素の値。このうち、.html() メソッドと .text() メソッドはフォーム要素に対して使用できず、.val() メソッドはフォーム要素に対してのみ使用できます。また、.html() メソッドを複数の要素に対して使用する場合、最初の要素のみが読み取られます。.val() メソッドは .html() と同じです。複数の要素に適用された場合、最初のフォーム要素の "value" 値のみが読み取られますが、.text( .text() を複数の要素に適用すると、選択されたすべての要素のテキスト コンテンツが読み取られます。

.html(htmlString)、.text(textString)、.val(value) はすべて、選択内容を置き換えるために使用されます。 3 つの方法を複数の要素に同時に適用すると、選択したすべての要素の内容が置き換えられます。 .html()、.text()、および .val() はすべて、コールバック関数の戻り値を使用して、複数の要素のコンテンツを動的に変更できます。

2. JQuery のスタイルの追加と削除

//为class=left下的div元素增加一个新样式
$('.left div').addClass('newClass')
//找到所有的div，然后通过addClass函数增加类名
$("div").addClass(function(index,className) {
 //找到类名中包含imooc的元素，为其添加类名
 if(-1 !== className.indexOf('imooc')){    
  $(this).addClass('imoocClass') //this指向匹配元素集合中的当前元素
 }
});
//class=left下div元素删除newClass样式
$('.left div').removeClass('newClass');
//如果该元素存在该类名就去除，否则就添加
$('.left div').toggleClass('newClass');
//获取class=first的字体大小样式值
$('p:eq(1)').text( $('.first').css("font-size"));
//获取一组属性值并返回为一个对象
var value = $('.first').css(['width','height']);
//通过对象访问到对应的值
document.write( "widht:" + value.width + " height:" +value.height) ;
//设置样式属性值
$('.fourth').css("background-color","red");
//设置多个属性值
$('.seventh').css({
 'font-size'  :"15px",
 "background-color" :"#40E0D0"
});

addClass と css はどちらもページ スタイルの操作に使用されます。二つ。保守性: .addClass() の本質は、クラスのスタイル ルールを定義することによって 1 つ以上のクラスを要素に追加することです。 css メソッドは、JavaScript を通じて要素のスタイルを変更することです。 .addClass() を使用すると、同じ要素に統一ルールをバッチで設定できるため、変更がより便利になり、均一に変更および削除できます。

.css() メソッドを使用すると、変更する要素を 1 つずつ指定する必要があり、面倒です。柔軟性: クラス ルールを面倒に定義する必要がなく、.css() メソッドを通じて特定の要素の属性を簡単に動的に変更できます。一般的に、レイアウトルールが決まっていないHTMLコード構造を動的に生成する場合は、.css()メソッドを介して処理されます。スタイル値: .addClass() の本質はクラスの追加と削除だけであり、指定されたスタイルの属性の値を取得することはできません。.css() は指定されたスタイルの値を取得できます。スタイルの優先順位: CSS スタイルには優先順位があり、外部スタイル、内部スタイル、インライン スタイルの同じスタイル ルールが同じ要素に同時に適用された場合、優先順位は次のようになります: 外部スタイル < 内部スタイル < インライン スタイル。

.addClass()メソッドはクラス名を追加し、次にこのスタイルが最初に外部ファイルまたは内部スタイルで定義され、必要に応じて要素にアタッチされます。、インラインスタイルは .css() メソッドを通じて処理され、要素の style 属性を通じて要素に直接添付される .css メソッドを通じて設定されたスタイル属性は、 .addClass() メソッドよりも高い優先順位を持ちます。

javascript

(ビデオ)

以上がJqueryでプロパティとスタイルを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。