jQuery学习-20180911

今日学习一点jQuery;
###文本###
一、获取
1、节点

//本节点
$(this/"标签"/"类名"/"id名")
//父节点
$("子节点").parent()
//子节点
$("父节点").children()
//兄节点
$("节点").prev()
//弟节点
$("节点").next()

2、节点内容

//获得节点及内容
$("selector").html();
//获得节点内容
$("selector").text();
//获得第i个节点名称及内容
$("selector").get(i); 

二、创建节点

$("<td></td>");

三、增加
1、节点中加入内容

//在标签中加入内容
$("<td></td>").text("在标签中加入内容!");
//在标签中加入内容
$("<td></td>").html("在标签中加入内容!");

2、开头增加

//在每个p标签开头插入
$("p").prepend("<p>在每个p标签开头插入!</p>");

3、末尾增加

//在每个p标签末尾插入
$("p").append("<p>在每个p标签末尾插入!</p>");

4、任意位置增加

//在末尾插入
$("id名").append("<p>在末尾插入!</p>");

5、复制(克隆)

//在末尾插入已经复制的p元素(包括各种样式属性)
$("body").append($("p").clone());

四、替换
1、只替换文本

//把每个p元素中的内容替换成“Hello <b>world</b>!”
$("p").text("Hello <b>world</b>!");

2、替换文本时,新文本可同时设置样式。

//把每个p元素中的内容替换成“Hello world!”,保留数量
$("p").html("Hello <b>world</b>!");

3、替换文本时,新文本可同时设置样式。

//把所有p元素中的内容替换成“Hello world!”,只剩一个。
$("p").replaceAll("Hello <b>world</b>!");

4、替换文本时,新文本可同时设置样式。

//把所有p元素中的内容替换成“Hello world!”,只剩一个。
$("p").replaceWith("Hello <b>world</b>!");

五、删除
1、只清空内容,包含子节点。

//把每个p元素中的内容及其子节点清空。
$("p").empty();

2、清空内容(包含子节点),但后文可继续引用。

//把每个p元素中的内容及其子节点清空,但可以再次引用。
$("p").detach();

3、清空内容(包含子节点),但后文不可继续引用。

//把每个p元素中的内容及其子节点清空,但不可以再次引用。
$("p").remove();

###对象互转###
1、jquery对象转js对象

$(#id名)[0]
$(#id名).get(0)

2、js对象转jquery对象

var a=document.getElementById("id名");
$(a);

猜你喜欢

转载自blog.csdn.net/lizengbao/article/details/82629418