jQuery
文章平均质量分 63
豆i浆
我知道自己帅 ,别夸我 我面红
展开
-
jQuery中 wrap() wrapAll() 与 wrapInner()的区别
今晚看书的时候发现jQuery有三个包裹节点的方法,百度了一下jQuery wrap() / wrapAll() / wrapInner(),果然搜索结果 W3School的文档说明是排第一的。可是,W3School的解释是这样的:jQuery 文档操作 - wrap() 方法wrap() 方法把每个被选元素放置在指定的 HTML 内容或元素中。jQuery 文档操作 - wrapAll() 方法w转载 2017-02-16 11:52:12 · 328 阅读 · 0 评论 -
jQuery -- touch事件之轮播图效果
废话不多说,下面放代码,注释很详细,不怕看不懂效果图预览:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-原创 2017-06-28 14:56:31 · 2475 阅读 · 2 评论 -
jQuery简易表单验证插件(可链式操作)
一款简易的表单验证插件,第一次写这种插件还有很多不足,希望以后可以完善的更好,兼容为IE9+效果预览: 文件压缩后的大小以及响应时间: 插件使用说明:1. html基本结构<div class="yz_form"> <form action=""> <ul> <li> <span>用户名:</span>原创 2017-06-22 18:01:41 · 531 阅读 · 0 评论 -
滚动加载图片(懒加载)实现原理
一、什么是图片滚动加载?通俗的讲就是:当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次),只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来。这就是图片懒加载。二、为什要使用这个技术?比如一个页面中有很多图片,如淘宝、京东首页等等,如果一上来就发送这么多请求,页面加载就会很漫长,如果js文件都放在了文档的底转载 2017-07-02 22:51:12 · 2606 阅读 · 0 评论 -
jQuery -- touch事件 touchend失效解决方案
在使用touch事件是会出现touchstart后touchend不执行的问题这时候只需要加一行代码即可:$("body").on("touchstart", function(e) { e.preventDefault(); });但是有人在谷歌浏览器或许会发现报错,这时候换成下面这行代码就可以解决:$("body").on("touchstart", function(e) {原创 2017-06-27 21:08:23 · 11958 阅读 · 0 评论 -
jQuery -- touch事件之滑动判断(左右上下方向)
js代码:$("body").on("touchstart", function(e) { // 判断默认行为是否可以被禁用 if (e.cancelable) { // 判断默认行为是否已经被禁用 if (!e.defaultPrevented) { e.preventDefault(); } }转载 2017-06-27 21:12:52 · 29685 阅读 · 0 评论 -
jQuery -- touch事件之左右切换元素
效果预览: 全部代码:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-原创 2017-06-27 21:16:09 · 531 阅读 · 0 评论 -
jQuery -- Swiper插件使用ajax动态加载数据出现无法滑动的问题
解决方法很简单,只需要在配置项中添加两个属性即可解决:observer:true,//修改swiper自己或子元素时,自动初始化swiperobserveParents:true//修改swiper的父元素时,自动初始化swiper效果如图:原创 2017-10-18 14:18:54 · 1387 阅读 · 0 评论 -
jQuery --- ajax新增节点无法触发事件解决方法
在静态页面中,绑定的元素能正常触发事件,但在ajax进行数据动态化后,发现新增的节点无法触发事件了,下面有两种方法可以解决:一. 使用live方法(jQuery1.9+版本移出live方法需要注意)$('.listBox').live('click', function(){ alert('OK');}); live() 方法为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时原创 2017-10-18 15:52:31 · 480 阅读 · 0 评论 -
Vue2.0 --- vue-cli脚手架中全局引入JQ
在使用Vue过程中或许下有一些插件出现BUG或者因为一些插件只有JQ有,而不得不在Vue中引入JQ,那么下面就是JQ全局引入的方法第一步:安装jQuerynpm/cmpn方式安装(默认安装1.7.X版本的JQ)npm/cnpm install jQuery如果想安装更高版本的JQ那么可以选择在package.json文件下面这个位置添加代码断(当前图片安装的是2.2.3版本,如果想安装更高或者其他原创 2017-10-01 21:26:28 · 1789 阅读 · 0 评论 -
jQuery --- 利用input标签flie属性实现图片上传(单文件选取/可删除已选图片)
效果预览: 每一行都有注释,宛如妈妈的唠叨,再也不怕看不懂代码了~~~~想了解input的其他属性点这里想知道URL.createObjectURL()详细内容点这里js部分:<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"...原创 2018-02-11 14:39:09 · 2348 阅读 · 0 评论 -
CSS3图片展示特效(附前端学习规划)
效果预览:html:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>前端资料整理</title> <link rel="stylesheet&quo原创 2017-05-20 16:22:43 · 3058 阅读 · 1 评论 -
jQuery --- ios微信内置浏览器的 on()事件有问题
问题原因是事件冒泡导致找不到或者找到多个事件导致的,你要这样写$(“#div1").on("click",".k1",function(){ alert(11);})不要用$(document).on("click","#div1 > .k1",function(){ alert(11);})...原创 2018-07-21 17:40:51 · 1410 阅读 · 0 评论 -
javaScript --- 解决(webview/微信浏览器/页面刷新/页面后退/URL重置页面刷新)AJAX页数重置问题
效果如下:代码如下:&lt;!DOCTYPE html&gt;&lt;html lang="zh"&gt;&lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;meta name="viewport&am原创 2018-08-03 10:55:08 · 1611 阅读 · 0 评论 -
JS定义类的六种方式详解
在前端开发中,经常需要定义JS类。那么在JavaScript中,定义类的方式有几种,分别是什么呢?本文就JS定义类的六中方式说明如下(案例说明):1、工厂方式function Car(){ var ocar = new Object; ocar.color = “blue”; ocar.doors = 4; ocar.showColor = function(){转载 2017-05-22 16:04:43 · 606 阅读 · 0 评论 -
jquery中$each()方法的使用指南
jQuery 中的each函数 很方便, $.each ()函数封装了十分强大的遍历功能,它可以遍历一维数组、多维数组、DOM , JSON 等等,在javaScript 开发过程中使用 $each可以大大的减轻我们的工作量,这里贴一个简单的模仿each的函数,只能处理数组类型的对象。$.each()与$(selector).each()不同, 后者专用于jquery对象的遍历, 前者可用于遍历任转载 2017-05-22 15:54:07 · 506 阅读 · 0 评论 -
JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度
alert($(window).height()); //浏览器时下窗口可视区域高度alert($(document).height()); //浏览器时下窗口文档的高度alert($(document.body).height());//浏览器时下窗口文档body的高度alert($(document.body).outerHeight(true));//浏览器时下窗口文档body的总高度转载 2017-01-31 20:52:16 · 1045 阅读 · 3 评论 -
固定尺寸轮播图(非插件)
实现后的效果 html<!DOCTYPE html><!--声明 本页面语言为中文--><html lang="en"><head> <!--使用编码为 utf-8 --> <meta charset="UTF-8"> <title>固定尺寸 轮播图</title> <!--全局初始化样式--> <link rel="stylesheet" href=原创 2017-01-31 17:06:25 · 1028 阅读 · 2 评论 -
固定尺寸轮播图(插件版&可以链式调用)
效果展示html<!DOCTYPE html><!--声明 本页面语言为中文--><html lang="en"><head> <!--使用编码为 utf-8 --> <meta charset="UTF-8"> <title>固定尺寸 轮播图</title> <!--全局初始化样式--> <link rel="stylesheet" href="css原创 2017-01-31 16:57:59 · 1028 阅读 · 0 评论 -
响应式轮播插件(无焦点&可链式操作)
**暂时还没加焦点 以后再慢慢加上更多的可定制效果 第一次写全屏轮播 遇到一些固定轮播没遇到过的事情 每一次成功写出自己想要的效果都会很满足,虽然网上很多完善的插件,但别人的毕竟是别人的 再好用也不是自己的成果 我以后会慢慢的把这个插件完善起来**效果图预览 html<!DOCTYPE html><!--声明 本页面语言为中文--><html lang="en"><head>原创 2017-02-02 17:07:41 · 371 阅读 · 0 评论 -
JQ图片预加载(无序加载and有序加载)
效果预览:代码如下:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>图片加载之无序加载</title> <style type="text/css"> *{ margin: 0; pad原创 2017-05-22 14:00:31 · 1720 阅读 · 1 评论 -
js,jq,css多方面实现简易下拉菜单
效果图预览一 、css实现html代码部分<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>html+css下拉菜单</title> <link rel="stylesheet" type="text/css" href="css/style.css"/> </hea原创 2017-05-13 10:26:31 · 512 阅读 · 0 评论 -
IE9及以下版本检测提示升级
//浏览器版本过低 提示升级(function(w) { if(!("WebSocket" in w && 2 === w.WebSocket.CLOSING)) { var d = document.createElement("div"); d.className = "browsehappy"; d.innerHTML = '<div原创 2017-05-13 11:04:58 · 1131 阅读 · 0 评论 -
js,jq,css多方面实现简易Tab切换
通过css , js , jq三个方式分别实现简易的Tab切换效果效果图预览:一、css实现html和css部分<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{原创 2017-05-13 10:57:07 · 725 阅读 · 0 评论 -
JQ文本框点击出现下拉(模糊查询,搜索框等可套用)
点击前 点击时 点击后 html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/css.css"/> <link rel="styles原创 2017-01-31 17:43:21 · 2571 阅读 · 3 评论 -
JQ实现手风琴菜单
效果图预览:html和jq:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"/> <link rel="styleshee原创 2017-05-17 00:19:18 · 1804 阅读 · 0 评论 -
js,jq,锚点 分别实现返回顶部
效果预览:锚点实现:锚点效果生硬,用户体验差,但没兼容性问题<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> img{ display: block;原创 2017-05-20 12:03:04 · 543 阅读 · 0 评论 -
js,jq 右下角广告窗
效果预览:JQ:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0;原创 2017-05-20 15:43:10 · 350 阅读 · 0 评论 -
写JQuery插件的基本知识
普及JQuery知识知识1:用JQuery写插件时,最核心的方法有如下两个:$.extend(object) 可以理解为JQuery 添加一个静态方法。$.fn.extend(object) 可以理解为JQuery实例添加一个方法。基本的定义与调用:/* $.extend 定义与调用* * * * * * * * * * * * * * * * * * * * * * * * * * * * *转载 2017-05-22 15:40:12 · 198 阅读 · 0 评论 -
jQuery --- 解决蒙层/遮罩层下面内容可以滚动问题
出现蒙层/遮罩层的时候 加入这段代码页面就不能滚动了$('body).css('overflow-y','hidden'); 蒙层/遮罩层消失需要回复页面滚动加入这段代码即可$('body).css('overflow-y','scroll');...原创 2018-08-03 11:29:28 · 2264 阅读 · 4 评论