前端页面开发兼容性建议

1、基础准备

(1)页面入口引入较高版本的jquery，推荐使用jquery-1.12.4，或直接引入现在BS页面里已有的jquery-1.8.2.js(其实是1.11.1版本)
①下载地址：https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js
(可用于开发，方便断点调试)
②下载地址(压缩版): https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js
③参考文档(推荐)：https://jquery.cuishifeng.cn
④参考文档(官方): https://www.jquery123.com

(2)引入jquery后，在页面开发前，通过$.fn.jquery确认引入的jquery版本是否正确，低版本的jquery中存在部分API尚未实现的现象，如1.3.2版本的jq未实现$.parseXML()
(当前BS页面中部分页面没有jq、部分页面jq版本为1.3.2、部分页面为1.11.1)

(3)使用jquery的理由
①IE实现的JS标准与现代浏览器(chrome、firefox等)实现的JS标准存在较大差异，且IE的JS标准文档偏少，调整兼容性难度较大。
②jquery在实现时已最大程度上进行了跨浏览器兼容。

2、通用建议

(1)DOM对象操作
使用 变量声明 -> 通过$(选择器) 操作来获取目标DOM -> 变量赋值 -> 变量操作 来替代IE中常用的
直接使用id属性作为变量名获取DOM -> 变量操作

Tip1：$(选择器)获取的对象为jquery封装过的DOM对象，如需原生DOM对象，可通过下标访问获取(基本不使用，原生DOM对象还得自己去考虑兼容性)。
Tip2：规范地获取DOM对象，能避免IE的一些默认行为导致的,能获取到DOM对象的假象，如IE使用iframe的id作为变量获取到的是对应iframe的contentWindow属性，而在chrome中获取到的是对应iframe的DOM对象，导致后续操作在chrome上报错。

(2)样式设置
①注意html内嵌套结构的正确性
1)标签正确闭合.
2)特定标签内所包含的标签的正确性(主要是表格、列表相关的标签)，如

a.tr标签内只能包含th/td标签
b.ul/ol标签内只能包含li标签

②注意元素的默认样式
1)减少缺省值的使用，浏览器在填写缺省值时可能会存在差异，如设置absolute布局时，top/right/bottom/left四个属性尽可能填写。
2)自带布局规则的元素的默认样式尽量保持，控制隐藏/显示时尽量恢复成原值，如tr/td等table相关元素的display属性的值为特殊值，若设置为block，则会导致rowspan、colspan等table相关属性失效。
(3)事件处理函数绑定/解绑
使用 $(选择器).on(事件名, 处理函数) / $(选择器).off(事件名, 处理函数) 来替代 原生JS中的

elem.attachEvent(‘on’ + 事件名, 处理函数) / elem.detachEvent(‘on’ + 事件名, 	处理函数) — IE
elem.addEventListener(事件名, 处理函数) / elem.addEventListener(事件名,  处理函数) — chrome

(4)判断是否为同一个元素
使用 $(选择器)[下标] == 待判断元素 来替代IE中使用的 elem.uniqueID == 待判断元素.uniqueID
原因：uniqueID属性是IE独有的，在其他浏览器会导致undefined == undefined， 使得判断始终为true。

(5)XML数据转换
使用$.parseXML(XML格式字符串) 来替代IE中使用的ActiveXObject 对象
原因：ActiveXObject对象是IE独有的

(6)使用DOM来进行XML对象操作