一、对标签元素文本操作

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"));// undefined

        console.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>

jQuery-对标签元素 文本操作-属性操作-文档的操作的更多相关文章

  1. jquery遍历标签中自定义的属性方法

    在开发中我们有时会对html标签添加属性,如何遍历处理 <ul> <li name="li1" sortid="nav_1">aaaaa ...

  2. jquery.cookie 使用文档，$.cookie() 文档教程， js 操作 cookie 教程文档。

    jquery.cookie 使用文档,$.cookie() 文档教程, js 操作 cookie 教程文档. jquery.cookie中的操作: jquery.cookie.js是一个基于jquer ...

  3. C# 使用XmlDocument类对XML文档进行操作

    原创地址:http://www.cnblogs.com/jfzhu/archive/2012/11/19/2778098.html 转载请注明出处 W3C制定了XML DOM标准.很多编程语言中多提供 ...

  4. JS对文档进行操作

    对文档进行操作   创建节点 追加节点 删除节点 任务及例子 总结 对DOM的修改是,构建动态网页的关键.使用下面列举的方法,我们可以创建新的网页并且动态进行更改. 更多的DOM操作方法请查 DOM1 ...

  5. c# word文档的操作

    参考https://blog.csdn.net/ruby97/article/details/7406806 Word对象模型  (.Net Perspective) 本文主要针对在Visual St ...

  6. ElasticSearch 文档及操作

    公号:码农充电站pro 主页:https://codeshellme.github.io 本节介绍 ES 文档,索引及其基本操作. 1,ES 中的文档 在 ES 中,文档(Document)是可搜索数 ...

  7. PHPExcel 是用来操作Office Excel 文档的一个PHP类库

    PHPExcel 是用来操作Office Excel 文档的一个PHP类库,它基于微软的OpenXML标准和PHP语言.可以使用它来读取.写入不同格式的电子表格,如 Excel (BIFF) .xls ...

  8. MongoDB .Net Driver(C#驱动) - 内嵌数组/嵌入文档的操作(增加、删除、修改、查询(Linq 分页))

    目录 一.前言 1. 运行环境 二.前期准备工作 1. 创建 MongoDBContext MongoDb操作上下文类 2.创建测试类 3.创建测试代码 三.内嵌数组增加元素操作 1.Update.S ...

  9. Qt应用程序主窗口之二：拖放操作与打印文档

    一.拖放操作 对于一个实用的应用程序,不仅希望能从文件菜单中打开一个文件,更希望可以通过拖动直接将桌面上的文件拖入程序界面上来打开,就像可以将.pro文件拖入Creator中来打开整个项目一样.Qt中 ...

随机推荐

  1. [SDOI2013]项链

    description luogu 最近,铭铭迷恋上了一种项链.与其他珍珠项链基本上相同,不过这种项链的珠子却与众不同,是正三菱柱的泰山石雕刻而成的. 三菱柱的侧面是正方形构成的,上面刻有数字. 能够 ...

  2. 手机H5显示一像素的细线

    手机屏幕分辨率的问题,导致h5的1像素看起来比较粗,网上找了一个办法,记下来 主要就是通过scale来缩小宽度 .line1px{     border: none;     border-botto ...

  3. 沉迷AC自动机无法自拔之：穿越广场 square

    如标题所言,我已经沉迷于AC自动机无法自拔了... 这又是一道AC自动的题,红红火火恍恍惚惚 穿越广场 [问题描述] L 国的仪仗队要穿越首都广场了.首都广场可以看做是一块 N*M 的矩形网格,仪仗队 ...

  4. android中的style部分属性值介绍 --zz

    Android平台定义的主题样式: android:theme="@android:style/Theme.Dialog"   将一个Activity显示为对话框模式 •andro ...

  5. bzoj 1823: [JSOI2010]满汉全席 && bzoj 2199 : [Usaco2011 Jan]奶牛议会 2-sat

    noip之前学的内容了,看到题竟然忘了怎么建图了,复习一下. 2-sat 大概是对于每个元素,它有0和1两种选择,必须选一个但不能同时选.这之间又有一些二元关系,比如x&y=1等等... 先把 ...

  6. [Vani有约会]雨天的尾巴——树上差分+动态开点线段树合并

    题目描述 首先村落里的一共有n座房屋,并形成一个树状结构.然后救济粮分m次发放,每次选择两个房屋(x,y),然后对于x到y的路径上(含x和y)每座房子里发放一袋z类型的救济粮. 然后深绘里想知道,当所 ...

  7. 【最大流/二分图匹配】【网络流24题】【P3254】 圆桌问题

    Description 假设有来自m 个不同单位的代表参加一次国际会议.每个单位的代表数分别为ri (i =1,2,--,m). 会议餐厅共有n 张餐桌,每张餐桌可容纳ci (i =1,2,--,n) ...

  8. CentOS 7.0源码包搭建LNMP方法分享（实际环境下）

    CentOS 7.0编译安装Nginx1.6.0+MySQL5.6.19+PHP5.5.14 一.配置防火墙,开启80端口.3306端口 CentOS 7.0默认使用的是firewall作为防火墙,这 ...

  9. web中的懒加载

    在Web应用程序中,系统的瓶颈常在于系统的响应速度.如果系统响应速度过慢,用户就会出现埋怨情绪,系统的价值也因此会大打折扣.因此,提高系统响应速度,是非常重要的. Web应用程序做的最多就是和后台数据 ...

  10. Docker入门与应用系列（三）容器管理

    一.启动容器 启动容器有两种方式,一种是基于镜像新建一个容器并启动,另一个是将终止状态的容器重新启动. 1.1 新建并启动 主要命令为 docker run 下面的命令输出一个”Hello,world ...