JavaScript
文章平均质量分 64
JavaScript技术整理
穆雄雄
5年讲师经验,5年的软件研发及技术总监经验,7年自媒体运营经验,进粉丝群可以私信我【进群】
展开
-
Vuetify中的v-pagination如何实现分页
昨天在改一个系统的时候遇到了个技能点,观察解决了好久,终于解决了,趁热打铁,今天来记录一下。这个系统是个个人博客,目前我也在使用,但是有个地方用的很不舒服。就是首页,源码的作者本意是让不断的下拉,滚动加载出文章。如果有篇文章在第5页,那么我们得往下拉,直到滚动加载到了第5页,我们才会发现它。博客右边的内容,是自适应的,也就是意外着只要左边没有拉到底,右边一直也就到不了底(这个不知道大家能不能明白)所以体验感很不好,我就想着改改吧,按照固有的用户思维,加上个分页,体验感应该会好很多。原创 2022-12-19 21:27:58 · 568 阅读 · 0 评论 -
若依实现单点登录(解析请求链接中的参数做鉴权认证)
大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂前言现在是:2022年4月19日19:56:56昨天写了个bladex的单点登录,回想起来还是比较复杂的,今天又收到了个在若依里面实现单点登录。具体是这样的:别的系统中访问我们的系统,但是用户已经在那边系统登录过了,跳转到这边无需在来一次登录,直接上本系统中继续后续的操作。实现思路三方系统(也就是需要跳转我们系统的系统),直接请求我们系统的登录页面,挂着token参数。在我们系统登录界面,判断请求链接中有没有token,没有则正常走登录流..原创 2022-04-19 20:03:38 · 4372 阅读 · 7 评论 -
vue中父组件怎么调用子组件
前言前段时间,写了个地址的控件,封装成了一个子组件,在其他页面共用。原文地址:vue利用级联选择器实现全国省市区乡村五级菜单联动然后当时出现了个bug,也没有太注意,后来才发现的。就是重置不了地址栏里面的信息,于是今天又写了写。思路在子组件里面写了个清空地址栏的方法,如下:cleanModel(){ this.selectedOptions = []; },然后在父组件引用地址栏的地方写:ref="resetArea"完整代码如下: <!-- 地址组件 --&原创 2022-03-01 21:07:01 · 701 阅读 · 0 评论 -
购物车的功能——JS源码
此CSS的对应的是“购物车的功能——界面源码”的内容和“购物车的功能——CSS源码”的内容,希望大家不要乱$(function(){ //点击复选框全选或全不选效果 $("#allCheckBox").click(function(){ var checked=$(this).is(":checked"); $(".cart_td_1").chil...2016-10-27 17:12:00 · 378 阅读 · 1 评论 -
购物车的功能——JS源码
此CSS的对应的是“购物车的功能——界面源码”的内容和“购物车的功能——CSS源码”的内容,希望大家不要乱$(function(){ //点击复选框全选或全不选效果 $("#allCheckBox").click(function(){ var checked=$(this).is(":checked"); $(".cart_td_1").childr原创 2016-10-27 17:12:05 · 1198 阅读 · 1 评论 -
当当网首页——JS代码
$(function($){ //打开一个广告窗口 window.open('open.html','','top=0,left=200,width=500,height=327,scrollbars=0,resizable=0'); //随滚动条滚动的可关闭广告窗口 $(window).scroll(function(){ var st = $(t...2016-10-28 23:52:00 · 1372 阅读 · 0 评论 -
当当网上书店购物车——JS源码
$(function($){ //根据您挑选的商品,当当为您推荐部分的显示和隐藏 $("#shopping_commend_arrow").click(function(){ if($("#shopping_commend_sort").css("display")=="none"){ $(this).attr("src","images/...原创 2016-10-30 00:39:34 · 9873 阅读 · 1 评论 -
当当网新用户注册界面——JS代码
<span style="color:#ff9966;"><span style="font-size: 32px;"><strong>所有用到的图片都已上传,请在</strong></span></span><a target=_blank href="http://downl2016-10-31 00:04:00 · 1238 阅读 · 0 评论 -
当当网首页——JS代码
$(function($){ //打开一个广告窗口 window.open('open.html','','top=0,left=200,width=500,height=327,scrollbars=0,resizable=0'); //随滚动条滚动的可关闭广告窗口 $(window).scroll(function(){ var st = $(t原创 2016-10-28 23:52:56 · 7040 阅读 · 7 评论 -
当当网上书店购物车——JS源码
$(function($){ //根据您挑选的商品,当当为您推荐部分的显示和隐藏 $("#shopping_commend_arrow").click(function(){ if($("#shopping_commend_sort").css("display")=="none"){ $(this).attr("src","images/s.2016-10-30 00:39:00 · 3641 阅读 · 0 评论 -
当当网新用户注册界面——JS代码
所有用到的图片都已上传,请在这里下载$(function(){ //验证方法 function validate($dom){ var v=$dom.val(); var id=$dom.attr("id"); var flag=true; switch (id){ case "email":原创 2016-10-31 00:04:50 · 5086 阅读 · 1 评论 -
当当网上书店头部和尾部——JS源码
头部$(function($){// onmouseover="myddang_show('dd_menu_top_down')" onmouseout="myddang_hidden('dd_menu_top_down')" //下拉菜单 $("#menu").mouseenter(function(){ $("#dd_menu_top_down").原创 2016-10-30 00:43:56 · 1406 阅读 · 0 评论 -
当当网上书店头部和尾部——JS源码
头部$(function($){// onmouseover="myddang_show('dd_menu_top_down')" onmouseout="myddang_hidden('dd_menu_top_down')" //下拉菜单 $("#menu").mouseenter(function(){ $("#dd_menu_top_down")...2016-10-30 00:43:00 · 581 阅读 · 0 评论 -
jQuery操作DOM元素案例
直接打开注释即可观察效果,都已经测试通过!!!<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>操作DOM元素</title> <script src="js/jquery-1.8.3.js" type=原创 2018-12-24 20:52:12 · 628 阅读 · 0 评论 -
jQuery最简单的留言功能^-^
原理:在网页中提交的内容是把表单里面的值提取出来,然后显示到下面的指定div中原创 2016-10-23 00:27:33 · 4496 阅读 · 0 评论 -
使用jQuery操作DOM元素
一、DOM分类:1.DOM core2.Html-DOM3.CSS-DOM二、css样式$(this).css(“font-size”,“25px”);$(this).css({“font-size”:“30px”,“color”:“white”});$("#div3").addClass(“div3_style”);//移除样式$("#div3").removeClass("d...原创 2019-06-27 19:23:25 · 447 阅读 · 0 评论 -
jQuery最简单的留言功能^-^
先上代码:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">&am2016-10-23 00:27:00 · 1013 阅读 · 0 评论 -
jquery选择器案例分享
其中选择器都已经注释,需要测试哪个打开注释即可观察效果!!<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src=&quo原创 2018-12-19 20:39:23 · 454 阅读 · 0 评论 -
初识jQuery
一、jquery是目前最流行的javascript库。二、jquery理念:写更少的代码做更多的事。三、jQuery能做什么:1.访问和操作DOM元素2.控制页面样式3.对页面事件进行处理4.扩展新的jQuery插件5.与ajax完美结合四、使用jquery的时候必须先引入jQuery的环境:1.2.语法:(function()jQuery代码)查五、jQuery语法:1.(f...原创 2018-12-18 20:05:06 · 278 阅读 · 0 评论 -
jquery动画与事件案例
代码都已经测试通过,直接打开注释即可看见效果!&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt;原创 2018-12-20 21:51:04 · 513 阅读 · 0 评论 -
第二章jQuery选择器
一、jquery选择器的分类:1.基本选择器(1)标签选择器$(“h2”).css(“color”,“red”);(2)类选择器$(".title").css(“color”,“red”);(3)ID选择器$("#title").css(“color”,“red”);(4)并集选择器$(“h2,h3,.title,#title”).css(“color”,“red”);(5)全...原创 2018-12-20 22:36:28 · 328 阅读 · 0 评论 -
jquery实现单击div切换背景,再次单击回到原来样式
首先来看看效果图:1.这是默认的的div样式:2.当我们单击第一个div时的样式:3.当我们再次单击第一个div时的样式:如果你需要的效果是这样的,那么请您继续往下面看,如果不是,您也可以看看实现方法。5.首先我们需要一个jQuery环境jquery-1.8.3.js,这个文件网上一搜一大堆,可以自行准备。将该文件放置到项目下面的js目录下面。6.然后下面是源代码:<!D...原创 2018-11-06 15:13:02 · 7163 阅读 · 0 评论 -
jQuery中的事件与动画
一、jQuery中的事件:1.基础事件(1)鼠标事件(2)键盘事件(3)window事件2.复合事件(1)鼠标光标悬停(2)鼠标连续点击二、鼠标事件://1.点击事件click$("#btn1").click(function(){$("#div1_1").css(“background”,“green”);});//2.鼠标指针移过事件mouseover(当指针移入该元...原创 2019-06-27 19:21:43 · 353 阅读 · 0 评论 -
jquery给轮播图的第一张设置class样式
HTML代码:<div id="myCarousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"&原创 2018-10-13 22:19:23 · 744 阅读 · 0 评论 -
第四章使用jQuery操作DOM元素
一、DOM的分类:1.DOM core2.HTML-DOM3.CSS-DOM二、css操作语法:$("#div1").css(“color”,“red”);$("#div1").css({“color”:“red”,“margin”:“5px”});//添加样式$("#div1").addClass(“div1_style”);//移除样式$("#div1").removCl...原创 2018-12-26 20:53:02 · 342 阅读 · 0 评论 -
jQuery实现判断li的个数从而实现其他功能
需求:当ul中的li大于6个的时候显示图片,当li小于6个的时候隐藏图片,先来看看效果: 当有7个li的时候: 当有3个li的时候: 现在吧源码放上来:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title><..原创 2018-02-26 19:58:32 · 2932 阅读 · 0 评论 -
jquery实现动态五角星评分
先上代码,最后附属上我的实现思路,新手做的bug多,大牛勿喷:请看代码:☆☆☆☆☆<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://ww...2016-10-20 00:10:00 · 370 阅读 · 0 评论 -
jquery实现动态五角星评分
实现思路:先获取点击的五角星,设当前点击的五角星为实心的,然后调用siblings()方法,设所有的同辈五角星都为实心的,最后再把他之后的所有兄弟(同辈)元素设为空心的,就这样,一个动态评分效果就出来了 欢迎大家的点评,也希望和大原创 2016-10-20 00:10:28 · 1843 阅读 · 1 评论 -
jQuery选择器整理
第六章jQuery选择器一、jQuery选择器的分类:1.基本选择器2.层次选择器3.属性选择器4.基本过滤选择器5.可见性过滤选择器二、jQuery的基本选择器:///基本选择器//id选择器//$("#div1").css(“background”,“red”);//class选择器//$(".p1").css("color","red");//标签选择器/...原创 2019-06-21 21:53:08 · 335 阅读 · 0 评论 -
jQuery动画与事件概念以及语法
一、鼠标单击事件:语法:KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲div1").click(fu…("#div1").mouseover(function(){//代码});三、鼠标移出事件:语法:KaTeX parse error: Expected 'EOF', got '#' at position 3:...原创 2018-12-24 20:47:59 · 308 阅读 · 0 评论 -
jQuery遍历div,判断是否为空,为空时执行某个操作
以下运行结果: 代码如下:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" typ原创 2018-07-05 23:37:15 · 3652 阅读 · 0 评论 -
初识jQuery的案例
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.8.3.js"&原创 2018-12-18 20:04:24 · 302 阅读 · 0 评论 -
jQuery选择器案例之——index.js
$(function(){ //alert('a'); ///基本选择器 //id选择器 //$("#div1").css("background","red"); //class选择器 //$(".p1").css("color","red"); //标签选择器 //$("p").css("color","red"); //并集选择器 //$("p,li")....原创 2019-06-21 22:08:25 · 380 阅读 · 0 评论 -
Nodejs第一讲记录
大家好, 我是雄雄,欢迎关注公众号:雄雄的小课堂Node.jsNode的简介node是运行在服务端的JS基于谷歌 JavaScript运行时建立的一个平台是一个事件驱动IO服务端Java...原创 2021-08-06 06:00:00 · 255 阅读 · 0 评论 -
纯js实现人脸识别眨眨眼张张嘴案例——clmtrackr.js
"use strict";//requires: ccv.js, numeric.jsvar clm = { tracker : function(params) { if (!params) params = {}; if (params.constantVelocity === undefined) params.constantVeloci...原创 2018-07-16 09:33:58 · 8169 阅读 · 3 评论 -
纯前端JS实现人脸识别眨眨眼张张嘴案例
在不久之前我发布了一个案例,是java通过百度云人脸识别接口实现活体检测(张张嘴和眨眨眼)的案例,大家可以去看看:人脸识别活体检测之眨眨眼和张张嘴,今天我就抽空更新一下纯JS的活体检测吧。 首先给大家看一下运行效果,以免不是大家想要的结果。查看地址:点击观看,如果这是你想要的结果,那么请继续往下看。 2.在以往案例中,由于js太多,我就直接打包让大家下载了,今天的案例中j...原创 2018-07-16 09:22:07 · 15216 阅读 · 33 评论 -
Node.JS第二讲笔记
大家好,欢迎关注微信公众号:雄雄的小课堂package包包结构包其实就是一个压缩文件,解压之后还原为目录,符合规范的目录,应该包含如下文件:package.json:描述文件bin:可执行...原创 2021-08-07 06:00:00 · 234 阅读 · 0 评论 -
纯js实现人脸识别眨眨眼张张嘴案例——index.html
<!DOCTYPE html><html> <meta charset="GBK"> <style> #container { position: relative; } #canvas { position: absolute; ...原创 2018-07-16 09:57:26 · 9360 阅读 · 6 评论 -
纯js实现人脸识别眨眨眼张张嘴案例——alive_face.js
$(function(){ //执行开始的方法 //showpos = true; startTrack(); }) var showpos = false; // Put event listeners into place //window...原创 2018-07-16 09:26:30 · 7809 阅读 · 0 评论 -
纯js实现人脸识别眨眨眼张张嘴案例——ccv.js
if (parallable === undefined) { var parallable = function (file, funct) { parallable.core[funct.toString()] = funct().core; return function () { var i; var ...原创 2018-07-16 09:28:53 · 3724 阅读 · 0 评论