一、对标签元素文本操作

1.1 对标签中内容的操作

// js
var div1 = document.getElementById("div1");
div1.innerText
div1.innerHTML//jQuery
var $div1 = $("#div1");
$div1.text()
$div1.html()

<!DOCTYPE html>
<html>
<head><title>文本操作</title>
</head>
<body><div id="div1"><p>我是div1下的p段落</p></div><script src="../jquery-3.3.1.js"></script><script type="text/javascript">// 1.文本的获取var div1 = document.getElementById("div1");console.log(div1.innerText);console.log(div1.innerHTML);var $div1 = $("#div1");console.log($div1.text());console.log($div1.html());// 2.给元素赋值一个文本   会覆盖原来的标签和内容div1.innerText = "哈哈";console.log(div1.innerText);div1.innerHTML="<span>哈哈</span>"console.log(div1.innerHTML);$div1.text("呵呵")console.log(div1.innerText);$div1.html("<span>呵呵</span>")console.log(div1.innerHTML);</script>
</body>
</html>

操作文本的demo

1.2 对表单文本值的操作

val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置checkbox、select的值

<!DOCTYPE html>
<html>
<head><title>表单文本值的操作</title>
</head>
<body><form>用户名:<input type="text" name="" id="i1" value="hah ">密码:<input type="password" name=""><input type="radio" name="gender" value="male" checked="checked">男<input type="radio" name="gender" value="female">女<input type="checkbox" name="hobby" value="basket" checked="checked">篮球<input type="checkbox" name="hobby" value="foot" checked="checked">足球<input type="checkbox" name="hobby" value="doublecolorball">双色球<select multiple id="#s1"><option>1</option><option selected="selected">2</option><option selected="selected">3</option><option>4</option></select></form><script src="../jquery-3.3.1.js"></script><script type="text/javascript">console.log($("input[name='gender']"));console.log($("input[name='gender']").val());console.log($("#i1").val());// 获取多选的值    只会返回第一个选中的元素console.log($("input[name='hobby']:checked").val());// 获取多个select值console.log($("#s1").val());</script>
</body>
</html>

对表单值的操作

二、对标签元素属性操作

用于id和自定义属性:

attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性

代码示例：

<!DOCTYPE html>
<html>
<head><title>标签属性的操作</title><style type="text/css"></style>
</head>
<body><div class="div1"></div><script src="../jquery-3.3.1.js"></script><script type="text/javascript">// 1.获取元素的属性值console.log($(".div1").attr("class"));  //div1// 2.为元素设置一个属性值$(".div1").attr("name","div1Style")console.log($(".div1").attr("name"));  // div1Style// 3.设置多个属性值$(".div1").attr({"k1":"v1","k2":"v2"})console.log($(".div1").attr("k1"));console.log($(".div1").attr("k2"));// 4.删除一个属性$(".div1").removeAttr("k2");console.log($(".div1").attr("k2")); // undefined</script>
</body>
</html>

用于id等属性的操作

用于radio和checkbox:

prop() // 获取属性
removeProp() // 移除属性

示例：

<!DOCTYPE html>
<html>
<head><title>标签属性的操作</title><style type="text/css"></style>
</head>
<body><div class="div1"></div><form><input type="radio" name="gender" value="male">男<input type="radio" name="gender" value="female">女<input type="checkbox" name="hobby" value="basket">篮球<input type="checkbox" name="hobby" value="foot">足球</form><script src="../jquery-3.3.1.js"></script><script type="text/javascript">// 1.获取元素的属性值console.log($(".div1").attr("class"));  //div1// 2.为元素设置一个属性值$(".div1").attr("name","div1Style")console.log($(".div1").attr("name"));  // div1Style// 3.设置多个属性值$(".div1").attr({"k1":"v1","k2":"v2"})console.log($(".div1").attr("k1"));console.log($(".div1").attr("k2"));// 4.删除一个属性$(".div1").removeAttr("k2");console.log($(".div1").attr("k2")); // undefined// 对于radio 和 checkbox//1.获取一个属性console.log($("input[name='gender']").prop("value"));console.log($("input[name='hobby']").prop("value"));console.log($("input[name='gender']").prop("k1","v1"));console.log($("input[name='hobby']").prop("k2","v2"));console.log($("input[name='gender']").prop("k1"));console.log($("input[name='hobby']").prop("k2"));$("input[name='gender']").removeProp("k1")$("input[name='hobby']").removeProp("k2")console.log($("input[name='gender']").prop("k1"));// undefinedconsole.log($("input[name='hobby']").prop("k2"));// undefined</script>
</body>
</html>

radio和checkbox的属性操作demo

三、对文档的操作

由于jQuery没有创建标签的方式，只能通过DOM对象进行创建

var div = document.createElement("div")
// $(div) 的方式，将DOM对象转化为jQuery对象

添加到指定元素内部的后面

$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B

添加到指定元素内部的前面

$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B

添加到指定元素外部的后面

$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面

添加到指定元素外部的前面

$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

移除和清空节点

remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。

