Kata pengantar
Dukungan atribut JQuery adalah modul yang menentukan apakah browser kompatibel. This module contains compatibility issues such as leadingWhitespace, tbody, htmlSerialize, style, hrefNormalized, opacity, cssFloat, checkOn, optSelected, getSetAttribute.... All these attributes are only used within jQuery, because some modules within jQ need to judge these things, so they are directly written into a support module, which can be used for us, but we basically didn't use them when we wrote the Kode.
Hari ini saya akan meninjau hal -hal ini. Browser yang diuji adalah FF, Chrome, IE11, dan IE6-IE10 disimulasikan menggunakan IE11:
$ .support.leadingwhitespace - - secara otomatis menghapus spasi di IE
$ .support.checkon ―-Nilai Default Radio di Chrome adalah Checkon
$ .support.tbody ―-Ie secara otomatis menghasilkan tbody melalui innerHTML
$ .support.htmlserialize - Browser standar akan secara otomatis menghasilkan tag tautan
$ .support.style ―-Ie67 getattriute akan mendapatkan berbagai jenis data ....
$ .support.opacity ―- IE678 tidak mendukung opacity
$ .support.cssfloat ---- didukung oleh browser standar CSSFLOAT, yaitu harus menggunakan stylefloat
$ .support.
$ .support.getSetAttribute ―-getSetAttribute kompatibilitas antar browser
$ .support.html5clone - - masalah menyalin tag
$ .support.boxmodel - apakah akan mendukung model kotak
$ .support.submitbubbles ―-Bubble
$ .support.changebubbles --Bubble
$ .support.focusinbubbles ―-Bubble
$ .support.deleteexpando ―Ee's Element adalah komponen COM, dan tidak dapat menghapus atribut komponen.
$ .support.nocloneevent - acara untuk menyalin elemen
$ .support.ReliableHiddenOffsets - Masalah TD di TR di elemen tabel;
$ .support.boxsizing - apakah boxsizing didukung
$ .support.doesnotincludemargininbodyoffset ―-body tidak mengandung margin (apakah itu masalah?)
$ .support.pixelposition - Mendapat apakah nilai piksel dikembalikan oleh gaya
$ .support.boxsizing Relable--IS Boxsizing tersedia
$ .support.reliblemarginright - - Bug di margin di Chrome
$ .support.inlineBlockNeedSlayout - - Masalah dengan tata letak di IE
$ .support.shrinkwrapBlocks - - Masalah lebar dan tinggi secara otomatis di IE6
$ .support.leadingwhitespace properti
<html> <head> <meta charset = "utf-8"/> <title> kompatibel </itement> </head> <daster> <script type = "text/javascript"> window.l = (function () {var el = document.createElement ("div"), index = 0; eL.Style.csstext = Padding: 10px; Fixed; Top: 0; Right: 0; Width: 10%; Border: 1px Solid #F00; " Createelement dalam versi yang lebih rendah termasuk ParentNode; </script> IE678 secara otomatis menyaring spasi sebelum dan sesudah elemen, dan spasi tidak termasuk dalam Childnodes, <skrip type = "Text/JavaScript"> var el = document.createElement ("div"); el.innerHtml = "<div id =/" null/"> </div>"; l (el.childnodes.length); </script> </body> </html>Browser standar melekat pada input pengguna, dan EL harus berisi tiga node : ["", "<div id =/" null/"> </div>", ""] node;
Hanya ada 1 node di IE678, dan simpul ini adalah div:
$ .support.checkon properti
Nilai default kotak centang di browser standar adalah "ON", dan IE5678 juga "on", tetapi di beberapa webkit, nilai kotak centang default untuk "" string, dan versi browser saat ini sangat tinggi, pada dasarnya tidak ada masalah. Jika Anda memiliki versi Chrome yang rendah, Anda dapat menggunakan demo berikut untuk menguji untuk melihat apakah ada masalah:
<html> <head> <meta charset = "utf-8"/> <title> kompatibel </itement> </head> <daster> <script type = "text/javascript"> window.l = (function () {var el = document.createElement ("div"), index = 0; eL.Style.csstext = Padding: 10px; Posisi: Top: 0; kanan: 0; Lebar: 10%; Border: 1px Solid #F00; " }; </script> <input id = "ck" type = 'checkbox'/> <script type = "text/javascript"> var el = document.geteLementById ("ck"); // browser standar memiliki acara perubahan; el.onchange = function () {l (el.value); l (ck.Checked)} // The Universal Event PropertyChange di IE; el.onpropertychange = function () {l (el.value); l (ck.Checked)} l (el.value); </script> </body> </html>$ .support.tbody properti
Buat tabel baru di IE6 dan IE7 akan secara otomatis membuat elemen tbody;
Jika kami menambahkan TR atau TD ke tabel yang dibuat, maka semua browser akan secara otomatis membuat TBody;
Jika itu adalah tabel yang dibuat secara dinamis dan TR dan tambahkan TR ke tbody, maka TBOD tidak akan keluar sama sekali. Semua browser mengikuti operasi pengembang (pikiran browser sangat sulit ditebak)
<html> <head> <meta charset = "utf-8"/> <title> kompatibel </itement> </head> <daster> <script type = "text/javascript"> window.l = (function () {var el = document.createElement ("div"), index = 0; eL.Style.csstext = Padding: 10px; Posisi: Top: 0; kanan: 0; Lebar: 10%; Border: 1px Solid #F00; " }; </script> <div id = "tb"> </div> <div id = "tb2"> </div> <div id = "tb3"> </div> <script type = "text/javascript"> var el = document.geteLementById ("tb"); el.innerHtml = "<able> </able>" // ie67 akan output 1. Browser standar mengikuti input pengguna dan tidak akan secara otomatis menghasilkan tbody, sehingga panjang tobdy adalah 0 l (el.getElementsbytagname ("tody"). panjang); </script> <script> var el = document.geteLementById ("tb2"); el.innerHtml = "<ablew> <tr> 111 </tr> </able>"; // apakah itu standar atau IE67 akan secara otomatis menghasilkan tag tbody l (el.geteLementsByTagname ("tbody"). Panjang); </script> <script> var el = document.geteLementById ("tb3"); el.innerHtml = "<able> <td> 111 </td> </ablect>"; // apakah itu standar atau IE67 akan secara otomatis menghasilkan tag tbody l (el.geteLementsByTagname ("tbody"). Panjang); </script> <script> var tb = document.createElement ("tabel"); var tr = document.createElement ("tr"); tr.innerHtml = "trrtrtr"; TB.AppendChild (TR); document.getElementsbyTagname ("body") [0] .AppendChild (TB); </script> </body> </html>Setelah kode dieksekusi, Anda akan melihat bahwa ketika tidak ada elemen dalam tabel, Chrome tidak secara otomatis menghasilkan TBody. Jika Anda tidak menulis tabel sesuai dengan metode penulisan normal, seperti ini
"<table><tr>111</tr></table>";
HTML yang dihasilkan menjadi seperti ini " 111<table><tr></tr></table>“， di jq Anda menulis $(“<table><tr>111</tr></table>”)， dan html yang dihasilkan juga seperti ini ["111","<table><tr></tr></table>"]， SOUSTIE ITU UNTUKNYA THE TABIS -NEDE THE TABLE> <TR> </TR> </TABLE>" Standar ...
Pengecualian lain di IE. Tbody akan ditambahkan secara otomatis melalui InnerHTML , dan jika Anda tidak bersarang secara tidak benar, ia tidak akan peduli dengan Anda. Metode AppendChild tidak akan secara aktif menghasilkan tbody seperti browser lainnya;
$ .support.htmlserialize
IE678 browser tidak dapat secara dinamis menghasilkan tag tautan melalui innerHTML. Untuk membuatnya dengan membuat tag baru:
<html> <head> <meta charset = "utf-8"/> <title> kompatibel </itement> </head> <daster> <script type = "text/javascript"> window.l = (function () {var el = document.createElement ("div"), index = 0; eL.Style.csstext = Padding: 10px; Posisi: Top: 0; kanan: 0; Lebar: 10%; Border: 1px Solid #F00; " }; </script> <div> bouncing </div> <div id = "link"> </div> <script type = "text/javascript"> var elink = document.geteLementById ("tautan"); elink.innerhtml = '<tautan href = "http://cdn.bootcss.com/animate.css/3.3.0/animate.css" rel = "stylesheet">'; </script> </body> </html>Meskipun sebagian besar tag tautan dapat dihasilkan melalui innerHTML, tidak layak bagi kita untuk menghasilkan tag skrip melalui innerHTML:
1 Halaman 2Next Baca teks lengkapnya