jQuery学习笔记

1. jQuery 是 JavaScript 的一个函数库。

2.利用 jQuery 开发的步骤：

1). 倒入 jQuery  库

2). 在 $(function(){}) 的 {} 中编写 jQuery 代码

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

<script type="text/javascript">

$(function(){

$("#btn1").click(function){

//使所有的可用的单行文本框的 value 值变为 尚硅谷

$(":text:enabled").val("尚硅谷");

}

})

</script>

3. jQuery 对象 VS DOM对象

1). jQuery 对象不能使用 DOM 对象的属性和方法，反之，DOM 对象也不能使用jQuery 对象的属性和方法

2). jQuery 对象是一个 DOM 数组对象，所以可以使用下标的方式转为 DOM 对象

var $btn = $("button");

var btn = $btn[0];

3). jQuery 对象是使用 $() 保证 DOM 对象后产生的对象：

$().each(function(){

alert($(this).val());

});

4.jQuery 的选择器

1). 选择被选中的Select 的 option 需要使用选择子节点的方式：

$("select[name='test'] :selected").each(function(){

//...

})

2).jQuery 选择器可以综合使用

3).如果选择器搞不定，可与借助方法

5.jQuery 对象的几个方法

1). val() : 获取或设置表单元素的 value 属性值

//设置值

$(":text:enabled").val("尚硅谷");

//获取值

$alert($(":text;enabled").val());

2). attr() 和 val() 方法类似

attr(name,val): 为 name 属性赋值为 val

attr(name): 获取 name 属性值

3). each(): 对jQuery 对象进行遍历，其参数为 function ，函数内部的 this 是正在遍历的 DOM 对象

$("select :selected").each(function(){

alert(this.value);

});

4). text() : 和val() 方法类似

text(): 获取元素节点的文本子节点的值

text(str) : 设置元素节点的文本子节点的值

6. 使用 jQuery 进行 DOM 操作：

1). 新建(元素 ，属性，文本)节点： 直接使用 $() 保证即可，返回值是一个 jQuery 对象

var $atguigu = $("<li id='atguigu'>尚硅谷</li>");

2). 把节点插入到文档中：

* append, appendTo: 把节点 A 插入为节点 B 的最后一个子节点

$("<li id='atguigu'>尚硅谷</li>").appendTo($("#city"));

$("#city").append("<li id='atguigu'>尚硅谷</li>");

*prepend, prependTo

$("<li id='atguigu'>尚硅谷</li>").preappendTo($("#city"));

$("#city").preappend("<li id='atguigu'>尚硅谷</li>");

* before, insertBefore

$("<li id='atguigu'>尚硅谷</li>").insertBefore($("#city"));

$("#city").before("<li id='atguigu'>尚硅谷</li>");

* after, insertAfter

$("<li id='atguigu'>尚硅谷</li>").insertAfter($("#city"));

$("#city").after("<li id='atguigu'>尚硅谷</li>");

3). 删除节点：

$("#bj").remove();

4).清空节点：

$("#game").empty();

5). 克隆节点：

$("#bj").clone(true)

    .attr("id", "bj2")

    .insertAfter($("#rl"));

6). 替换节点：

//  创建一个<li>[尚硅谷]</li> 节点，替换 #city 的最后一个 li 子节点

$("<li>[尚硅谷]</li>").replaceAll($("#city li:last"));

// 创建一个<li>[尚硅谷]</li> 节点，替换 #city 的最后一个 li 子节点

$("#city li:eq(1)").replaceWith("<li>[尚硅谷]</li>");

7). wrap, wrapAll, wrapInner: 了解

wrap(): 将指定节点用其他标记包裹起来. 

该方法对于需要在文档中插入额外的结构化标记非常有用, 而且不会破坏原始文档的语义.

wrapAll(): 将所有匹配的元素用一个元素来包裹. 而 wrap() 方法是将所有的元素进行单独包裹.

wrapInner(): 将每一个匹配的元素的子内容(包括文本节点)用其他结构化标记包裹起来.

8). val(), html(), text(), attr(), width(), height() 等兼具有读写的方法：

attr(): 获取属性和设置属性
当为该方法传递一个参数时, 即为某元素的获取指定属性
当为该方法传递两个参数时, 即为某元素设置指定属性的值

//读取某个节点的 html 内容

alert($("#city").html());

//设置某个节点的 html 内容

$("#city").html("<li id='atguigu'>尚硅谷</li>"));

7. 注意：

1). jQuery 对象可以进行隐式迭代：$("p").click(function(){...}); 为选取的所有的 p 节点都添加了 click 响应函数

jQuery 对象本身就是一个 DOM 数组

2). 在jQuery 中显示迭代：使用 each()方法：

$(":checkbox[name='c']：checked").each(function(){

alert(this.value);

});

可以在显示迭代的相应函数的参数中通过 index 属性获取到正在遍历的对象的索引

3).在响应函数中，this 是一个 DOM 对象，若想使用 jQuery 对象的方法，需要把其包装为jQuery 对象：

使用 $() 把 this 包起来

4). defaultValue : DOM 对象的属性，可以获取表单元素的默认值

5). 通过 val() 为 radio 赋值： val 参数中也应该使用数组，使用一个值不起作用

6). val() 方法不能直接获取 checkbox 被选择的值，若直接获取，只能得到第一个被选择的值。

因为$(":checkbox[name='c']：checked") 得到的是一个数组。若希望打印被选择的所有值，需要使用 each 遍历

而 radio 被选择的只有一个，所以可以直接使用 val() 方法获取被选择的值

7).  同 JS 的响应函数一样，jQuery 对象的响应函数若返回 false ，可以取消指定元素的默认行为。

比如 submit, a 等

8).  $.trim(str) : 可以去除 str 的前后空格

9). jQuery 对象的方法的连缀： 调用一个方法的返回值还是调用的对象，于是可以在调用方法的后面依然调用先前的那个对象的其他方法

$("<tr></tr>").append("<td>"+$("#name").val()+"</td>")

.append("<td>"+$("#email").val()+"</td>")

.append("<td>"+$("#salary").val()+"</td>")

.append("<td><a href='deleteEmp?id=xxx'>Delete</a></td>")

.appendTo("#employeetable tbody")

.find("a")

.click(function(){

return removeTr(this)

});

10). find() 方法： 查找子节点，返回值为子节点的对应的 jQuery 对象

var $trNode = $(aNode).parent().parent();

//获取 $tr 的第一个 td 节点的文本节点的文本值

var textContent = $trNode.find("td:first").text();