jQuery炫酷应用实例集锦PDF电子书下载

第1章 基础实例 1

001以淡入淡出的效果显示或隐藏元素 1

002以卷帘效果展开或收缩被选择的元素 2

003根据可见状态确定是否显示或隐藏元素 4

004根据状态确定是否滑入或滑出被选元素 5

005自动确定是否淡入淡出地显示或隐藏元素 7

006在指定的时间内完成元素的显示或隐藏 8

007查找并显示在页面中被隐藏的元素 9

008以动画效果改变块内多个元素的不同属性 10

009使用分组选择器操作不同元素的相同属性 11

010判断指定的元素是否嵌套在父元素里面 12

011获取指定元素在同类元素中的索引位置 13

012将指定的事件和方法绑定到指定的元素 14

013将多个事件和方法同时绑定到指定元素 15

014为元素同时绑定多个事件及其响应方法 16

015为同类元素添加相同的事件响应方法 17

016为匹配元素的事件绑定一次性响应方法 18

017为动态生成的元素绑定其事件响应方法 19

018处理在容器中的指定元素事件是否冒泡 20

019为document绑定或解绑相关鼠标事件 22

020创建删除动态生成的元素及自身的按钮 23

021设置元素属性创建只能单击一次的按钮 24

022在指定元素的后面补充相同类型的内容 25

023在被选元素的开始位置插入指定的内容 26

024在被选元素的前边插入新的HTML标记 27

025在被选元素的末尾添加新的HTML标记 28

026清除元素的HTML标记同时保留元素内容 29

027判断某个指定ID的HTML标记是否存在 31

028获取outerHTML整个节点的HTML内容 32

029修改无序列表ul的首项末项及其指定项 32

030根据指定条件删除无序列表ul的节点 34

031在相同结构的无序列表ul之间移动节点 35

032获取在无序列表ul中任意位置的li元素 36

033获取无序列表ul指定位置的节点内容 38

034获取和设置在无序列表ul中的节点样式 39

035根据父元素筛选并设置无序列表ul的节点 40

036在树结构中查找离当前节点最近的父节点 42

037判断鼠标是否单击了无序列表ul的节点 43

038获取在无序列表ul中的li元素的个数 44

039在无序列表ul中筛选有子级的li元素 45

040筛选无序列表ul的奇数或偶数行的li元素 46

041筛选无序列表ul的某行之前或之后的li元素 47

042在无序列表ul中实现根据内容筛选li元素 49

043在无序列表ul中倒序查找符合条件的li元素 50

044选择无序列表ul某个li元素之前（后）的元素 51

045选择无序列表ul指定范围内的多个li元素 52

046根据输入字符智能匹配符合要求的11元素 54

047在无序列表ul中每隔3行设置li元素的背景色 56

048为指定的元素添加或移除指定的CSS样式 57

049在两种不同风格的CSS样式之间自动切换 59

第2章 块实例 61

050使用文档操作方法动态插入一个DIV块 61

051为动态新增DIV块添加click事件响应方法 62

052使用新DIV块替换旧DIV块内的多个元素 63

053在一个DIV块之前插入另一个DIV块 64

054动态隐藏DIV块并带有动画缓冲效果 65

055动态显示或隐藏在DIV块中包含的内容 66

056在DIV块中以Ajax方式加载HTML文件 67

057获取用户在DIV块中的鼠标单击坐标值 68

058检测用户在DIV块上执行的鼠标单击操作 69

059拖动分隔条改变左右两个DIV块的范围 70

060拖动分隔条改变上下两个DIV块的范围 72

061实现左右两个不同DIV块高度自动匹配 73

第3章 单选按钮实例 75

062根据值设置单选按钮radio的默认选项 75

063判断单选按钮radio的某选项是否被选中 76

064获取用户在单选按钮radio组中的选择结果 77

065获取两组或多组单选按钮radio的选择结果 78

066通过图片自定义单选按钮radio的圆点符号 79

067通过图片实现单选按钮radio的勾选特效 81

第4章 复选框实例 83

068设置指定复选框checkbox的选中状态 83

069判断指定复选框checkbox的选中状态 84

070获取已选择的所有复选框checkbox 85

071获取未选择的所有复选框checkbox 86

