码迷,mamicode.com
首页 > Web开发 > 详细

Jquery第一课 简介

时间:2015-03-10 14:08:32      阅读:160      评论:0      收藏:0      [点我收藏+]

标签:javascript   html   jquery   框架   

获取jQuery

jQuery是一个开源的Javascript框架,在jquery.com上提供了各版本jQuery的下载以及详细的开发文档。每个版本一般都提供两个选择:未压缩版和压缩版(min)。它们的功能完全一样,只是压缩版删除了空白字符和格式,体积更小。一般在开发的时候为了方便查看源码,使用未压缩版,而在发布的时候改用压缩版。

下载地址:http://jquery.com/download/

使用jQuery

在使用jQuery之前,需要先使用script元素将它引入到HTML文档中。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>戴维营教育jQuery教程</title>
        <script type="text/javascript" src="jquery-2.1.3.min.js"></script>
        <script>
            //js代码
        </script>
    </head>
    <body>
        <h1>长沙戴维营教育jQuery教程</h1>
        <a href="http://diveinedu.github.io">教程地址</a>
    </body>
</html>

Hello, World!

需要等待文档加载完成才能使用Javascript操作HTML元素。在jQuery之前,我们通过window.onload事件确定文档是否加载完成。

window.onload = function() {
    alert("Hello, World!");
}

在jQuery中进一步简化为ready事件,其中$为jQuery定义的一个选择函数。

$(document).ready(function(){
    alert("Hello, World!");
})

更多功能

  1. jQuery可以给HTML元素绑定事件处理函数。下面的代码给a标签添加了一个点击事件,每次点击该链接的时候都会弹出一个对话框。
$(document).ready(function(){
    $("a").click(function(event){
        alert("Hello, World!");
    });
});

点击a标签默认会跳转到链接所在地址,如果想要阻止这个动作,需要调用event的一些方法。

$("a").click(function(event){
    alert("Hello, World!");
    event.preventDefault();
});
  1. 修改HTML元素的属性。
$("a").addClass("test");
$("a").removeClass("test");
  1. 给元素添加动态效果。
$("a").click(function(event){
    event.preventDefault();
    $(this).hide("slow");
}
  1. 封装了Ajax请求,通过回调函数返回数据。
$.get("http://www.diveinedu.cn", function(){
    //代码
});

Jquery第一课 简介

标签:javascript   html   jquery   框架   

原文地址:http://blog.csdn.net/diveinedu/article/details/44173597

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!