Jquery用法

1:鼠标点击时候促发

$(“p”).click(function(){ alert(“hello world”); });

2:增加删除class

$(“a”).addClass(“test”); $(“a”).removeClass(“test”);

3:show( )和html()的使用

$(“a”).addClass(“test”).show().html(“foo”);

4:特效hide( )

$(“a”).click(function(){ $(this).hide(“slow”); return false; }); 点击超链接，超链接就会慢慢的消失。 “return false”表示保留默认行为，因此页面不会跳转。

5：收缩展开功能

$(“.head”).click(function(){ $(this).next(“.main”).slideToggle(600); });

6：append和appendTo的用法

$(“#btn1″).click(function(){ $(“<input type=’text’ value=’你好小五’ >”).appendTo(“.test1″); });

$(“#btn2″).click(function(){ $(“.test2″).append(“<input type=’text’ value=’你好小五’ >”); });

7：jquery链式操作

这里有一个jQuery的技巧不得不提一下：jQuery的链式操作，什么是链式操作呢？ 我们来看看，本来应该写成这样子的：

$(“.stripe tr”).mouseover(function(){ $(this).addClass(“over”);}) $(“.stripe tr”).mouseout(function(){ $(this).removeClass(“over”); }) 但是我们写成了： $(“.stripe tr”).mouseover(function(){ $(this).addClass(“over”);}).mouseout(function(){ $(this).removeClass(“over”);}) 因为鼠标移入移除都是发生在同一个对象上的，所以我们可以将发生在同一个对象上的动作连起来写，这样子如果有很多对象并且在他们身上发生了很多动作那么就会节省很多代码。（我暂时是这样理解的，也不知道对不对希望高手能够斧正。） 8：表格隔行换色 鼠标滑过变色 点击变色

$(“.stripe tr”).mouseover(function(){ $(this).addClass(“over”);}) .mouseout(function(){ $(this).removeClass(“over”);}) .click(function(){ $(this).toggleClass(“click”).removeClass(“even”)})//点击变色,注意：因为有隔行变色，所以这里必须在触发toggleClass时,remove(“alt”). $(“.stripe tr:even”).addClass(“even”);

9：toggle()切换元素的可见状态

如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

$(“#btn”).toggle(function(){

$(".test").hide("slow");
},function(){
$(".test").show("fast");
});
});
另一种写法
  $("#btn1").click(function(){
    $("ul").toggle("slow");
 });
9：hover的用法
$("ul li").hover(
  function(){
    $(this).addClass("hover");
  },
  function(){
    $(this).removeClass("hover");
  }
);
10：jquery与其它库冲突
可以用jquery代替$
jQuery("ul li").click(function(){
jQuery(this).toggleClass("click");
});
11：find和each
$("ul").find("li").each(function(i){
// 和$("#orderedlist li")一样效果
$(this).html( $(this).html() + "-----测试------" + i );
});
each:
以每一个匹配的元素作为上下文来执行一个函数。

意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。而且，在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整型）。 返回 ‘false’ 将停止循环 (就像在普通的循环中使用 ‘break’)。返回 ‘true’ 跳至下一个循环(就像在普通的循环中使用’continue’)

12:parents()的用法

取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。

$(“a”).hover(function() { $(this).parents(“div”).addClass(“highlight”); }, function() { $(this).parents(“div”).removeClass(“highlight”); });

13：next()的用法

$(“span”).click(function (){ alert( $(“p”).next(“.selected”).html() ); });

14:animate()自定义动画

