Jquery基础学习笔记(1)

此笔记只是作为本人学习JQuery的随手笔记,稍微做了一下整理,希望对新人有参考价值。

　　1、属性：为所有匹配的元素设置一个计算的属性值

//为所有的input添加属性class="btn"
//$("input").attr("class","btn");

    2、CSS：为每个匹配的元素添加指定的类名
            //对所有的提交按钮添加样式
            $("input:submit").addClass("btn");

   3、值：获得第一个匹配元素的当前值
            //取的某一按钮的值
            //alert($("#Button1").val());

   4、Html代码：取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
            //输出div之间的html代码
            //alert($("#div1").html());

            //对Div中的html重新赋值
            //$("#div1").html("<input type='text'/>");

5、文本：取得所有匹配元素的内容。

结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。

            //输出div之间的文本值
            //alert($("#div1").text());

            //对div中的文本重新赋值
            //$("#div1").text("100");

        6、   //单选按钮选中
            $("#select1").val("选项2");
//            if( $("#select1").val()=='选项2')
//            {
//                alert("你选择了选项2");
//            }

7、将一个或多个DOM元素转化为jQuery对象
            //设置页面背景色
            $(document.body).css("background","#c0c0c0");

            //隐藏一个表单中所有元素【不可用】
            //$(div.elements).hide();

  8、each用法以每一个匹配的元素作为上下文来执行一个函数
//            $("button").click(function () {
//                $("div").each(function (index, domEle) {
//                // domEle == this
//                $(domEle).css("backgroundColor", "yellow");
//                if ($(this).is("#stop")) {
//                $("span").text("Stopped at div index #" + index);
//                return false;
//                }
//                });
//                });

9、这个函数的返回值与 jQuery 对象的'length' 属性一致
            //button的个数
            //alert($("input:submit").size()+" and "+$("input:submit").length);

   10、   取得所有匹配的 DOM 元素集合
            //alert($("input").get().reverse());
            //取得其中一个匹配的元素。 num表示取得第几个匹配的元素
            //alert($("input").get(1));

Jquery基础学习笔记(2)-文档处理

上一节《Jquery基础学习笔记(1)》说的是一些基础知识，

http://www.cnblogs.com/ywqu/archive/2009/05/26/1490403.html

本节让我们继续Jquery知识的了解：文档处理。文档处理主要是对HTML元素进行一些增操作，删除操作，复制操作，替换操作。主要包括以下几部分：（1）内部插入（2）外部插入（3）包裹（4）替换（5）删除（6）赋值。那我们就开始详细地看一下。

1、内部插入：向一些元素的内部插入内容

(1)append(content) :向每个匹配的元素内部追加内容，追加到元素内部的末尾，比如

描述:

向所有段落中追加一些HTML标记。

HTML 代码:

<p>I would like to say: </p>

jQuery 代码:

$("p").append("<b>Hello</b>");

结果:

[ <p>I would like to say: <b>Hello</b></p> ]

（2）appendTo(content) 把所有匹配的元素追加到另一个指定的元素元素集合中

描述:

把所有段落追加到ID值为foo的元素中。

HTML 代码:

<p>I would like to say: </p>

jQuery 代码:

$("p").appendTo("div");

结果:

<div><p>I would like to say: </p></div>

(3) prepend(content) 向每个匹配的元素内部前置内容

描述:

向所有段落中前置一些HTML标记代码。

HTML 代码:

<p>I would like to say: </p>

jQuery 代码:

$("p").prepend("<b>Hello</b>");

结果:

[ <p><b>Hello</b>I would like to say: </p> ]

(4) prepend() 把所有匹配的元素前置到另一个、指定的元素元素集合中。

描述:

把所有段落追加到ID值为foo的元素中。

HTML 代码:

<p>I would like to say: </p><div id="foo"></div>

jQuery 代码:

$("p").prependTo("#foo");

结果:

<div id="foo"><p>I would like to say: </p></div>

2、内部插入：向一些元素的外部插入内容

（1）after（content）在每个匹配的元素之后插入内容。

描述:

在所有段落之后插入一些HTML标记代码。

HTML 代码:

<p>I would like to say: </p>

jQuery 代码:

$("p").after("<b>Hello</b>");

结果:

<p>I would like to say: </p><b>Hello</b>

（2）before() 在每个匹配的元素之前插入内容

描述:

在所有段落之前插入一些HTML标记代码。

HTML 代码:

<p>I would like to say: </p>

jQuery 代码:

$("p").before("<b>Hello</b>");

结果:

[ <b>Hello</b><p>I would like to say: </p> ]

(3)insertafter 把所有匹配的元素插入到另一个、指定的元素元素集合的后面。

描述:

把所有段落插入到一个元素之后。与 $("#foo").after("p")相同

HTML 代码:

<p>I would like to say: </p><div id="foo">Hello</div>

jQuery 代码:

$("p").insertAfter("#foo");

结果:

<div id="foo">Hello</div><p>I would like to say: </p>

(4)insertBefore 把所有匹配的元素插入到另一个、指定的元素元素集合的前面

描述:

把所有段落插入到一个元素之前。与 $("#foo").before("p")相同。

HTML 代码:

<div id="foo">Hello</div><p>I would like to say: </p>

jQuery 代码:

$("p").insertBefore("#foo");

结果:

<p>I would like to say: </p><div id="foo">Hello</div>

3、包裹：把一些元素包裹起来

(1)wrap(html) 把所有匹配的元素用其他元素的结构化标记包裹起来

描述:

把所有的段落用一个新创建的div包裹起来

HTML 代码:

<p>Test Paragraph.</p>

jQuery 代码:

$("p").wrap("<div class='wrap'></div>");

结果:

<div class="wrap"><p>Test Paragraph.</p></div>

(2) wrap(elem) 把所有匹配的元素用其他元素的结构化标记包装起来

描述:

用ID是"content"的div将每一个段落包裹起来

HTML 代码:

<p>Test Paragraph.</p><div id="content"></div>

jQuery 代码:

$("p").wrap(document.getElementById('content'));

结果:

<div id="content"><p>Test Paragraph.</p></div><div id="content"></div>

(3)wrapAll(html) 将所有匹配的元素用单个元素包裹起来

描述:

用一个生成的div将所有段落包裹起来

HTML 代码:

<p>Hello</p><p>cruel</p><p>World</p>

jQuery 代码:

$("p").wrapAll("<div></div>");

结果:

<div><p>Hello</p><p>cruel</p><p>World</p></div>

(4) wrapAll(elem)将所有匹配的元素用单个元素包裹起来

描述:

用一个生成的div将所有段落包裹起来

HTML 代码:

<p>Hello</p><p>cruel</p><p>World</p>

jQuery 代码:

$("p").wrapAll(document.createElement("div"));

结果:

<div><p>Hello</p><p>cruel</p><p>World</p></div>

(5) wrapInner(html)将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来

描述:

把所有段落内的每个子内容加粗

HTML 代码:

<p>Hello</p><p>cruel</p><p>World</p>

jQuery 代码:

$("p").wrapInner("<b></b>");

结果:

<p><b>Hello</b></p><p><b>cruel</b></p><p><b>World</b></p>

(6) wrapInner(elem)

描述:

把所有段落内的每个子内容加粗

HTML 代码:

<p>Hello</p><p>cruel</p><p>World</p>

jQuery 代码:

$("p").wrapInner(document.createElement("b"));

结果:

<p><b>Hello</b></p><p><b>cruel</b></p><p><b>World</b></p>

4、替换：用制定的元素替换一些HMTL或者DOM元素

（1）replaceWith(content) 将所有匹配的元素替换成指定的HTML或DOM元素

描述:

把所有的段落标记替换成加粗的标记。

HTML 代码:

<p>Hello</p><p>cruel</p><p>World</p>

jQuery 代码:

$("p").replaceWith("<b>Paragraph. </b>");

结果:

<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>

(2) repalceAll(selector) 用匹配的元素替换掉所有 selector匹配到的元素。

描述:

把所有的段落标记替换成加粗标记

HTML 代码:

<p>Hello</p><p>cruel</p><p>World</p>

jQuery 代码:

$("<b>Paragraph. </b>").replaceAll("p");

结果:

<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>

5、删除：删除制定的元素

（1）empty() 删除匹配的元素集合中所有的子节点。

描述:

把所有段落的子元素（包括文本节点）删除

HTML 代码:

<p>Hello, <span>Person</span> <a href="#">and person</a></p>

jQuery 代码:

$("p").empty();

结果:

<p></p>

(2)remove([expr]) 从DOM中删除所有匹配的元素

描述：

从DOM中把所有段落删除

HTML 代码:

<p>Hello</p> how are <p>you?</p>

jQuery 代码:

$("p").remove();

结果:

how are

描述:

从DOM中把带有hello类的段落删除

HTML 代码:

<p class="hello">Hello</p> how are <p>you?</p>

jQuery 代码:

$("p").remove(".hello");

结果:

how are <p>you?</p>

5、复制：克隆匹配的元素

(1)Clone() 克隆匹配的DOM元素并且选中这些克隆的副本。

描述:

克隆所有b元素（并选中这些克隆的副本），然后将它们前置到所有段落中。

HTML 代码:

<b>Hello</b><p>, how are you?</p>

jQuery 代码:

$("b").clone().prependTo("p");

结果:

<b>Hello</b><p><b>Hello</b>, how are you?</p>

(2) clone(true) 元素以及其所有的事件处理并且选中这些克隆的副本

描述:

创建一个按钮，他可以复制自己，并且他的副本也有同样功能。

HTML 代码:

<button>Clone Me!</button>

jQuery 代码:

$("button").click(function(){

$(this).clone(true).insertAfter(this);

});