jQuery基础
关注
分享
扫一扫
111111111111
旧爱学长
需要购买作品的同学联系学长
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
55、新浪微博
55、新浪微博html:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>新浪微博</title> <link rel="stylesheet" type="text/css" href="css/index.css"/>...原创 2020-04-18 18:24:26 · 414 阅读 · 0 评论 -
51、52、53、54节点相关方法
51-jQuery添加节点相关方法内部插入append(content|fn)appendTo(content)会将元素添加到指定元素内部的最后prepend(content|fn)prependTo(content)会将元素添加到指定元素内部的最前面外部插入after(content|fn)insertAfter(content)会将元素添加到指定元素外部的后面befor...原创 2020-04-14 16:17:04 · 295 阅读 · 0 评论 -
50-无限循环滚动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>50-无限循环滚动</title> <style> *{ margin: 0; padd...原创 2020-04-14 14:21:17 · 123 阅读 · 0 评论 -
49-图标特效
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>49-图标特效</title> <style> *{ margin: 0; paddin...原创 2020-04-14 12:46:21 · 181 阅读 · 0 评论 -
48-jQuery的stop和delay方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>48-jQuery的stop和delay方法</title> <style> *{ margin: 0; ...原创 2020-04-14 12:32:02 · 193 阅读 · 0 评论 -
47-jQuery自定义动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>47-jQuery自定义动画</title> <style> *{ margin: 0; ...原创 2020-04-14 12:26:41 · 149 阅读 · 0 评论 -
46-弹窗广告
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>46-弹窗广告</title> <style> *{ margin: 0; paddin...原创 2020-04-14 12:16:39 · 150 阅读 · 0 评论 -
45-jQuery淡入淡出动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>45-jQuery淡入淡出动画</title> <style> *{ margin: 0; ...原创 2020-04-14 11:36:42 · 113 阅读 · 0 评论 -
44-下拉菜单
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>44-下拉菜单</title> <style> *{ margin: 0; paddin...原创 2020-04-14 11:34:16 · 156 阅读 · 0 评论 -
42、43-折叠菜单
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>42、43-折叠菜单</title> <style> *{ margin: 0; pad...原创 2020-04-14 11:33:44 · 124 阅读 · 0 评论 -
41-jQuery展开和收起动画
slideDown([s],[e],[fn])slideUp([s,[e],[fn]])<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>41-jQuery展开和收起动画</title> <style&g...原创 2020-04-13 20:15:23 · 180 阅读 · 0 评论 -
40-对联广告（监听网页滚动事件）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>40-对联广告</title> <style> *{ margin: 0; paddin...原创 2020-04-13 20:12:51 · 150 阅读 · 0 评论 -
39-jQuery显示和隐藏动画
show([s,[e],[fn]])hide([s,[e],[fn]])<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>39-jQuery显示和隐藏动画</title> <style> ...原创 2020-04-13 20:08:46 · 118 阅读 · 0 评论 -
36、37、38-TAB选项卡
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>36、37、38-TAB选项卡终极</title> <style> *{ margin: 0; ...原创 2020-04-13 19:47:50 · 144 阅读 · 0 评论 -
34、35-电影排行榜（移入移出练习）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>34、35-电影排行榜</title> <style> *{ margin: 0; pa...原创 2020-04-12 23:09:33 · 181 阅读 · 0 评论 -
33-jQuery移入移出事件
mouseover/mouseout事件, 子元素被移入移出也会触发父元素的事件mouseenter/mouseleave事件, 子元素被移入移出不会触发父元素的事件（推荐使用）通过hover监听移入移出（二种方式，jQuery专属的）<!DOCTYPE html><html lang="en"><head> <meta charset=...原创 2020-04-12 20:26:43 · 175 阅读 · 0 评论 -
32-jQuery事件委托练习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>32-jQuery事件委托练习</title> <style> *{ margin: 0; ...原创 2020-04-12 20:15:53 · 111 阅读 · 0 评论 -
31-jQuery事件委托
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>31-jQuery事件委托</title> <script src="js/jquery-1.12.4.js"></script> ...原创 2020-04-12 19:39:20 · 101 阅读 · 0 评论 -
30-jQuery事件命名空间面试题
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>30-jQuery事件命名空间面试题</title> <style> *{ margin: 0; ...原创 2020-04-12 19:24:17 · 150 阅读 · 0 评论 -
29-jQuery事件命名空间
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>29-jQuery事件命名空间</title> <style> *{ margin: 0; ...原创 2020-04-12 19:19:36 · 126 阅读 · 0 评论 -
28-jQuery自定义事件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>28-jQuery自定义事件</title> <style> *{ margin: 0; ...原创 2020-04-12 19:14:03 · 139 阅读 · 0 评论 -
27-jQuery事件自动触发
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>26-jQuery事件冒泡和默行为</title> <style> *{ margin: 0; ...原创 2020-04-11 23:46:50 · 218 阅读 · 1 评论 -
26-jQuery事件冒泡和默认行为
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>26-jQuery事件冒泡和默认行为</title> <style> *{ margin: 0; ...原创 2020-04-11 23:27:13 · 222 阅读 · 0 评论 -
25-jQuery事件移除
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>25-jQuery事件移除</title> <script src="js/jquery-1.12.4.js"></script> ...原创 2020-04-11 21:18:18 · 117 阅读 · 0 评论 -
24-jQuery事件绑定
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>24-jQuery事件绑定</title> <script src="js/jquery-1.12.4.js"></script> ...原创 2020-04-11 20:30:18 · 255 阅读 · 0 评论 -
23-jQuery的scrollTop方法——获取/设置滚动的偏移位
scrollTop([val]) 获取/设置滚动的偏移位scrollLeft([val])<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>23-jQuery的scrollTop方法</title> <...原创 2020-04-11 20:15:55 · 834 阅读 · 0 评论 -
22-jQuery位置和尺寸操作的方法
css位置offset([coordinates])position()scrollTop([val])下一节说scrollLeft([val])下一节说css尺寸height([val|fn])width([val|fn])innerHeight()innerWidth()outerHeight([soptions])outerWidth([options])<!D...原创 2020-04-10 21:15:03 · 171 阅读 · 0 评论 -
20-jQuery文本值相关的方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>20-jQuery文本值相关的方法</title> <style> *{ margin: 0; ...原创 2020-04-10 20:31:58 · 102 阅读 · 0 评论 -
19-jQuery操作css类相关的方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>19-jQuery操作类相关的方法</title> <style> *{ margin: 0; ...转载 2020-04-10 20:11:15 · 109 阅读 · 0 评论 -
18-属性节点attr和prop方法练习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>18-attr和prop方法练习</title> <script src="js/jquery-1.12.4.js"></script> ...原创 2020-04-09 20:32:30 · 167 阅读 · 0 评论 -
17-jQuery的prop方法 (具有 true 和 false 两个属性的属性节点，如 checked, selected 或者 disabled 使用prop())
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>17-jQuery的prop方法</title> <script src="js/jquery-1.12.4.js"></script> ...原创 2020-04-09 20:18:33 · 900 阅读 · 0 评论 -
16-jQuery的attr方法 (console.log($("input").attr("checked")); // checked)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>16-jQuery的attr方法</title> <script src="js/jquery-1.12.4.js"></script> ...原创 2020-04-09 20:08:12 · 238 阅读 · 0 评论 -
15-属性和属性节点（通过源生js了解）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>15-属性和属性节点</title> <script src="js/jquery-1.12.4.js"></script> <...原创 2020-04-07 20:37:24 · 242 阅读 · 0 评论 -
14-jQuery内容选择器
内容选择器:empty作用:找到既没有文本内容也没有子元素的指定元素:parent作用: 找到有文本内容或有子元素的指定元素:contains(text)作用: 找到包含指定文本内容的指定元素:has(selector)作用: 找到包含指定子元素的指定元素<!DOCTYPE html><html lang="en"><head> &...转载 2020-04-07 20:23:39 · 119 阅读 · 0 评论 -
12-静态方法holdReady方法
$.holdReady(true);作用: 暂停jquery代码的（ready）执行$.holdReady(false);//作用: 开启jquery代码的执行<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>12-静态方法hol...原创 2020-04-07 19:40:37 · 119 阅读 · 1 评论 -
11-jQuery中的其它静态方法
.trim();、.trim();、.trim();、.isWindow();、.isArray();、.isArray();、.isArray();、.isFunction();<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>1...原创 2020-04-07 19:29:36 · 95 阅读 · 0 评论 -
10-静态方法map方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>10-静态方法map方法</title> <script src="js/jquery-1.12.4.js"></script> &...原创 2020-04-06 18:19:56 · 461 阅读 · 0 评论 -
09-静态方法each方法——jQuery遍历each()方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>09-静态方法each方法</title> <script src="js/jquery-1.12.4.js"></script> ...原创 2020-04-06 18:19:25 · 181 阅读 · 0 评论 -
08-静态方法和实例方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>08-静态方法和实例方法</title> <script> // 1.定义一个类 function AClass() {...原创 2020-04-06 18:18:55 · 154 阅读 · 0 评论 -
07-jQuery对象
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>07-jQuery对象</title> <script src="js/jquery-1.12.4.js"></script> &l...原创 2020-04-06 18:18:07 · 105 阅读 · 0 评论