jQuery学习笔记

区分DOM对象和jQuery对象：

DOM对象：可以通过getElementsByTagName或者getElementById获得元素节点，这样得到的DOM元素就是DOM对象。可以使用JavaScript方法：

var domObj = document.getElementById("id");//获取DOM对象
var objHTML = domObj.innerHTML;

jQuery对象是通过jQuery包装DOM对象后的对象，这个对象可以调用jQuery的方法。

$("#foo").html();
//等价于
document.getElementById("foo);

$("#foo")与document.getElementById("foo);获得的饿对象并不相同。前者获得的是jQuery对象，后者获得的是DOM对象。

将jQuery对象转换为DOM对象：[index]或get(index)

var $cr = $("#cr");//jQuery对象

var cr = $cr[0];//DOM对象

var crr = $cr.get(0);//DOM对象

将DOM对象转换为jQuery对象：使用$()将DOM对象包起来。

var cr = document.getElementById("cr");
var $cr = $(cr);//将DOM对象转换成jQuery对象

示例：必须选中checkbox才能提交的功能：

DOM判断：cr.checked判断是否被选中

$(function(){
　　var $cr = $("#cr");
　　var cr = $cr[0];
　　$cr.click(function(){
　　　　if(cr.checked){
　　　　　　alret("OK!");
　　　　}
　　});
});

jQuery判断：is(":checked")

$(function(){
　　var $cr = $("#cr");
　　$cr.click(function(){
　　　　if($cr.is(":checked"){
　　　　　　alret("OK!");
　　　　}
　　});
});

避免命名冲突：

jQuery.noConflict();//交出$控制权
(function($){
　　$(function(){
　　　　$("p").click(funciton(){
　　　　　　//...
　　　　});
　　});
})(jQuery);

$("pp").style.display = "none";

$();获得的永远是jQuery对象，因此不能如下：

if($("#id"){//这里的条件是个对象，不能判断
//...
}

可以如下改动：判断对象的长度，也可以转换成DOM对象来判断

if($("#id").length > 0){//判断对象长度
//...
}

if($("#id")[0]){//转换成DOM对象
//...
}

选择器：

基本选择器：

$("#test")//id选择器

$(".test") //class选择器

$("p")//元素名称选择器

$("*")//选择所有元素

$("div,span,p.myClass")//选取这些元素的集合

层次选择器：通过DOM元素的层次关系获得特定元素，如后代元素、子元素、相邻元素和兄弟元素等。

$("div span")//选取div里的所有<span>元素  中间空格,后代元素

$("div > span")//选取div里的子元素，与后代元素的区别要注意

$(".one + div")//选取class为one的下一个<div>元素  只选取one后面的一个，可以用next()来代替$(".one").next("div");

$("#two~div")//选取id为two的元素后面的所有<div>兄弟元素,可以用nextAll来代替$(".two").nextAll("div");

过滤选择器：

1.基本过滤选择器

选择器	描述	示例
:first	选取第一个元素	$("div:first")选取所有<div>元素的第一个<div>元素
:last	选取最后一个元素	$("div:last")选取所有<div>元素的最后个<div>元素
:not(selector)	去除所有与给定浏览器匹配的元素	$("input:not(.myClass)")选取class不是myClass的<input>元素
:even	选取是偶数的所有元素，从0开始	$("input:even")
:odd	选取是奇数的所有元素，从0开始	$("input:odd")
:eq(index)	选取索引等于index的元素(index从0开始)
:gt(index)	大于
:lt(index)	小于
:header	选取所有的标题元素
:animated	选取当前正在执行动画的所有元素

 2.内容过滤选择器:

:contains(text)	选取含有文本内容“text”的元素	$("div:contains("me"))选取含有文本me的<div>元素
:empty	选取不包含子元素或者文本为空的元素
:has(selector)	选取含有选择器所匹配的元素的元素	$("div:has(p)")选取含<p>元素的<div>
:parent	选取含子元素或者文本的元素	$("div:parent")选取拥有子元素的<div>

 3.可见性过滤选择器

:hidden	选取所有不可见的元素	选取不可见元素，包括<input type="hidden"/>,<div style="display:none;">和<div style="visibility:hidden;">
:visible	选取所有可见的元素	$("div:visible")选取所有可见的<div>元素

4.属性过滤选择器：通过元素的属性来获取相应的元素

[attribute]	选取拥有此属性的元素	$("div[id]")选取所有拥有id的<div>
[attribute=value]	选取所有属性值为value的元素	$("div[title=test]")选取所有title为test的<div>
[attribute=!value]	选取所有属性值不等于value的元素
[attribute=^value]	以value开始
[attribute=$value]	以value结束
[attribute=*value]	含有value
[][][]	合并这些条件

5.子元素过滤器：

6.表单对象属性过滤选择器：对表单元素进行过滤

:enabled	选取所有可用的元素
:disabled	选取所有不可用的元素
:checked	选取所有被选中的元素(单选，复选)	$("input:checked")选取所有被选中的<input>元素
:selected	选取所有被选中的选项元素(下拉列表)	$("select :selected")选取所有被选中的选项元素

7.表单选择器： 

:input	选取所有<input><textarea><select><button>
:text	选取所有的单行文本框
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden

 

 

选择器中的特殊字符转义：

<div id="id#b">test</div>
<div id="id[1]">test</div>

js：

$("$id\\#b");//转义
$("$id\\[1\\]");

空格对选择器的影响：

var $t_a = $(".test   :hidden");//class为test的隐藏元素

var $t_a = $(".test:hidden");//隐藏的class为test的元素

DOM分类：

1.DOM Core

　　getElementById()、getElementByTagName()、getAttribute()、setAttribute()等。

2.HTML-DOM

docuemnt.forms;//froms对象,获取表单对象的方法

element.src; //获取src属性

3.CSS_DOM

element.style.color = "red";

插入节点的方法：

　　append():向每个匹配元素的内部追加元素，内部

　　$(A).appendTo(B):将匹配的元素A追加到B，内部

　　prepend():追加内容在匹配元素的最前面。内部

　　$(A).prependTo(B):将匹配的元素A追加到B元素中，在B元素的最前面。内部

　　after():在每个匹配的元素之后插入内容。$(A).after(B),B放入A后面， 外部

　　$(A).insertAfter(B):将A放入到B的后面，外部

　　before():插入到指定匹配元素的前面，外部

　　$(A).insertBefore(B):将A插入到B的前面

删除节点的方法：

　　remove():删除节点

　　empty():清空节点

复制元素：clone()

$("ul li").click(function(){
　　$(this).clone().appendTo("ul");//赋值当前单击的节点追加到ul中
})

深度复制:此时复制的节点也有了被复制元素绑定的事件，同样可以复制了。

$("ul li").click(function(){
　　$(this).clone(true).appendTo("ul");//赋值当前单击的节点追加到ul中
})

替换节点：replaceWith()  replaceAll()方法功能相同，方向颠倒。

$("p").replcaeWith("<strong>free</strong>");用后面的free替换所有p

$("<strong>free</strong>").replcaeWith("<p>");用后面的free替换所有p

包裹节点：wrap()  wrapAll()  wrapInner()

　　$(A).wrap(B)：用B分别包裹每一个A元素。

　　$(A).wrapAll(B)：用一个B包A的全部包裹。

　　$(A).wrapInner(B)：用B包裹A的子内容。

　　

this.defaultValue:当前文本框的默认值

 

遍历元素：

　　children():只找出子元素，而不考虑后辈元素。

　　next():匹配元素后面紧邻的同辈元素。

　　prev():匹配元素前面紧邻的同辈元素。

　　siblings():匹配元素前后所有的同辈元素。