jQuery方法大全

来源:互联网 发布:武汉少儿编程培训班 编辑:程序博客网 时间:2024/06/05 17:20

$(“p”).addClass(“active”);
给P标签添加类名为“active”的样式

$(“img”).attr({src:”test.jpg”,alt:”test Image”});
给某个元素添加属性/值

$(“img”).attr(“src”,”test.jpg”);
给某个元素添加属性/值

$(“img”).attr(“title”, function() { return this.src });
给某个元素添加属性/值

$(“元素名称”).html();
获得该元素内的内容(元素,文本等)

$(“元素名称”).html(“new stuff“);
给某元素设置内容

$(“元素名称”).removeAttr(“属性名称”) ;
给某元素删除指定的属性以及该属性的值

$(“元素名称”).removeClass(“class”) ;
给某元素删除指定的样式 (类)

$(“元素名称”).text();
获得该元素的文本

$(“元素名称”).text(value);
设置该元素的文本值为value

$(“元素名称”).toggleClass(class);
当元素存在参数中的样式的时候取消,如果不存在就设置此样式 (切换样式)

$(“input元素名称”).val();
获取input元素的值

$(“input元素名称”).val(value);
设置input元素的值为value


创建元素节点

 $li1=$("<li></li>")

在ul里面添加新创建的元素节点

$("ul").append($li1); 

创建属性节点

$li3=$("<li title='榴莲'>榴莲</li>");

在ul里面添加新创建的元素属性节点

$("ul").append($li3);

增–添加DOM节点
1、append()方法

 $("ul").append("<li title='香蕉'>香蕉</li>");

append()方法向匹配的元素内部追加内容

2、appendTo()方法

 $("<li title='荔枝'>荔枝<li>").appendTo("ul");

该方法新建元素li,然后把li添加到查找到的ul元素中。
appendTo()方法将所有匹配的元素追加到指定的元素中

3、prepend()方法

$("ul").prepend("<li title='芒果'>芒果</li>")

prepend()方法将每匹配的元素内部前置要添加的元素
该方法将查找元素ul然后将新建的li元素作为ul子节点,且作为ul的第一个子节点插入到ul中。

4、prependTo()方法

$("<li title='西瓜’>西瓜</li>").prependTo("ul");

prependTo()方法将元素添加到每一个匹配的元素内部前置
该方法将新建的元素li插入到查找到的ul元素中作为ul的第一个子节元素。

5、after()方法

 $("p").after("<span>新加段新加段新加段新加段新加段</span>");

在p标签的后面添加span标签
after()方法向匹配的元素后面添加元素,新添加的元素做为目标元素后的紧邻的兄弟元素。

6、insertAfter()方法

$("<p>insertAfter操作</p>").insertAfter("span");

把p标签插入到span标签的后面
insertAfter()方法将新建的元素插入到查找到的目标元素后,做为目标元素的兄弟节点。

7、before()方法

$("p").before("<span>下面是个段落</span>");

在p标签之前插入span标签
before()方法在每一个匹配的元素之前插入,做为匹配元素的前一个兄弟节点。

8、insertBefore()方法

$("<a href='#'></a>").insertBefore("ul");

把a标签添加到ul之前
insertBefore()方法将新建元素添加到目标元素前,做为目标元素的前一个兄弟节点


删–删除DOM节点操作
如果想要删除文档中的某个元素JQuery提供了两种删除节点的方法:remove()和empty();

1、remove()方法
 remove()方法删除所有匹配的元素,传入的参数用于筛选元素,该方法能删除元素中的所有子节点,当匹配的节点及后代被删除后,该方法返回值是指向被删除节点的引用,因此可以使用该引用,再使用这些被删除的元素。

         $span=$("span").remove();       $span.insertAfter("ul");

  该示例中先删除所有的span元素,把删除后的元素使用$span接收,把删除后的元素添加到ul后面做为ul的兄弟节点。该操作相当于将所有的span元素以及后代元素移到ul后面。

2、empty()方法。
 empty()方法严格来讲并不是删除元素,该方法只是清空节点,它能清空元素中的所有子节点。

 $("ul li:eq(0)").empty();

该示例使用empty方法清空ul中第一个li的文本值


改–修改DOM节点操作

 修改文档中的元素节点可以使用多种方法:复制节点、替换节点、包裹节点。

1、复制节点$(element).clone();

 复制节点方法能够复制节点元素,并且能够根据参数决定是否复制节点元素的行为。
 

 $("ul li:eq(0)").clone(true);

该方法复制ul的第一个li元素,true参数决定复制元素时也复制元素行为,当不复制行为时没有参数。

2、替换节点

$(element).repalcewith()
$(element).repalceAll()

替换节点方法能够替换某个节点,有两种形式形式实现:replaceWith()和replaceAll().使用replaceWith方法使用后面的元素替换前面的元素,replaceAll方法使用前面的元素替换后面的元素

$("p").replaceWith("<strong>我要留下</strong>");该方法使用strong元素替换p元素。
$("<h3>替换strong</h3>").repalceAll("strong");该例使用h3元素替换所有的strong元素。

3、包裹节点
$(element).wrap()
$(element).wrapAll()
$(element).wrapInner()

包裹节点方法使用其他标记包裹目标元素从而改变元素的显示形式等,并且该操作不会破坏原始文档的词义。包裹节点有三种实现形式:wrap();wrapAll();wrapInner();

wrap()方法如下:$(dstelement).wrap(tag);例:

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

该示例方法使用b标签包裹所有的p元素每个元素都使用b标签包裹。
这里写图片描述

 wrapAll()方法如下:$(dstelement).wrapAll(tag);例:

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

 访示例方法使用b标签包裹所有的p元素,所有的p元素标签用一个b标签包裹。
这里写图片描述

wrapInner()方法如下:

$('p').wrapInner('<div>他好</div>')

用p标签包含每一个div

0 0
原创粉丝点击