学习jQuery.docx

上传人:b****4 文档编号:11600735 上传时间:2023-03-20 格式:DOCX 页数:20 大小:23.02KB
下载 相关 举报
学习jQuery.docx_第1页
第1页 / 共20页
学习jQuery.docx_第2页
第2页 / 共20页
学习jQuery.docx_第3页
第3页 / 共20页
学习jQuery.docx_第4页
第4页 / 共20页
学习jQuery.docx_第5页
第5页 / 共20页
点击查看更多>>
下载资源
资源描述

学习jQuery.docx

《学习jQuery.docx》由会员分享,可在线阅读,更多相关《学习jQuery.docx(20页珍藏版)》请在冰豆网上搜索。

学习jQuery.docx

学习jQuery

学习jQuery.support

做前端最痛苦的莫过于兼容问题了,同一样东西,不同浏览器有不同的实现,同一个浏览器不同的版本也有不同的处理。

直叫人抓狂。

但既然做了前端,就不得不提起耐心,面对这些万恶的兼容。

jQuery作为一个目前来讲最流行的JS库,它同样提供了检测各种各样特性的功能,告诉你某个功能该浏览器是否支持,好让你做出进一步的处理。

下面,先罗列一下一些问题吧。

测试浏览器:

IE6,IE7,IE8,IE9,chrome 23.0.1271.95,firefox 17.0.1,其中IE78是在IE9的文档模式下,不包准确,但jQuery和网上搜到的结果应该可以相信前人的测试是准确的。

另,在chrome23这本版本已修复的bug也不列入。

1. IE678的childNodes不包含空白文本节点,firstChild同理

2. 空table,IE会自动生成tbody,而标准浏览器不会(标准浏览器如果有tr存在,也会自动生成tbody)

3. IE678无法通过div.innerHTML = '';来插入link,同样的还有style,script节点

4. IE67无法用getAttribute获取style,返回object,同理也无法用setAttribute设置style

5. IE67,无法通过getAttribute获取用户设定的原始href值

6. IE678是通过filter滤镜来支持透明度

7. IE678通过styleFloat来获取float,而标准浏览器用cssFloat

8. IE中,第一个option不被默认选中,包括IE9依然如此,其他则选中

9. IE67, 某些特殊属性的获取也比较特殊,如class, for, char,不能直接使用getAttribute获取

10. IE6在克隆HTML5的新标签元素时outerHTML有":

"

11. IE6789,input元素的checked属性不能被拷贝

12. IE678不能delete节点上的属性

13. IE会拷贝事件

14. IE下,input被更换类型后,无法保持前一个类型所设的值,蛋疼才会这样做

越看越觉得悲催,不列了。

直接看jQuery的源码解释吧。

 

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

jQuery.support=(function(){

 

varsupport,

all,

a,

select,

opt,

input,

fragment,

eventName,

i,

isSupported,

clickFn,

div=document.createElement("div");

 

//Setup

div.setAttribute("className","t");

div.innerHTML=" 

a";

 

//Supporttestswon'truninsomelimitedornon-browserenvironments

all=div.getElementsByTagName("*");

a=div.getElementsByTagName("a")[0];

if(!

all||!

a||!

all.length){

return{};

}

 

//Firstbatchoftests

select=document.createElement("select");

opt=select.appendChild(document.createElement("option"));

input=div.getElementsByTagName("input")[0];

 

a.style.cssText="top:

1px;float:

left;opacity:

.5";

support={

//IEstripsleadingwhitespacewhen.innerHTMLisused

//IE678的childNodes不包含空白文本节点,firstChild同理

leadingWhitespace:

(div.firstChild.nodeType===3),

 

//Makesurethattbodyelementsaren'tautomaticallyinserted

//IEwillinsertthemintoemptytables

//空table,IE会自动生成tbody,而标准浏览器不会(标准浏览器如果有tr存在,也会自动生成tbody)

tbody:

!

div.getElementsByTagName("tbody").length,

 

//MakesurethatlinkelementsgetserializedcorrectlybyinnerHTML

//ThisrequiresawrapperelementinIE

//IE678无法通过div.innerHTML='';来插入link

htmlSerialize:

!

!

div.getElementsByTagName("link").length,

 

//GetthestyleinformationfromgetAttribute

//(IEuses.cssTextinstead)

//IE67无法用getAttribute获取style,返回object,同理也无法用setAttribute设置style

style:

/top/.test(a.getAttribute("style")),

 

//MakesurethatURLsaren'tmanipulated

//(IEnormalizesitbydefault)

//getAttribute获取href的问题,详见

hrefNormalized:

(a.getAttribute("href")==="/a"),

 

//Makesurethatelementopacityexists

//(IEusesfilterinstead)

//UsearegextoworkaroundaWebKitissue.See#5145

//IE678是通过filter滤镜来支持透明度

opacity:

/^0.5/.test(a.style.opacity),

 

//Verifystylefloatexistence

//(IEusesstyleFloatinsteadofcssFloat)

//IE678通过styleFloat来获取float,而标准浏览器用cssFloat

cssFloat:

!

!

a.style.cssFloat,

 

//Makesurethatifnovalueisspecifiedforacheckbox

//thatitdefaultsto"on".

//(WebKitdefaultsto""instead)

//checkbox的默认值为'on',chrome 23.0.1271.95m测试

checkOn:

(input.value==="on"),

 

//Makesurethataselected-by-defaultoptionhasaworkingselectedproperty.

//(WebKitdefaultstofalseinsteadoftrue,IEtoo,ifit'sinanoptgroup)

//IE中,第一个option不被默认选中,包括IE9依然如此,其他则选中

optSelected:

opt.selected,

 

//TestsetAttributeoncamelCaseclass.Ifitworks,weneedattrFixeswhendoingget/setAttribute(ie6/7)

//IE67无法通过setAttribute('class','ooxx')来设置className(IE67支持setAttribute('className','ooxx'

)),其他浏览器则可以,反之getAttribute同理

getSetAttribute:

div.className!

=="t",

 

//Testsforenctypesupportonaform(#6743)

//本机所有浏览器支持一样ie6789,chrome,ff

enctype:

!

!

document.createElement("form").enctype,

 

//Makessurecloninganhtml5elementdoesnotcauseproblems

//WhereouterHTMLisundefined,thisstillworks

//IE6在克隆HTML5的新标签元素时outerHTML有":

"

html5Clone:

document.createElement("nav").cloneNode(true).outerHTML!

=="<:

nav>

nav>",

 

//jQuery.support.boxModelDEPRECATEDin1.8sincewedon'tsupportQuirksMode

//检测诡异模式,也就是IE6没有doctype时的模式

boxModel:

(patMode==="CSS1Compat"),

 

//Willbedefinedlater

submitBubbles:

true,

changeBubbles:

true,

focusinBubbles:

false,

deleteExpando:

true,

noCloneEvent:

true,

inlineBlockNeedsLayout:

false,

shrinkWrapBlocks:

false,

reliableMarginRight:

true,

boxSizingReliable:

true,

pixelPosition:

false

};

 

