attributeとpropertyの互換性分析
16287 ワード
前の文章では、彼らの違いを詳しく分析しました.Javascriptのattributeとproperty分析を見てください.
今回は、jQuery(1.9.x)ソースコードの分析(attributesモジュール)から、まずテストのHTMLコードを貼り付けた互換性を詳しく見てみましょう.
次に、jQueryのattributesモジュールでの互換性の解析を1つずつ開始します.
互換点1:問題:inputを動的に作成する場合は、値を設定してからsetAttribute typeがradioの場合はinput.valueの値は 失われますブラウザ:IE全シリーズ 治療法:設定時、まず値を に保存する
互換性2:質問:button.settattribute('value','abc')は間違ってbuttonをします.innerHTMLはabcに設定され、getも である.ブラウザ:IE 6~7 治療法:AttributeNodeによる互換性
互換点3:質問:element.setAttribute/getAttribute styleで問題が発生する ブラウザ:IE 6~8 治療方法:elementを読み取り、設定する.style.setAttributeとgetAttributeの代わりにcssText
互換性4: 問題:W 3 Cでhrefとsrcを得ることは絶対的な属性値であるが、IEは自業自得であり、それを絶対パス に補完する.ブラウザ:IE 6~7 治疗方式:IE特有のもう一つのパラメータで!!!2はhrefのvalue値、4は補完 である
互換性5:問題:selectを動的に作成するときにoptionを追加し、selectを取得します.selected IEはfalseを返し、その他はtrue を返す.ブラウザ:IE全バージョン 治疗方式:selectのselectedIndex属性にアクセスして、修复して下标を选んで、もしoptgroupがあるならば、optgroupの にもアクセスします
互換点6:問題:デフォルトのradioまたはcheckboxのinput、デフォルトvalueは空の文字列 ブラウザ:safair 治療法:このバグがあれば「」かどうかを判断し、「」ならonに戻ればいい
互換点7:問題:動的に作成されたinput、checkedまたはselectedをtrueに設定すると機能しない ブラウザ:IE 6~7 治療法: にdefaultCheckedとdefaultSelectedを置換
この部分はjQueryのソースコード分析の参考になります.jQuery.attributesソース分析(attr/prop/val/class)を参照してください.
リファレンス http://www.cnblogs.com/rubylouvre/p/3524113.html http://www.cnblogs.com/snandy/archive/2012/05/06/2473936.html http://www.cnblogs.com/rubylouvre/p/3524113.html http://www.cnblogs.com/rubylouvre/archive/2009/12/07/1618182.html http://www.w3help.org/zh-cn/causes/SD2021 http://www.jb51.net/article/30389.htm http://www.jb51.net/article/39485.htm http://www.cnblogs.com/top5/archive/2011/07/13/2105260.html
今回は、jQuery(1.9.x)ソースコードの分析(attributesモジュール)から、まずテストのHTMLコードを貼り付けた互換性を詳しく見てみましょう.
<input id="username" type="text" value="lonelyclick">
<button value="abc" id="btn">def</button>
<button id="btn2">btn2222</button>
<button id="btn3">btn3</button>
<div style="color:blue;" id="box">box</div>
<a href="/get.do" id="baidu">baidu</a>
<img src="../../bootstrap/images/backbone.png" alt="backbone" id="backbone">
<select id="selecteddd">
<option>option1</option>
</select>
<input type="checkbox" id="checkonElement">次に、jQueryのattributesモジュールでの互換性の解析を1つずつ開始します.
互換点1:
// $('input').attr('type','radio);
// attrHooks.type
var input = document.createElement('input');
input.value = 'ttt';
input.setAttribute('type', 'radio');
//alert(input.value); // IE ， on chrome ， ttt
// ，
var username = document.getElementById('username');
username.value = 'lonelyclick other';
username.setAttribute('type', 'radio');
//alert(username.value); // lonelyclick other
//
function setInputRadioAttribute(input) {
var back = input.value;
input.setAltertitle('type', 'radio');
if (back) {
input.value = back;
}
}互換性2:
var btn = document.getElementById('btn');
//alert(btn.getAttribute('value')); //IE6~7 def， abc
var btn2 = document.getElementById('btn2');
btn2.setAttribute('value', 'seo');
//alert(btn2.innerHTML);// IE6~7 seo， btn2222
//
function setButtonValueAttribute(button, value) {
var an = document.createAttribute('value');
an.value = value;
button.setAttributeNode(an);
}
function getButtonValueAttribute(button) {
var an = button.getAttributeNode('value');
return an && an.specified ? an.value : undefined;
}
var btn3 = document.getElementById('btn3');
setButtonValueAttribute(btn3, 'somethingabc');
//alert(btn3.innerHTML); // btn3
//alert(btn3.getAttribute('value')); //somethingabc
//alert(getButtonValueAttribute(btn3)); //somethingabc互換点3:
var box = document.getElementById('box');
console.log(box.style); // CSSStyleDeclaration
console.log(box.getAttribute('style')); // IE6~7 CSSStyleDeclaration，IE8 COLOR:blue; color:blue;
box.setAttribute('style', 'background:red;') //IE6~7 ，
//
function setStyleAttribute(element, styleText) {
element.style.cssText = styleText + '';
}
function getStyleAttribute(element) {
return element.style.cssText;
}互換性4:
var baidu = document.getElementById('baidu');
console.log(baidu.href); // all is http://localhost:63342/get.do
console.log(baidu.getAttribute('href')); // IE6~7 http://localhost:63342/get.do /get.do
var backbone = document.getElementById('backbone');
console.log(backbone.getAttribute('src'));
console.log(backbone.src);
//IE6~7 http://localhost:63342/HTML5Exp/bootstrap/images/backbone.png
// ../../bootstrap/images/backbone.png
//
//http://msdn.microsoft.com/en-us/library/ms536429%28VS.85%29.aspx
console.log(baidu.getAttribute('href', 2));
console.log(backbone.getAttribute('src', 2));
console.log(baidu.getAttribute('href', 4));
console.log(backbone.getAttribute('src', 4));互換性5:
//
var selecteddd = document.getElementById('selecteddd');
console.log(selecteddd.options[0].selected);
var select = document.createElement('select');
var option = document.createElement('option');
option.innerHTML = 'option111';
option.value = 1;
select.appendChild(option);
document.body.appendChild(select);
console.log(option.selected); //IE6~7 false true
//
select.selectedIndex;
console.log(option.selected); // true互換点6:
var checkonElement = document.getElementById('checkonElement');
//alert(checkonElement.value); //safair on
//
function getSafairRadioCheckboxValue(input) {
var v = input.value;
return v === '' ? 'on' : v;
}互換点7:
var defaultCheckedInput = document.createElement('input');
defaultCheckedInput.type = 'checkbox';
defaultCheckedInput.checked = true; // ， ，
document.body.appendChild(defaultCheckedInput);
//
var defaultCheckedInput = document.createElement('input');
defaultCheckedInput.type = 'checkbox';
defaultCheckedInput.defaultChecked = true; //
document.body.appendChild(defaultCheckedInput);この部分はjQueryのソースコード分析の参考になります.jQuery.attributesソース分析(attr/prop/val/class)を参照してください.
リファレンス