项目总结之关于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做为参数的前缀，用户可以自行测试。。。