//Makesurecheckedstatusisproperlycloned

//IE6789,checked不能被拷贝

input.checked=true;

support.noCloneChecked=input.cloneNode(true).checked;

 

//Makesurethattheoptionsinsidedisabledselectsaren'tmarkedasdisabled

//(WebKitmarksthemasdisabled)

//chrome23已修复

select.disabled=true;

support.optDisabled=!

opt.disabled;

 

//Testtoseeifit'spossibletodeleteanexpandofromanelement

//FailsinInternetExplorer

//IE678不能delete节点上的属性

try{

deletediv.test;

}catch(e){

support.deleteExpando=false;

}

 

//IE会拷贝事件

if(!

div.addEventListener&&div.attachEvent&&div.fireEvent){

div.attachEvent("onclick",clickFn=function(){

//Cloninganodeshouldn'tcopyoverany

//boundeventhandlers(IEdoesthis)

support.noCloneEvent=false;

});

div.cloneNode(true).fireEvent("onclick");

div.detachEvent("onclick",clickFn);

}

 

//Checkifaradiomaintainsitsvalue

//afterbeingappendedtotheDOM

//IE下,input被更换类型后,无法保持前一个类型所设的值,蛋疼

input=document.createElement("input");

input.value="t";

input.setAttribute("type","radio");

support.radioValue=input.value==="t";

 

input.setAttribute("checked","checked");

 

//#11217-WebKitlosescheckwhenthenameisafterthecheckedattribute

//chrome23已修复

input.setAttribute("name","t");

 

div.appendChild(input);

fragment=document.createDocumentFragment();

fragment.appendChild(div.lastChild);

 

//WebKitdoesn'tclonecheckedstatecorrectlyinfragments

//chrome23已修复

support.checkClone=fragment.cloneNode(true).cloneNode(true).lastChild.checked;

 

//Checkifadisconnectedcheckboxwillretainitschecked

//valueoftrueafterappendedtotheDOM(IE6/7)

support.appendChecked=input.checked;

 

fragment.removeChild(input);

fragment.appendChild(div);

 

//TechniquefromJuriyZaytsev

//

//Weonlycareaboutthecasewherenon-standardeventsystems

//areused,namelyinIE.Short-circuitingherehelpsusto

//avoidanevalcall(insetAttribute)whichcancauseCSP

//togohaywire.See:

https:

//developer.mozilla.org/en/Security/CSP

//检测事件类型,如果上面的英文文章看不懂,推荐看这篇:

if(div.attachEvent){

for(iin{

submit:

true,

change:

true,

focusin:

true

}){

eventName="on"+i;

isSupported=(eventNameindiv);

if(!

isSupported){

div.setAttribute(eventName,"return;");

isSupported=(typeofdiv[eventName]==="function");

}

su

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 小学教育 > 其它课程

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1