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(){      
                $("#btn4").click(function(){
                    $(":checkbox[name='newsletter']:checked").each(function(){
                        alert(this.value);
                    });
                }); 
            })
        </script>

3. jQuery对象与DOM对象

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

2）jQuery对象是一个DOM数组对象，所以可以使用下标的方式转为DOM对象
var $btn=(“button”); var btn=$btn[0];

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

$("select :selected").each(function(){
                        alert(this.value);
                    });

4. jQuery的选择器

1）选取被选中的select的option需要使用选取子节点的方式

$("select[name='test'] :selected").each(function(){
                        alert(this.value);
                    });
                }); 

2）选择器可以综合使用

3）如果选择器搞不定，可以借助方法

5. jQuery对象的几个方法

1）val():获取表单元素的value值
获取值：$(“:text:enabled”).val() 设置值：$(“:text:enabled”).val(“啊森弟”)

2）attr():和val()方法类似
attr(name,val):为name属性赋值
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 $as=$("<li id='asen'>啊森弟</li>")

2)把节点插入到文档中

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

$("<li id='atguigu'>啊森弟</li>").appendTo($("#city"));
$("#city").append("<li id='atguigu'>[啊森弟]</li>");

• prepend,prependTo：把节点A插入到节点B的第一个子节点

$("<li id='atguigu'>啊森弟</li>").prependTo($("#city"));
$("#city").prepend("<li id='atguigu'>[啊森弟]</li>");

• before,insertBefore

($("#bj")).before$("<li>森弟弟</li>");
$("<li>森弟弟</li>").insertBefore($("#bj"));

• after ,insertAfter

$("#bj").after($("<li>[森弟弟]</li>"));
$("<li>森弟弟</li>").insertAfter($("#bj"));

3) 删除节点

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

4) 清空节点

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

5) 克隆节点

var $bjClone=$("#bj").clone();

6) 替换节点

var $bj2=$("#bj").clone(true);
var $rl=$("#rl").replaceWith($bj2);
$("#bj").replaceWith($rl);

7）val()、html()、text()、attr()、width()、height()等都是具有获取跟设置的方法。
比如：
$("#city").html()//获取界面的代码
$("#city").html(“<li id=‘asen’>啊森弟</li>”);//设置内容