JQUERY - 技术教程文章
jQuery基础学习【代码】
一、简介 jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“Write Less, Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的cs...
自己动手JQuery插件开发【代码】【图】
最近在复习JQuery，发现自己还没写过一个插件。在写插件之前，觉得开发插件是高端上档次的事，跟我这种小菜不搭边啊。不过在网上查了相关资料，发现开发插件其实是很简单的。在这里我将说明JQuery插件常用的写法，以及这些插件的常用场景。 希望对大家有所帮助。先准备了自己以前写过的一个火车票列表的页面，点击"设置样式与事件"出现以下效果。 这页面效果直接用Js代码实现的，那么在这里我们用插件的方法实现以上效果。 页面...
JQuery日记_5.13 Sizzle选择器（六）选择器的效率
当选择表达式不符合快速匹配(id,tag,class)和原生QSA不可用或返回错误时,将调用select(selector, context, results, seed)方法,此方法迭代DOM选择、过滤元素,在DOM树非常大的时候为了保证效率,应该保证html设计的合理,尽量使用可快速匹配(id,tag,class)的表达式,其次是QSA支持的选择器，尽量不要使用jquery扩展的selector和嵌套selector,然后是尽量不要使用位置伪类(它是从左向右查找,需要多次循环内套循环遍历),还有要尽量缩小con...
JQuery动态添加表格，然后动态删除不成功问题【代码】【图】
背景：自己做了一个测试网页，想动态添加表格，然后删除，按照网上的教程写完，发现点击"删除参数"按钮没用 源码：function addtr() {var trinfo = "<tr><td><input placeholder=‘参数名称‘ style=‘width: 80%‘></td>" +"<td><input placeholder=‘参数值‘ style=‘width: 70%‘><button id=‘delete-btn‘ onclick=‘removetr(event)‘>删除参数</button></td></tr>";$("#keytable").append(trinfo); }function removetr() {...
jQuery的编码标准和最佳实践【代码】
加载jQuery1.坚持使用CDN来加载jQuery，这种别人服务器免费帮你托管文件的便宜干嘛不占呢。点击查看使用CDN的好处，点此查看一些主流的jQuery CDN地址。<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><script>window.jQuery || document.write(‘<script src="js/jquery-1.11.0.min.js" type="text/javascript"><\/script>‘)</script>2.安全起见，最好还是提供一个...
jQuery 练习：取出数组字典的值, 静态对话框, clone方法应用【代码】
jQuery 中文API文档 http://jquery.cuishifeng.cn/jQuery 取出数组字典的值<head><meta charset="UTF-8"><title>Title</title><script src="jquery-3.3.1.min.js"></script> </head> <body> <script>li = [1, 2, 3, 4, 5]$.each(li, function(i, x){console.log(i, x) // i 为索引，x为 value})dic={name:"yuan", sex:"male"}$.each(dic, function(i, x){console.log(i,x) // i 为...
JQuery
JQuery的选择器: jquery就是通过jquery包装Dom对象后产生的对象 jquery对象是jquery独有的,如果一个对象是jquery对象,那么就可以使用jquery里的方法 jquery就是js的类库. jquery的引入<script src="jquery.js" ></script>js与jq相互转换 DOM对象是否可以调用JQuery对象上支持的方法 alert(document.getElementById(“dv”).html()); 不支持 JQuery对象是否可以调用DOM对象上支持的方...
jQuery的deferred对象详解
<H1 style=‘border-style: none none solid; font: 900 2.88em/72px "Trebuchet MS", Arial, "Lucida Grande", Verdana, Lucida, Helvetica, sans-serif; margin: 0.4em 0px 0.2em; padding: 0px 0px 0.2em; text-align: left; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: -0.03em; text-decoration: none; word-spacing: 2.4px; border-bottom-color: rgb(211, 211, 211); border-bottom-wid...
jQuery.validator.addMethod自定义方法密码验证补充【代码】
用jQuery的插件密码校验：html和js代码：<!DOCTYPE html> <html lang="zh" xmlns:th="http://www.thymeleaf.org" > <head><th:block th:include="include :: header(‘修改用户密码‘)" /><th:block th:include="include :: select2-css" /><meta charset="UTF-8"> </head> <body class="white-bg"><div class="wrapper wrapper-content animated fadeInRight ibox-content"><form class="form-horizontal m" id="form-user-resetP...
jQuery.extend 函数详解【代码】
JQuery的extend扩展方法： Jquery的扩展方法extend是我们在写插件的过程中常用的方法，该方法有一些重载原型，在此，我们一起去了解了解。 一、Jquery的扩展方法原型是: extend(dest,src1,src2,src3...); 它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后，是修改了dest的结构的。如果想要得到合并的结果却又不想修改dest的结构，可以如下使用： var newSrc=$.ext...
jquery的$.ajax async使用详解【代码】
async在jquery ajax中是一个同步参数了，我们下面来给大家介绍在jquery ajax中使用async时碰到的一些问题与方法介绍，希望例子能给各位同学带来一些帮助哦。 async默认是true, 即为异步方式, $.Ajax执行后, 会继续执行ajax后面的脚步, 直到服务器端返回数据后, 触发$.Ajax里的success方法. 这时候执行的是两个线程.var temp; $.ajax({ async: false, type : "POST", url : defaultPostData.url, dataType : ‘json‘, success : fu...
jQuery选择表格中的列【代码】
以选择table中的第一列为例: 方式1： $("table tr").find("td:first").html("first column");//错误写法：$("table tr td:first").html("first column");方式2：$("table tr").each(function(){ $(this).find("td:eq(0)").html("first column"); });方式3：$("table tr td:first-child").html("first column"); 方式4：$("table tr td:nth-child(1)").html("first column"); [扩展] //选择最后一列$("table tr td:last-child").ht...
jquery如何实现当页面下拉到一定位置时，右下角出现回到顶部图标【图】
渐进式返回顶部 原文：https://www.cnblogs.com/lzcblog/p/10340172.html
jQuery EasyUI 窗口 – 创建简单窗口【代码】【图】
jQuery EasyUI 窗口 – 创建简单窗口创建一个窗口（window）非常简单，我们创建一个 DIV 标记：<div id="win" class="easyui-window" title="My Window" style="width:300px;height:100px;padding:5px;">Some Content. </div> 现在运行测试页面，您会看见一个窗口（window）显示在您的屏幕上。我们不需要写任何的 javascript 代码。如果您希望创建一个隐藏的窗口（window），记得设置 ‘closed‘ 属性为 ‘true‘ 值，您可以调用 ‘...
JQUERY方法给TABLE动态增加行
比如设置table的id为tabvar trHTML = "<tr><td>...</td></tr>"$("#tab").append(trHTML);//在table最后面添加一行$("#tab tr:eq(2)").after(trHTML); // 在table的第3行后面添加一行这样就可以进行动态的添加行了，至于你是通过什么事件来动态添加那就看你自己的意思了，通过button或者div之类的点击事件添加，只要把上面的两行代码放进去就ok，注意，要把var trHTML那行代码放进添加事件里面，不然不管点击多少下，都只能添加一行...
jQuery EasyUI
jQuery EasyUI 框架帮助你轻松建立站点:http://www.zi-han.net/case/easyui/base.html EasyUI Demo 在线实例:http://www.jeasyui.net/demo/514.html原文：http://www.cnblogs.com/xiaohaizhuimeng/p/5202880.html
jQuery操作dom
参考：jQuery权威指南jQuery初步jQuery选择器jQuery操作domjQuery操作dom事件jQuery插件jQuery操作AjaxjQuery动画与特效jQuery实现导航栏jQuery实现点击式选项卡jQuery实现select三级联动1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111...
05 layer 和 jquery，涉及一个模板导入方法【图】
刚刚入手用layer感觉特别方便，简单记录一下1.http://layer.layui.com/ 这里是layer的官网，里面有最新版本的layer.js.2.不是最新的就是最好，最新版本已经不支持ie6了，根据项目需要自己选择一个版本下载3.安装方法：（animate中）3.1将你目前做的东西导出一个模板。（先点击图片中1的部分）3.2 打开导出的html文件。在此模板中即可进行配置（所有配置项都在your code here后面写），jquery是可以找线上版本，我这里直接是下载到本...
jquery flexslider 轮播插件【代码】【图】
去官网下载最新的https://www.woothemes.com/flexslider/引入 css 和 jsapi$(window).load(function(){ $(‘.flexslider‘).flexslider({ namespace:‘flex-‘,//控件的命名空间，会影响样式前缀 animation:"slide",//String: Select your animation type, "fade" or "slide"图片变换方式：淡入淡出或者滑动 slideDirection:"horizontal",//String: Select the sliding direction, "horizontal" or "vert...
1分钟实现多行文本框[textarea]自动高度jquery 插件【代码】【图】
<div class="form-group"> <label class="col-sm-3 control-label no-padding-right" for="form-field-5"> 内容</label> <div class="col-sm-9"> <textarea class="col-sm-8" id="form-field-5" placeholder="请输入内容..."></textarea> </div> </div>$.extend({textareaAutosize_dc:function(){$("textarea").on("keyup",function(e){var currentEnterCount=$(this).val().split("\n").length;var lineHeigh...
Jquery Mobile 常用参数
data-role 属性值：data-role参数表： page 页面容器，其内部的mobile元素将会继承这个容器上所设置的属性 header 页面标题容器，这个容器内部可以包含文字、返回按钮、功能按钮等元素 footer 页面页脚容器，这个容器内部也可以包含文字、返回按钮、功能按钮等元素 content 页面内容容器，这是一个很宽容的容器，内部可以包含标准的html元素和jQueryMobile元素 controlgroup 将几个元素设置成一组，一般...
jQuery【代码】
jQuery 主要分成三个大的版本：1，2，3 1：兼容所有浏览器的版本 2：IE8 - 浏览器舍弃了；更轻更好的jQuery版本 3：重构了部分功能，极大的提升了jQuery的性能 jQuery之所以流行是因为作者非常顾及开发人员对工具使用的成本；写的更少，做的更多。 加载jQuery ; 1. 本地加载： production 压缩版本，字符量尽可能少，加载速度尽可能快 develop...
Jquery调用后台方法返回数据
记得先要导入jquery.js。格式一 $.ajax({"Key1":"value1","key2":"value2",....});$.ajax({ type:"post/get", cache : “false”,//并发访问时异步提交 url:"TestAction!execute?time="+Math.random(), dataType:"json",//指定返回格式，不指定则返回字符串 data:{"id":1,"name":"张三"}, success:function(data){ alert("返回结果集="+data); }}); 格式二 $.get/post(url,data,callback);$(functio...
jQuery 语法【代码】
通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行“操作”（actions）。jQuery 语法实例$(this).hide()演示 jQuery hide() 函数，隐藏当前的 HTML 元素。$("#test").hide()演示 jQuery hide() 函数，隐藏 id="test" 的元素。$("p").hide()演示 jQuery hide() 函数，隐藏所有 <p> 元素。$(".test").hide()演示 jQuery hide() 函数，隐藏所有 class="test" 的元素。jQuery 语法jQuery 语法是为 HTML 元素的选取编制的...
去除jquery.min.map 404错误信息
调试中出现了 jquery.min.map 404 (Not Found) 的js错误信息；那么jquery.min.map到底是个什么呢？JQuery 官方解释从 jQuery 1.9.0 版本后在原始代码里会有 sourceMappingURL=jquery.min.map什么是Source map简单说，Source map就是一个信息文件，里面存储着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码。这无疑给开发这带来了很大方...
jsp中的jquery失效以及引入js失败的问题【代码】【图】
这段时间在试着看公司用的框架是怎么写的，看到项目中对jquery进一步封装的这一部分，所以自己试着写一些demo来模仿框架中的用法。 再一次的，又遇到了一个问题，jsp中引入js的问题，好久没有自己从头一步一步地在jsp中引入js了，怎么弄都没法达到预想的结果。现在把遇到的问题以及解决办法写在这里，以便以后遇到后查看。 1.在jsp中，引入js但是浏览器总是报404找不到对应的js的处理办法，先说结论：js最好还是放在WebConte...
jQuery Mobile 移动开发中的日期插件Mobiscroll使用说明【代码】【图】
近期在移动方面的开发，使用jQuery Mobile ，移动方面的插件不如Web 方面的插件多，选择的更少，有一些需要自己去封装，但功力尚不足啊。日期插件JQM也提供了内置的，但样式方面不好看，只好百度、Google啦，找到了两款 jquery-mobile-datebox 和 mobiscroll-2.3jqueryMobileDatebox 这个在板上的表现不好，性能方面有点卡mobiscroll 性能方面比前者要好一些，效果更简洁 ，划动更流畅放在一起对比下各位看官，你们觉得哪个好看一些...
在项目中学习.NET的JQuery attr方法
$(‘#checkbox‘).attr(‘checked‘); 返回的是checked或者是undefined，不是原来的true和false了，有关此问题的解决方法如下：只要把 attr 改成 prop 就好了 分析其中的原因，可以这样理解：它将“属性”与“特性”做了区别，属性指的是“name，id”等等，特性指的是“selectedIndex, tagName, nodeName”等等。 JQ1.6之后，可以通过attr方法去获得属性，通过prop方法去获得特性 原文：http://www.cnblogs.com/Jhon-xu/p/430500...
用Jquery控制文本框只能输入数字和字母【代码】【图】
只为成功找方法，不为失败找借口！用Jquery控制文本框只能输入数字和字母 在公司开发WinForm项目时，发现公司自主研发的textbox控件非常强大，可以实现"只能输入数字"、"只能输入字母"和"只能输入数字和字母"的三种输入限制，这样就可以精确控制用户输入的内容范围，让"用户永远没有办法输入限定的内容范围之外的其他内容"，也就是"用户即使想犯错误也没有机会"，这种限制控件输入的方式给了我很大的启发，如果在web项目中也能做...
jQuery$命名冲突问题解决方法
也许你在看此文章之前还不知道jquery有一个noConflict()东西了，它就是为了避免与其它js插件碰到相同变量的一个解决方法，利用noConflict()可以把变量存到其它指定的变量中去如，我把$存到jq中 代码如下 复制代码 var jq = $.noConflict();这样我们在所有页面都可以使用jq而不是$了(www.111cn.net)例 代码如下 复制代码 var jq = $.noConflict(); jq(document).ready(function(){ jq("button").click(function(){ jq("p").text("jQ...