<!DOCTYPE html>
<html>
<head><title>文档的操作</title>
</head>
<body><div class="div1"><ul class="ul1"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></div><script src="../jquery-3.3.1.js"></script><script type="text/javascript">// 1.添加到指定元素内部的后面// 1.首先创建一个元素，jQuery没有创建元素的方法，只能通过DOM对象var p = document.createElement("p");p.innerText="我是一个段落，要添加到div1的内部所有元素的后面";// $(p).text("xxxx");$(".div1").append(p);$(".div1").append($(p));// 2.添加到指定元素的内部的前面var span = document.createElement("span");$(span).text("我是一个span，要添加到div1的内部所有元素的前面");$(".div1").prepend($(span));// 3.添加到指定元素外部的后面var div2 = document.createElement("div");$(div2).text("我是div2，我放在div1的后面");$(div2).attr("class","div2");$(".div1").after($(div2));  // div.after 是 div2$(div2).insertAfter($(".div1")) // 把div2 插入到 div1的后面// 4.添加到指定元素的外部的前面var div3 = document.createElement("div");$(div3).text("我是div3，我放在div1的前面");$(div3).insertBefore($(".div1")); // div3 插入到 div1 的前面$(".div1").before($(div3));// div1的前面是div3// 5.移除和清空元素$(".div2").remove();  // 从DOM中删除所有匹配的元素。  删除div2
$(".div1").empty($(".ul1")); // 移除div1中的ul  // 替换// replaceWith() var a = document.createElement("a");a.innerText="百度一下";$(".ul1").replaceWith($(a))  // 所有的 类名为 ul1的标签都会被a替换//replaceAll()$(a).replaceAll($(".ul1"));  // 使用a 替换所有的 类名为ul1 的标签</script>
</body>
</html>

文档操作demo

克隆(clone)

<!DOCTYPE html>
<html>
<head><title>克隆</title>
</head>
<body><input type="button" name="" id="btn" value="克隆"/><script src="../jquery-3.3.1.js"></script><script type="text/javascript">$("#btn").on("click",function() {// body...$(this).clone(true).insertAfter(this);})</script>
</body>
</html>

转载于:https://www.cnblogs.com/weihengblog/p/8892407.html

jQuery-对标签元素文本操作-属性操作-文档的操作相关推荐

MongoDB文档查询操作(三)
关于MongoDB中的查询,我们已经连着介绍了两篇文章了,本文我们来介绍另外一个查询概念游标. 本文是MongoDB系列的第七篇文章,了解前面的文章有助于更好的理解本文: 1.Linux上安装Mong ...
jQuery hasAttr检查元素是否有属性[重复]
本文翻译自:jQuery hasAttr checking to see if there is an attribute on an element [duplicate] Possible Dup ...
jquery.cookie 使用文档，$.cookie() 文档教程， js 操作 cookie 教程文档。
jquery.cookie 使用文档,$.cookie() 文档教程, js 操作 cookie 教程文档. jquery.cookie中的操作: jquery.cookie.js是一个基于jquer ...
6 JS 和 Jquery 删除标签元素
6 JS 和 Jquery 删除标签元素 Jquery:$().remove() jQuery remove() 方法删除被选元素及其子元素, 即删除元素自身. <body> <di ...
MSDN Visual系列:创建Feature扩展SharePoint列表项或文档的操作菜单项
原文:http://msdn2.microsoft.com/en-us/library/bb418731.aspx 在SharePoint中我们可以通过创建一个包含CustomAction元素定义的F ...
Java操作office 2007文档
我们希望将Office 2007平台作为一个构建富客户端应用程序的基本平台,并通过不同的手段使用Java来进行互操作. 但是,有一个Office/Java互操作的方面没有考虑到,那就是使Office和 ...
MongoDB（5）文档 CRUD 操作
MongoDB 入门专栏 http://blog.csdn.net/column/details/19681.html MongoDB 文档 CRUD 操作查询文档基本使用 mongodb 查询文 ...
Elasticsearch文档高级操作
文章目录 ES条件查询 URL传参查询请求体传参查询 ES分页查询 ES查询排序 ES多条件查询同时满足must 部分满足should 范围条件filter ES全文检索全文检索match 完全 ...
python 写入excel 日期_Python实例：excel文档写入操作
来自PythonABC.org老师的课程很好,但是每个视频都蛮长的,听着听着就有些晕乎,所以根据视频自己整理了一下,以便记录学习使用Python实现excel的文档写操作 import openpy ...
MongoDB——文档操作（更新文档）
目录一.更新文档命令的格式二.更新操作符三.更新单个文档 3.1.更新单个文档的示例四.更新多个文档 4.1.更新多个文档的概述 4.2.更新多个文档的示例五.使用upsert命令 5.1. ...

jQuery-对标签元素文本操作-属性操作-文档的操作

一、对标签元素文本操作

1.1 对标签中内容的操作

1.2 对表单文本值的操作

三、对文档的操作

jQuery-对标签元素文本操作-属性操作-文档的操作相关推荐

最新文章

热门文章

jQuery-对标签元素 文本操作-属性操作-文档的操作

一、对标签元素文本操作

1.1 对标签中内容的操作

1.2 对表单文本值的操作

三、对文档的操作

jQuery-对标签元素 文本操作-属性操作-文档的操作相关推荐

最新文章

热门文章

jQuery-对标签元素文本操作-属性操作-文档的操作

jQuery-对标签元素文本操作-属性操作-文档的操作相关推荐