锋利的jQuery第2版学习笔记8~11章
第8章,用jQuery打造个性网站
网站结构
文件结构
编写CSS样式
第9章,jQuery Mobile
jQuery Mobile主要特性
其他框架
第10章,jQuery各个版本的变化
第11章,jQuery性能优化和技巧
jQuery性能优化
jQuery技巧
$(document).ready(function() {
$(document).bind("contextmenu",function(e) {
return false;
});
});
2、新窗口打开页面
$(document).ready(function() {
// ex 1 : href = "http://" 的超链接将会在新窗口打开链接
$('a[href^="http://"]').attr('target',"_blank"); // ex 2 : rel = "external" 的超链接将会在新窗口打开链接
$('a[rel$="external"]').click(function() {
this.target = "_blank";
});
});
<a href="http://www.cssrain.cn" rel="external">open link </a>
3、判断浏览器类型
$(document).ready(function() {
// Firefox2 and above
if($.browser.mozilla && $.browser.version >= "1.8"){
// do something
}
// Safari
if($.browser.safari){
// do something
} // Chrome
if($.browser.chrome){
// do something
} // Opera
if($.browser.opera){
// do something
} // IE6 and below
if($.browser.msie && $.browser.version <= 6){
// do something
} //anything above IE 6
if($.browser.msie && $.browser.version > 6){
// do something
}
});
4、输入框文字获取和失去焦点
$(document).ready(function() {
$("input.text1").val("Enter your search text here");
textFill($('input.text1'));
});
function textFill(input){ // input focus text function
var originalvalue = input.val();
input.focus(function() {
if($.trim(input.val()) == originalvalue){
input.val('');
}
}).blur(function() {
if($.trim(input.val()) == ""){
input.val(originalvalue);
}
});
}
5、返回头部滑动动画
jQuery.fn.scrollTo = function(speed) {
var targetOffset = $(this).offset().top;
$('html.body').stop().animate({scrollTop : targetOffset},speed);
return this;
};
// use
$("#goheader").click(function() {
$("body").scrollTo(500);
return false;
});
6、获取鼠标位置
$(document).ready(function() {
$(document).mousemove(funtion(e) {
$("#XY").html("X : " + e.pageX + " | Y : " + e.pageY);
});
});
7、判断元素是否存在
$(document).ready(function() {
if($('#id').length){
// do something
}
});
8、点击div也可跳转
$('div').click(function() {
window.location = $(this).find("a").attr("href");
return false;
});
9、根据浏览器大小添加不同样式
$(document).ready(function() {
function checkWindowSize() {
if($(window).width() > 1200){
$('body').addClass('large');
}else{
$('body').removeClass('large');
}
}
$(window).resize(checkWindowSize);
});
10、设置div在屏幕中央
$(document).ready(function() {
jQuery.fn.center = function() {
this.css("position","absolute");
this.css("top",($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px");
this.css("left",($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px");
return this;
} // use
$("#XY").center();
});
11、创建自己的选择器
$(document).ready(function() {
$.extend($.expr[':'],{
moreThen500px : function(a) {
return $(a).width() > 500;
}
});
$('.box:moreThen500px').click(function() {
// ...
});
});
12、关闭所有动画效果
$(document).ready(function() {
jQuery.fx.off = true;
});
13、检测鼠标右键和左键
$(document).ready(function() {
$('#XY').mousedown(function(e) {
alert(e.which); // 1 = 鼠标左键,2 = 鼠标中键,3 = 鼠标右键
});
});
14、回车提交表单
$(document).ready(function() {
$("input").keyup(function(e) {
if(e.which == 13){
alert("回车提交表单");
}
});
});
15、设置全局Ajax参数
$('#load').ajaxStart(function() {
showLoading(); // 显示loading
disableButtons(); // 禁用按钮
});
$('#load').ajaxComplete(function() {
hideLoading(); // 隐藏loading
enableButtons(); // 启用按钮
});
16、获取选中的下拉框
$('#someElement').find('option:selected');
$('#someElement option:selected');
17、切换复选框
var tog = false;
$('button').click(function() {
$('input[type=checkbox]').attr('checked',!tog);
tog = !tog;
});
18、使用siblings()选择同辈元素
// 不这样做
$('#nav li').click(function() {
$('#nav li').removeClass('active');
$(this).addClass('active');
});
// 替代做法
$('#nav li').click(function() {
$(this).addClass('active')
.siblings().removeClass('active');
});
19、个性化链接
$(document).ready(function() {
$("a[href$='pdf']").addClass("pdf");
$("a[href$='zip']").addClass("zip");
$("a[href$='psd']").addClass("psd");
});
20、在一段时间之后自动隐藏或关闭元素
// 这是1.3.2中我们使用setTimeout来实现的方式
setTimeout(function() {
$('div').fadeIn(400);
},3000);
// 而在1.4之后的版本可以使用delay()这一功能来实现的方式
$('div').slideUp(300).delay(3000).fadeIn(400);
21、使用Firefox或Firebug来记录事件日志
// $('#someDiv').log('div')
jQuery.log = jQuery.fn.log = function(msg) {
if(console){
console.log("%s : %o",msg,this);
}
return this;
};
22、为任何与选择器相匹配的元素绑定事件
// 为table里面的td元素绑定click事件,不管td元素是一直存在还是动态创建的
// jQuery 1.4.2之前使用的方式
$('table').each(function() {
$('td',this).live('click',function() {
$(this).toggleClass("hover");
});
});
// jQuery 1.4.2 使用方式
$('table').delegate('td','click',function() {
$(this).toggleClass('hover');
});
// jQuery 1.7.1使用方式
$('table').on('click','td',function() {
$(this).toggleClass('hover');
});
23、使用CSS钩子
<div id="panel" style="display:none">
<button>Colse</button>
</div>
执行下列代码
$('#panel').fadeIn(function() {
$('#panel button').click(function() {
$(this).fadeOut();
});
});
buton元素会消失,而不是panel元素消失,可以使用$.proxy()解决
$('#panel').fadeIn(function() {
// Using $.proxy()
$('#panel button').click($.proxy(function() {
// this指向 #panel
$(this).fadeOut();
},this));
});
25、限制Text-Area域中的字符个数
jQuery.fn.maxLength = function(max) {
this.each(function() {
var type = this.tagName.toLowerCase();
var inputType = this.type ? this.type.toLowerCase() : null;
if(type == "input" && inputType == "text" || inputType == "password"){
// 应用标准的maxLength
this.maxLength = max;
}else if(type == "textarea"){
this.onkeypress = function(e) {
var ob = e || event;
var keyCode = ob.keyCode;
var hasSelection = document.selection ? document.selection.createRange().text.length > 0 : this.selectionStart != this.selectionEnd;
return !(this.value.length >= max && (keyCode > 50 || keyCode == 32 || keyCode == 0 || keyCode == 13) &&
!ob.ctrlKey && !ob.altKey && !hasSelection);
};
this.onkeyup = function() {
if(this.value.length > max){
this.value = this.value.substring(0,max);
}
};
}
});
};
// use
$('#mytextarea').maxLength(10);
26、本地存储
localStorage.someData = "This is going to be saved";
27、解析json数据时报parseError错误
(function($) {
$.fn.stripHtml = function() {
var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi;
this.each(function() {
$(this).html($(this).html().replace(regexp,''));
});
return $(this);
}
})(jQuery);
// use
$('div').stripHtml();
锋利的jQuery第2版学习笔记8~11章的更多相关文章
- 锋利的jQuery第2版学习笔记1~3章
第1章,认识jQuery 注意:使用的jQuery版本为1.7.1 目前流行的JavaScript库 Prototype(http://www.prototypejs.org),成型早,面向对象的思想 ...
- 锋利的jQuery第2版学习笔记4、5章
第4章,jQuery中的事件和动画 注意:使用的jQuery版本为1.7.1 jQuery中的事件 JavaScript中通常使用window.onload方法,jQuery中使用$(document ...
- 锋利的jQuery第2版学习笔记6、7章
第6章,jQuery与Ajax的应用 Ajax的优势和不足 Ajax的优势 1.不需要插件支持 2.优秀的用户体验 3.提高Web程序的性能 4.减轻服务器和带宽的负担 Ajax的不足 1.浏览器对X ...
- 神经网络与机器学习第3版学习笔记-第1章 Rosenblatt感知器
神经网络与机器学习第3版学习笔记 -初学者的笔记,记录花时间思考的各种疑惑 本文主要阐述该书在数学推导上一笔带过的地方.参考学习,在流畅理解书本内容的同时,还能温顾学过的数学知识,达到事半功倍的效果. ...
- HTML5与CSS3基础教程第八版学习笔记7~10章
第七章,CSS构造块 CSS里有控制基本格式的属性(font-size,color),有控制布局的属性(position,float),还有决定访问者打印时在哪里换页的打印控制元素.CSS还有很多控制 ...
- HTML5与CSS3基础教程第八版学习笔记1~6章
第一章,网页的构造块 网页主要包括三个部分: 1.文本内容(纯文字) 2.对其他文件的引用:图像,音频,视频,样式表文件,js文件 3.标记:对文本内容进行描述并确保引用正确地工作 注:所有这些成分都 ...
- c#高级编程第七版 学习笔记 第三章 对象和类型
第三章 对象和类型 本章的内容: 类和结构的区别 类成员 按值和按引用传送参数 方法重载 构造函数和静态构造函数 只读字段 部分类 静态类 Object类,其他类型都从该类派生而来 3.1 类和结构 ...
- java JDK8 学习笔记——第11章 线程和并行API
第11章 线程与并行API 11.1 线程 11.1.1 线程 在java中,如果想在main()以外独立设计流程,可以撰写类操作java.lang.Runnable接口,流程的进入点是操作在run( ...
- <<Python基础教程>>学习笔记 | 第11章 | 文件和素材
打开文件 open(name[mode[,buffing]) name: 是强制选项,模式和缓冲是可选的 #假设文件不在.会报以下错误: >>> f = open(r'D:\text ...
随机推荐
- (剑指Offer)面试题28:字符串的排列
题目: 输入一个字符串,打印出该字符串中字符的所有排列. 例如输入字符串abc,则打印出由字符a,b,c所能排列出来的所有字符串abc,acb,bac,bca,cab和cba. 思路: 把一个字符串看 ...
- JavaScript设计模式 -- 读书笔记
JavaScript设计模式 一. 设计模式 一个模式就是一个可重用的方案: 有效的解决方法.易重用.善于表达该解决方案: 未通过"模式特性"测试的模式称为模式原型: 三规则:适用 ...
- 用jquery判断当前显示器的分辨率,加载不同CSS
<link rel="stylesheet" type="text/css" id="css"><script langu ...
- cocos2d-x如何截屏并保存图片
转自:http://blog.csdn.net/wolfking_2009/article/details/11022693 static void ScreenShoot() { CCSize si ...
- ubuntu: qemu+gdb 调试linux kernel 学习笔记
声明: 本笔记内容并非本人原创,90%来自网络资料的整合.同时,由于自己是刚刚接触qemu & gdbserver remote debug,本文也就算不得教程,仅供有缘人参考而已. ---- ...
- How to Send Information (String, Image, Record) Between Two Applications
http://delphi.about.com/od/windowsshellapi/a/wm_copydata.htm here are many situation when you need t ...
- Slony-I 文摘
http://www.onlamp.com/pub/a/onlamp/2004/11/18/slony.html 我特别喜欢这篇文章,就进行了转载和翻译. Introducing Slony by ...
- 【M29】引用计数
1.引用计数这项技术,是为了让等值对象对象共享同一实体.此技术的发展有两个动机:a.记录堆上分配的对象,是垃圾回收机制的简单原理:b.节省内存,多个对象具有相同的值,存储多次很笨.速度更快,等值对象避 ...
- BZOJ 3930: [CQOI2015]选数 递推
3930: [CQOI2015]选数 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOnline/pro ...
- UVA 12904 Load Balancing 暴力
Load Balancing Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest/vi ...