![](https://img-blog.csdnimg.cn/2019091813595558.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
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 · 366 阅读 · 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 · 241 阅读 · 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 · 96 阅读 · 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 · 129 阅读 · 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 · 159 阅读 · 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 · 100 阅读 · 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 · 95 阅读 · 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 · 87 阅读 · 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 · 108 阅读 · 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 · 88 阅读 · 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 · 138 阅读 · 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 · 106 阅读 · 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 · 100 阅读 · 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 · 95 阅读 · 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 · 135 阅读 · 0 评论 -
33-jQuery移入移出事件
mouseover/mouseout事件, 子元素被移入移出也会触发父元素的事件mouseenter/mouseleave事件, 子元素被移入移出不会触发父元素的事件(推荐使用)通过hover监听移入移出(二种方式,jQuery专属的)<!DOCTYPE html><html lang="en"><head> <meta charset=...原创 2020-04-12 20:26:43 · 125 阅读 · 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 · 70 阅读 · 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 · 74 阅读 · 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 · 114 阅读 · 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 · 78 阅读 · 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 · 109 阅读 · 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 · 157 阅读 · 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 · 181 阅读 · 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 · 72 阅读 · 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 · 205 阅读 · 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 · 755 阅读 · 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 · 132 阅读 · 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 · 59 阅读 · 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 · 79 阅读 · 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 · 122 阅读 · 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 · 857 阅读 · 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 · 206 阅读 · 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 · 188 阅读 · 0 评论 -
14-jQuery内容选择器
内容选择器:empty作用:找到既没有文本内容也没有子元素的指定元素:parent作用: 找到有文本内容或有子元素的指定元素:contains(text)作用: 找到包含指定文本内容的指定元素:has(selector)作用: 找到包含指定子元素的指定元素<!DOCTYPE html><html lang="en"><head> &...转载 2020-04-07 20:23:39 · 77 阅读 · 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 · 94 阅读 · 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 · 69 阅读 · 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 · 364 阅读 · 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 · 104 阅读 · 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 · 95 阅读 · 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 · 73 阅读 · 0 评论