项目总结之关于JQuery一些常用的函数

      最近做一个小的项目，用到了很多关于jquery函数，下面简单总结下自我感觉比较常用的一些函数。

 jquery函数－－Hide函数用法

       jquery中，hide函数用于实现层的消失，相反，show函数用于实现层的显示。演示代码如下：

          

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="/Public/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery-css</title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

     通过button标签的click事件，我们获取p标签，执行hide（）函数，p段落消失。

jquery函数－－CSS 选择器

     jquery中的CSS选择器用于动态添加标签的css样式：演示代码如下：

    

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="/Public/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery-css</title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").css("background-color","red");
  });
});
</script>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>

 通过获取p标签，接着加上.css的功能，就可以改变p标签的样式了。。。

 jquery函数－－slideToggle用法

  slideToggle可以用于下拉缩起的功能，大家一定会想到菜单吧，这个在网页制作中用得非常多。

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="/Public/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery-css</title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
  $("p").slideToggle();
  });
});
</script>
<p>This is a paragraph.</p>
<button class="btn1">Toggle</button>
</body>
</html>

    slideToggle里有个参数，用于确定速度的，可以为slow,normal,fast。学好这个函数吧，在许多地方可以用到哦。。。

jquery函数－－fadein fadeout用法

    fadein,fadeout可以用于实现点击按钮层消失出现，当然这种渐变也是可以通过参数slow,normal,fast进行控制的。这个例子可以用在什么地方呢？想不出来，但应该是层的隐藏之类的，或许在动画中的应用比较多。

   

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="/Public/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery-css</title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
  $("p").fadeOut()
  });
  $(".btn2").click(function(){
  $("p").fadeIn();
  });
});
</script>
<p>This is a paragraph.</p>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
</body>
</html>

  jquery就是这么牛，通过获取标签，接着执行fadein函数，层就消失了。。。

jquery函数－－fadeto用法

    fadeto或许可以说是一个特殊的fadein吧，加上一个数字，实现用户想达到的效果。speed,opacity,callback，这三个参数，用得多的也就是前面两个了，一个速度，一个透明程度，简单吧。。。

   

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="/Public/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery-css</title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
  $("p").fadeTo(1000,0.4);
  });
});
</script>
<p>This is a paragraph.</p>
<button class="btn1">FadeTo</button>
</body>
</html>

   速度为1000毫秒，透明程度为0.4，你想怎么改就怎么改

jquery.query.js获取url参数

   在这里提出一个问题，如果要你获取到url里的参数，你会怎么做？作为一个前端开发工程师，这样事情，我们通过JS也是可以做到的。今天，我们向大家介绍两种做法，一个是通过jquery，一个是通过js来实现。

   我们在百度里到处都可以找到jquery.query.js，大家都在介绍这个插件，在这里，我们先说下这个插件，引进这个插件后，大家在使用中：

     

//以下为query.js实现的获取url后参数的做法
$(function(){
 var id=$.query.get('cid');
 alert("jquery实现的cid:"+id);
});

   这个时候，你会不会体会到jquery的神奇，这么短的代码，就可以将url里的参数获取到。。。

   接下来，我们介绍下传统JS的做法：   

function request(paras)
    { 
        var url = location.href; 
        var paraString = url.substring(url.indexOf("?")+1,url.length).split("&"); 
        var paraObj = {} 
        for (i=0; j=paraString[i]; i++){ 
        paraObj[j.substring(0,j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=")+1,j.length); 
        } 
        var returnValue = paraObj[paras.toLowerCase()]; 
        if(typeof(returnValue)=="undefined"){ 
        return ""; 
        }else{ 
        return returnValue; 
        } 
    };
alert("js实现的cid:"+request("cid"));

   在这个代码中，我们需要获取url ?后的地址，接着再将&左右的参数分离。。。

   用户在测试这个代码的时候，需要在url中加上?，我们以cid做为参数的前缀，用户可以自行测试。。。

posted @ 2015-09-29 18:24  我的地盘听我的  阅读(573)  评论(0)  编辑  收藏  举报