072反选已选复选框checkbox之外的选项 87

073全选或全不选所有的复选框checkbox 89

074限制只能选有限个数的复选框checkbox 90

075选择复选框checkbox的偶数项或奇数项 91

076取消或选中复选框checkbox的相邻选项 93

077同步全选或多选复选框checkbox的状态 94

078使用图片自定义复选框checkbox的勾选 95

第5章 下拉框实例 98

079根据值设置select下拉框的默认选项 98

080根据索引设置select下拉框的默认选项 99

081根据文本设置select下拉框的默认选项 100

082获取select下拉框的已选中选项值 101

083获取select下拉框的已选中选项索引 102

084获取select下拉框的已选中选项文本 104

085获取select下拉框的选项最大索引 105

086获取select下拉框的选项个数 106

087在select下拉框中增加和删除选项 106

088在select下拉框中插入新的选项 108

089在select下拉框中追加和清空选项 109

090取消选择select下拉框的任何选项 110

091禁止选择select下拉框的某个选项 111

092在select下拉框中滚动显示选项 112

093自定义select下拉框的选项单击事件 113

094在select下拉框中选择多个选项 115

095逐行下移或上移select下拉框的选项 116

096在两个select下拉框之间互相移动选项 117

097对select下拉框的选项进行分级分组 119

098页面控件跟随select下拉框的值而改变 120

099单击select下拉框选项则跳转到目标页 121

100实现级联select下拉框选项的联动响应 122

101实现父子select下拉框选项的联动响应 123

102使用触发器触动两级select下拉框联动 124

103实现三级select下拉框的顺次联动响应 126

104使用无序列表模仿select下拉框的功能 128

105使用无序列表和文本框模仿select下拉框 129

106创建允许用户输入数据的select下拉框 131

107通过新窗口为select下拉框增加新选项 132

108直接使用数组为select下拉框添加选项 133

109使用二维数组为select下拉框添加选项 134

110从JSON文件中加载select下拉框选项 136

第6章 文本框实例 138

111获取和设置用户在文本框输入的内容 138

112限制用户必须在文本框中输入数字 139

113在文本框中只能输入浮点数或自然数 140

114限制在文本框中只能输入数字字母 140

115禁止在文本框中输入特殊字符或空格 142

116限制在文本框中能够输入的最多字符 144

117统计在文本框中可输入的剩余字符数 145

118自动闪烁用户在文本框中的输入内容 147

119在文本框获得焦点时高亮显示其内容 148

120在验证时实现抖动不符合要求的文本框 150

121监控文本框在一段时间是否有输入内容 150

122在超过文本框限制字符数时禁用提交按钮 151

123在文本框中实现放大缩小以及上下滚动 153

124在文本框右边悬浮一个内容输入提示框 154

125在文本框中输入邮箱时显示输入列表 155

126在空文本框失去焦点时恢复默认值 156

127在空文本框失去焦点时填补默认值 157

128在文本框为空白状态时显示提示信息 158

129在文本框的内部设置缺省提示信息 159

130比较简略地在文本框中设置提示信息 161

131在textarea文本域的光标处插入文本 162

132获取多个文本框的ID标识和输入内容 163

133在多个文本框间通过回车键切换焦点 164

134将文本框的输入内容转换成二维码 165

第7章 选项卡实例 168

135创建可淡入淡出切换内容的选项卡 168

136创建以卷帘下拉式滑动的选项卡 169

137仅使用DIV块创建纵向风格的选项卡 171

138使用无序列表和DIV块创建水平选项卡 173

139创建嵌套型导航菜单风格的选项卡 174

140创建与滑动菜单风格类似的选项卡 176

141创建类似MSN中文网的滑动选项卡 178

142创建自动轮播显示的垂直选项卡 180

143创建自动轮播显示的水平选项卡 182

144创建自动轮播显示的滑动选项卡 184

145创建按照流程顺序执行的选项卡 186

146创建城市名按拼音索引的选项卡 189

147创建类似于单选按钮风格的选项卡 192

148创建类似于图文结合按钮的选项卡 195

第8章 表格实例 198

149获取和设置表格table的单元格文本内容 198

150获取和设置表格table的单元格HTML内容 199

