JQuery教程

html图片延迟加载_网页前端优化之滚动延时加载图片
shinyuu JQuery教程 6378 0 2018-07-24 13:27:30

做web开发的朋友都应该掌握前端优化这个技巧，其中一个就是滚动延时加载。这个技巧应用在了很多地方，比如新浪微博网页版。 为什么要延时加载呢？页面加载的时候就显示全部的图片不就得了？有必要多此一举吗？答案是肯定的。当要加载的图片或者内容很多时，如果一次性加载完毕，那么整个页面将会加载很久，意味着要用户等待很久，这是对用户不友好的。或许你还会问，那不就做个分页不就得了？其实这种滚动延时加载的技巧正是用来代替手动点击下一页的分页技术。每换一页都要用户点击一次，这也是对用户不友好的。所以才有了滚动延时加载。 我这里把加载图片作为例子，就好...

阅读全文

动态form表单_动态设置form表单的元素值
shinyuu JQuery教程 3966 0 2017-12-19 13:42:59

因为经常用到的功能，所以我想到封装一个函数，用起来更方便快捷。 先来看效果图如下： 这就相当于 ajax 返回的json, 元素是通过 name 来查找的, 其基本形式: name : value ，checkbox 比较特殊,它是多个并存,所以要 "选中" 它得通过值来查找, 值对上了,就把它"选中"var data = {a:´aaaa´, b:´2´, ´c´:[1,2,4]} 当然, 还有清除数据的情况:var data = {a:´...

阅读全文

理解jQuery对象$.html_jQuery中html方法
shinyuu JQuery教程 5041 1 2017-11-16 13:36:08

前面的话 如果要比喻jQuery和原生javascript的关系，我个人认为是自动档和手动档汽车的区别。使用原生javascript，可以知道离合器以及档位的作用；而使用jQuery，则把离合器和手动档位封装到函数，直接前进、后退或驻车即可。所以，熟练使用原生javascript，再去使用jQuery是一个很自然的步骤。从本文开始，将陆续介绍jQuery的相关内容，并给出相关的原生javascript实现。接下来，将详细介绍jQuery对象$   $对象 说起jQuery，最明显的标志，毫无疑问，就是美元符号$，美元符号其...

阅读全文

jQuery拼音插件_jQuery汉字转拼音插件
shinyuu JQuery教程 6199 0 2017-10-09 13:34:21

分享一个非常实用的 jQuery 中文转拼音的小程序，Demo是带编号的一款支持自动生成拼音的小程序，点击确定按钮可以计算出这个姓名对应的唯一编号。非常实用的，一般可以用到信用卡办理的申请界面上面的。效果图如下： 所以代码已经封装到 js 文件里面，我们只需要简单的调用就好了、代码如下： HTML代码<div class="container"> <div class="list"> <span> <label>姓名：</label...

阅读全文

仿淘宝结算功能_纯jQuery实现模仿淘宝购物车结算
shinyuu JQuery教程 7766 3 2017-09-28 13:49:40

jQuery仿淘宝购物车结算代码、Demo是一款实用的电子商务网站购物车结算的功能、并且带有金额计算功能、支持多个店铺多个产品、单个店铺单个产品、话不多少、先上图 全局的checkbox选中和未选中的样式var $allCheckbox = $(´input[type="checkbox"]´), //全局的全部checkbox $wholeChexbox = $(´.whole_check´), $cartBox = $(´.cartBox&ac...

阅读全文

JQuery实现判断iPhone和Android设备
shinyuu JQuery教程 4421 0 2017-09-21 13:53:34

最近做了一版微信宣传页、通过JQ来判断设备、并进行下载、微信内置浏览器对下载链接进行了屏蔽、所以先进行判断、如果是微信内置浏览器、则跳转应用宝链接、如果不是、则判断是iPhone/Adroid/PC 并进行跳转 代码如下：function downloadApp(){ var u = navigator.userAgent; var ua = navigator.userAgent.toLowerCase(); var isAndroid = u.indexOf(´Android´...

阅读全文

jQuery城市二级联动_js省市区三级联动插件
shinyuu JQuery教程 5828 0 2017-08-10 13:48:05

分享一个jQuery手机省市区三级联动代码、Demo是一款手机移动端购物网站常用省市区三级收货地址jQuery特效代码、风格是模仿IOS的风格、外观非常好看、有图有真相 使用也非常简单 1、引入JS文件<script src="js/picker.min.js"></script><script src="js/city.js"></script> 2、点击入口<div class="container"> <div class="row main"&g...

阅读全文

jQuery外卖订餐购物车_js仿美团外卖购物车
shinyuu JQuery教程 7376 3 2017-07-25 13:40:36

分享一个jQuery外卖订餐购物车代码、Demo是一款仿美团外卖APP的订餐系统代码、代码是用网页实现的、适用于Web App的、同事也可以快速集成到Android和IOS断的、效果图如下 加的效果$(".add").click(function () { $(this).prevAll().css("display", "inline-block"); var n = $(this).prev().text(); var num = parseInt(n) 1; if (num =...

阅读全文

jQuery引导插件_Html页面蒙版引导插件
shinyuu JQuery教程 8291 0 2017-07-12 13:25:34

分享一个常见的场景、一般我们在打开一些有更改的网站的时候都会有新手引导、下面就和大家分享一个jQuery的新手引导的Demo、jQuery页面步骤引导新手代码是一款bootstrap搜索页面步骤引导效果、希望对大家有用 引入资源文件<!-- jQuery --><script src="jquery-1.11.3.min.js"></script><!-- EnjoyHint JS and CSS files --><script src="enjoyhint/enjoyh...

阅读全文

JS实现答题卡功能_jQuery在线答题插件
shinyuu JQuery教程 13559 16 2017-06-20 13:27:45

分享一款jQuery仿牛客网的在线答题的Demo、Demo带有进度条提示、是一款带进度条和时间的在线答题代码、并且时间是可以暂停和开始的、非常灵活、但个人感觉唯一的不好就是不是响应式的、不支持移动设备 实现计时器/*实现计时器*/var time = setInterval(function () { if (timeState) { if (HH == 24) HH = 0; str = ""; if ( ss == 60) { if ( mm == ...

阅读全文

jQuery中ajax的简单使用_ajax Load方法使用
shinyuu JQuery教程 3492 3 2017-06-12 13:27:16

一、load（） 这是最简单的一个函数、传入一个url他会异步加载该url的内容、然后将内容插入每一个选中的元素中、替换掉其中已经存在的内容、所以最简单的用法是$("#myDiv").load("htmltest.html")； 当然这里的url不是只有html的、像什么txt、php之类的都是可以的、如果不是想加载整个文档的话可以在url后面加上一个jquery选择器、类似“xxx.html #aaa” 另外load其实还有两个可选的参数,第一个是数据（类似于是调用了post）、第三个可选参数是回调函数 这样一个完整的load可...

阅读全文

jQuery时光轴插件_垂直滚动时光轴插件
shinyuu JQuery教程 4712 4 2017-04-18 13:20:04

今天无意间发现一个非常棒的特效、一个非常棒的时光轴动画特效、jQuery旅行者竖直时间轴、Demo是一款时间轴样式代码、一般用于旅行者的行程等方面、而且在滑动的时候也有动画效果哦、可以先看看效果图 HTML代码<section class="timeline"> <div class="wrapper"> <div class="timeline__item timeline__item--0"> <div class="timeline__item__station...

阅读全文

jQuery表格排序插件代码_JS给表格内容动态排序
shinyuu JQuery教程 6278 2 2017-03-16 13:33:04

一个jQuery Table表格排序的插件、可以根据点击显示的表头来对表格排序、并且支持分类排序、支持按数字大小排序同时也支持按英文排序等等、所有的js代码已经封装成jquery.tablesort.js、大家只需要在用到的地方直接引用就可以啦、下面是效果图 html代码<table> <thead> <tr> <th>Name</th> <th>Band</th> ...

阅读全文

DD记账
top
+