JQuery简介及语法学习笔记

一、认识JQuery

1、JQuery
JQuery可以通过一行简单的标记被添加到网页中。

<script src='jquery-2.1.1.min.js'></script>
<script src=''></script>

2、什么是JQuery
JQuery是一个JavaScript函数库。

3、JQuery库包含的功能：

• HTML元素选取
• HTML元素操作
• CSS操作
• HTML事件函数
• JavaScript特效和动画
• HTML DOM遍历和修改
• AJAX
• Utilities

二、引入JQuery的方法

1、网页中添加JQuery

• 从jquery.com下载JQuery库
• 从CDN中载入JQuery，从Google中加载JQuery
  1）百度和新浪的服务器存有JQuery：
  例如：http://libs.baidu.com/jquery/1.10.2/jquery.min.js
  2)谷歌和微软的服务器存有JQuery：
  例如：http://ajax.googleapis.com/ajax/libs/jquery/jquery.min.js

2、版本介绍

• 1.x支持IE6+
• 2.x支持IE9+

三、JQuery的基本语法

点击p元素，隐藏：

$(document).ready(function(){
    //alert("文档加载完毕");
    $('p').click(function(){
        $(this).hide();
    });
});

四、JQuery选择器

点击按钮，p元素内容修改：

$(document).ready(function(){
    $('button').click(function(){
        $('#pid').text('p元素被修改了');
    });
});

五、JQuery事件

双击按钮（鼠标移入、鼠标移开），按钮隐藏：

$(document).ready(function(){
    //$('button').dbclick(function(){
    //$('buton').mouseenter(function(){
    $('buton').mouseleave(function(){
        $(this).hide();
    });
});

六、绑定、解除绑定事件

$(document).ready(function(){
    $('button').bind('click',clickHandler);
    $('button').unbind('click',clickHandler);
});

function clickHander(e){
    console.log('hello');
};

在JQuery1.7之后，可以用on()代替bind()，用off()代替unbind()。