1、 去除页面的右键菜单 $(function(){
$(document).bind("contextmenu",function(e){
return false;
});
});
2、搜索输入框文字的消失
当鼠标获得焦点、失去焦点的时候,input输入框文字处理:
$(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(”); }
});
input.blur( function(){
if( $.trim(input.val()) == ” ){ input.val(originalvalue); }
});
}
3、新窗口打开页面
$(function() {
//Example 1: Every link will open in a new window
$(‘a[href^="http://"]‘).attr("target", "_blank");
//Example 2: Links with the rel="external" attribute will only open in a new window
$(‘a[@rel$="external"]‘).click(function(){
this.target = "_blank";
});
});
// how to use
<a href="http://www.opensourcehunter.com" rel="external">open link</a>
4、判断浏览器类型
注意: jQuery 1.4中$.support 来代替以前的$.browser
$(function() {
// Target Firefox 2 and above
if ($.browser.mozilla && $.browser.version >= "1.8" ){
// do something
}
// Target Safari
if( $.browser.safari ){
// do something
}
// Target Chrome
if( $.browser.chrome){
// do something
}
// Target Camino
if( $.browser.camino){
// do something
}
// Target Opera
if( $.browser.opera){
// do something
}
// Target IE6 and below
if ($.browser.msie && $.browser.version <= 6 ){
// do something
}
// Target anything above IE6
if ($.browser.msie && $.browser.version > 6){
// do something
}
});
5、轻松切换css样式
$(function() {
$("a.Styleswitcher").click(function() {
//swicth the LINK REL attribute with the value in A REL attribute
$(‘link[rel=stylesheet]‘).attr(‘href‘ , $(this).attr(‘rel‘));
});
});
// how to use
// place this in your header
<link rel="stylesheet" href="default.css" type="text/css">
// the links
<a href="#" class="Styleswitcher" rel="default.css">Default Theme</a>
<a href="#" class="Styleswitcher" rel="red.css">Red Theme</a>
<a href="#" class="Styleswitcher" rel="blue.css">Blue Theme</a>
6、高度相等的列
$(function() {
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
// how to use
$(function() {
equalHeight($(".left"));
equalHeight($(".right"));
});
});
7、简单字体变大缩小
$(function() {
// Reset the font size(back to default)
var originalFontSize = $(‘html‘).css(‘font-size‘);
$(".resetFont").click(function(){
$(‘html‘).css(‘font-size‘, originalFontSize);
});
// Increase the font size(bigger font0
$(".increaseFont").click(function(){
var currentFontSize = $(‘html‘).css(‘font-size‘);
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$(‘html‘).css(‘font-size‘, newFontSize);
return false;
});
// Decrease the font size(smaller font)
$(".decreaseFont").click(function(){
var currentFontSize = $(‘html‘).css(‘font-size‘);
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$(‘html‘).css(‘font-size‘, newFontSize);
return false;
});
});
8、返回头部滑动动画
$(function(){
$(‘a[href*=#]‘).click(function(){
if (location.pathname.replace(/^\//,”) == this.pathname.replace(/^\//,”) && location.hostname == this.hostname){
var $target = $(this.hash);
$target = $target.length && $target || $(‘[name=' + this.hash.slice(1) +']‘);
if ($target.length){
var targetOffset = $target.offset().top;
$(‘html,body‘).animate({scrollTop: targetOffset}, 500);
return false;
}
}
});
});
<a name="top"></a>
// the link
<a href="#top">go to top</a>
9、获取鼠标位置
$(function() {
$(‘html‘).mousemove(function(e){
//display the x and y axis values inside the div with the id XY
$(‘#XY‘).html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
});
});
<div id="XY"></div>
10、判断一个元素是否为空
if ($(‘#id‘).html()) {
// do something
}
11、替换元素
$(function() {
$(‘#id‘).replaceWith(‘<div>I have been replaced</div>‘);
});
12、jquery timer 返回函数
$(function() {
window.setTimeout(function() {
// do something
}, 1000);
});
13、jquery也玩替换
$(function() {
var el = $(‘#id‘);
el.html(el.html().replace(/word/ig, ""));
});
14、判断元素是否存在
$(function() {
if ($(‘#id‘).length) {
// do something
}
});
15、让div也可以click
$(function() {
$("div").click(function(){
//get the url from href attribute and launch the url
window.location=$(this).find("a").attr("href"); return false;
});
});
<div><a href="index.html">home</a></div>
16、判断浏览器类型
$(function() {
function checkWindowSize() {
if ( $(window).width() > 1200 ) {
$(‘body‘).addClass(‘large‘);
}
else {
$(‘body‘).removeClass(‘large‘);
}
}
$(window).resize(checkWindowSize);
});
17、几个字符就clone!
$(function() {
var cloned = $(‘#id‘).clone()
});
18、设置div在屏幕中央
$(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;
}
$("#id").center();
});
19、创建自己的选择器
$(function() {
$.extend($.expr[':'], {
moreThen1000px: function(a) {
return $(a).width() > 1000;
}
});
$(‘.box:moreThen1000px‘).click(function() {
// creating a simple js alert box
alert(‘The element that you have clicked is over 1000 pixels wide‘);
});
});
20、计算元素的数目
$(function() {
$("p").size();
});
21、设置自己的li样式
$(function() {
$("ul").addClass("Replaced");
$("ul > li").prepend("? ");
// how to use
ul.Replaced { list-style : none; }
});
22、关闭jquery动画效果
$(function() {
jQuery.fx.off = true;
});
23、使用自己的jquery标识
$(function() {
var $jq = jQuery.noConflict();
$jq(‘#id‘).show();
});
24、解决自定义方法或其他类库与jQuery的冲突
jQuery.noConflict();
// 开始使用jQuery
jQuery("div p").hide();
// 使用其他库的 $()
$("content").style.display = ‘none‘;
25、如何获取jQuery集合的某一项
对于获取的元素集合,获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取,要注意,eq返回的是jquery对象,而 get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法,而dom对象只能使用dom的方法,如要获取第三个div 元素的内容。有如下两种方法:
$("div").eq(2).html(); //调用jquery对象的方法
$("div").get(2).innerHTML; //调用dom的方法属性
26、同一函数实现set和get
Jquery中的很多方法都是如此,主要包括如下几个:
$("#msg").html(); //返回id为msg的元素节点的html内容。
$("#msg").html("<b>new content</b>");
//将“<b>new content</b>” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content
$("#msg").text(); //返回id为msg的元素节点的文本内容。
$("#msg").text("<b>new content</b>");
//将“<b>new content</b>” 作为普通文本串写入id为msg的元素节点内容中,页面显示<b>new content</b>
$("#msg").height(); //返回id为msg的元素的高度
$("#msg").height("300"); //将id为msg的元素的高度设为300
$("#msg").width(); //返回id为msg的元素的宽度
$("#msg").width("300"); //将id为msg的元素的宽度设为300
$("input").val("); //返回表单输入框的value值
$("input").val("test"); //将表单输入框的value值设为test
$("#msg").click(); //触发id为msg的元素的单击事件
$("#msg").click(fn); //为id为msg的元素单击事件添加函数
同样blur,focus,select,submit事件都可以有这两种调用方法
27、集合处理功能
对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理,jquery已经为我们提供的很方便的方法进行集合的处理。
包括两种形式:
$("p").each(function(i){this.style.color=['#f00','#0f0','#00f']})
//为索引分别为0,1,2的p元素分别设定不同的字体颜色。
$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
//实现表格的隔行换色效果
$("p").click(function(){alert($(this).html())})
//为每个p元素增加了click事件,单击某个p元素则弹出其内容
28、扩展我们需要的功能
$.extend({
min: function(a, b){return a < b?a:b; },
max: function(a, b){return a > b?a:b; }
}); //为jquery扩展了min,max两个方法
使用扩展的方法(通过“$.方法名”调用):
alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));
29、支持方法的连写
所谓连写,即可以对一个jquery对象连续调用各种不同的方法。
例如:
$("p").click(function(){alert($(this).html())})
.mouseover(function(){alert(‘mouse over event‘)})
.each(function(i){this.style.color=['#f00','#0f0','#00f']});
30、操作元素的样式
主要包括以下几种方式:
$("#msg").css("background"); //返回元素的背景颜色
$("#msg").css("background","#ccc") //设定元素背景为灰色
$("#msg").height(300); $("#msg").width("200"); //设定宽高
$("#msg").css({ color: "red", background: "blue" });//以名值对的形式设定样式
$("#msg").addClass("select"); //为元素增加名称为select的class
$("#msg").removeClass("select"); //删除元素名称为select的class
$("#msg").toggleClass("select"); //如果存在(不存在)就删除(添加)名称为select的class
31、几个实用特效功能
其中toggle()和slidetoggle()方法提供了状态切换功能。
如toggle()方法包括了hide()和show()方法。
slideToggle()方法包括了slideDown()和slideUp方法。
32、几个有用的jQuery方法
$.each(obj, fn):通用的迭代函数。可用于近似地迭代对象和数组(代替循环)。
如
$.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); });
$.extend(target,prop1,propN):用一个或多个其他对象来扩展一个对象,返回这个被扩展的对象。这是jquery实现的继承方式。
如:
$.extend(settings, options);
//合并settings和options,并将合并结果返回settings中,相当于options继承setting并将继承结果保存在 setting中。
var settings = $.extend({}, defaults, options);
//合并defaults和options,并将合并结果返回到setting中而不覆盖default内容。
可以有多个参数(合并多项并返回)
$.map(array, fn):数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中,并返回生成的新数组。
如:
var tempArr=$.map( [0,1,2], function(i){ return i + 4; });
tempArr内容为:[4,5,6]
var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });
tempArr内容为:[2,3]
$.merge(arr1,arr2):合并两个数组并删除其中重复的项目。
如:
$.merge( [0,1,2], [2,3,4] ) //返回[0,1,2,3,4]
$.trim(str):删除字符串两端的空白字符。
如:
$.trim(" hello, how are you? "); //返回"hello,how are you? "
jQuery基础资料(二)
原创
©著作权归作者所有:来自51CTO博客作者qubernet的原创作品,请联系作者获取转载授权,否则将追究法律责任
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
【JAVA基础】JAVA基础学习资料
一、参考资料JavaSE目
java Java 参考资料 -
jquery学习开发资料
http://www.jq-school.com/
开发 资料 jquery -
JQuery基础之(二)第一个JQuery程序
一、 的地址是总下载列表, 里面有很多版本和类型的jQuery库, 主要分为如下几类:1) min: 压缩后的jQuery类库, 在正式环境上使用.如:jquery-1.3.2.min.js2) vsdoc: 在Visua
jquery server button function asp -
java对象怎么byte
所谓不可变对象,是指一个对象在创建后,它的内部状态不会被改变的对象。这意味着当我们将一个不可变对象的引用赋值给某个变量后,我们就不能改变该对象的内部状态。 James Gosling也说过——Java开发者应该尽量使用不可变对象。 在Java中将String对象设置为不可变对象的好处很多,例如:缓存、安全、同步、性能等方面。 字符串共享 字符串常量池:字符串常量池是JV
java对象怎么byte java 字符串转对象 java字符串转json对象 java截取字符串中的一部分