jQuery基础自学笔记（pink老师jQuery全内容）

共316个文件

jpg：99个

png：68个

html：51个

jquery

javascript

ecmascript

需积分: 5 162 浏览量 2022-04-12 09:40:05 上传评论 2 收藏 6.99MB ZIP 举报

《jQuery基础自学笔记》 jQuery 是一款非常流行的 JavaScript 库，由 John Resig 在2006年创建，它的出现极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。jQuery 的设计理念是“Write Less, Do More”，即用更少的代码实现更多的功能，这使得它成为开发者们的首选工具。 1. **jQuery 入门** jQuery 的引入通常通过在HTML文档的`<head>`部分插入`<script>`标签，引用CDN或者本地的jQuery库。例如： ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ``` 2. **选择器（Selectors）** jQuery 提供了丰富的选择器，如 ID 选择器 (`#id`)，类选择器 (`.class`)，元素选择器 (`element`) 等，可以快速选取DOM元素。复合选择器如 `$('div.class1, div.class2')` 可以同时选取多个元素。 3. **DOM 操作（DOM Manipulation）** - `$(selector).html()` 用于获取或设置元素的HTML内容。 - `$(selector).text()` 用于获取或设置元素的文本内容。 - `$(selector).append()` 和 `.prepend()` 分别用于在元素内部末尾和开头添加内容。 - `$(selector).remove()` 删除匹配的元素。 4. **事件处理（Event Handling）** - `$(selector).click(function() {...})` 绑定点击事件。 - `$(document).ready(function() {...})` 或 `$(function() {...})` 保证在DOM加载完成后执行代码。 - `$(selector).on('event', function() {...})` 用于绑定多种事件，如`'mouseenter'`, `'mouseleave'`等。 5. **动画效果（Effects）** - `$(selector).fadeIn()`, `.fadeOut()`, `.slideToggle()` 实现元素的淡入、淡出和滑动切换效果。 - `$(selector).animate()` 可以自定义动画效果，改变CSS属性值。 6. **AJAX 交互（Ajax）** - `$.ajax()` 是jQuery的核心异步请求函数，支持GET和POST等HTTP方法。 - `$.get()` 和 `$.post()` 是简化的AJAX请求，分别对应GET和POST请求。 - `$.getJSON()` 用于获取JSON格式的数据。 - `$.load()` 用于加载服务器返回的部分HTML内容到指定元素。 7. **插件系统（Plugins）** jQuery 社区提供了大量插件，如：轮播图插件（Bootstrap Carousel）、表单验证（validate）、日期时间选择器（datetimepicker）等，极大地扩展了jQuery的功能。 8. **链式操作（Chaining）** jQuery 对象返回的是自身，所以可以进行链式调用，如： ```javascript $('#myDiv').hide().css('color', 'red').fadeIn(1000); ``` 9. **兼容性（Compatibility）** jQuery 支持所有主流浏览器，包括IE6+，确保代码在不同环境下稳定运行。 10. **性能优化（Performance）** - 使用 `$()` 封装的选择器应该尽可能精确，减少DOM遍历。 - 使用 `.delegate()` 或 `.on()` 代替 `.live()` 进行事件委托，提高性能。 - 避免在循环中使用 jQuery 方法，可以先将元素存入数组再进行操作。通过学习和实践jQuery，前端开发者可以更高效地构建动态、交互性强的网页应用。无论你是初学者还是经验丰富的开发者，jQuery都能为你的项目带来极大的便利。

资源详情

资源评论

资源推荐

收起资源包目录

jQuery基础自学笔记（pink老师jQuery全内容）（316个子文件）

bootstrap.css 138KB

bootstrap.min.css 114KB

bootstrap-theme.css 22KB

bootstrap-theme.min.css 19KB

default(1).css 5KB

common.css 5KB

index.css 5KB

detail.css 4KB

common.css 4KB

fullpage.min.css 4KB

index.css 4KB

index.css 3KB

car.css 3KB

index.css 2KB

list.css 2KB

normalize.css 2KB

base.css 1KB

banner.dpg 91KB

banner2.dpg 44KB

banner3.dpg 35KB

banner3.dpg 34KB

banner2.dpg 26KB

banner1.dpg 18KB

glyphicons-halflings-regular.eot 20KB

icomoon.eot 5KB

icomoon(1).eot 5KB

icomoon.eot 5KB

abg(1).gif 314B

index.html 32KB

index.html 17KB

index.html 13KB

index.html 7KB

21-jQuery停止动画排队stop方法.html 4KB

20-简洁版滑动下拉菜单.html 4KB

index.html 4KB

淘宝精品服饰案例.html 4KB

index.html 3KB

09-新浪下拉菜单.html 3KB

16-tab栏切换.html 3KB

01-事件处理on.html 2KB

02-微博发布效果.html 2KB

06-jQuery对象拷贝.html 2KB

04-jQuery遍历元素.html 2KB

突出显示.html 2KB

08-jQuery被卷去的头部.html 2KB

10-jQuery筛选方法（下）.html 2KB

index.html 2KB

07-jQuery元素位置.html 2KB

01-jQuery属性操作.html 1KB

03-事件解绑off.html 1KB

03-jQuery对象和DOM对象.html 1KB

22-jQuery效果之淡入淡出.html 1KB

06-jQuery元素大小.html 1KB

04-自动触发事件(1).html 1KB

05-创建添加删除元素.html 1KB

15-jQuery操作样式之类操作.html 1KB

18-jQuery效果之显示与隐藏.html 1KB

07-jQuery筛选选择器.html 1KB

本地存储的数据格式.html 1KB

08-jQuery筛选方法（上）.html 1KB

19-jQuery效果之滑动.html 1KB

