分类：jQuery

2020
09-29

JavaScript或jQuery 获取option value值方法解析

JavaScript或jQuery 获取option value值方法解析 1.html<divclass="form-group"><label>保险公司</label><selectclass="form-control"id="testSelect"><optionvalue="平安">平安保险</option><optionvalue="太平洋">太平洋保险</option><optionvalue="平安">平安保险</option></select></div>2.用JavaScript获取option的值以及文本内容/*JavaScript实现*/vartestSelect=document.getElementById("test... 继续阅读 >
2020
09-28

jQuery三组基本动画与自定义动画操作实例总结

本文实例讲述了jQuery三组基本动画与自定义动画操作。分享给大家供大家参考，具体如下：jQuery提供了三组基本动画，分别是显示与隐藏、淡入与淡出、滑入与画出，这三组基本动画都是标准的、有规律的的效果，jQuery还提供了一个自定义动画。1、显示（show）与隐藏（hide）显示(show)与隐藏(hide)是一组动画1.1show方法show([speed,[easing],[callback]])参数speed，可选，动画的执行时间如果不传，就没有动画效果。... 继续阅读 >
2020
09-28

基于JQuery实现页面定时弹出广告

Js相关技术定时器:​setInterval&clearInterval​setTimeout&clearTimeout显示:img.style.display="block"隐藏:img.style.display="none"img对象style属性:style对象需求分析当用户打开界面，3秒钟之后弹出广告，这个广告显示5秒钟，隐藏广告技术分析定时器:setTimeout显示和隐藏:style.display="block/none"步骤分析：导入JQ的文件编写JQ的文档加载事件启动定时器setTimeout("",3000);编写... 继续阅读 >
2020
09-28

JQuery复选框全选效果如何实现

Js相关技术checked属性如何获取所有复选框：document.getElementsByName、需求分析​在我们对表格处理的时,有些情况下,我们需要对表格进行批量处理技术分析第一种方法：选择器[属性名称='属性值']$("input[type='checkbox']:gt(0)").prop("checked",this.checked);第二种方法：使用层级选择器来实现tbody>tr>td>input$("tbody>tr>td>input").prop("checked",this.checked);第三种方法：//#tab>tbody>tr:n... 继续阅读 >
2020
09-28

JQuery省市联动效果实现过程详解

Js相关技术JS中的数组:["城市"]newArray()DOM树操作:​创建节点:document.createElement​创建文本节点:document.createTextNode​添加节点:appendChild需求分析​在我们的注册表单中,通常我们需要知道用户的籍贯,需要一个给用选择的项,当用户选中了省份之后,列出省下面所有的城市技术分析准备工作:城市信息的数据添加节点:appendChild(JS)a.append:添加子元素到末尾$("#div1").append... 继续阅读 >
2020
09-28

jquery实现手风琴案例

jquery实现手风琴案例 手风琴案例练习，供大家参考，具体内容如下显示效果重点：1.鼠标进入事件mouseenter鼠标离开事件mouseleave2.再执行下一次操作前都要先通过.stop()停止动画3.sublings()选择当前事件外的兄弟事件完整代码<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><styletype="text/css">*{margin:0;padding:0;}img{width:500px;height:250px;}.box{width:900px;height:300px;margin:2... 继续阅读 >
2020
09-28

jQuery实现的移动端图片缩放功能组件示例

本文实例讲述了jQuery实现的移动端图片缩放功能组件。分享给大家供大家参考，具体如下：源码见这里：https://github.com/CaptainLiao/zujian/tree/master/matrixHTML结构：<divclass="box"><imgsrc="d1981a8ba21975314fd2edf9c09447bb.jpg"><imgsrc="8e7075a2c6b7fb1e083914db000a70c5.jpg"><imgsrc="d1981a8ba21975314fd2edf9c09447bb.jpg"></div>JS:functionMatrix($el,options){this.$el=$el;this.clientW=$(... 继续阅读 >
2020
09-28

jQuery实现移动端图片上传预览组件的方法分析

本文实例讲述了jQuery实现移动端图片上传预览组件的方法。分享给大家供大家参考，具体如下：之前的一篇博客：移动端H5图片预览和压缩，实现了基本的功能。这次则计划做成一个组件，可供前台、后台使用。首先，我们先来捋一捋想要实现的功能：预览删除压缩上传到服务器基本机构这样，我们的组件结构就有了：;!function(window,$,undefined){functionUpload(){};Upload.prototype.change=function(){};Upload... 继续阅读 >
2020
09-28

jQuery从零开始做一个分页组件功能示例

jQuery从零开始做一个分页组件功能示例 本文实例讲述了jQuery从零开始做一个分页组件功能。分享给大家供大家参考，具体如下：开始一个组件，毫无目的的写代码是一个不好的习惯，要经历分析=>抽象=>实现=>应用四个阶段。组件DEMO地址：https://github.com/CaptainLiao/zujian/tree/master/pagination分析需求当前页码显示前后三页，以及在两端显示上一页、下一页未显示的地方用‘...'代替举个栗子：假设总共有30页当前为第一页：1234...30下一页当前为第... 继续阅读 >
2020
09-28

jQuery实现的上拉刷新功能组件示例

本文实例讲述了jQuery实现的上拉刷新功能组件。分享给大家供大家参考，具体如下：技术要点：1、jQuery的插件写法2、上拉刷新步骤分解3、css样式jQuery的插件写法：$.fn.pluginName=function(){returnthis.each(function(){fn();})};上拉刷新步骤分解：上拉刷新可以分解成三个部分：一是开始（start），记录当前鼠标的位置；二是移动（move），根据下拉的位移响应不同的视图；三是结束（end），刷新页面。;!function... 继续阅读 >
2020
09-28

jQuery实现的解析本地 XML 文档操作示例

本文实例讲述了jQuery实现的解析本地XML文档操作。分享给大家供大家参考，具体如下：CreateajQueryobjectusinganXMLstringandobtainthevalueofthetitlenode.<!doctypehtml><htmllang="en"><head><metacharset="utf-8"><title>jQuery.parseXMLdemo</title><scriptsrc="https://code.jquery.com/jquery-1.10.2.js"></script></head><body><pid="someElement"></p><pid="anotherElement"></p><script>va... 继续阅读 >
2020
09-28

jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析

本文实例讲述了jQuery事件模型默认行为执行顺序及trigger()与triggerHandler()比较。分享给大家供大家参考，具体如下：前言：最近在工作中做需求时发现了一个诡异的事情，在使用jQuery触发事件时，并不总是先执行默认行为，再执行绑定的事件行为，有时候可能是相反的顺序。于是上网查找了下资料，还真有个外国哥们和我遇到同一个问题！整理下笔记先~~默认行为执行顺序一般来说，浏览器执行事件的顺序是：先执行默认行为再执行绑... 继续阅读 >
2020
09-28

jQuery实现高度灵活的表单验证功能示例【无UI】

本文实例讲述了jQuery实现高度灵活的表单验证功能。分享给大家供大家参考，具体如下：表单验证是前端开发过程中常见的一个需求，产品需求、业务逻辑的不同，表单验证的方式方法也有所区别。而最重要的是我们要清楚，表单验证的核心原则是——错误信息提示准确，并且尽可能少的打扰/干扰用户的输入和体验。该插件依赖于jQuery，demo地址：https://github.com/CaptainLiao/zujian/tree/master/validator基于以上原则，个人总结出表单... 继续阅读 >
2020
09-28

jQuery插件simplePagination的使用方法示例

本文实例讲述了jQuery插件simplePagination的使用方法。分享给大家供大家参考，具体如下：正在熟悉项目上的代码，新添加了一个需要，需要对表单进行分页，之前的代码中是有分页的代码的，看了老半天，也没看太明白。之前的项目比较久远，继续熟悉代码。simplePagination的使用HTML页面，<divclass="row"><divclass="col-sm-12col-sm-12"><tableclass="tabletable-stripedtable-hovertable-bordered"data-toggle="t... 继续阅读 >
2020
09-27

jquery检测上传文件大小示例

本文实例讲述了jquery检测上传文件大小。分享给大家供大家参考，具体如下：google了很久，基本上都是用activeX来实现～至于为什么不行，这个不多说，说一下以下方法：已经测试通过的浏览器：IE6＋，firefox，chrome，其中firefox和chrome要能支持HTML5。<html><head><metahttp-equiv="Content-Type"content="text/html;charset=big5"><title>上传</title></head><body><formaction="XXXXXX"method="POST"name="... 继续阅读 >
2020
09-27

jquery实现轮播图特效

jquery实现轮播图特效 本文实例为大家分享了jquery实现轮播图的具体代码，供大家参考，具体内容如下一、实现功能：1、通过定时实现图片自我轮播2、当图片轮播到最后一张时，会从第一张开始继续轮播3、点击小圈圈图标能自动切换到对应图片4、鼠标悬浮图片上停止图片轮播，当鼠标移开图片，会继续轮播5、鼠标悬浮图片上会显示左右键图标，鼠标离开，会隐藏左右键图标6、点击左键图标会切换到上一张图片，当切换到第一张图片时，再次点击左键图标会切换到最... 继续阅读 >