一篇文章学完jQuery基础

2015-4-28 15:20| 发布者: aibeihu| 查看: 2596| 评论: 0

摘要: 刚开始是做java web 开发的，一直主攻后端，所以前端能力有所欠缺。虽然jquery也一直在用，但是真的很不系统，每次遇到稍微有点生僻的就要查资料。首先要说明的一点是我的学习网络资源http://www.w3school.com.cn/jq ...

刚开始是做java web 开发的，一直主攻后端，所以前端能力有所欠缺。虽然jquery也一直在用，但是真的很不系统，每次遇到稍微有点生僻的就要查资料。首先要说明的一点是我的学习网络资源http://www.w3school.com.cn/jquery/index.asp 版权归w3school所有。这次狠下心把jquery花几天时间重新梳理一遍，要说明的是默认读者是有html基础的，下面直接从代码开始我们的jquery之旅

Html代码  
<span style="font-size: 14px;"><html>  
<head>  
<!-引入jquery资源->  
<script type="text/javascript" src="jquery.js"></script>  
<script type="text/javascript">  
$(document).ready(function(){  
  $("p").click(function(){  
  $(this).hide();  
  });  
});  
</script>  
</head>  
  
<body>  
<p>点击我，我会消失哦</p>  
</body>  
  
</html> </span>  

很简单的实现了一个功能，点击元素内容，会隐藏元素的内容。在<head>中引入jquery.js文件。平时我会这么写，加载Microsoft CDN （谷歌也有，但是谷歌在国内很蛋疼），也就是微软提供的jquery 网络资源

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"

这样做的好处是，用户很可能已经加载过微软jquery，那么当下次访问的时候会直接从缓存中加载，这样会加快访问的速度。

一. 四种获取元素的方式

${#test} 表示 id 为 test 的元素；
${.test} 表示 class test 的元素；
${this} 表示当前元素；
${p} 表示所有的元素

需要说明的是this的用法，代码说明

Html代码  
<span style="font-size: 14px;"><html>  
<head>  
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>  
<script type="text/javascript">  
<!-下面一行表示在文档完全加载完之后再运行js代码->  
$(document).ready(function(){  
<!-第一处->  
  $("button").click(function(){  
<!-第二处->  
  $(this).hide();  
});  
});  
</script>  
</head>  
  
<body>  
<button type="button">Click me</button>  
</body>  
</html>  
</span>  

代码表示所有的button标签在点击后隐藏自己。

二. jQuery选择器

前面一节讲了四种获取获取HTML元素的方法，大家也许发现了，只是通过一种方式满足不了我们的日常使用，如果我想获取的id为test的元素呢？jQuery可以这样获取：${p#test} 选取所有id="test"的元素。

1. jQuery元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 元素。

$("p.intro") 选取所有 class="intro" 的 元素。

$("p#demo") 选取所有 id="demo" 的 元素。

2. jQuery属性选择器

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

3. jQuery CSS选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。比如下面表示把所有p元素的背景颜色变为红色；

Java代码  
<span style="font-size: 14px;">$("p").css("background-color","red");</span>  

* jQuery是为处理 HTML 事件而特别设计的，下面是一些事件

Event 函数绑定函数至

$(document).ready(function)	将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)	触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)	触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)	触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)	触发或将函数绑定到被选元素的鼠标悬停事件

三. 隐藏、显示、切换，滑动，淡入淡出，以及动画

1. 隐藏与显示
还记得前面学过的hide()函数吗？下面是功能更加强大的，具有动画效果的hide()和show()函数

$(selector).hide(speed,callback); //speed表示动画的速度，取值有"fast"，"slow"或者具体的毫秒数，
$(selector).show(speed,callback); //callback表示动画执行完毕之后回调的函数名
$(selector).toggle(speed,callback);//表示hide与show之间的切换

下面代码表示点击隐藏按钮后，首先隐藏P标签的内容，然后执行show()函数，即弹出一个对话框。

Html代码  
<span style="font-size: 14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html>  
<head>  
<script src="<span style="line-height: 1.5;">http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js</span><span style="line-height: 1.5;">"></script></span>  
<script type="text/javascript">  
$(document).ready(function(){  
  $("button").click(function(){  
 <!-在缓慢的隐藏p元素之后执行show函数->  
  $("p").hide(2000,show);  
  });  
});  
<!-弹出一个窗口->  
function show(){alert("隐藏了")}  
</script>  
</head>  
<body>  
<button type="button">隐藏</button>  
<p>这是一个段落。</p>  
<p>这是另一个段落。</p>  
</body>  
</html></span>  

2. 淡入淡出

Html代码  
<span style="font-size: 14px;">$(selector).fadeIn(speed,callback); //淡入  
$(selector).fadeOut(speed,callback);  //淡出  
$(selector).fadeToggle(speed,callback);  //淡入与淡出之间切换  
$(selector).fadeTo(speed,opacity,callback);// opacity 是0到1之间的一个数值，表示不透明度</span>  

3. 滑动

Html代码  
<span style="font-size: 14px;">$(selector).slideDown(speed,callback); //向下滑动  
$(selector).slideUp(speed,callback); //向上滑动  
$(selector).slideToggle(speed,callback); //向上与向下切换</span>  

4. 动画

动画用animate（）来表示

Html代码  
<span style="font-size: 14px;"><!DOCTYPE html>  
<html>  
<head>  
<script src="<span style="line-height: 1.5;">http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js</span><span style="line-height: 1.5;">"></script></span>  
<script>   
$(document).ready(function(){  
  $("button").click(function(){  
    var div=$("div");    
    div.animate({left:'100px'},"slow");  
    div.animate({fontSize:'3em'},2000);  
  });  
});  
</script>   
</head>  
<body>  
<button>开始动画</button>  
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>  
</body>  
</html>  
</span>  