jQuery学习笔记

一、引入

1、页面加载执行

$(function(){    //页面加载完执行})

2、根据标签id得到jquery对象

$("#id")e.g.   $("#username")

3、获取jQuery对象的值

$("#id").val();e.g.   $("#username").val();

4、将dom对象转换为jQuery对象

var （jQuery）变量名 = $(dom对象);e.g.    var $username = $(username);        alert($username.val()); 

注：为了区分dom和jQuery对象，一般jQuery对象名前加上$符号

5、将jQuery对象转换为dom对象

方式一：

var (dom）变量名 = jQuery对象.[0];e.g.    var username = $username.[0];        alert(username.value);

方式二：

var (dom）变量名 = jQuery对象.get(0);e.g.    var username = $username.get(0);        alert(username.value);

总结：jQuery对象是一个数组

二、选择器

1、基本选择器

1.1、查找id获得jQuery对象

$("#id")e.g.    $("#username")

1.2、查找class获得jQuery对象

$(".class")e.g.    $(".mini")

1.3、查找div、span获得jQuery对象

$("div")e.g.    $("span1")

1.4、选择所有元素

$("*")

1.5、组合选择器

$("#id,.class,div")

2、层级选择器

2.1、选择body内所有的div元素

$("body div")

2.2、选择body内所有的子div元素

$("body>div")

2.3、选择id为one的下一个div元素

$("#one+div")

2.4、选择id为two元素后面所有的div兄弟元素

$("#two~div")

2.5、选择id为two元素所有的div兄弟元素

$("#two").siblings("div")

3、过滤选择器

3.1、选择第一个/最后一个div元素

$("div:first")$("div:last")

3.2、选择class不为one的div元素

$("div:not('.one')")

3.3、选择奇/偶数的div元素

$("div:even")$("div:odd")

3.4、选择索引值为3(第4个)的div元素

$("div:eq(3)")

3.5、选择索引值大于/小于3的div元素

$("div:gt(3)")$("div:lt(3)")

3.6、选择所有的标题元素

$(":header")

3.7、选择正在执行动画的元素

$(":animated")

3.8、选择含有文本di的div元素

$("div:contains('di')")

3.9、选择不包含子元素且文本为空的div元素

$("div:empty")

3.10、选择含有class为mini的div元素

$("div:has('.mini')")

3.11、选择包含子元素（或文本元素）的div元素

$("div:parent")

3.12、选择所有可见/不可见的div元素

$("div:visible")$("div:hidden")

3.13、选择含有title属性的div元素

$("div[title]")

3.14、选择title属性值为/不为test的div元素

$("div[title=test]")$("div[title!=test]")  //没有title属性的div也会选中

3.15、选择title属性值以te开头/结尾的div元素

$("div[title^=te]")$("div[title$=est]")

3.16、选择title属性值含有es的div元素

$("div[title*=es]")

3.17、选择含有id属性且title属性含有es的div元素

$("div[id][title*=es]")

3.18、选择class为one的div下的第一个子元素

$("div[class=one] :nth-child(2)")  //冒号前加空格 从1计数$("div[class=one] :first-child")

3.19、选择class为one的div下的最后一个子元素

$("div[class=one] :last-child")

3.20、选择class为one的div下的仅有的子元素

$("div[class=one] :only-child")

3.21、选择表单内可编辑/不可编辑（可用/不可用）的input

$("input:enabled")$("input:disabled")

3.22、选择表单选中的多选框

$(input:checked)

3.23、选择表单下拉列表选中的内容

$("select>option:selected")

三、dom操作

1、页面上三种类型的节点

1.1、元素节点

     9大选择器用来查找元素节点

1.2、属性节点

     先获取元素节点，然后调用attr()

1.3、文本节点

     先获取元素节点，然后调用text()

2、节点的插入

2.1、内部插入节点

$("#zhoukou").append($("#ezhou"))    //向周口元素的内部的结尾处追加鄂州$("#zhoukou").appendTo($("#ezhou"))  //把周口追加到鄂州元素的内部的结尾处$("#zhoukou").prepend($("#ezhou"))   //向周口元素的内部的开始处追加鄂州$("#zhoukou").prependTo($("#ezhou")) //把周口追加到鄂州元素的内部的开始处

2.2、外部插入节点

$("#zhoukou").after($("#ezhou"))        //向周口元素的外部的结尾处追加鄂州$("#zhoukou").insertAfter($("#ezhou"))  //把周口追加到鄂州元素的外部的结尾处$("#zhoukou").before($("#ezhou"))       //向周口元素的外部的开始处追加鄂州$("#zhoukou").insertBefore($("#ezhou")) //把周口追加到鄂州元素的外部的开始处

2.3、删除节点

jQuery对象.remove()   //删除当前节点以及所有子节点jQuery对象.empty()    //清空当前节点的所有子节点

2.4、克隆节点

jQuery对象.clone()      //再利用append方法添加即可jQuery对象.clone(true)  //将所选节点的事件一并复制

2.5、属性操作

text()   //获取当前节点和子节点的文本html()   //获取当前节点内的html内容

2.6、样式操作

jQuery对象.addClass("class名")jQuery对象.removeClass("class名")jQuery对象.hasClass("class名")    //判断是否有样式jQuery对象.toggleClass("class名") //控制样式重复切换.如果存在则删除, 如果不存在则添加

2.7、遍历节点

jQuery对象.next()             //下一个节点jQuery对象.prev()             //前一个节点jQuery对象.siblings("参数")   //兄弟节点

2.8、包裹节点

jQuery对象.wrap("<b></b>")      //逐个包裹jQuery对象.wrapAll("<b></b>")   //整体包裹jQuery对象.wrapInner("<b></b>") //内部逐个包裹

四、jQuery事件

//页面加载完毕执行 window.onload=function(){}//页面加载完毕执行 $(function(){})$().ready(function(){})

区别：window.onload 与 $(function(){}) 都是用来作于界面渲染完毕之后的初始化操作；

          window.onload 需要等待页面上面所有的元素都绘制完毕之后才执行，包含图片；

          $(function(){}) 页面上面所有的dom 元素绘制完毕之后就执行，不包含图片。

绑定事件：bind()

解绑事件：unbind()