151获取在表格table中鼠标单击的单元格内容 200

152获取表格table指定列的所有单元格内容 201

153获取表格table指定列和行的单元格内容 202

154设置表格table首行和首列的背景颜色 204

155以隔行错色的效果显示表格table的数据 205

156在表格table中实现鼠标单行选择效果 205

157当鼠标在表格table上移动时选择整行 206

158高亮显示表格table的鼠标所在当前行 207

159高亮显示表格table的鼠标所在移动行 208

160使用多色不断闪烁表格table的边框线 209

161以嵌套方式动态生成多行多列表格table 210

162隐藏在表格table中的指定行和指定列 211

163根据条件隐藏或显示表格table的部分行 212

164在表格table中实现逐行上移或逐行下移 214

165将指定行的内容移到表格table的顶部 215

166在表格table中动态插入行或删除行 216

167在表格table中动态增加列和删除列 217

168在表格table的每行设置增加和删除按钮 218

169在表格table中使用克隆的对象新增数据 220

170清空表格table除标题栏外的所有内容 221

171把表格table的所有数字转换成百分数 222

172使用新建元素替换表格table的被选元素 223

173互换在表格table中的输入框和文本标签 224

174在表格table中合并相同内容的单元格 226

175允许编辑在表格table中的任意单元格 228

176在表格table的末尾实现自动增加空白行 230

177筛选在表格table中符合指定条件的内容 231

178筛选JSON数据源并显示在表格table中 232

179筛选XML文件内容并显示在表格table中 234

180单击列头排列在表格table中的该列数据 235

181以分组形式展开和折叠表格table的内容 238

182在悬浮框中放大显示在表格table中的图片 239

第9章 菜单实例 241

183一行代码实现的无限折叠或展开菜单 241

184创建自动折叠和展开的垂直导航菜单 242

185以链式方式创建的折叠垂直导航菜单 243

186以手风琴方式展开折叠的垂直导航菜单 245

187创建可收缩展开的多级垂直导航菜单 246

188创建卷帘式展开折叠的垂直导航菜单 248

189创建以卷帘风格缩放的垂直导航菜单 249

190创建图片和文字结合的垂直导航菜单 251

191创建子菜单横向滑出的垂直导航菜单 252

192创建子菜单图文结合的垂直导航菜单 254

193创建带指示符号的三级垂直导航菜单 256

194创建类似于bar滑动的水平导航菜单 258

195创建鼠标悬停背景翻转的水平导航菜单 260

196创建水平滑动的异形背景的导航菜单 261

197创建水平方向滑动的二级横向导航菜单 263

198实现背景色线性渐变的水平导航菜单 265

199高仿电商平台的折叠展开的水平导航菜单 266

200在hover事件中实现的水平下拉式菜单 269

201在hover事件中控制的水平下拉式菜单 271

202在mouseover事件中控制的下拉式菜单 272

203创建高亮显示的二级横向导航菜单 274

204创建横向和纵向都有动画的下拉菜单 275

205创建有或无次级菜单结合的导航菜单 277

206创建类似于下拉窗帘的动态滑动菜单 278

207创建以翻滚方式切换的中英文菜单 279

208创建动感丰富的滑出图片的导航菜单 281

209创建动感丰富的滑出文字的导航菜单 282

210实现类似于select下拉框的下拉式菜单 283

211创建小图和大图联动的图片导航菜单 285

212创建主菜单在圆心且子菜单在圆周的菜单 288

213高仿京东首页的横向展开的二级菜单 289

214高仿苹果底部任务栏图形大小渐变菜单 292

215在图片上创建自定义的右键上下文菜单 293

216创建不随滚动条改变的悬浮导航菜单 294

217单击悬浮菜单滚动到指定的元素位置 296

218实现导航菜单的当前项跟随鼠标飘移 299

219在鼠标单击最右边时浮动菜单自动左移 301

220为侧边导航菜单创建气泡式的提示窗口 302

221禁止在右键单击页面时弹出的默认菜单 304

222实现从JSON中将数据加载到二级菜单 305

第10章 图片实例 307

223在鼠标放在图片上时上下震动图片 307

224在鼠标放在图片上时左右摆动图片 308

