jQuery

一.什么是jQuery

• jQuery是继prototype之后又一个优秀的Javascript框架。

• jQuery:兼容各种浏览器/写得更少，做得更多

• jQuery的版本:1.x兼容IE,2.X后不兼容IE

二.使用jQuery

1. 版本
   
2. 引入script

<script type="text/javascript" src="/js/jquery-1.11.2.min.js"></script>

三.$ ($ ===jQuery)

$是一个对象，也是一个方法

3.1 直接获取页面的元素

$ (“选择器”) 例:$("#id值")

3.2 dom就绪后执行相应的代码

window.onload = function(){…} -> 页面加载完毕后执行(所有数据请取完毕)
$(function(){…}) -> dom加载就绪(只需要读取到标签与属性即可【速度更快，性能更好】)

3.3 把一个原生的dom对象转成jQuery对象

jQuery对象的功能更加强大 【object{…}】，是一个伪数组
原生 -> jQuery : $(原生对象)
jQuery -> 原生 : jQuery对象[0]/jQuery对象.get(0)

3.4 直接创建一个元素

 $ ("<div>")

3.5 直接调用相应的方法

 $.get(..)/$.parseJSON(..)

四.jQuery选择器

4.1 基本选择器

4.1.1 Id选择器

$("#myDiv")
如果有多个id,只能操作第一个
如果要操作的控件在循环里面(id会重复出现)，就不能使用id选择器。

4.1.2 class 样式选择器

$(".div").html(“xxx”);
如果有多个对应的样式,都可以全部进行操作

4.1.3 element 元素选择器

$(“div”).html(“xxx”);
$(“input”).val(“所有的input”);
如果有多个对应的控件,都可以全部进行操作

4.1.4 * 所有元素(控件)

console.debug($("*"));获取所有的页面控件

4.1.5 selector1选择器

console.debug($(“div,input”));

4.2 层次选择器(有上下级关系)

4.2.1 祖先 后代

在给定的祖先元素下匹配所有的后代元素
$(“form input”)

4.2.2 父亲 儿子

在给定的父元素下匹配所有的子元素
$(“form>input”)
$("#table tr")

4.2.3 元素 紧接下一个元素

匹配所有紧接在 prev 元素后的 next 元素
$(“form+input”)

4.2.4 元素 所有下一个元素

匹配 prev 元素之后的所有 siblings 元素
$(“form~input”)

五.事件注册

$(元素).click(function(){…})
$(元素).bind(“click”,function(){…}) / unbind
$(元素).on(“click”,function(){…}) / off
事件委派:
$(“tbody”).on(“click”,".delBtn",function(){})
监听tbody的点击事件,当你点击的位置(元素)符合 .delBtn -> 就触发事件