当前位置： 移动技术网 > IT编程>网页制作>CSS > 荐 jQuery框架（六）：文档操作、循环、css操作

荐 jQuery框架（六）：文档操作、循环、css操作

2020年07月14日  | 移动技术网IT编程  | 我要评论

文章目录

一、文档操作

//创建一个标签对象
    $("<p>")

'注意：下面所有的方法.前面的一定是一个jq对象！'
//内部插入（父子关系）
	// 把标签<b>Hello</b>追加到p标签中（给p标签中末尾添加一个子标签）
    $("").append(content|fn)      ----->$("p").append("<b>Hello</b>");
    //  把p标签追加到div标签中
    $("").appendTo(content)       ----->$("p").appendTo("div");
    // 把标签<b>Hello</b>放入p标签中的所有子标签的最前面
    $("").prepend(content|fn)     ----->$("p").prepend("<b>Hello</b>");
    // 把标签p放入class为foo的标签中的所有子标签的最前面
    $("").prependTo(content)      ----->$("p").prependTo("#foo");

//外部插入（兄弟关系）
	// 把标签<b>Hello</b>插入到p标签之后
    $("").after(content|fn)       ----->$("p").after("<b>Hello</b>");
    // 把标签p插入到class为foo的标签后面
    $("").insertAfter(content)    ----->$("p").insertAfter("#foo");
    $("").before(content|fn)      ----->$("p").before("<b>Hello</b>");
    $("").insertBefore(content)   ----->$("p").insertBefore("#foo");

//替换
	// 使用<b>Paragraph. </b>替换p标签
    $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");

//删除
	// 清空p标签
    $("p").empty()
    // 删除p标签
    $("p").remove()

//复制
	$(selector).clone(true|false) 
	// true：规定需复制事件处理程序。
	// false：默认。规定不复制事件处理程序。

二、jQuery的each循环

除了js的for循环，while循环，我们jq还增加了两种循环，each和map，这里我们学习下each循环就够了！
作用：专门用于遍历jQuery对象匹配的所有元素。

1、对数据类型的循环

li=[10,20,30,40]
dic={name:"yuan",sex:"male"}
$.each(li,function(i,x) {
    console.log(i, x)
})
$.each(dic,function(i,x) {
console.log(i, x)
})

在这里插入图片描述

2、对jq对象的循环（重点）

$("tr").each(function(){  // tr标签一般有多个，遍历每个tr标签，每个tr都要执行后面这个匿名函数
    console.log($(this).html()) // this代表当前tr标签
})

三、css操作

css属性 描述

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网