DOMを操作する---attr属性の値の取得と設定
7883 ワード
JavaScriptを使用してWebコードを記述する過程で、Ajaxがjsonデータを返したり、DOMに表示ノードを動的に追加したり、ページ上の要素のCSSや属性を動的に変更したりするなど、DOMを操作することが多い.DOMのフルネームはDocument Object Model、すなわちドキュメントオブジェクトモデルであり、ブラウザ、プラットフォーム、言語に関係のないインタフェースであり、ユーザーコードを任意のブラウザに表示される要素にアクセスさせ、DOMをWebプレゼンテーションの標準と見なすことができる.
attrプロパティの取得と設定の値
jQueryを使用してDOMを操作するには、セレクタを使用して1つ以上の要素を選択する必要があります.jQueryは結果セットを暗黙的に反復する操作であるため、1つのjQueryオブジェクトで複数の要素のプロパティを同時に変更できます.
属性値の取得と設定はjQueryのattrメソッドを使用し、属性の削除はremoveAttrメソッドを使用します.
要素属性を取得するattr構文は、次のとおりです.
要素のプロパティを設定するには、同じattr関数を使用します.htmlは上のものを使用します.
attrを使用して属性を設定するのは
attrプロパティの取得と設定の値
jQueryを使用してDOMを操作するには、セレクタを使用して1つ以上の要素を選択する必要があります.jQueryは結果セットを暗黙的に反復する操作であるため、1つのjQueryオブジェクトで複数の要素のプロパティを同時に変更できます.
属性値の取得と設定はjQueryのattrメソッドを使用し、属性の削除はremoveAttrメソッドを使用します.
要素属性を取得するattr構文は、次のとおりです.
$(selector).attr(attribute)
// selector jQuery ，attr attribute ， ， ， ：
$("img").attr("src");
《 HTML DEMO》
<body>
<ul id="nav">
<li><a href="http://www.xxx.com/companyinfo" id="company_info" title=" "> a>
li>
<li><a href="http://www.xxx.com/companyculture" id="culture_info" title=" "> a>
li>
<li><a href="http://www.xxx.com/contactus" id="contactus" title=" "> a>
li>
ul>
<div id="content">div>
<div id="attr_info">
<input id="btn_getAttr" type="button" value=" ">
div>
body>
<script type="text/javascript">
$(document).ready(function (e) {
$('#btn_getAttr').click(function (e) {
var str = '
' + $('#company_info').attr('title');
// id company_info title
str += '
' + $('#product_info').attr('href');
// id product_info href
str += '
' + $('#culture_info').attr('id');
// id culture_info id
str += '
' + $('#btn_getAttr').attr('value');
// id btn_getAttr value
$('#attr_info').append(str);
// div
});
});
script>要素のプロパティを設定するには、同じattr関数を使用します.htmlは上のものを使用します.
$(selector).attr(attribute,value)
<script type="text/javascript">
$(document).ready(function (e) {
$('#btn_setAttr').click(function (e) {
$('company_info').attr('title', ' ');
// title
$('#product_info').attr('href', 'http://www.microsoft.com');
// href
$('#culture_info').attr('id', 'btn_culture_info');
// id
$('#contactus').attr('title', ' ');
// title
});
});
script>
attrを使用して属性を設定するのは
" "," "で一致する文であり、attrは次のコードに示すように2つ以上の属性値を同時に設定することもできる.//
$("#company_info").attr({
"href":"http://www.microsoft.com/",
"title":" "
});
// ， / ， href title