225使用图片模拟QQ聊天窗口的抖动特效 309

226在使用鼠标单击图片时左右晃动图片 310

227在鼠标指向图片时浮出半透明的窗口 312

228在鼠标悬停图片时浮出半透明的窗口 313

229在鼠标悬停图片时滑出半透明的窗口 314

230在鼠标放在图片上时滑出隐藏的窗口 316

231在鼠标放在图片上时滑出上下遮罩层 317

232为图片添加从下向上滑出的遮罩层 318

233在鼠标放在标题上时滑出对应的图片 319

234当鼠标放在小图上时即显示对应的大图 321

235高亮显示鼠标选择的图片并使周围变暗 322

236放大或缩小选择的图片并重置关联样式 323

237通过滑动鼠标的滚轮来放大或缩小图片 325

238在图片收缩和扩展时相关文字动态跟随 326

239局部放大用户在小图片中选择的部分 327

240创建从右上角向左下角拉出图片的效果 329

241从左至右展开图片和从右至左折叠图片 330

242以动画方式折叠图片并改变透明度 331

243确保悬浮图片一直在用户的可视范围内 332

244控制悬浮的广告图片是否隐藏或显示 333

245拖动range控制图片按照一定角度倾斜 334

246使用鼠标把图片拖曳到页面的任意位置 335

247在可任意拖曳的图片上添加关闭功能 337

248在图片周围添加类似走马灯的虚线框 338

249以瀑布流方式显示已加载的多张图片 339

250在滚动页面时以瀑布流方式加载图片 341

251使用鼠标单击小图片则弹出对应大图片 343

252使用鼠标单击缩略图则播放对应视频 344

253左右滑动鼠标来切换显示两张图片 346

254以单张方式滚动显示在图库中的图片 347

255以成组方式滚动显示在图库中的图片 348

256以连续滚动方式显示在图库中的图片 349

257以无缝连续滚动方式显示图库中的图片 351

258以上一张下一张的方式显示多张图片 352

259成组的多张图片以手风琴方式滑动切换 354

260实现大图和小图的自动轮播或指定显示 356

261从上到下循环显示在无序列表ul中的图片 358

262高亮滚动切换图片和文字混合的模块 360

263轻量级无插件的广告图片轮播切换 362

264轻量级无插件的广告图片轮播显示 363

265轻量级无插件的广告图片切换显示 365

266轻量级无插件的图片定时轮播显示 366

267大图片和缩略图片同时实现自动轮播 368

268通过有序和无序列表控制图片轮播 369

269悬浮前后导航按钮的广告图片轮播 371

270同时实现自动轮播和纵向导航的图片显示 374

271分组批量显示包含图片和文字的组合体 376

272实现选中的商品图片以抛物线飞入购物车 379

273创建适合书架阶梯展示的图片缩放特效 381

274在随机排列图片时显示图片的移动轨迹 383

275在执行操作图片前确保图片加载完成 385

276根据图片地址获取图片的高度和宽度 386

277在单击图片时自动切换到下一张图片 388

278检测键盘按键输入来更换显示的图片 389

279强制图片等元素位于页面的中心位置 391

280在每隔一段时间后改变网页背景图片 392

281以不同方式设置页面的背景图片样式 393

282通过插件实现小图和大图联动的画廊 394

第11章 动画实例 397

283以动画效果从当前位置返回到指定位置 397

284在返回页面顶部或底部时实现动画效果 398

285实现类似点赞飞出数字＋1的动画效果 399

286实现类似点赞的随机数字显示动画效果 400

287实现星级评分控件动态显示等级及分数 401

288实现类似于扑克牌洗牌特效的翻页相册 403

289实现新闻标题的逐条渐隐渐显滚动显示 405

290实现新闻标题的逐行（屏）自动滚动显示 406

291实现图文标题的逐条循环自动滚动显示 408

292通过层叠实现3D样式的文字动画效果 410

293实现类似于进度条的动态投票柱状效果图 411

294创建与页面加载类似的简易动画进度条 412

295高仿360系统安全体检风格的动画进度条 413

296使用gDialog插件制作超酷动画对话框 415

297通过回调函数实现多个动画的不间断执行 417

298在多个动画队列中启动动画或停止动画 418

