分类：jQuery

2020
10-10

jQuery+ajax实现用户登录验证

本文实例为大家分享了jQuery+ajax实现用户登录验证的具体代码，供大家参考，具体内容如下<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>登录界面</title><styletype="text/css">*{margin:0;padding:0;}h3{display:block;width:100%;height:50px;text-align:center;line-height:50px;background-color:cornflowerblue;cursor:move;}#login{width:500px;height:270px;... 继续阅读 >
2020
10-10

jquery实现简易验证插件封装

jquery实现简易验证插件封装 本文实例为大家分享了封装jquery简易验证插件的具体代码，供大家参考，具体内容如下html代码：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>jQuery数据校验插件开发</title><linkrel="stylesheet"href="css/register.css"/><linkrel="stylesheet"href="css/validate.css"/></head><body><main><section><formmethod="post"action="result.html"acid="register"><divclass="register-wra... 继续阅读 >
2020
10-10

jQuery实现日历效果

本文实例为大家分享了jQuery实现日历效果的具体代码，供大家参考，具体内容如下jquery是用的是2.0版本。1、html代码<!DOCTYPEhtml><!--基于W3C标准不用做任何修改--><html><!--起始标准--><head><!--设置初始化文档信息和文档管理标注--><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><!--整个页面编码utf-8国际编码通用性最强，GBK/gb2312中文--><!--页面三要素--><title>显示详细签到详情</title... 继续阅读 >
2020
10-10

jquery实现简单每周轮换的日历

jquery实现简单每周轮换的日历 本文实例为大家分享了jquery实现简单每周轮换日历的具体代码，供大家参考，具体内容如下先放出一张示例图在进入页面时自动获取本地时间并激活（示例为2020年9月8日），再点击左按钮时倒退一周，右按钮前进一周。鼠标点击其中li标签时激活并在上方日期显示。一个很简单的小日历，主要是项目中经常会使用到就单独拿出来写个demo。具体思路是，获取当前本地日期并推断出周一和周日进而获得本周全部的日期，真正存放的是一个长度为7的... 继续阅读 >
2020
10-10

如何使用jQuery操作Cookies方法解析

Cookies定义：让网站服务器把少量数据储存到客户端的硬盘或内存，从客户端的硬盘读取数据的一种技术；下载与引入:jquery.cookie.js基于jquery；先引入jquery，再引入：jquery.cookie.js；下载：http://plugins.jquery.com/cookie/<scripttype="text/javascript"src="js/jquery.min.js"></script><scripttype="text/javascript"src="js/jquery.cookie.js"></script>jquery.cookie.js代码的内容并不多，可以直接拷贝... 继续阅读 >
2020
10-10

jQuery实现简单三级联动效果

