- 浏览: 7948367 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (2425)
- 软件工程 (75)
- JAVA相关 (662)
- ajax/web相关 (351)
- 数据库相关/oracle (218)
- PHP (147)
- UNIX/LINUX/FREEBSD/solaris (118)
- 音乐探讨 (1)
- 闲话 (11)
- 网络安全等 (21)
- .NET (153)
- ROR和GOG (10)
- [网站分类]4.其他技术区 (181)
- 算法等 (7)
- [随笔分类]SOA (8)
- 收藏区 (71)
- 金融证券 (4)
- [网站分类]5.企业信息化 (3)
- c&c++学习 (1)
- 读书区 (11)
- 其它 (10)
- 收藏夹 (1)
- 设计模式 (1)
- FLEX (14)
- Android (98)
- 软件工程心理学系列 (4)
- HTML5 (6)
- C/C++ (0)
- 数据结构 (0)
- 书评 (3)
- python (17)
- NOSQL (10)
- MYSQL (85)
- java之各类测试 (18)
- nodejs (1)
- JAVA (1)
- neo4j (3)
- VUE (4)
- docker相关 (1)
最新评论
-
xiaobadi:
jacky~~~~~~~~~
推荐两个不错的mybatis GUI生成工具 -
masuweng:
(转)JAVA获得机器码的实现 -
albert0707:
有些扩展名为null
java 7中可以判断文件的contenttype了 -
albert0707:
非常感谢!!!!!!!!!
java 7中可以判断文件的contenttype了 -
zhangle:
https://zhuban.me竹板共享 - 高效便捷的文档 ...
一个不错的网络白板工具
继续读书记下心得
1 toggle(switch)
如果是显示,则隐藏;如果是隐藏,则显示
比如某张图片 $("img").toggle();
2 sligdeToggle(),自动判断以进行高度的增减的动画效果
$(function() {
$(".divFrame").click(function() { //div元素点击事件
//图片高度状态自动切换,并执行一个回调函数
$("img").slideToggle(3000, function() {
$("img").css("border", "solid 1px #ccc");
})
})
})
3 animate动画效果
$(function() {
$("input:eq(0)").click(function() { //左移按钮点击事件
//在3000毫秒内,以动画的形式向左移动52个像素
$(".divList").animate({ left: "-=52px" }, 3000);
})
$("input:eq(1)").click(function() { //右移按钮点击事件
//在3000毫秒内,以动画的形式向右移动52个像素
$(".divList").animate({ left: "+=52px" }, 3000);
})
})
4 动画队列
$(function() {
$("div").click(function() { //div块单击事件
$(this)
.animate({ height: 100 }, "slow") //第1列
.animate({ width: 100 }, "slow") //第2列
.animate({ height: 50 }, "slow") //第3列
.animate({ width: 50 }, "slow"); //第4列
})
})
5 动画的停止和延时
$("img").stop(); //停止正在执行的动画
$("img") .delay(2000) //延时切换图片
6 ajax加载用法
使用load方法比如
$("#divtips").load("c.html);
load方法中可以加载另外一个页面的某个类别的元素,比如
$("#divtips").load("c.html.divcontent);
getJSON方法的使用,比如:
$.getJSON("UserInfo.json", function(data) {
$("#divTip").empty(); //先清空标记中的内容
var strHTML = ""; //初始化保存内容变量
$.each(data, function(InfoIndex, Info) { //遍历获取的数据
strHTML += "姓名:" + Info["name"] + "<br>";
})
})
7 getScript的使用
可以在jquery中加载另外一个JS,比如
$.getScript("xxxx.js");
8 异步加载XML文档
$.get("UserInfo.xml", function(data) {
$("#divTip").empty(); //先清空标记中的内容
var strHTML = ""; //初始化保存内容变量
$(data).find("User").each(function() { //遍历获取的数据
var $strUser = $(this);
............................
9 向服务端传送数据
.get以及使用.post,比如 .post的例子
$.post("User_Info.aspx",
{ name: encodeURI($("#txtName").val()),
sex: encodeURI($("#selSex").val())
},
function(data) {
$("#divTip")
.html(data); //显示服务器返回的数据
})
当使用中文时,要用encodeUri
10 序列化表单
serialize()
将所选择的dom元素转成能随ajax传递的字符串,即序列化所选的dom元素
11 $.ajax()方法
可以代替其他$.get,$.post,$.getJSON等
可以设置$.ajaxSetup()设置全局的ajax选项,方便一次过设置
$.ajaxSetup({ //设置全局性的Ajax选项
type: "GET",
url: "xxx.xml",
dataType: "xml"
})
12 ajax的ajaxstart和ajaxstop等事件
//元素绑定全局ajaxStart事件
$("#divMsg").ajaxStart(function() {
$(this).show(); //显示元素
})
//元素绑定全局ajaxStop事件
$("#divMsg").ajaxStop(function() {
$(this).html("已成功获取数据。").hide();
})
13 jquery validate插件例子
$(function() {
$("#frmV").validate(
{
/*自定义验证规则*/
rules: {
username: { required: true, minlength: 6 },
email: { required: true, email: true }
},
/*错误提示位置*/
errorPlacement: function(error, element) {
error.appendTo(element.siblings("span"));
}
}
);
})
用户名:
<input id="username" name="username"
type="text" class="txt" />
<font color="red">*</font>
<span></span>
14 自动完成插件autocomplete
下载地址:http://jquery.bassistance.de/autocomplete/jquery.autocomplete.zip
$(function() {
var arrUserName = ["xxx","yy".....];
$("#txtSearch").autocomplete(arrUserName, {
minChars: 0, //双击空白文本框时显示全部提示数据
formatItem: function(data, i, total) {
return "<I>" + data[0] + "</I>"; //改变匹配数据显示的格式
},
formatMatch: function(data, i, total) {
return data[0];
},
formatResult: function(data) {
return data[0];
}
}).result(SearchCallback); //选中匹配数据中的某项数据时,调用插件的result()方法
//自定义返回匹配结果函数
function SearchCallback(event, data, formatted) {
$("#divData").html("您的选择是:" + (!data ? "空" : formatted));
}
//点击"查一下"按钮后,触发插件的search()方法
$("#btnSearch").click(function() {
$("#txtSearch").search();
});
15 jquery 插件开发
1)封装方法插件
通过jquery选择器获取对象,并为对象添加方法,然后将方法打包,封装为一个插件
2) 封闭函数插件
可以直接给jquery添加静态方法,并且将函数置于jquery命名空间中,比如
$.ajax()等
插件以jquery.XXXX.js命名,如果是对象级别的插件,所有方法都依附于jquery.fn
主体对象;如果是类别级别的,依附于jquery对象,结尾都必须用分号结束;
对象级别的插件时,用jquery.fn.extend()扩展;针对类别的话,用jquery.extend()
扩展
3对象级别的例子:
; (function($) {
$.fn.extend({
"focusColor": function(li_col) {
var def_col = "#ccc"; //默认获取焦点的色值
var lst_col = "#fff"; //默认丢失焦点的色值
//如果设置的颜色不为空,使用设置的颜色,否则为默认色
li_col = (li_col == undefined) ? def_col : li_col;
$(this).find("li").each(function() { //遍历表项<li>中的全部元素
$(this).mouseover(function() { //获取鼠标焦点事件
$(this).css("background-color", li_col); //使用设置的颜色
}).mouseout(function() { //鼠标焦点移出事件
$(this).css("background-color", "#fff"); //恢复原来的颜色
})
})
return $(this); //返回jQuery对象,保持链式操作
}
});
})(jQuery);
调用例子:
<div class="divContent">
<ul id="u1">
<span>张三</span><span>男</span>
<span>李四</span><span>女</span>
<span>王五</span><span>男</span>
</ul>
</div>
<script type="text/javascript">
$(function() {
$("#u1").focusColor("blue");//调用自定义的插件
})
</script>
4) 类级别的元素:
; (function($) {
$.extend({
"addNum": function(p1, p2) {
//如果传入的数字不为空,使用传入的数字,否则为0
p1 = (p1 == undefined) ? 0 : p1;
p2 = (p2 == undefined) ? 0 : p2;
var intResult = parseInt(p1) + parseInt(p2);
return intResult;
},
"subNum": function(p1, p2) {
//如果传入的数字不为空,使用传入的数字,否则为0
var intResult = 0;
p1 = (p1 == undefined) ? 0 : p1;
p2 = (p2 == undefined) ? 0 : p2;
if (p1 > p2) { //如果传入的参数前者大于后者
intResult = parseInt(p1) - parseInt(p2);
}
return intResult;
}
});
})(jQuery);
使用时:
$(function() {
$("#Button1").click(function() {
$("#Text3").val(
$.addNum($("#Text1").val(),
$("#Text2").val()));
}); //调用自定义的插件计算两数之和
16 upload上传组件
uploadify:
下载地址:http://www.uploadify.com/download
$("#uploadify").uploadify({
'uploader': 'Images/uploadify.swf',
'script': 'Deal/UploadFile.ashx',
'cancelImg': 'Images/cancel.png',
'folder': 'Uploads/',
'queueID': 'fileQueue',
'buttonImg': 'Images/uploadify.jpg',
'auto': true,
'multi': true,
'fileExt': '*.jpg;*.jpeg;*.gif;*.png;*.doc;*.docx;*.xls;*.xlsx;*.pdf;*.txt',
'onComplete': function(event, queueID, fileObj, response, data) {
$('ul').append(SetFileContent(fileObj));
}
})
})
function SetFileContent(objFile) { //根据上传对象返回预览的图片
var sLi = "";
sLi += "<li>";
sLi += "<img src='" + objFile.filePath + "' width='100' height='100'>";
sLi += "<input type='hidden' value='" + objFile.filePath + "'>";
sLi += "
";
sLi += "<a href='javascript:void(0)'>删除</a>";
sLi += "</li>";
return sLi;
}
1 toggle(switch)
如果是显示,则隐藏;如果是隐藏,则显示
比如某张图片 $("img").toggle();
2 sligdeToggle(),自动判断以进行高度的增减的动画效果
$(function() {
$(".divFrame").click(function() { //div元素点击事件
//图片高度状态自动切换,并执行一个回调函数
$("img").slideToggle(3000, function() {
$("img").css("border", "solid 1px #ccc");
})
})
})
3 animate动画效果
$(function() {
$("input:eq(0)").click(function() { //左移按钮点击事件
//在3000毫秒内,以动画的形式向左移动52个像素
$(".divList").animate({ left: "-=52px" }, 3000);
})
$("input:eq(1)").click(function() { //右移按钮点击事件
//在3000毫秒内,以动画的形式向右移动52个像素
$(".divList").animate({ left: "+=52px" }, 3000);
})
})
4 动画队列
$(function() {
$("div").click(function() { //div块单击事件
$(this)
.animate({ height: 100 }, "slow") //第1列
.animate({ width: 100 }, "slow") //第2列
.animate({ height: 50 }, "slow") //第3列
.animate({ width: 50 }, "slow"); //第4列
})
})
5 动画的停止和延时
$("img").stop(); //停止正在执行的动画
$("img") .delay(2000) //延时切换图片
6 ajax加载用法
使用load方法比如
$("#divtips").load("c.html);
load方法中可以加载另外一个页面的某个类别的元素,比如
$("#divtips").load("c.html.divcontent);
getJSON方法的使用,比如:
$.getJSON("UserInfo.json", function(data) {
$("#divTip").empty(); //先清空标记中的内容
var strHTML = ""; //初始化保存内容变量
$.each(data, function(InfoIndex, Info) { //遍历获取的数据
strHTML += "姓名:" + Info["name"] + "<br>";
})
})
7 getScript的使用
可以在jquery中加载另外一个JS,比如
$.getScript("xxxx.js");
8 异步加载XML文档
$.get("UserInfo.xml", function(data) {
$("#divTip").empty(); //先清空标记中的内容
var strHTML = ""; //初始化保存内容变量
$(data).find("User").each(function() { //遍历获取的数据
var $strUser = $(this);
............................
9 向服务端传送数据
.get以及使用.post,比如 .post的例子
$.post("User_Info.aspx",
{ name: encodeURI($("#txtName").val()),
sex: encodeURI($("#selSex").val())
},
function(data) {
$("#divTip")
.html(data); //显示服务器返回的数据
})
当使用中文时,要用encodeUri
10 序列化表单
serialize()
将所选择的dom元素转成能随ajax传递的字符串,即序列化所选的dom元素
11 $.ajax()方法
可以代替其他$.get,$.post,$.getJSON等
可以设置$.ajaxSetup()设置全局的ajax选项,方便一次过设置
$.ajaxSetup({ //设置全局性的Ajax选项
type: "GET",
url: "xxx.xml",
dataType: "xml"
})
12 ajax的ajaxstart和ajaxstop等事件
//元素绑定全局ajaxStart事件
$("#divMsg").ajaxStart(function() {
$(this).show(); //显示元素
})
//元素绑定全局ajaxStop事件
$("#divMsg").ajaxStop(function() {
$(this).html("已成功获取数据。").hide();
})
13 jquery validate插件例子
$(function() {
$("#frmV").validate(
{
/*自定义验证规则*/
rules: {
username: { required: true, minlength: 6 },
email: { required: true, email: true }
},
/*错误提示位置*/
errorPlacement: function(error, element) {
error.appendTo(element.siblings("span"));
}
}
);
})
用户名:
<input id="username" name="username"
type="text" class="txt" />
<font color="red">*</font>
<span></span>
14 自动完成插件autocomplete
下载地址:http://jquery.bassistance.de/autocomplete/jquery.autocomplete.zip
$(function() {
var arrUserName = ["xxx","yy".....];
$("#txtSearch").autocomplete(arrUserName, {
minChars: 0, //双击空白文本框时显示全部提示数据
formatItem: function(data, i, total) {
return "<I>" + data[0] + "</I>"; //改变匹配数据显示的格式
},
formatMatch: function(data, i, total) {
return data[0];
},
formatResult: function(data) {
return data[0];
}
}).result(SearchCallback); //选中匹配数据中的某项数据时,调用插件的result()方法
//自定义返回匹配结果函数
function SearchCallback(event, data, formatted) {
$("#divData").html("您的选择是:" + (!data ? "空" : formatted));
}
//点击"查一下"按钮后,触发插件的search()方法
$("#btnSearch").click(function() {
$("#txtSearch").search();
});
15 jquery 插件开发
1)封装方法插件
通过jquery选择器获取对象,并为对象添加方法,然后将方法打包,封装为一个插件
2) 封闭函数插件
可以直接给jquery添加静态方法,并且将函数置于jquery命名空间中,比如
$.ajax()等
插件以jquery.XXXX.js命名,如果是对象级别的插件,所有方法都依附于jquery.fn
主体对象;如果是类别级别的,依附于jquery对象,结尾都必须用分号结束;
对象级别的插件时,用jquery.fn.extend()扩展;针对类别的话,用jquery.extend()
扩展
3对象级别的例子:
; (function($) {
$.fn.extend({
"focusColor": function(li_col) {
var def_col = "#ccc"; //默认获取焦点的色值
var lst_col = "#fff"; //默认丢失焦点的色值
//如果设置的颜色不为空,使用设置的颜色,否则为默认色
li_col = (li_col == undefined) ? def_col : li_col;
$(this).find("li").each(function() { //遍历表项<li>中的全部元素
$(this).mouseover(function() { //获取鼠标焦点事件
$(this).css("background-color", li_col); //使用设置的颜色
}).mouseout(function() { //鼠标焦点移出事件
$(this).css("background-color", "#fff"); //恢复原来的颜色
})
})
return $(this); //返回jQuery对象,保持链式操作
}
});
})(jQuery);
调用例子:
<div class="divContent">
<ul id="u1">
</ul>
</div>
<script type="text/javascript">
$(function() {
$("#u1").focusColor("blue");//调用自定义的插件
})
</script>
4) 类级别的元素:
; (function($) {
$.extend({
"addNum": function(p1, p2) {
//如果传入的数字不为空,使用传入的数字,否则为0
p1 = (p1 == undefined) ? 0 : p1;
p2 = (p2 == undefined) ? 0 : p2;
var intResult = parseInt(p1) + parseInt(p2);
return intResult;
},
"subNum": function(p1, p2) {
//如果传入的数字不为空,使用传入的数字,否则为0
var intResult = 0;
p1 = (p1 == undefined) ? 0 : p1;
p2 = (p2 == undefined) ? 0 : p2;
if (p1 > p2) { //如果传入的参数前者大于后者
intResult = parseInt(p1) - parseInt(p2);
}
return intResult;
}
});
})(jQuery);
使用时:
$(function() {
$("#Button1").click(function() {
$("#Text3").val(
$.addNum($("#Text1").val(),
$("#Text2").val()));
}); //调用自定义的插件计算两数之和
16 upload上传组件
uploadify:
下载地址:http://www.uploadify.com/download
$("#uploadify").uploadify({
'uploader': 'Images/uploadify.swf',
'script': 'Deal/UploadFile.ashx',
'cancelImg': 'Images/cancel.png',
'folder': 'Uploads/',
'queueID': 'fileQueue',
'buttonImg': 'Images/uploadify.jpg',
'auto': true,
'multi': true,
'fileExt': '*.jpg;*.jpeg;*.gif;*.png;*.doc;*.docx;*.xls;*.xlsx;*.pdf;*.txt',
'onComplete': function(event, queueID, fileObj, response, data) {
$('ul').append(SetFileContent(fileObj));
}
})
})
function SetFileContent(objFile) { //根据上传对象返回预览的图片
var sLi = "";
sLi += "<li>";
sLi += "<img src='" + objFile.filePath + "' width='100' height='100'>";
sLi += "<input type='hidden' value='" + objFile.filePath + "'>";
sLi += "
";
sLi += "<a href='javascript:void(0)'>删除</a>";
sLi += "</li>";
return sLi;
}
评论
3 楼
Java小K
2011-10-14
这玩意功能好强大,,我要学习下了
2 楼
gonghg
2011-10-14
感谢楼主
1 楼
greatghoul
2011-10-14
如果这位大哥能够注意点排版,那的确算是片好文
发表评论
-
微信开发工具中时间问题的小坑
2018-02-07 19:07 829刚开始用微信小程序开发工具,每次运行任何应用,都报这个错误: ... -
三篇不错的介绍CSS GRID的文章
2017-12-06 09:08 555三篇不错的介绍CSS GRID的文章: http://www. ... -
双因素认证(2FA)教程
2017-11-03 09:16 1572http://www.ruanyifeng.com/blog/ ... -
es6 中的export
2017-08-20 08:00 824https://juejin.im/post/5998625f ... -
markdown中的空格
2017-08-20 07:53 1704即使手动输入空格, 也是很不推荐的方法。我推荐全角空格,切换 ... -
(转)讲真,别再使用JWT了
2017-08-17 23:21 1013不错的好文: http://insights.thoughtw ... -
(转)手把手教你WebStorm+chrome实现时时调试刷新
2017-08-15 10:50 3032参考: http://jingyan.baidu.com/ar ... -
IntelliJ Idea 2017 免费激活方法
2017-08-15 09:38 93371. 到网站 http://idea.lanyus.com/ ... -
前端框架这么多,该何去何从?
2017-08-04 07:17 650http://insights.thoughtworkers. ... -
记录一个HTML 5画拓扑图的商业公司
2017-07-18 19:56 851http://qunee.com/ DEMO:http:// ... -
vue 2例子学习收集
2017-07-16 11:46 10091 vue2.0手撸闲鱼App https://githu ... -
(收藏)虚拟DOM内部是如何工作的
2017-07-13 22:08 597虚拟DOM内部是如何工作的 https://segmentfa ... -
最近看到的几篇精彩JAVASCRIPT博客文章推荐
2017-07-11 07:10 573【深度长文】JavaScript数组所有API全解密 http ... -
jsonp 跨域原理:深入浅出 jsonp
2017-07-10 19:55 1432https://lzw.me/a/jsonp.html jso ... -
(转)深度长文-JavaScript数组所有API全解密
2017-07-08 19:59 824深度长文-JavaScript数组所有API全解密 http: ... -
(收藏)网页导出PDF的方案
2017-07-06 07:13 990(收藏)网页导出PDF的方案 https://yiqiwuli ... -
Chromium 新的弹窗机制以及 HTML 的 <dialog> 元素
2017-06-28 12:37 1151https://juejin.im/post/59525195 ... -
国内一个不错的大屏UI设计厂家
2017-06-03 19:43 3160http://www.lanlanwork.com/dp.ph ... -
canvas仿芝麻信用分仪表盘
2017-05-28 20:21 1595canvas仿芝麻信用分仪表盘 https://segment ... -
(转)CSS 变量教程
2017-05-10 21:12 580http://www.ruanyifeng.com/blog/ ...
相关推荐
- **轻量级**:尽管功能强大,但jQuery的核心库体积小,加载速度快。 - **跨浏览器兼容**:jQuery兼容多种主流浏览器,包括IE 6.0+、Firefox 1.5+、Safari 2.0+、Opera 9.0+。 - **CSS和XPath选择器支持**:...
**jQuery 总结** 在实际开发中,jQuery 可以极大地提高工作效率,减少代码量,使得动态交互和界面美化变得更加简单。然而,随着 ES6 和现代前端框架的崛起,如 React 和 Vue,jQuery 在某些场景下可能不再是首选。...
资源名称:JQuery 学习总结及实例 中文WORD版内容简介:普通Javascript的缺点:每种控件的操作方式不统一,不同浏览器下有区别,要编写跨浏览器的程序非常麻烦。因此出现了很多对Javascript 的封装库,...
**jQuery 学习笔记总结** jQuery 是一个广泛使用的 JavaScript 库,它简化了网页文档对象模型(DOM)操作、事件处理、动画制作以及Ajax交互。本篇笔记将深入探讨 jQuery 的核心概念,包括选择器、常用方法以及在...
**jQuery1.4.1 小结** jQuery 是一个广泛使用的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。在本文中,我们将深入探讨jQuery 1.4.1版本的一些核心特性、改进和常用API。 #...
**jQuery学习资料大全** 在IT领域,jQuery是一个广泛使用的JavaScript库,它极大地简化了JavaScript代码,使得网页交互和DOM操作变得更加便捷。这份“jQuery学习资料大全”提供了丰富的资源,无论你是初学者还是有...
jQuery库包含以下功能: HTML 元素选取、HTML 元素操作、CSS 操作、HTML 事件函数、JavaScript 特效和动画、HTML DOM 遍历和修改、AJAX、Utilities 提示: 除此之外,Jquery还提供了大量的插件。
《jQuery手册:深入学习jQuery》 在Web开发领域,jQuery是一个不可或缺的JavaScript库,它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。本篇文章将深入探讨jQuery的核心概念和实用技巧,帮助你全面掌握这...
1. **体积小**:尽管jQuery 包含了大量的功能,但其核心文件的大小仍然控制得较小,有利于快速加载。 2. **写的少做得多**:jQuery 提供了许多便利的API,使得开发者可以使用一行代码完成复杂的操作,减少代码量。 3...
**jQuery学习笔记** jQuery是一个广泛使用的JavaScript库,它极大地简化了JavaScript代码的编写,使得网页交互变得更加简单。这个资源包含了作者在自学jQuery过程中积累的笔记,以HTML页面的形式呈现,方便阅读和...
**jQuery学习配套资料详解** ...总结,这个压缩包为jQuery学习提供了全面的资源,无论是初学者还是经验丰富的开发者,都能从中受益。通过系统学习和实践,你将能够熟练掌握这一强大的JavaScript库,提升前端开发效率。
### jQuery个人总结 #### 1. 认识jQuery **jQuery** 是一款快速、简洁的JavaScript库,它的设计目标是简化HTML文档遍历、事件处理、动画以及Ajax交互等常见功能的操作。通过一个简单的语法就能实现强大的功能,...
总之,jQuery 全集的学习涵盖了从基础操作到高级应用的各个方面,无论是初学者还是经验丰富的开发者,都能从中受益。通过深入学习和实践,开发者可以更加自如地驾驭 JavaScript 的这一强大工具,提升 Web 开发能力。
《jQuery学习总结》 jQuery 是一个广泛应用于前端开发的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。本文主要总结了jQuery的一些核心概念和常用方法。 首先,jQuery的核心是选择器...
jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery ...