jQuery
jQuery
野生小米椒
初学者
展开
-
如何做一个tab栏下划线跟随选中的li移动
第一个知识要想让标签有选中状态(active)就添加样式要实现这样的效果需要jquery和伪元素,由于每个字数不一样,纯用Jquery让它left移动比较难对齐。我们可以借鉴华为云,页面结构大概这样以上代码是添加类思路:给ul设置宽度和相对定位,给li加伪元素和绝对定位,这样下划线就能定好位,并且随着浏览器宽度变化也不会改变,首先先宽度设置为0,这样就不会显示出来,然后有active状态之后,再让它有宽度就能显示出来了如果希望宽度和li标签一样长16px不一定对,可以自己试试...原创 2021-01-09 17:49:59 · 678 阅读 · 0 评论 -
Js控制网页鼠标滚动时,顶部导航条,由透明变成有背景色
<script type="text/javascript" src="./files-m/jquery-1.9.1.min.js"></script><script >//网页加载时运行$(function(){ navHeader(); $(window).scroll(function () { navHeader(); }) function navHeader() { if ($(windo原创 2020-12-28 10:45:35 · 1206 阅读 · 0 评论 -
jQuery原理——28——根据事件操作相关方法(on,off)编写自己的jQuery方法
文章目录1:on1.1html2:off1:on1.1html2:off原创 2019-12-15 20:24:48 · 102 阅读 · 0 评论 -
jQuery原理——27——根据属性操作相关方法(attr,prop,css,val等等)编写出自己的jQuery框架
文章目录1.`attr()`:设置或者获取元素的属性节点值2.`prop()`:设置或者获取元素的属性值3.`css()`:设置获取样式4.`val()`:获取设置value的值5.`hasClass()`:判断有没有指定类6.`addClass()`:给所有元素添加指定类或者所有类7.`removeClass()`:清空所有元素指定类或者所有类8.`togeeleClass()`:有则删除,没有...原创 2019-12-11 11:28:03 · 120 阅读 · 0 评论 -
jQuery原理——26——根据dom操作(insertBefore,replaceAll)编写自己的jQuery框架
文章目录HTML测试代码编写自己的jQuery框架 sjQuery.js 代码389-448行HTML测试代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic...原创 2019-12-10 20:55:15 · 149 阅读 · 0 评论 -
jQuery原理——25——根据dom操作(appendTo,prependTo,append,prepend)编写自己的jQuery框架
html测试自己的jQuery框架<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <m...原创 2019-12-10 14:17:13 · 258 阅读 · 0 评论 -
jQuery原理——24——根据DOM操作相关方法(empty,remove,html,text)编写自己的jQuery框架
HTML代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ...原创 2019-12-09 20:13:48 · 3989 阅读 · 0 评论 -
jQuery原理——23——原型上的属性和方法
1、jquery 获取jQ版本号2、selector 实例默认的选择器取值3、length 实例默认的长度4、toArray 把实例转换为数组返回5、get 获取指定下标的元素,获取的是原生DOM6、eq 获取指定下标的元素,获取的是jQuery类型的实例对象7、first 获取实例中的第一个元素,是jQuery类型的实例对象8、last 获取实例中的最后一个元素,是jQuery类...原创 2019-12-05 21:24:14 · 128 阅读 · 0 评论 -
jQuery原理——22——监听DOM加载
onload的性能慢,会等DOM元素加载完毕,并且还会等到资源也加载完毕才会执行,而DOMContentLoaded事件只会等到DOM元素加载完毕就会执行回调,但是IE8以下不支持,将addEventListener监听事件换成attachEvent,但是attachEvent不兼容火狐谷歌,同时DOMContentLoaded也不兼容IE,所以可用readyState用法:doc...原创 2019-12-05 19:42:33 · 638 阅读 · 0 评论 -
jQuery原理——21——extend方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-12-05 15:10:42 · 84 阅读 · 0 评论 -
jQuery原理——编写自己的jQuery框架
一:编写自己的jQuery框架根据官方的结构编写自己的jQuery(function (window, undefined) { var sjQuery = function () { return new sjQuery.prototype.init(); } sjQuery.prototype = { construct...原创 2019-11-29 20:53:00 · 378 阅读 · 0 评论 -
jQuery原理——20——jQuery的基本结构和入口函数测试
一: jQuery基本结构1:jQuery的本质是一个闭包2:jQuery为什么要用闭包来实现: 为了避免多个框架的冲突3:jQuery如何让外界访问内部定义的局部变量:window.xxx=xxx(function test(){ var num=1; window.num=num; })(); console.log(num);4:jQuery...原创 2019-11-27 17:58:39 · 134 阅读 · 0 评论 -
用jQuery实现qq音乐播放器
折腾了很久,最终还是决定先放弃,继续学习jQuery后面的内容,做了有一大半吧,核心功能不想搞了,以后有时间再继续吧贴代码:html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content=...原创 2019-11-26 20:27:57 · 886 阅读 · 0 评论 -
jQuery插件jQuery custom content scroller的导入
首先需要下载一个jQuery插件,有滚动条样式网站:jQuery custom content scroller下载这个插件包然后将css和js文件导入到vs code里面然后添加进来注意:导入的css文件要放在自己的css文件之前,因为自己css可能会需要操作插件导入js文件时要放在jQuery文件后,自己的js前,如图:在需要设置的滚动条上jQ...原创 2019-11-18 20:15:23 · 229 阅读 · 0 评论 -
jQuery实现拍打灰太狼小游戏
要图片的同学可以私聊我~html部分:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...原创 2019-11-08 23:04:20 · 535 阅读 · 0 评论 -
jQuery——19——新浪微博(发布,顶,踩,删除功能)
html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...原创 2019-11-05 19:20:30 · 435 阅读 · 0 评论 -
jQuery——18——节点的添加,删除,替换,复制
一:节点的添加 内部插入 append(content|fn):会将元素添加到指定元素内部的最后 appendTo(content):会将元素添加到指定元素内部的最后 prepend(content|fn):会将元素添加到指定元素内部的最前面 prependTo(content):会将元素添加到指定元素内部的最前面 外部插入 after(content|fn)...原创 2019-10-28 21:35:05 · 258 阅读 · 0 评论 -
jQuery——17——无限循环滚动轮播图
注意:一共有四张图片,但是在ul里要放六张图,次序为第一张,第二张,第三张,第四张,第一张,第二张。因为如果放四张,那么在第三张和第四张时切换第一二张因为图片不一样会闪,放六张图片,最后的第一二张放完切换先前的第一二张,有两张一样的就覆盖了,(唉表达能力较差)。<!DOCTYPE html><html lang="en"><head> ...原创 2019-10-28 20:49:20 · 824 阅读 · 0 评论 -
jQuery——16——图标特效(精灵图)
一:为什么企业开发要用精灵图1:当访问该页面时,载入的图片不会像以前那样一副一副地慢慢显示出来了2:降低浏览器向服务器的请求次数,大大提高网页的加载速度3:图片在一张图片上方便管理缺点:修改其中一张图片时需要重新绘图<!DOCTYPE html><html lang="en"><head> <meta c...原创 2019-10-28 19:20:03 · 380 阅读 · 0 评论 -
jQuery——15——stop和delay方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...原创 2019-10-27 18:06:23 · 247 阅读 · 0 评论 -
jQuery——14——jQuery自定义动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...原创 2019-10-27 16:45:58 · 135 阅读 · 0 评论 -
jQuery——13——淡入淡出动画及小练习弹窗广告的关闭
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...原创 2019-10-27 16:18:42 · 232 阅读 · 0 评论 -
jQuery——12——展开和收起动画以及小练习折叠菜单和下拉菜单
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...原创 2019-10-26 21:37:37 · 474 阅读 · 0 评论 -
jQuery——11——显示隐藏动画以及练习对联广告
一:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ...原创 2019-10-26 18:50:57 · 126 阅读 · 0 评论 -
jQuery——事件的移入移出小练习Tab选项卡
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...原创 2019-10-26 18:24:13 · 332 阅读 · 0 评论 -
jQuery事件移入移出练习——电影排行榜
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...原创 2019-10-26 16:38:32 · 186 阅读 · 0 评论 -
jQuery——10——jQuery事件(绑定,移出,冒泡,自动触发,自定义事件,事件命名空间,事件委托,事件移入移出等)
一:事件绑定<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...原创 2019-10-23 17:56:11 · 287 阅读 · 0 评论 -
jQuery——09——操作css样式位置尺寸
一:操作css样式<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2....原创 2019-10-23 16:20:05 · 124 阅读 · 0 评论 -
jQuery——08——文本值相关操作(html,text,val)
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">&...原创 2019-10-23 11:46:47 · 88 阅读 · 0 评论 -
jQuery——07——类操作方法(addClass,removeClass,toggleClass)
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">&...原创 2019-10-23 11:23:17 · 154 阅读 · 0 评论 -
JQuery $()后面的括号里的内容什么时候加引号,什么时候不加
一、如果是已经声明存在的变量或者对象,就不用加引号。 比如var name=document.getElementById("name"); $(name)或者$(this)。二、document、this、window 这些都是系统对象 可以直接使用, 所以不用加引号。三、加引号的一般是元素标签有id、class这些,用$("xx")的方式获取这些元素用的。...转载 2019-10-22 21:31:38 · 834 阅读 · 0 评论 -
jQuery——06——属性和属性节点以及操作属性节点以及attr和prop方法
一:属性和属性节点介绍<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2...原创 2019-10-22 15:16:19 · 219 阅读 · 0 评论 -
jQuery——05——内容选择器(contains(text),empty,has(selector),parent )
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...原创 2019-10-21 21:26:40 · 188 阅读 · 0 评论 -
jQuery——04——jQuery静态方法(each,map,trim,isWindow(),isArray()等,holdReady)
一:each<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-...原创 2019-10-21 20:37:20 · 108 阅读 · 0 评论 -
jQuery——03——解决jQuery冲突问题
因为在使用jQuery中会用到$,但是其他框架也许也会用到$符号解决方法一:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia...原创 2019-10-21 11:23:26 · 166 阅读 · 0 评论 -
jQuery——02——jQuery和js入口函数的区别
区别一:原生JS会等到DOM元素加载完毕,并且图片也加载完毕才会执行jQuery会等到DOM元素加载完毕,但不会等到图片也加载完毕就会执行<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="...原创 2019-10-21 09:40:45 · 101 阅读 · 0 评论 -
window和document的区别
$(window)和$(document)获取到的对象不同。1、Window 对象表示一个浏览器窗口或一个框架。在客户端 JavaScript 中,Window 对象是全局对象,所有的表达式都在当前的环境中计算.2、Document 对象是 Window 对象的一部分,每个载入浏览器的 HTML 文档都会成为 Document 对象.3:如果是基于浏览器操作的比如滚动条,就要用$wind...原创 2019-10-20 21:06:30 · 2770 阅读 · 0 评论 -
jQuery——01——初始jQuery
一:如何调用jQuery<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta...原创 2019-10-20 20:40:22 · 137 阅读 · 0 评论