jQuery实现简单三级联动效果 本文实例为大家分享了jQuery实现简单三级联动的具体代码，供大家参考，具体内容如下首先写一个JSON数据[{"province":"吉林省","cities":[{"city":"长春市","counties":["朝阳区","经济开发区","高新区"]},{"city":"吉林市","counties":["东城区","经济开发区","老城区"]},{"city":"白山市","counties":["二道区","河东区","高新区"]}]},{"province":"辽宁省"... 继续阅读 >
2020
10-10

如何基于jQuery实现五角星评分

如何基于jQuery实现五角星评分 1.鼠标经过li的时候，当前的位置是实心五角星，前面的是实心。当前位置后面的是空心。注意此处不能完全用链式编程写到底2.鼠标离开，comment的所有孩子变为空心五角星。额外，找到current,让current和它的前面都是实心。3.点击li的时候，当前的位置增加个current的class,其余位置移除current代码如下<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>五角星评分案例</title><style>*{padding:0;... 继续阅读 >
2020
10-10

jQuery中getJSON跨域原理的深入讲解

前几天我在开发一个工具的时候，其中有个功能就是获取本页面的短网址。这个想法是好的，可是在我付诸于行动的时候，发现这个需要跨域。起初我的想法就是，跨域的最简单的方法就是增加一个script标签，因为script标签是允许跨域的。但是问题又来了，对方的API返回的是个json对象，用script标签只能执行，却不能获取到里面的东西，也就是说返回的东西是不可控的。随后我就想到了jQuery中的getJSON的方法，学习了一下，没想到里面的文... 继续阅读 >
2020
10-10

Jquery $.map使用方法实例详解

$.map()函数用于使用指定函数处理数组中的每个元素(或对象的每个属性)，并将处理结果封装为新的数组返回。注意：1.在jQuery1.6之前，该函数只支持遍历数组；从1.6开始，该函数也支持遍历对象。2.map()还会为函数传入两个参数：其一是当前迭代的元素或属性值，其二是当前迭代项的数组索引或对象属性名。3.该函数返回值将作为结果数组中的一个元素，如果返回值为null或undefined，则不会被添加到结果数组中。$.map(data,func... 继续阅读 >
2020
10-10

JQuery基于FormData异步提交数据文件

web中数据提交事件是常常发生的，但是大多数情况下我们不希望使用html中的form表单提交，因为form表单提交会中断当前浏览器的操作并且会调到另一个地址（即使这个地址是当前页面），并且会重复加载一些html浪费带宽，我们希望达到一个无刷新的、异步的提交效果来给用户更好的体验，这时候就要使用ajax，ajax可以不依赖表单自行发起一次http请求并且取回服务器响应的数据，这就是ajax的简便之处。我们这里使用JQuery中封装好的ajax... 继续阅读 >
2020
10-10

JQuery使用数组遍历跳出each循环

0.前言也许我们通过jquery的循环方法进行数组遍历，但是当不符合条件时，怎么跳出当前循环？（即用each方法内，当不满足条件时想break跳出循环体，想continue继续执行下一个循环遍历），我们经常会习惯JS中的break何continue,但是使用之后没有效果，因为在JQuery中没有这两条命令，非其关键字。1.JQueryeach循环,要实现break和continue的功能break----用returnfalse;continue--用returnture;2.JQuery怎么跳出当前的e... 继续阅读 >
2020
10-10

JS JQuery获取data-*属性值方法解析

下面就详细介绍四种方法获取data-*属性的值<liid="getId"data-id="122"data-vice-id="11">获取id</li>需要获取的就是data-id和dtat-vice-id的值一：getAttribute()方法constgetId=document.getElementById('getId');////getAttribute()取值属性console.log(getId.getAttribute("data-id"));//122console.log(getId.getAttribute("data-vice-id"));//11////setAttribute()赋值属性getId.setAttribute("data-id","48");con... 继续阅读 >
2020
10-10

jQuery编写QQ简易聊天框

jQuery编写QQ简易聊天框 本文实例为大家分享了jQuery编写QQ简易聊天框的具体代码，供大家参考，具体内容如下<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title>QQ简易聊天框</title><linkrel="stylesheet"href="css/chat.css"><styletype="text/css">.chatBodyulli{list-style-type:none;}.chatBodyulliimg{width:35px;height:33px;float:left;}.chatBodyullih1{width:395px;text-indent:0px;margin-left:6px;... 继续阅读 >
2020
10-10

jQuery实现简单QQ聊天框

jQuery实现简单QQ聊天框 本文实例为大家分享了jQuery实现简单QQ聊天框的具体代码，供大家参考，具体内容如下先放一张效果图！1.首先我们把基本框架搭出来，还要准备三张图片用来当作头像，下面是html的内容<body><sectionid="chat"><divclass="chatBody"></div><div><imgsrc="images/icon.jpg"></div><textareaclass="chatText"></textarea><divclass="btn"><span>关闭(C)</span><spanid="send">发送(S)</span></div></sect... 继续阅读 >
2020
10-10

基于jquery实现彩色投票进度条代码解析

基于jquery实现彩色投票进度条代码解析 一、需求如下图重点是要实现进度条。二、分析原理：动态设置<p>的子元素<span>的宽度值。1、简单的雏形假设只有一个进度条，如下，我们只需要知道p元素的宽度，span元素的百分比，相乘即得到span的宽度，浏览器加载时动态设置span的宽度即可实现进度条的效果。<style>.long{width:100px;border:1pxsolid#7f7f7f;height:14px;background-color:#d6d6d6;}.short{float:left;height:14px;background-color:#0FF;}</style><body><Pc... 继续阅读 >