jQuery入门练习
关注
分享
扫一扫
杨亚仑
这个作者很懒，什么都没留下…
展开
-
第五部分总结（39-48）
这一部分主要学习了jQuery的动效。1.显示，隐藏，切换show(),hide(),toggle()。2.展开，收起，切换slideDown(),slideUp(),slideToggle()。3.淡入，淡出，切换fadeIn(),fadeOut(),fadeToggle()。以上的事件中，第一个参数为动效执行的时间，第二个参数为动效执行完毕后的回调函数。4.自定义动画ani...原创 2018-11-20 16:03:34 · 154 阅读 · 0 评论 -
45-jQuery淡入淡出动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>45-jQuery淡入淡出动画</title> <style> *{原创 2018-11-18 21:11:26 · 129 阅读 · 0 评论 -
44-下拉菜单
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>44-下拉菜单</title> <style> *{ margin:原创 2018-11-18 21:01:25 · 131 阅读 · 0 评论 -
35-电影排行榜下（添加事件）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>35-电影排行榜下（添加事件）</title> <style> *{原创 2018-10-24 23:12:56 · 161 阅读 · 0 评论 -
34-电影排行榜上（布局界面）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>34-电影排行榜上（布局界面）</title></head><style> *原创 2018-10-24 22:41:28 · 913 阅读 · 0 评论 -
33-jQuery移入移除事件
学习了jQuery的移入移除事件。1.mouseover/mouseout事件，子元素被移入移除也会触发父元素事件2.mouseenter/mouseleave事件，子元素被移入移除不会触发父元素事件,建议大家使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"...原创 2018-10-24 22:08:47 · 293 阅读 · 0 评论 -
32-jQuery事件委托练习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>32-jQuery事件委托练习</title> <style> *{原创 2018-10-24 21:46:38 · 169 阅读 · 0 评论 -
43-jQuery折叠菜单下（添加事件）
感想： 一.学习了1.transform: rotate(90deg);是用来旋转角度的。 补充：2.transform: scale(0.5) 或者 transform: scale(0.5, 2); （1）一个参数时表示水平和垂直同时缩放该倍率。 ...原创 2018-10-25 21:42:22 · 475 阅读 · 0 评论 -
41-jQuery展开和收起动画
感想：本节学习了slideDown(),slideUp(),slideToggle()方法,jQuery封装的一些dom对象的方法用起来非常方便，若是 在原生JS中，还需要使用监视器进行监听，实现起来比较麻烦<!DOCTYPE html><html lang="en"><head> <style> *...原创 2018-10-25 20:36:46 · 405 阅读 · 0 评论 -
42-折叠菜单上（布局界面）
感想： 在布局中学到了 1.text-indent: 2em;即可以将li的文本做缩进 2.background: url("images/arrow_right.jpg") no-repeat center center;即在背景中插入url 3.学习了display: inline-block; 回顾知识： 一.inline：（1）使元素变成行内...原创 2018-10-25 20:35:01 · 388 阅读 · 0 评论 -
40-对联广告（监听网页滚动事件）
感想：主要学习了$(window).scroll()这个网页滚动事件。 回顾了$("html,body").scrollTop()获取获取网页偏移位的方法，其中IE下是body,其他是html<!DOCTYPE html><html lang="en"><head> <style> *{ ...原创 2018-10-25 19:28:29 · 115 阅读 · 0 评论 -
39-jQuery显示和隐藏动画
感想：jQuery支持show()、hide()、toggle()三种动画方法，并且有两个参数，第一个是时间，第二个是执行完毕的回调函数 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>39-jQuery显示和隐藏动原创 2018-10-25 19:08:05 · 270 阅读 · 0 评论 -
38-TAB选项卡终极（和原生JS进行了对比）
感想：原生JS和jQuery相比： 1.原生JS是对dom节点直接进行操作，不能使用addClass和removeClass方法，而jQuery是对jQuery对象进行操作 即：$()获取到的是一个对象，而原生JS获取到的是dom节点 2.可以发现，JS的代码更多，for循环使用也更多，效率较低，而jQuery...原创 2018-10-25 18:40:59 · 108 阅读 · 0 评论 -
37-TAB选项卡下（添加事件）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>37-TAB选项卡下（添加事件）</title> <style> *{原创 2018-10-25 17:07:45 · 163 阅读 · 0 评论 -
46-弹窗广告
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>46-弹窗广告</title> <style> *{ margin:原创 2018-11-18 21:38:06 · 133 阅读 · 0 评论 -
47-jQuery自定义动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>47-jQuery自定义动画</title> <style> *{ m原创 2018-11-18 22:03:09 · 101 阅读 · 0 评论 -
49-图标特效
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>49-图标特效</title> <style> *{ margin:原创 2018-11-19 18:37:08 · 203 阅读 · 0 评论 -
48-jQuery的stop和delay
学习了jQuery的delay和stop。delay是延缓时长。stop可分为四种情况。1.立即停止当前动画，继续执行后续动画$("div").stop(); $("div").stop(false); $("div").stop(false,false);2.立即停止当前和后续动画$("div").stop(true); $("div").stop(true,false...原创 2018-11-19 16:34:13 · 234 阅读 · 0 评论 -
第四部分总结（24-33）
这一部分主要学习了jQuery的事件。1.首先学习了事件的绑定.on("click",function(){})，.click(function)和解除off()。2.学习了事件的冒泡，默认行为和自动触发。其中若想阻止冒泡，在儿子事件中加return return false或者event.stopPropagation();若想阻止默认行为，则通过添加return false或e...原创 2018-11-19 15:44:41 · 184 阅读 · 0 评论 -
56-狂拍灰太狼游戏
HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>狂拍灰太狼游戏</title> <link rel="stylesheet" href=&q原创 2018-11-21 23:18:35 · 2343 阅读 · 7 评论 -
第三部分总结（14-23）
这一部分主要学习了一些jQuery的方法。1.首先学习了jQuery的内容选择器。掌握 :empty，:parent，:contains(text)，:has(selector)的作用2.了解了属性和属性节点的区别。属性的是指任何对象，属性节点是指DOM对象。掌握属性的获取和设置，属性节点的获取和设置。其中属性节点的获取和设置有两种方法。1.attr();2.prop();3....原创 2018-11-19 11:57:43 · 134 阅读 · 2 评论 -
第二部分总结（8-12）
了解了jQuery的静态方法和实例方法的区别。其中学习了一些jQuery的静态方法。$.each(arry,function (index,value) {});$.map(arry,function (value,index) {});二者的作用：都是遍历数组和伪数组，注意他们的区别。 $.trim();作用：去除字符串两端的空格$.isWindow();作用：判断传入的对...原创 2018-11-19 10:01:57 · 112 阅读 · 0 评论 -
第一部分总结（3-7）
学习了jQuery的一些基本东西。主要是与原生的JS进行对比：1.入口函数$function()；2.$符号的冲突问题；3.核心函数，可以接收字符串选择器，字符串片段，DOM元素；4.jQuery对象是一个伪数组...原创 2018-11-19 09:55:45 · 112 阅读 · 0 评论 -
第六部分总结（51-54）
这一部分主要学习了jQuery的节点添加、删除、替换、复制等操作。添加：内插：（1）从后面插append(),appendTo(),效果一样，写法不同（2）从前面插prepend(),prependTo(),效果一样，写法不同 外插：（1）从后面插after(),insertAfter(),效果一样，写法不同（2）从前面插before(),insertAfter()，效...原创 2018-11-20 22:19:40 · 127 阅读 · 0 评论 -
55-新浪微博
学习到的东西：1.注意这个jQuery的引用一定要在index.js之前，否则index.js将使用不了jQuery2.textarea和<input type=text>的区别，前者是多行文本框，后者是单行文本框3.disabled是让按钮不可用4.box-sizing属性可以为三个值之一：content-box（default），border-box，padding...原创 2018-11-20 22:09:39 · 192 阅读 · 2 评论 -
54-jQuery复制节点相关方法
学习了jQuery复制节点的方法。clone()里面的参数如果是false，那么就是浅复制；如果是true，那么就是深复制所谓的浅复制和深复制的区别就是：浅复制不能复制元素的事件，而深复制可以<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &原创 2018-11-20 16:57:00 · 1060 阅读 · 0 评论 -
53-jQuery替换节点相关方法
学习了jQuery中替换节点相关的方法。replaceWith，replaceAll。替换所有匹配的元素为指定的元素两者作用一样，只不过写法不同。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>53-jQue原创 2018-11-20 16:44:25 · 191 阅读 · 0 评论 -
52-jQuery删除节点相关方法
学习了jQuery的删除节点一些方法。remove和detach的用法一模一样，删除指定元素。empty的用法是删除指定元素的内容和子元素，但指定元素本身不被删除，有清空的意思。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <titl原创 2018-11-20 16:34:43 · 133 阅读 · 0 评论 -
51-jQuery添加节点相关的方法
学习了jQuery添加节点的一些方法。内部前面插入：prepend，prependTo内部后面插入：append，appendTo外部前面插入：before，insertBefore外部后面插入：after，insertAfter<!DOCTYPE html><html lang="en"><head> <meta ch...原创 2018-11-20 16:22:36 · 122 阅读 · 0 评论 -
总结一下jQuery操作节点的方法（创建、选择、插入节点）
版权声明：博客的原创文章，大家可以转载，但是一定要声明文章来源。谢谢。 https://blog.csdn.net/xinghuo0007/article/details/71437066 知识点一：创建节点注意：Jquery创建元素节点、属性节点、文本节点...转载 2018-10-25 16:30:45 · 184 阅读 · 0 评论 -
36-TAB选项卡上（布局界面）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>36-TAB选项卡上（布局界面）</title> <style> *{原创 2018-10-25 14:49:07 · 425 阅读 · 0 评论 -
16-jQuery的attr方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>16-jQuery的attr方法</title> <script src="JS_file/jquery-1.12原创 2018-10-07 13:41:54 · 120 阅读 · 0 评论 -
15-属性和属性节点
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>15-属性和属性节点</title> <script src="JS_file/jquery-1.12.4.js&原创 2018-10-07 13:41:35 · 411 阅读 · 2 评论 -
14-jQuery内容选择器
$("div:empty") 作用：找到既没有文本内容也没有子元素的指定元素$("div:parent") 作用：找到有文本内容或者有子元素的指定元素$("div:contains(text)") 作用:找到包含指定文本内容的指定元素$("div:has(span)") 作用：找到包含指定子元素的指定元素<!DOCTYPE html><html lang="原创 2018-10-07 13:41:08 · 97 阅读 · 0 评论 -
13-通过webStorm简化操作
1.快速生成代码第一步：打开webStorm，然后点击file->setting我的代码为<script src="JS_file/jquery-1.12.4.js"></script><script> $(function () { // 编写jQuery相关代码 })...原创 2018-10-06 16:06:37 · 292 阅读 · 0 评论 -
12-静态方法holdReady方法
$.holdReady(false);开始入口函数$.holdReady(true);暂停入口函数<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>12-静态方法holdReady方法</title&a原创 2018-10-06 15:16:12 · 137 阅读 · 0 评论 -
11-jQuery的其它静态方法
$.trim();作用：去除字符串两端的空格$.isWindow();作用：判断传入的对象是window对象$.isArray();作用：判断传入的对象是真数组对象$.isFunction();作用：判断传入对象是一个函数<!DOCTYPE html><html lang="en"><head> <meta charset=...原创 2018-10-06 15:04:43 · 104 阅读 · 0 评论 -
10-静态方法map方法
原生的map与jQuery的map。1.原生的map：不能遍历伪数组。2.jQuery的map：可以遍历伪数组。jQuery的map与each。1.map：map返回的是一个空数组，并且支持在回调函数中对遍历的数组进行处理。2.each：each是遍历谁就返回谁，并且不支持在回调函数中对遍历的数组进行处理。<!DOCTYPE html><html l...原创 2018-10-06 14:08:09 · 850 阅读 · 0 评论 -
09-静态方法each方法
原生的forEach和jQuery的each。1.原生的forEach：forEach只能遍历数组，不能遍历伪数组2.jQuery的each：each即可以遍历数组，也可以遍历伪数组<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <ti原创 2018-10-06 13:35:27 · 166 阅读 · 0 评论 -
08-静态方法和实例方法
给类添加方法有两种：1.静态方法：直接给类添加即可。2.实例方法：给类 添加后，还需要进行实例化出一个对象，然后去调用这个方法。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>08-静态方法和实例方法&原创 2018-10-06 13:09:52 · 152 阅读 · 0 评论