JQUERY - 技术教程文章
jquery实现DIV层拖动
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>拖动DIV</title> <style type="text/css"> .show{ background:#7cd2f8; width:100px; height:100px; text-alig...
jQuery UI与jQuery easyUI的冲突解决办法
jQuery UI与jQuery easyUI都是基于jQuery开发的。难免里面会有些方法名冲突！因此对jQuery.easyui其中的两个方法名：resizable 和 draggable进行替换，分别替换为resiz_able和dragg_able，即可！原文：http://www.cnblogs.com/zqzjs/p/4656844.html
jQuery封装图片预加载
(function($) { function preLoad(imgs, options) { this.imgs = (typeof imgs === ‘string‘) ? [imgs] : imgs; this.opts = $.extend({}, preLoad.DEFAULTS, options); this._unoredered(); } preLoad.DEFAULTS = { each: null, //每一张图片加载后执行 all: null //全部图片加载后执行 }; preLoad.prototype._unoredered = function() { var imgs = this.imgs, opts = this.opts, count = 0, len = imgs.length; ...
jQuery 效果 – 滑动
jQuery 滑动方法可使元素上下滑动。点击这里，隐藏/显示面板一寸光阴一寸金，因此，我们为您提供快捷易懂的学习内容。在这里，您可以通过一种易懂的便利的模式获得您需要的任何知识。实例jQuery slideDown()演示 jQuery slideDown() 方法。jQuery slideUp()演示 jQuery slideUp() 方法。jQuery slideToggle()演示 jQuery slideToggle() 方法。jQuery 滑动方法通过 jQuery，您可以在元素上创建滑动效果。jQuery 拥有以下滑动方法：s...
JQuery 判断IPad、IPhone、Android是横屏还是竖屏（Window.Orientation实现)【代码】
在ipad、iphone网页开发中，我们很可能需要判断是横屏或者竖屏。下面就来介绍如何用 jQuery 判断iPad、iPhone、Android是横屏还是竖屏的方法。代码如下：function orient() { if (window.orientation == 90 || window.orientation == -90) { //ipad、iphone竖屏；Andriod横屏 $("body").attr("class", "landscape"); orientation = ‘landscape‘; return false; } else if (window.orientation == 0 || window.orientation == 180...
jQuery each方法中结束本次循环和退出循环【代码】
each里面不能使用break结束循环，也不能使用continue来结束本次循环，只能用return false来结束循环（代替break），用return ture来结束本次循环（代替continue）。$.each(a, function(i, e){if (...) {// 结束本次循环returntrue;}if (...) {// 退出循环returntrue;} }); 原文：https://www.cnblogs.com/KingJames/p/8521822.html
JQuery案例：折叠菜单【代码】【图】
折叠菜单(jquery)<html><head><meta charset="UTF-8"><title>accordionMenu可折叠菜单</title><script src="js/jquery-3.3.1.min.js"></script><style type="text/css">.div-outer {border: 1px solid;width: 300px;}.cls-img {margin-left: 200px;}</style><script>$(function() {//初始化$(".cls-img").attr("src", "img/jt1.jpg");$(".div-content").hide();$(".cls-img").click(function() {var src = $(".cls-img").attr("src...
jQuery中siblings()和slideDown()、slideUp()实战
siblings(可选):用于选择同辈元素的表达式;slideDown(speed,[callback]):speed(String,Number):三种预定速度之一的字符串("slow","normal" or "fast"), 或者设定的毫秒数值（如：200）callback(Function): 可选 在动画完成时执行的函数原文：http://www.cnblogs.com/weiyuncai/p/4171453.html
jQuery缓存数据【图】
很多同学在项目中都喜欢将数据存储在HTMLElement属性上，如1234<div data="some data">Test</div><script> div.getAttribute(‘data‘); // some data</script>给页面中div添加了自定义属性“data”及值“some data”。后续JS代码中使用getAttribute获取。 jQuery从1.2.3开始提供了data/removeData方法用来存储/删除数据。1.6.1代码片段123456jQuery.extend({ cache: {}, // Please use with caution uuid: 0, ...}...
jquery 快速入门学习总结【代码】
jquery 快速入门学习总结jquery简介 jquery 是一个免费,开源的javascript 库.jquery作用 方便完成web前端的工作,例如节点操作,元素操作,事件绑定,ajax操作,并且解决了大部分的兼容问题jquery使用配置 1.本地配置 1.1 下载jquery文件, www.jquery.com 1.2 引入,放在文件同目录 <script type="text/javascript" src="jquery.1.8.3.min.js"></script> 2.远程访问文件 <script src="http://www.xiaohigh.com/...
jquery插件集
自定义滚动条jquery-custom-scrollbar放大镜 fancybox,lightbox,jquery zoom原文：http://www.cnblogs.com/toward-the-sun/p/5583350.html
jquery form submit提交方式
https://www.cnblogs.com/weimingxin/p/6823321.htmlhttps://www.cnblogs.com/weimingxin/p/6823321.html原文：https://www.cnblogs.com/xyyou/p/12384649.html
jQuery中bind,live,delegate与one方法的用法及区别解析
bind( )方法用于将一个处理程序附加到每个匹配元素的事件上并返回jQuery对象。.bind(eventType[, evnetData], Handler(eventObject)) 其中，参数eventType是一个字符串，包含一个或多个javaScript事件类型，例如click，submit或自定义事件的名称，指定多个事件类型时用空格分隔各个类型；eventData为Map类型，给出要传递给事件处理程序的数据，handler指定触发该事件时要执行的函数，eventObject表示事件对象。 .bind()方...
JQuery选择所有标题的元素【代码】
$(":header")参考：http://www.w3school.com.cn/jquery/selector_header.asp原文：http://www.cnblogs.com/EasonJim/p/6286502.html
jQuery源码1
jQuery源码（2.0.3）体系结构：(function(){ （21 ,94）：定义一些变量和函数：jQuery=function(){} （96 ，283）：个jQuery对象，添加一些方法和属性,（285 ，347）：extend：jQuery的继承方法 （349 ，817）：jQuery.extend()：扩展一些工具(静态)方法 （877 ，2856）：Sizzle：复杂选择器的实现 （2880，3042）：Callbacks：回调对象：对函数的管理 （3043, 3183）：Deferred：延迟对象：对异步的管理 （3...
23.jquery隐藏和显示【代码】
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jquery的显示和隐藏</title> <style type="text/css">div{width:150px;height:100px;border:1px red solid;display:none; } </styl...
jquery插件anccordion【代码】
1 (function(){2 $.fn.YAccordion=function(options){3 4var settings={5 trigger:‘click‘,6 speed:300,7 };8 9if(options) 10 $.extend(settings,options); 1112returnthis.each(function(){ 13 $("p",this).bind(settings.trigger,function(){ 14 $(this).next("ul").slideToggle(settings.speed).siblings("ul").hide(); 15 }); 16 ...
解决vue与传统jquery插件冲突
比如基于jquery的select2插件，在vue下单独用有很多问题，其实对于这类插件，可以用vue的自定义指令和组件来包装，解决冲突的问题。引用官方vue1.0和2.0的两个例子，学习一下。例子1.0 例子2.0原文：http://www.cnblogs.com/zhansu/p/6112837.html
[jQueryUI] - Chosen：select下拉选择框美化插件及问题【转】【图】
hosen 是一个支持jquery的select下拉框美化插件，它能让丑陋的、很长的select选择框变的更好看、更方便。不仅如此，它更扩展了select，增加了自动筛选的功能。它可对列表进行分组，同时也可禁用某些选择项。先来看下插件的效果： 跟这个比起来，原来的select样式是不是弱爆了！马上来武装我们的select吧：1、先把js和css文件引用到网页里面去：?123<link href="js/jqueryUI/chosen/chosen.css" type="text/css" rel="stylesheet" /...
jQuery.extend()【代码】【图】
使用jquery的$.extend()之前突然想到如何查看jquery的版本$.fn.jquery转入正题，在没有研究jquery源码之前，都不知道这个方法的使用，接触过后感觉这东西还可以，在此做个notejQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。注意：1. 如果只为$.extend()指定了一个参数，则意味着参数target被省略。此时，target就是jQuery对象本身。通过这种方式，我们可以为全局对象jQuery添加新的函数。2. 如果多个对象具有相同...
Jquery实现复选框只能单选【代码】
<html> <head> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> </head> <body> <div id="divckb"> <input type="checkbox" name="ckb1" value="1" />张三 <input type="checkbox" name="ckb2" value="2" />李四 <input type="checkbox" name="ckb3" value="3"/>王五 <input type="checkbox" name="ckb4" value="4" />赵六 </div> <script> $(function(){$("#divckb input").each(function(){$(this).change...
音频视频播放（jquery中将jquery方法转化成js方法）【代码】
在jQuery中没有音频视频直接播放的方法，我们在写音频视频时，应该将jquery的方法转化为js方法：play（）；pause（）补充： 将jq对象转化成js对象写法：var music=$("#music")[0];//将jq转化为js对象；将js对象转化成jq对象：这个对象已经存在，则只需要在此对象上加上$()，也即是$(对象) 1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset="UTF-8">5 <title>Title</title>6 <script src="js/jquery-3.1.0...
jQuery 源码分析笔记
jQuery的宗旨是Write Less, Do More。它对JavaScript的开发风格侵入性不如YUI那么强，当然也不如Dojo和YUI如此庞大。它极大的简化了JavaScript的日常开发工作，主要是DOM元素的操作（从名字Query就可以看出）。另外一个主要工作就是每个前端开发者都需要面对的浏览器兼容性。jQuery兼容所有主流浏览器的大部分版本，从万恶的IE6开始直到Firefox，Chrome等现代浏览器。除了居于核心的一小部分代码之外，剩下的jQuery都是松散的函数，...
jQuery控制文本的大小写。【代码】
在上一篇随笔中小颖分享了用CSS的text-transform 属性控制文本的大小写,今天小颖再给大家分享一段用jQuery实现控制文本的大小写,由于小颖已经好久没写过jQuery了,如果有什么不对的地方希望大家告诉小颖哦,小颖加以改正,好啦废话不多说啦,下面大家请看小颖写的代码: ~~~~~当当当当html代码：<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><script type="text/javascript" src="...
jquery and jquery validation 错误解决记录【代码】
Cannot read property ‘settings‘ of undefined jquery validation这个问题常常发生在动态添加rule的时候。 解决方法// 在timeout 方法中加入规则。 setTimeout(function() {$(‘#my_field‘).rules(‘add‘, { required: true }) }, 0); 原文：http://www.cnblogs.com/yudar/p/5754677.html
使用ajax获取JSON数据的jQuery代码的格式【图】
具体的也可以参考：http://www.w3cfuns.com/notes/16039/2b004b1bcdf79092f2e66b2bbe9f51df.html原文：http://www.cnblogs.com/ncuhwxiong/p/5913871.html
网站前端_Jquery-基础入门.0001.原生Js到后期封装库Jquery的过渡?【代码】
原生缺点:1. JS的出现使得网页与用户之间实现了一种实时/动态/交互的关系,网页可以包含更多活跃的元素和精彩的内容2. JS的弊端在于复杂的DOM对象,而JQuery封装了很多预定义的对象和使用函数简化了DOM操作,使得我们可以快速创建有高难度交互的富客户端页面,且兼容各大浏览器简单介绍:1. JQuery是一个优秀的JavaScript库,拥有强大的选择器,出色的DOM操作,可靠的事件处理,完善的兼容性和链式操作等功能,目前团队主要推核心库(JQuery)/...
jquery 滚动条插件 可以自定义【代码】
以后用起来就方便了把css文件引入<link rel="stylesheet" type="text/css" href="css/jquery.mCustomScrollbar.css"> js引入<script type="text/javascript" src="js/jquery.mCustomScrollbar.concat.min.js"></script> <div class="mscroll"> 这里放内容啊啊啊啊这里放内容啊啊啊啊这里放内容啊啊啊啊这里放内容啊啊啊啊。。。。。 </div> <script type="text/javascript"> $(function(){$(".mscroll").mCustomScrollbar({scrollI...
使用jQuery Mobile实现新闻浏览器（3）【图】
在本教程的前两篇文章中，笔者分别向大家介绍了使用jQuery Mobile框架如何去设计手机新闻浏览器，其中实现了一个WEB版本的新闻浏览器，在本教程的最后一篇中，将讲解如何将已实现的web版本的新闻浏览器迁移到Android手机中去，注意的是，本文希望读者拥有一点基础的Android知识。迁移到Android应用中去 在Android应用中，将会使用index.html作为界面的布局，我们将编写一个Android的Activity类将index.html整合到android应用中去...
jQuery 包装集【代码】【图】
一、创建元素1、jQuery内部使用document.createElement创建元素实例：//jQuery 源代码方法一： $("<div></div>").css({‘width‘: ‘100px‘,‘height‘: ‘50px‘,‘padding‘: ‘10px‘,‘border‘: ‘3px solid red‘ }).html(‘我是jQuery动态创建的div‘).appendTo(‘body‘);方法二： $("<div style=‘width: 100px;height: 50px;padding: 10px;border: 3px solid red;‘></div>").text(‘我是jQuery动态创建的div‘).append...