299实现在队列中的任务按指定时间延迟执行 419

300以链式方式完成在动画队列中的多个动画 420

第12章 特效实例 422

301创建百分比和图形变化联动的进度条 422

302创建可暂停的数字和图形联动的进度条 423

303在同一按钮上滚动实现多个按钮的功能 424

304使用数学函数实现超炫超酷的鼠标轨迹 425

305创建不随页面滚动的悬浮对联广告特效 427

306高仿百度贴吧顶部不随滚动条滚动的特效 428

307实现类似于九宫格大转盘的随机抽奖 429

308使用插件高仿中心旋转指针的抽奖转盘 432

309创建像飘浮的云一样的随机中奖特效 434

310使用插件实现在输入框中弹出列表树 436

311实现动态显示图像和文字结合的星级评分 438

312高仿城市地铁线路指示灯的到站提示特效 440

313高仿电商平台的切换全部和部分品牌特效 441

314实现类似于打字员打字的逐字输入效果 442

315通过2D转换创建连续旋转缩放的文字块 443

316创建从中心向左右展开的动感立体文字特效 445

317在鼠标滑过文章或新闻列表时突出显示条目 446

318实现多行公告文字从下到上逐行滚动显示 448

319实现图文标题淡入淡出地逐条循环显示 449

320实现新闻标题按照分组从上到下循环显示 451

321实现单行公告信息文字从右到左滚动显示 452

322使用DIV块创建循环显示的跑马灯文字特效 454

323通过marquee创建跑马灯文字的滚动特效 455

324实现左右来回跑马的荡秋千似的文字特效 456

第13章 超链接实例 458

325使用属性过滤器筛选超链接的开始部分 458

326使用属性过滤器筛选超链接的结尾部分 459

327使用属性过滤器筛选超链接的首尾部分 460

328使用属性过滤器筛选超链接的指定属性 461

329使用属性过滤器筛选超链接的指定属性值 462

330使用属性过滤器筛选超链接的属性部分值 463

331使用过滤器筛选非指定属性值的超链接 464

332单击超链接显示长文本的部分和全部内容 465

333在打开超链接所指向的网页时开启新窗口 466

334在单击超链接跳转主页面时弹出广告窗口 467

335定时关闭在单击超链接时弹出的广告窗口 468

336在单击一个超链接时弹出多个广告窗口 469

337实现鼠标悬停在超链接上时滑出下拉窗口 470

338当鼠标悬停在超链接上时浮出图片文字框 471

339通过自定义函数为超链接添加图文提示框 473

340为高仿按钮的超链接创建悬浮提示信息框 474

341为超链接创建带动画效果的自定义动画提示 475

342实现在鼠标悬停超链接时半透明显示图片 476

343在鼠标悬停超链接时以翻牌动画切换状态 478

344弹出定制的浏览器新窗口显示超链接页面 479

345禁止页面内的所有超链接跳转到目标页面 480

346高仿百度联盟广告的metro风格的主题链接 481

347实现把超链接变为3D风格的Windows按钮 482

348使用备用图片替换不正确的图片链接 483

第14章 窗口实例 485

349创建四周灰暗但中心高亮的遮罩层 485

350创建居中半透明效果显示的遮罩层 486

351创建在弹出时带遮罩层的自定义消息框 488

352创建影院在线订票订座的可视购票窗口 489

353创建热气球穿透飞行效果的登录窗口 492

354当鼠标悬停在元素上时浮出关联窗口 495

355创建不随滚动条滚动而改变的客服窗口 496

356创建不随滚动条滚动而改变的在线窗口 497

357在页面左右两侧悬浮两个对称广告窗口 498

358创建感应鼠标变化的抽屉式滑动窗口 500

359在页面左侧创建抽屉式的在线客服窗口 501

360当鼠标经过地图热点时显示信息窗口 502

361在显示或关闭页面时弹出广告窗口 504

362为页面上的元素创建一个悬浮提示框 505

363在单个文件中创建主窗口和弹出窗口 506

364创建从右上角向左下角滑出的消息框 507

365创建从左上角向右下角滑出的消息框 509

366创建带阴影效果的三角形指示符的提示框 510

367使用菱形字符创建三角形指示符的消息框 511

