jQuery基础学习

之前接触前端相关，有看过jQuery，现在总结一下，在这个基础上多加练习。

jQuery基础

jQuery是js的类库，query-查询是核心。jQuery查找到元素，对其进行操作，比如添加内容，编辑属性，定义事件处理，以及用Ajax动态发起HTTP请求。

基本语法

$ 代表jQuery这个全局函数。例如：
快速高亮显示class=”teb”的元素

$(".teb").css("background-color","yellow").show("fast");

选择器

$(".teb")就是一个选择器，它找到class="teb"的元素，这样它可以很方便的定位到一个或多个DOM节点。返回的jQuery对象：一个或多个

[<div class="teb">...</div>]
.
.
.

或者不存在返回:

[]

上面是按照class查找，也可按属性等HTML选择器来查找。
按属性查找：

$(“[name=email]”)

按属性使用前缀查找或者后缀查找：

$('[name^=icon]');前缀
$('[name$=with]');后缀

同样引申出多个同类class属性查找：

$('[class^="icon-"]'); // 找出所有class包含至少一个以`icon-`开头的DOM

<h3>属性操作</h3>
**获取和设置CSS属性**
$(".teb").css("background-color","yellow")

上面是获取calss=”teb”下的CSS属性，同时也可以操作这个属性

$(".teb").css("background-color","blue")；//设置CSS属性
$(".teb").css("background-color","")；// 清除CSS属性

获取和设置HTML属性
attr()方法用于获取和设置HTML属性
removeAttr()移除某个属性

$("form").attr("action");//获取第一个form元素的action属性
$("form").attr("action", "a");//设置第一个form元素的action属性
$("form").removeAttr('name'); // 删除name属性

修改文档结构

包括插入替换元素，复制，删除元素

事件处理

页面加载后，一旦页面上所有的JavaScript代码被执行完后只能通过触发事件来执行JavaScript代码。
给单击事件注册一个事件处理程序：

//单击所有<p>时，使其背景变为灰色
$("p").click(function(){
    $(this).css("background-clocr", "gray");
});

jQuery能够绑定的事件主要包括：
鼠标事件

click: 鼠标单击时触发；
dblclick：鼠标双击时触发；
mouseenter：鼠标进入时触发；
mouseleave：鼠标移出时触发；
mousemove：鼠标在DOM内部移动时触发；
hover：鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave。

键盘事件

键盘事件仅作用在当前焦点的DOM上，通常是和。

keydown：键盘按下时触发；
keyup：键盘松开时触发；
keypress：按一次键后触发。

其他事件

focus：当DOM获得焦点时触发；
blur：当DOM失去焦点时触发；
change：当、或的内容改变时触发；
submit：当提交时触发；
ready：当页面被载入并且DOM树完成初始化后触发。

$(document).ready(function(){
});

其简写形式：

$(function(){
});

ready仅作用于document对象。由于ready事件在DOM完成初始化后触发，且只触发一次，所以非常适合用来写其他的初始化代码。
上面代码为了防止DOM完成初始化前加载文档。

事件对象

通过定义Event对象来隐藏浏览器之间的实现差异。
当一个事件处理程序被调用，会传入一个事件对象作为其第一个参数。
例如获取鼠标坐标：

$(function () {
    $('#MouseMoveDiv').mousemove(function (e) {
        $('#MouseMoveSpan').text('pageX = ' + e.pageX + ', pageY = ' + e.pageY);
    });
});

jQuery会计算出鼠标指针的文档坐标，并存储在pageX 和pageY里。
target
表示在其发生事件的文档元素
currentTarget
relatedTarget
timeStamp
事件发生的事件，单位ms

注销事件

通过off(‘click’, function)实现：

function hello() {
    alert('hello!');
}

a.click(hello); // 绑定事件

// 10秒钟后解除绑定:
setTimeout(function () {
    a.off('click', hello);
}, 10000);

触发事件

事件的触发总是由用户操作引发的。同时也需要用代码触发事件。
不带参数调用会触发事件处理程序例如：

$("#test_form").submit();

Ajax

Asynchronous JavaScript and XML 异步JavaScript和XML
使用Ajax，可以按需加载数据，而不需要刷新整个网页

jQuery.ajax()函数

$.ajax(url,setting)接受一个URL，和一个可选的setting对象
例如：

$.ajax({
    type: "GET",    //HTTP请求方式
    url: url,       //要获取的url
    success : callback //完成时调用该函数
});

常用选项：

通用选项
- type：指定HTTP的请求方式
- url： 要获取的URL
- data：发送到服务器的数据。如果是GET请求，data将被转换成query附加到URL上果是POST请求，根据contentType把data序列化成合适的格式
- dataType：接收的数据格式，可以指定为’html’、’xml’、’json’、’text’等，缺省情况下根据响应的Content-Type猜测
- contentType：发送POST请求的格式，默认值为’application/x-www-form-urlencoded; charset=UTF-8’，也可以指定为text/plain、application/json
- async：是否异步执行AJAX请求，默认为true，千万不要指定为false
回调
- success：请求成功后的回调函数。

Ajax工具函数

Ajax工具函数也就是一些常用到的操作，提供一些方法
1.get()和post()
例子：

var test_get = $.get('/mdeditor', {
    name: 'ke lub',
    post: 2
});

第二个参数如果是object，jQuery自动把它变成query string然后加到URL后面，实际的URL是：

/mdeditor?name=ke%20lub&post=2

var test_post = $.get(‘/mdeditor’, {
name: ‘ke lub’,
post: 2
});
实际构造的数据name=ke %20lub&post=2作为POST的body被发送。
2.getScript()和getJSON()
从其他服务器动态加载js

$.getScript("http://example.com/js/test.js");

也可以传入第二个参数，执行一次该回调函数：

getScript("/js/test.js"，(){
    $("div".my_test());//
});

$.getJSON(‘/mdeditor’, {
name: ‘Bob Lee’,
check: 1
}).done(function (data) {
// data已经被解析为JSON对象了
});