学习jqurey

jquery是创造了一个与document对象相似的对象的一个框架，document下有许多对象，jquery也对其中一些对象进行的相似的模拟

使用这个新建的对象更为方便。

jquery获取元素对象方式：

$("#ID")      id选择器

 $("TagName")  如：$("p")   标签选择器

   $(".class")      样式选择器

$("p,div,span.menuitem")  多条件选择器

$("div li") 获取div下的所有li元素（后代，后代的后代....）   层次选择器

$("div>li")获取div下的直接li子元素             层次选择器

jQuery选择器返回的是一个对象数组，调用text(),html(),click()之类方法的时候其实

是对数组中每个元素迭代调用每个方法。

if($("#btn1")).length<=0{

    alert("id为btn1的元素不存在!");

}

节点遍历

next()方法用于获取节点之后的挨着的第一个同辈元素

nextAll()方法用于获取节点之后的所有同辈元素

同理有prev   prevAll之前的元素

siblings()用于获取所有同辈元素

基本过滤选择器

:first    选取第一个元素   $("div:first")  选取第一个<div>

:last   选取最后一个元素   $("div:last")  选取最后一个<div>

:not    $("div:not(.myClass)")选取样式名不是myClass的<input>

:even  $("input:even") 选取索引是奇数的<input>

:odd   $("input:odd") 选取索引是偶数的<input>

:eq     $("input:lt(5)")  选取索引小于5的<input>

:gt       $("input:gt(5)")  选取索引大于5的<input>

:lt        $("input:eq(5)")  选取索引等于5的<input>
:herder  $(":header") 选取所有的h1.....h6元素

属性过滤选择器

$("div[id]") ,选取有id属性的<div>

$("div[title=test]")选取title属性为“test” 的<div>

$("input[name=abc]")

表单选择器

$(":input")选取所有<input> <textarea> <select>  元素  和$("input")不一样，$("input")只获取<input>

$(":text")选取所有单选文本框  等价于$("input[type=text]")

$(":password")，选取所有密码框，同理还有:radio,  :checkbox  :submit    :image   :reset    :button   :file   :hidden

jQuery的Dom操作

使用html()方法读取或者设置元素的innerHTML:

alert($("a:first").html);    $("a:first").html("hello");

使用text()方法读取或者设置元素innerText

alert($("a:first").text());  $("a:first").text("hello");

使用attr()方法读取或者设置元素的属性

alert($("a:first").attr("href"));

$("a:first").attr("href","http://www.baidu.com");

使用removeAttr删除属性

动态创建Dom节点

使用$(html字符串)来创建Dom节点，并且返回一个jQuery对象，用append等方法装饰新创建的节点添加到Dom中

var link=$("<a href='http://www.baidu.com'>百度</a>");

$("div:first").append(link)

删除Dom节点

remove()删除选择的节点。remove方法的返回值是被删除的节点对象，还可以继续使用被删除的节点。

var lis =$("#ulSite li").remove();   $("#ulSite2").append(lis);

替换节点：

$("br").repalceWith("<hr/>");

包裹节点

wrap()方法用来将所有元素逐个用指定标签包裹

$("b").wrap("<font color='red'></font>")将所有粗体字红色显示

jquery样式操作

获取样式：attr("class")

设置样式：attr("class","myclass")

追加样式：addClass("myclass")

移除样式：removeClass("myclass"),

切换样式：toggleClass("myClass");如果存在样式则去掉样式，如果没有样式则添加样式

判断是否存在样式：hasClass("myclass")

事件

jquery中的事件绑定：

$("#btn").bind("click",function(){})  等价于 $("#btn").click(function(){})

合成事件hover,hover(enterfn,leavefn),当鼠标放在元素上时调用enterfn方法，当鼠标离开元素的时候调用leavefn方法

事件冒泡：jquery中也像javascript一样是事件冒泡（执行先后顺序原则）

阻止默认事件：preventDefault()方法