$(“#btn1″).toggle(function() { $(“.box”).animate({left:200,top:100,100,height:100,fontSize:20,opacity:’0.4′},400); }, function() { $(“.box”).animate({left:500,top:300,200,height:200,fontSize:40,opacity:’0.1′},400); }, function() { $(“.box”).animate({left:800,top:200,300,height:300,fontSize:80,opacity:’0.5′},400); } );

15: siblings()

取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。

 

var len = $(“.hilite”).siblings()

.css(“color”, “red”)

.length;
 $("b").text(len);

<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>

<ul>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
</ul>
<ul>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
<li>Eleven</li>
</ul>
<p>Unique siblings: <b></b></p>

17：if else

$(‘dl’).find(‘dd’).hide().end().find(‘dt’).click(function() { var main = $(this).next(); if(main.is(‘:visible’)) {main.slideUp(); }else {main.slideDown(); }; });

 

<dl> < dt>我是dt,快点我</dt> < dd>大家好，我是dd，我出来了啊</dd> < dt>我是dt,快点我</dt> < dd>大家好，我是dd，我出来了啊</dd> < dt>我是dt,快点我</dt> < dd>大家好，我是dd，我出来了啊</dd> < dt>我是dt,快点我</dt> < dd>大家好，我是dd，我出来了啊</dd> < /dl> 18:改变文章字体大小和背景颜色

写法一

$(“#fontsize”).change(function(){ var size = $(“#fontsize”).val();//获取下拉框的值 $(“p”).css({“font-size”:size }); //把值付给css的font-size }); $(“#backgroundcolor”).change(function(){ var backgroundcolor = $(“#backgroundcolor”).val(); $(“p”).css({“background”:backgroundcolor}); }); $(“#fontcolor”).change(function(){ var fontcolor = $(“#fontcolor”).val(); $(“p”).css({“color”:fontcolor}); }); 写法二

$(“#fontsize”).change( function() {$(“p”).css({fontSize:this.value});} ); $(“#backgroundcolor”).change( function() {$(“p”).css({background:this.value});} ); $(“#fontcolor”).change( function() {$(“p”).css({color:this.value});} );

写法三

$(“#formstylecontrols select”).change(function(){ $(“p”).css($(this).attr(“id”),$(this).val()); //这里用了一个技巧：把select的ID和要设置的CSS属性值一致 , 就可以一个语句实现三个select的功能 });

 

<div id=”formstylecontrols”> <label for=”font-size”>字体大小</label> < select id=”font-size”> <option value=”12px”>小号</option> < option value=”14px”>较小</option> < option value=”16px” >中号</option> < option value=”18px”>较大</option> < option value=”24px”>大号</option> < /select>

<label for=”background”>背景颜色</label> < select id=”background”> <option value=”#F4FBFF”>默认</option> < option value=”#f0f0f0″>淡灰</option> < option value=”#eaeaea”>灰色</option> < option value=”#eefaee”>绿色</option> < option value=”#ffffed”>明黄</option> < /select>

<label for=”color”>字体颜色</label> < select id=”color”> <option value=”#000000″>黑色</option> < option value=”#ff0000″>红色</option> < option value=”#006600″>绿色</option> < option value=”#0000ff”>蓝色</option> < option value=”#660000″>棕色</option> < /select> < label> < input type=”submit” id=”style” value=”保存设置” /> < /label> < /div>

 

<p>金陵城万人空巷，百姓、官吏都出来观看皇帝的迎亲大典。这一天，按照当今皇帝的旨意，用了皇家规格最高的仪仗来迎娶乐亭侯家的女儿冯妙芝。凤辇前有全副武装的侍卫开道，威武庄严；后有彩衣宫女护拥，花团锦簇。车水马龙，熙熙攘攘，香艳欣羡了整整一条街。七十二对绛纱宫灯分外耀眼，乐队高奏迎亲鼓乐，丝竹之声震耳欲聋，把迎亲的气氛推向了高潮。</p> < p>浩浩荡荡的迎亲队伍，转过金陵城的主要街道，再把出尽风头的新皇后冯妙芝送到皇帝选定的洞房柔光殿。贺喜的大臣、亲友已经纷纷告退了，很快，帝后就要携手进入洞房，共度春宵了……</p> < p>此时此刻，我站在这片泾水和渭水之间的大牧场上，脚下是三块古旧的巨大的石板铺就的小小广场，前面的松柏葱翠里是一座冷冷的尼庵，那就是曾经宠爱过我的君王给我的最后的归宿。</p> < p>心如刀绞，我24岁的生命忽然变得如此虚无，它曾如最潋滟的花，还没开到鼎盛，就悄然没落。</p>

19:keyup()

$(“input”).keyup(function () { var value = $(this).val(); $(“p”).text(value); }).keyup();

<input type=”text” id=”d” /> <p></p> < !– 代码的意思是说让p元素的text始终等于d的value 第一个keyup是定义了keyup事件执行的函数 第二个keyup是模拟一次keyup事件 也就是执行一下keyup里定义的函数 以此来保证页面初始状态下p元素的text就等于d的value

如果去掉后一个keyup看似也没有问题 但是当你在input中写入些东西后再刷新页面 就会发现input中的内容还在 但p中的内容已经不复存在了 这就是input的特殊之处 所以要用第二个keyup来进行页面的初始化 让两者内容在一开始就保持同步 –>

20:取消文本域文字选中状态

$(“#id”).mouseover(function(){ $(this).select(); }).mouseout(function(){ $(this).val($(this).val()); });

21:jquery控制图片最大宽度

var maxwidth=330;

$(“.coupons_info img”).each(function(){

if (this.width>maxwidth)

this.width = maxwidth;

});

js版本

 

 

//查找网页内宽度太大的图片进 行缩放 function ReImgSize(){ for (i=0;i<document.images.length;i++) { if (document.images[i].width>550) { document.images[i].width=”550″ } } }

上面的代码保存成 function.js

<script src=”/inc/function.js” type=”text/javascript”></script> <body onload=”ReImgSize()”>

22:单选按钮/复选按钮选中状态

单选

$(“#form”).submit(function(){

if($(“#form input:checked”)){

alert($(“#form1 input:checked”).val());

}

return false; //不提交

});

<form id=”form”>

<input type=”radio” name=”items” id=”item1″ value=”a”/>A

<br/>

<input type=”radio” name=”items” id=”item2″ value=”b”/>B

<br/>

<input type=”radio” name=”items” id=”item3″ value=”c”/>C

<br/>

<input type=”radio” name=”items” id=”item4″ value=”d”/>D

<br/>

<input type=”radio” name=”items” id=”item5″ value=”e”/>E

<br/>

<input type=”submit” id=”btn1″>

</form>

复选

$(“.btn”).click(function(){

$(“#divPosType input:checked”).each(function(){

// alert(this.value);

alert($(this).val());

});

});

 

<input type=”button” value=”测试选中的”>

<div id=”divPosType”>

<ul>

<li><input type=”checkbox” name=”chkJobType” id=”chkJobType1″ value=”全职” checked/>全职</li>

<li><input type=”checkbox” name=”chkJobType” id=”chkJobType2″ value=”兼职” />兼职</li>

<li><input type=”checkbox” name=”chkJobType” id=”chkJobType3″ value=”临时” checked />临时</li>

<li><input type=”checkbox” name=”chkJobType” id=”chkJobType4″ value=”实习” checked />实习</li>

</ul>

</div>

23:end()的使用

 

$(“input”).click(function(){

// alert($(“#css”).html());

//输出： <div id=”rain”>测试</div>

// alert($(“#css”).find(“#rain”).html());

//输出： 测试

alert($(“#css”).find(“#rain”).end().html());

//输出： <div id=”rain”>测试</div>

 

// 从上面可以看出，

// end()结束对 “#rain” 的引用而返回到 “#css ”

// 所以“ html()” 是对于 “#css” 起作用的

// 如果不加end() 则 “html()”是对 #rain 起作用

//可以修改jQuery选定并且以end()结束的方法有：

//add()

//children()

//eq()

//filter()

//find()

//gt()

//lt()

//next()

//not()

//parent()

//parents()

//siblings()

});

 

<input type=”button” value=”test” >

<div id=”css”><div id=”rain”>测试</div></div>