jquery选择器|jquery与javascript常用代码片段整理

时间:2019-04-19  来源:常用代码  阅读:


(一)怎样用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 <script> 

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

    4 </script>

     

    (4)改变css

    1

    Hello World!

     

    2    

    3 <script> 

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

    5 </script>

     

    (5)改变里面的内容

    1

    Hello World!

       

    2      

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

    4 </script>

    jquery选择器|jquery与javascript常用代码片段整理

    http://m.bbyears.com/css/49555.html

    推荐访问:jquery面试题 jquery教程
相关阅读 猜你喜欢
本类排行 本类最新