368在访客关闭网页前弹出确认离开的消息框 513

369创建类似于折叠展开菜单的折叠面板 513

370创建与卷帘风格类似的折叠展开面板 515

371创建类似于手风琴伸缩效果的折叠面板 516

第15章 数据管理实例 519

372使用正则表达式去掉日期的首位0字符 519

373使用正则表达式校验日期格式的字符串 520

374使用正则表达式校验字符串是否是数字 521

375使用正则表达式提取在字符串中的数字 522

376使用正则表达式清除字符串的首尾空格 523

377使用正则表达式清除字符串的标点符号 524

378使用正则表达式清除字符串的重复内容 525

379使用正则表达式清除字符串的非数字字符 526

380使用正则表达式统计中文字符的数量 527

381使用正则表达式获取颜色的十六进制值 527

382使用正则表达式把单词首字母转换为大写 528

383解析在XML中的每个对象及其子对象 529

384解析在XML中的每个对象的每个属性 531

385使用ajax（）方法解析XML文件及节点名称 532

386使用jQuery底层ajax（）方法读取XML文件 533

387直接读取并输出在XML中的数据内容 534

388实现从XML中将数据加载到列表视图 535

389解析在JSON字符串中的多个对象 537

390解析在JSON字符串中的每个元素 538

391解析在JSON字符串中的部分数据 539

392解析在JSON字符串中的数组数据 540

393解析在JSON格式文件中的每个元素 541

394解析在JSON字符串中的二维数组 542

395以二维数组的方式直接访问JSON字符串 543

396使用jQuery底层ajax（）方法读取JSON文件 545

397使用ajax（）方法读取文本文件的内容 546

398根据元素值查找元素在数组中的索引值 546

399根据元素索引和元素值筛选数组元素 547

400根据索引和值筛选并批量修改数组元素 548

401使用each（）方法遍历对象的每个属性 549

402使用each（）方法遍历数组的每个元素 550

403使用map（）方法获取选中checkbox选项 551

404把阿拉伯数字金额转换成大写金额汉字 552

405根据身份证号码解析性别和出生日期 554

406实现密码输入框三级强度的安全验证 555

第16章 其他实例 557

407在主页面为子框架IFrame动态新增控件 557

408在主页面模拟单击IFrame子框架的按钮 558

409在主页面获取子框架IFrame的文本框内容 559

410操控在二级子框架IFrame中的checkbox 561

411从子框架IFrame操控主页面的checkbox 562

412使用cookie保存和读取非长期性的数据 563

413设置有效期的cookie和强制cookie失效 564

414在页面上即时显示当前日期和时间信息 565

415在页面上即时显示当前日期及星期信息 567

416使用插件实现下拉式的日期时间选择 568

417使用鼠标在非插件万年历中选择日期 570

418在带有节气的农历中使用鼠标选择日期 572

419自动汇总在购物车中的所有商品金额 574

420获取document和body的高度和宽度 578

421自动滑动滚动条到某个指定的元素位置 579

422在超长页面中快速从底部返回到顶部 580

423禁止浏览器的滚动条滚动指定的文字块 581

424在限定范围内禁止滚轮滑动引发页面滚动 582

425在指定的时间内自动关闭当前显示页面 583

426在每隔一段时间之后改变页面的背景颜色 584

427动态增加或减小在页面中的字体尺寸大小 585

428过滤HTML标签并高亮显示指定的关键字 586

429禁止访客选择网页文本内容进行复制粘贴 587

430允许鼠标把文字块拖曳到页面的任意位置 588

431在执行特定操作前禁止提交操作按钮 590

432禁用表单默认的单击回车键即提交的功能 591

433禁用或启用默认的使用鼠标选择文本功能 592

434禁用或启用F5键默认的网页重新加载功能 593

435在有新消息时自动闪烁浏览器的标题栏 594

436实现在线人数等即时数据的动态刷新 595

437显示倒计时剩余时间并在为0时关闭广告 596

438使用省略号截断新闻标题的超长字符串 598

439在上传前检测用户选择的上传文件类型 599

440实现将用户选择的文本发送到新浪微博 599

441基于新浪API等获取来访者所在省份和城市 601

442在jQuery中新增自定义的扩展方法 602