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)待排序列表为:

<ul class='to_order'>
<li>cloud</li>
<li>sun</li>
<li>rain</li>
<li>snow</li>
</ul>

(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");  //上和下综合<span style="color: rgb(31, 73, 125); font-family: 'Microsoft YaHei';"> </span>

 

(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(" <b>Helloworld!</b>"); 

3 });

 

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

2 .javascript 篇

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

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

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

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

 

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

1 <img id="image" src="smiley.gif">   

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

 

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

1 <button id=” myBtn”>按我</button> 

2 <script> 

3 document.getElementById("myBtn").onclick=function(){displayDate()}; 

4 </script>

 

(4)改变css

1 <p id="p2">Hello World!</p> 

2    

3 <script> 

4 document.getElementById("p2").style.color="blue"; 

5 </script>

 

(5)改变里面的内容

1 <p id="p2">Hello World!</p>   

2      

3 <script> document.getElementById("p2").innerHTML =”12333333333333";   

4 </script>

时间: 2024-10-27 13:30:17

jquery与javascript常用代码片段整理的相关文章

【凯子哥带你夯实应用层】新手必备的常用代码片段整理(二)

转自  :http://blog.csdn.net/zhaokaiqiang1992/article/details/44724687 以下内容来自多个开源项目的整理和自己的项目积累 收集设备信息用于信息统计分析 是否有SD卡 动态隐藏软键盘 动态显示软键盘 动态显示或者是隐藏软键盘 主动回到Home后台运行 获取状态栏高度 获取状态栏高度标题栏ActionBar高度 获取MCCMNC代码 SIM卡运营商国家代码和运营商网络代码 返回移动网络运营商的名字 返回移动终端类型 判断手机连接的网络类型

JavaScript常用代码书写规范的超全面总结_javascript技巧

一.全局命名空间污染 总是将代码包裹在一个立即的函数表达式里面,形成一个独立的模块. 不推荐 var x = 10, y = 100; console.log(window.x + ' ' + window.y); 推荐 ;(function(window){ 'use strict'; var x = 10, y = 100; console.log(window.x + ' ' + window.y); }(window)); 二.立即执行函数 在立即执行函数里面,如果有用到全局变量应该通过

Android开发常用代码片段

1.图片旋转 Bitmap bitmapOrg = BitmapFactory.decodeResource(this.getContext().getResources(), R.drawable.moon); Matrix matrix = new Matrix(); matrix.postRotate(-90);//旋转的角度 Bitmap resizedBitmap = Bitmap.createBitmap(bitmapOrg, 0, 0, bitmapOrg.getWidth(),

java swing常用代码片段

Java swing 常用代码片段: (1)复制全部 Java代码   JButton copyAll=new JButton("复制全部");               copyAll.addActionListener(new ActionListener() {                   @Override                   public void actionPerformed(ActionEvent e) {                   

php实用代码片段整理_php技巧

本文整理归纳了php实用代码片段.分享给大家供大家参考,具体如下: 一 从网页中提取关键词 $meta = get_meta_tags('http://www.jb51.net/'); $keywords = $meta['keywords']; // Split keywords $keywords = explode(',', $keywords ); // Trim them $keywords = array_map( 'trim', $keywords ); // Remove emp

推荐10个不错jQuery表单操作代码片段

代码片段1: 在表单中禁用"回车键" 大家可能在表单的操作中需要防止用户意外的提交表单,那么下面这段代码肯定非常有帮助:  代码如下 复制代码 $("#form").keypress(function(e) {   if (e.which == 13) {     return false;   } }); 代码片段2: 清除所有的表单数据 可能针对不同的表单形式,你需要调用不同类型的清楚方法,不过使用下面这个现成方法,绝对能让你省不少功夫.  代码如下 复制代码

javascript常用的方法整理_javascript技巧

整理了一些JS的常用方法,包括验证啊,全选反选啊,ajax请求啊之类的,因为就是自己用的,写的都比较简单,就算抛砖引玉吧,喜欢的就拿去,不喜欢就拉到 Tools.min.js /** * JS公用类库文件 * 创建时间:2015-05-13 * 创建人:mction */ (function(){ var D = document; var W = window; var Postfix = '.php' var _Id = function(Id){return document.getEle

JQuery与Ajax常用代码实现对比_jquery

传统ajax Code 复制代码 代码如下: <script language="javascript"> var xmlHttp; function createXMLHttpRequest(){ if(window.ActiveXObject) xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); else if(window.XMLHttpRequest) xmlHttp = new XMLHttpRe

javascript常用函数归纳整理_javascript技巧

本文整理归纳了一些js常用函数,其中包括对数据操作,字符替换操作,日期及加解密操作函数,还有一些简单的验证函数.便于大家查阅参考.相信对大家会有所帮助. 1.typeof.constructor.instanceof对数组的判断 复制代码 代码如下: var arr = [1,5,6,9,8,5,4]; //var arr = new Array(1,5,6,9,8,5,4); console.log(typeof arr);//object console.log(arr.constructo