jquery与javascript常用代码片段整理

（一）怎样用JQuery刷新一幅图片？
说明：我们都知道，当我们在请求一个资源（比如网页，图片等）的时候，如果该资源被缓存到浏览器了，那么请求返回的就是缓存的副本，不是我们希望获取的资源（该资源内容已经被更新了），此时最普遍的一个办法就是在请求的页面后面或者图片的src后面加上一个查询字符串"ran=" + Math.random()，这样就会请求到最新版本的资源啦！
代码：

$(imageObj).attr('src',$(imageObj).attr('src') + '?' + Math.random());

（二）怎样用JQuery查看一幅图片是否被完全加载？
说明：在一个页面未加载完全的时候调用JavaScript操作常常会失败，因为此时DOM未解析完毕。可以在windoiw.onload方法中执行要执行的JavaScript/JQuery方法（此时图片肯定加载完成，可以获取其高度等属性），也可以在$(function(){})中执行(此时DOM虽解析完毕，但是所请求的资源未必全部加载完成)。
如果在使用图片之前，要事先检测图片是否加载完成，可以采用如下的代码：
代码：

var imgsrc = "img/img.png";
$(imageObj).load(function()
{
alert('图片加载完成');
}).error(function()
{
alert('图片加载出错');
}).attr('src',imgsrc);

（三）怎样用JQuery查看多幅幅图片是否被完全加载？
说明：说明如上，加入你页面有十幅图片要加载，此时可以设置一个变量记录加载图片数，当该变量等于总的图片数时，加载就大功告成了！

var totalImages = 10;
var loadedImages = 0;
$('img').load(function()
{
++loadedImages; //此处为闭包
if(loadedImages == totalImages)
{
alert('所有图片加载完毕！');
}
});

（四）怎样用JQuery对无序列表（ul）排序？
说明：有时候我们需要对一个无序列表（ul）排序（当然可以用有序列表ol），但是ul能够提供更多定制功能，且能自定义排序器。
代码：（1）待排序列表为：

• cloud


• sun


• rain


• snow

（2）JQuery代码为：

var items = $('.to_order li').get(); //获取所有待排序li
items.sort(function(a,b) //调用javascript内置函数sort，参数为一闭包函数，也就是排序器
{
var keyA = $(a).val();
var keyB = $(b).val();
if(keyA < keyB) return -1;
if(keyA > keyB) return 1;
return 0;
});
var ul = $('.to_order');
$.each(items,function(i,li) //此时items为排好队的集合
{
ul.append(li);
});

（五）怎样禁止鼠标右键（contextmenu）？
说明：有时候我们希望用户不能使用鼠标右键，从而避免复制，另存为等行为。

$(function(){
$(document).bind('contextmenu',function(e){
return false;
});
});

（六）怎样实现一幅图片淡出(FadeOut)后，另一幅图片淡入(FadeIn)的效果？
说明：是时候展现一些比较cool效果了，淡入淡出的效果可以采用JQuery的FadeIn和FadeOut效果来实现。

$('img').fadeOut(function(){
$(this).load(function(){
$(this).fadeIn();
}).attr('src',AnotherSource);
});

（七）检测一个DOM对象是否存在？
说明：在对一个DOM对象操作前，先检测其是否存在。

//方法一
if($('#elementId').length)
{
//存在
}
//方法二
if($('#elementId').size() > 0)
{
//存在
}
//方法三
if($('#elementId')[0])
{
//存在
}
//方法四~方法N
期待大家补充，哈哈！

//$("a[href='/fyou']").html(); 获取指定链接的超链接 

7 //$("a[href]")//有href属性的超链接

(8) 改变对象的CSS

1 $("#61dh a").css('color','#123456'); 

2 $('#sp').parent().css('background','#000');  //#sp的父原素的背景变黑

(9)清除表单  表单复位

1 $("#reset").click(function(){ 

2     $("#form")[0].reset() 

3 })

(10)绑定事件

01 functionsecondClick() { 

02     $("#dv1").unbind(); //解除对象事件 

03     alert("second click!"); 

04 } 

05 $("#dv1").bind("mouseover",secondClick); 

06    

07 //$("#dv1").trigger("click");  //自动触发事件 

08 //为所有的段落添加一个click事件,包括后来加上的元素 

09     $("p").live("click",function () { 

10         alert($(this).html()); 

11 });

(11)动画效果 自定义animate

1 $("#go").click(function(){ 

2    

3 $("#block").animate({height:300,width:'+800',marginLeft:'+=300'},"slow"); 

4 }); 

5    

6 //+800表示增加到800      +=800表示在原来基础上加800 

7 // $(".panel").slideToggle("slow");  //上和下综合

(12)javascript原生绑定事件

1 var dg = document.getElementById("dg"); 

2 dg.onmouseover =function(){ 

3     

4    alert("good"); 

5     

6 }

(13)return false 在javascript中是跳出这个方法！

(14)jquery 增加删除class

1 $(thisObj).addClass("selected"); 

2 $(thisObj).parents("ul").find("li").removeClass("selected");

(15)取select值

1 var pp = $("#provide option:selected").val(); 

2 //或 

3 var area0 = $("select[name='prov']").val();

(16)在某元素中插入内容（可以是html，可以是字符串）

在每个 p 元素结尾插入内容：

1 $("button").click(function(){ 

2  $("p").append(" Helloworld!"); 

3 });

点此快速转跳《【JavaScript】常用 JQuery 代码片段 和 JavaScript 代码片段(下)》。。

2 .javascript 篇

(1)查找html元素  通过id查找

1 var x=document.getElementById("intro");
本例查找 id="main" 的元素，然后查找 "main" 中的所有

元素：

1 var x=document.getElementById("main");   

2 var y= x.getElementsByTagName("p");
var  xx = document.getElementsByName('name');

(2)本例改变了 某 元素的  属性

1    

2 document.getElementById("image").src="landscape.jpg";

(3)javascript事件 向 button 元素分配 onclick 事件：

1 按我 

2

(4)改变css

1

Hello World!

2    

3

(5)改变里面的内容

1

Hello World!

2      

3