jQuery

jQuery是一个JavaScript函数库，是一个轻量级的"写的少，做的多"的JavaScript库。
jQuery库包含以下功能：

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

除此之外，JQuery还提供了大量的插件。目前兼容于所有主流浏览器。

jQuery 语法

通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
美元符号定义 jQuery，选择符（selector）“查询"和"查找” HTML 元素，jQuery 的 action() 执行对元素的操作。
实例:

$(this).hide() - 隐藏当前元素

$(“p”).hide() - 隐藏所有

元素

$(“p.test”).hide() - 隐藏所有 class=“test” 的

元素

$(“#test”).hide() - 隐藏 id=“test” 的元素

标准写法：
所有 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。如果在文档没有完全加载之前就运行函数，操作可能失败。
********--------------------------------------------------------------------------------------------------------------------------------------
jQuery 入口函数与 JavaScript 入口函数的区别：
jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。
********--------------------------------------------------------------------------------------------------------------------------------------
简洁写法（与以上写法效果相同）:

$(function(){
 
   // 开始写 jQuery 代码...
 
});

以上两种方式选择一种方式实现文档就绪后执行 jQuery 方法。

jQuery 选择器

jQuery 选择器允许对 HTML 元素组或单个元素进行操作，基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。常用的有：

  1. 元素选择器
    jQuery 元素选择器基于元素名选取元素。
    在页面中选取所有

    元素:$(“p”)
    如：用户点击按钮后，所有

    元素都隐藏：

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
  1. id 选择器
    jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素，页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
    通过 id 选取元素语法如下：$(“#test”)
    如：当用户点击按钮后，有 id=“test” 属性的元素将被隐藏：
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
  1. .class 选择器
    jQuery 类选择器可以通过指定的 class 查找元素。
    语法如下：$(“.test”)
    如：用户点击按钮后所有带有 class=“test” 属性的元素都隐藏：
$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

jQuery 事件

页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
常见 DOM 事件：

事件方法
鼠标事件click dblclick mouseenter mouseleave blur hover
键盘事件keypress keydown keyup blur
表单事件submit change focus unload
文档/窗口事件load reasize scroll

jQuery 事件方法语法:
在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。

页面中指定一个点击事件：$(“p”).click();
下一步是定义什么时间触发事件。您可以通过一个事件函数实现：

$("p").click(function(){
    // 动作触发后执行的代码!!
});

jQuery方法

1. jQuery load()

jQuery load() 方法是简单但强大的 AJAX 方法。load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
语法: $(selector).load(URL,data,callback);
必需的 URL 参数规定希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
如：为了避免多页面情形下的代码重复，可以利用 load() 方法，将重复的部分（例如导航栏）放入单独的文件，使用下列方法进行导入：

//1.当前文件中要插入的地方使用此结构：

<div class="include" file="***.html"></div>

//2.***.html中放入内容，用html格式仅仅因为会有编辑器的书写辅助。
//3.代码：

$(".include").each(function() {
    if (!!$(this).attr("file")) {
        var $includeObj = $(this);
        $(this).load($(this).attr("file"), function(html) {
            $includeObj.after(html).remove(); //加载的文件内容写入到当前标签后面并移除当前标签
        })
    }
});

或者在index文件里只写重复部分，剩下的一股脑放各自单独文件 load() 进来~

2. get() 和 post()

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
语法：
$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。

$.post() 方法通过 HTTP POST 请求向服务器提交数据。
语法:
$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
开发中一般利用jQurey的ajax方法与服务器交互数据（数据格式为JSON字符串）。
Ajax

具体可参考 jQurey教程

END

更多推荐

jQuery