jQuery基本使用

什么是jQuery

“HTML控制网页的结构，CSS控制网页外观，Javascript控制网页行为”。浏览器根据HTML文档，解析成对应的DOM树，这样实现了对每个元素的定位。JavaScript做了两件事，找到元素结点，操作元素。“在操作元素的过程中，其实就是把这个元素看成一个对象，然后使用这个对象的属性和方法进行相关操作。”
jQuery是一个轻量级的Javascript库，拥有选择器，DOM操作，事件处理和链式操作等功能，简化了JavaScript操作。

jQuery代码风格

• 对同一个对象不超过3个操作的，写成一行
• 对同一对象有较多操作的，没一行写一个操作
• 对多个对象的少量操作，每个对象写一行，如涉及子元素，适当缩进

        $(this).addClass("hightlight")
            .children("li").show().end()
        .siblings().removeClass("hightlight")
            .children("li").hide();

jQuery 选择器

• 基本选择器

$("#test") 选取id为test的元素

$(".test")选取所有class为test的元素

$("p")选取所有< p >元素

$("*")选取所有元素

$("div,span,p.myClass")选取所有< div > 、< span >和拥有class为myClass的< p > 标签的一组元素

• 层次选择器

$("div span") 选取< div >里面所有的< span >元素

$("div > span")选取< div >元素下元素名是< span >的子元素

• 过滤选择器

通过特定规则筛选出所需的DOM元素。

• 表单选择器

$(":input")选取所有< input > ,< textarea >,< select >,< button >元素

$(":hidden")选取所有不可见元素

jQuery操作DOM

• 查找结点
• 创建节点

var $li = $("< li >内容 < /li >") 创建一个< li >元素

• 插入结点
• 删除结点

remove() 从DOM中删除匹配的元素

detach() 不会把匹配的元素从jQuery对象中删除，

empty() 能清空元素中的所有后代节点

• 复制结点

clone()

• 替换节点

replaceWith()

• 包裹结点

$("strong").wrap("< b >< /b >")

• 属性操作

jQuery的事件

• 加载DOM

window.onload 方法是在网页中所有元素完全加载到浏览器后才执行，即Javascrip 此时才可以访问网页中的任何元素。一次只能保存对一个函数的引用，会自动用后面的函数覆盖前面的函数。

$(document).ready() 方法注册的事件处理程序，在DOM完全就绪时可以被调用。会在现有的行为上追加新行为 简写形式：$(function(){...})

$(window).load(function({})) 在所有内容加载完毕后后触发，window是被绑定的元素，可以替换为其他元素，表示该元素完全加载完毕后触发。

• 事件绑定

bind(type,data,fn) 第一个参数是事件类型，第二个参数是可选参数，第三个是用来绑定的处理函数.

$(function(){
    $("#panel h5.head").bind("click" ,function(){
        $(this).next().is(":visible"){
            $(this).next().hide();
        }else{
            $(this).next().show();
        }
    })
})

//事件绑定简写形式
$(function(){
    $("#panel h5.head").mouseover(function(){
        $(this).next().show();
    }).mouseout(function(){
        $(this).next().hide();
    })
})

• 合成事件

hover() 用于模拟光标悬停事件，当光标移动到元素上时，会触发第一个函数（enter）,当光标移出这个元素时，会触发第二个函数（leave）

$(function(){
    $("#panel h5.head").hover(function(){
        $(this).next(),show();
    },function(){
        $(this).next().hide();
    })
})

toggle(fn1.fn2.fn3...) 方法 用于模拟数百哦连续点击事件，第一次点击，触发第一个函数，再次点击同一元素时，触发第二个函数

$("#panel h5.head").toggle(function(){
    $(this).next().show();
},function(){
    $(this).next().hide();
})

• 冒泡事件

存在嵌套的各元素可以响应同一个事件，事件触发后，因为事件会按照DOM的层次结构不断向上直至顶端。

$("#content").bind("click" , function(event){
    //event ：事件对象
    //...
    event.stopPropagation();
    //停止事件冒泡
    event.preventDefault();
    //阻止默认行为
    return false;
    //对上面两个行为的简写
})

• 移除事件

unbind(type,fn),第一个参数是事件类型，第二个参数是将要移除的函数。如果没有参数，则删除所有绑定事件；如果把绑定时传入的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。

one() 绑定的函数只触发一次，随后就立即被接触绑定。

• 模拟操作

trigger() 完成模拟操作，trigger(tyoe,data) 第一个参数是要触发的事件类型，第二个参数是要传递给事件处理函数的附加数据，以数组的形式传递给事件处理函数

//模拟点击id为btn的元素
$("#btn").trigger("click")；
$("#btn").click();
//简写形式

triggerHandler()实现只触发绑定事件，但是不执行浏览器默认操作

$("input").trigglerHandler("focus");
//文本框只触发绑定的focus事件，不会得到焦点

jQuery和Ajax

• 使用JavaScript实现Ajax的流程

  1. 获取XmlHttpReq
  2. 使用open()初始化XMLHttpRequest对象，指定HTTP方法和要使用的服务器URL
  3. 注册回调事件处理器,当readyState值改变时调用。

    xmlHttpReq.onreadystatechange=function(){
        if(xmlhttpReq.readyState ==4){
            if(xmlHttpReq.status == 200){
                //...
            }
        }
    }
  

  4. 使用send() 方法发送该请求

• jQuery中的Ajax

  jQuery 对Ajax操作进行了封装

  1. $.ajax()

         $function(){
             $("#send").click(function(){
                 $ajax(){
                     type:"GET",
                     url:"",
                     datatype:"json",
                     success:function(data){
                         $("#resText").empty();
                         //...
                     }
                 }
             })
         }
     

  2. load() ,$.get() , $post()

     • load(URL,fn) ,load()方法中，无论Ajax请求是否成功，只要请求完成后，回调函数就会被触发。
     • $get(url , data ,fn) ,$get()方法中，回调函数只有当数据成功返回后才会被调用。

  3. $.getScript() , $getJSON()

  4. serialize() 能将DOM元素内容序列化为字符串，简化了对表单元素的处理，方便数据传输

参考文献：
锋利的jQuery