14-jQuery操作样式之css方法.html 1024B

13-链式编程.html 1015B

tudolist.html 1005B

06-jQuery隐式迭代.html 956B

11-jQuery排他思想.html 935B

17-jQuery类操作不影响原先类.html 832B

04-DOM对象和jQuery对象相互转换.html 828B

24-jQuery自定义动画效果animate.html 824B

05-事件对象.html 824B

07-多库共存.html 803B

05-jQuery基本和层级选择器.html 801B

01-jQuery的基本使用.html 792B

02-jQuery顶级对象$.html 787B

02-jQuery内容文本值.html 783B

索引号.html 737B

03-返回指定祖先元素.html 660B

demo.html 457B

favicon.ico 4KB

共 316 条

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>品优购-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title> <meta name="description" content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" /> <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购" />  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />  <link rel="stylesheet" href="css/base.css">  <link rel="stylesheet" href="css/common.css">  <link rel="stylesheet" href="css/index.css"> <script src="js/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body>  <div class="shortcut"> <div class="w"> <div class="fl"> <ul> <li>品优购欢迎您！ </li> <li> <a href="#">请登录</a> <a href="#" class="style-red">免费注册</a> </li> </ul> </div> <div class="fr"> <ul> <li><a href="#">我的订单</a></li> <li class="spacer"></li> <li> <a href="#">我的品优购</a> <i class="icomoon"></i> </li> <li class="spacer"></li> <li><a href="#">品优购会员</a></li> <li class="spacer"></li> <li><a href="#">企业采购</a></li> <li class="spacer"></li> <li><a href="#">关注品优购</a> <i class="icomoon"></i></li> <li class="spacer"></li> <li><a href="#">客户服务</a> <i class="icomoon"></i></li> <li class="spacer"></li> <li><a href="#">网站导航</a> <i class="icomoon"></i></li> </ul> </div> </div> </div>   <div class="header w">  <div class="logo"> <h1> <a href="index.html" title="品优购">品优购</a> </h1> </div>  <div class="search"> <input type="text" class="text" value="请搜索内容..."> <button class="btn">搜索</button> </div>  <div class="hotwrods"> <a href="#" class="style-red">优惠购首发</a> <a href="#">亿元优惠</a> <a href="#">9.9元团购</a> <a href="#">美满99减30</a> <a href="#">办公用品</a> <a href="#">电脑</a> <a href="#">通信</a> </div> <div class="shopcar"> <i class="car"> </i>我的购物车 <i class="arrow">  </i> <i class="count">80</i> </div> </div>   <div class="nav"> <div class="w"> <div class="dropdown fl"> <div class="dt"> 全部商品分类 </div> <div class="dd"> <ul> <li class="menu_item"><a href="#">家用电器</a> <i>  </i> </li> <li class="menu_item"> <a href="list.html">手机</a> 、 <a href="#">数码</a> 、 <a href="#">通信</a> <i>  </i> </li> <li class="menu_item"><a href="#">电脑、办公</a> <i>  </i> </li> <li class="menu_item"><a href="#">家居、家具、家装、厨具</a> <i>  </i> </li> <li class="menu_item"><a href="#">男装、女装、童装、内衣</a> <i>  </i> </li> <li class="menu_item"><a href="#">个户化妆、清洁用品、宠物</a> <i>  </i> </li> <li class="menu_item"><a href="#">鞋靴、箱包、珠宝、奢侈品</a> <i>  </i> </li> <li class="menu_item"><a href="#">运动户外、钟表</a> <i>  </i> </li> <li class="menu_item"><a href="#">汽车、汽车用品</a> <i>  </i> </li> <li class="menu_item"><a href="#">母婴、玩具乐器</a> <i>  </i> </li> <li class="menu_item"><a href="#">食品、酒类、生鲜、特产</a> <i>  </i> </li> <li class="menu_item"><a href="#">医药保健</a> <i>  </i> </li> <li class="menu_item"><a href="#">图书、音像、电子书</a> <i> </i> </li> <li class="menu_item"><a href="#">彩票、旅行、充值、票务</a> <i> </i> </li> <li class="menu_item"><a href="#">理财、众筹、白条、保险</a> <i>  </i> </li> </ul> </div> </div>  <div class="navitems fl"> <ul> <li><a href="#">服装城</a></li> <li><a href="#">美妆馆</a></li> <li><a href="#">传智超市</a></li> <li><a href="#">全球购</a></li> <li><a href="#">闪购</a></li> <li><a href="#">团购</a></li> <li><a href="#">拍卖</a></li> <li><a href="#">有趣</a></li> </ul> </div> </div> </div>   <div class="w"> <div class="main"> <div class="focus fl">  <a href="javascript:;" class="arrow-l"> < </a>  <a href="javascript:;" class="arrow-r">  </a>  <ul> <li> <a href="#"><img data-lazy-src="upload/focus.jpg" alt=""></a> </li> <li> <a href="#"><img data-lazy-src="upload/focus1.jpg" alt=""></a> </li> <li> <a href="#"><img data-lazy-src="upload/focus2.jpg" alt=""></a> </li> <li> <a href="#"><img data-lazy-src="upload/focus3.jpg" alt=""></a> </li> </ul>  <ol class="circle"> </ol> </div> <div class="newsflash fr"> <div class="news"> <div class="news-hd"> 品优购快报 <a href="#">更多</a> </div> <div class="news-bd"> <ul> <li><a href="#">【特惠】爆款耳机5折秒！</a></li> <li><a href="#">【特惠】母亲节，健康好礼低至5折！</a></li> <li><a href="#">【特惠】爆款耳机5折秒！</a></li> <li><a href="#">【特惠】9.9元洗100张照片！</a></li>