一、DOM 简介

　　1、D 表示的是页面文档Document、O 表示对象，即一组含有独立特性的数据集合、M表示模型，即页面上的元素节点和文本节点。

　　2、DOM 有三种形式，标准DOM、HTML DOM、CSS DOM，大部分都进行了一系列的封装，在jQuery 中并不需要深刻理解它。
　　3、树形结构用来表示DOM，就非常的贴切，大部分操作都是元素节点操作，还有少部分是文本节点操作。

　　

二、设置元素及内容
　　我们就可以对这些元素进行DOM 的操作。那么，最常用的操作就是对元素内容的获取和修改。

　　

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
   $(function(){
          //alert($("#box").html());//获取html 内容，包含给元素下的html元素

        $("#box").html("<em>www.souhu.com</em>")//在这个元素下设置新的html元素和内容，会覆盖掉原来的html和内容
   });
</script>
</head>
<body>
    <div id="box"><strong>www.baidu.com</strong></div>
</body>
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
   $(function(){
          //alert($("#box").text());//获取html 内容，不包含给元素下的html元素，只获取到www.baidu.com

        //在这个元素下设置新的内容，会覆盖掉原来的html和内容,结果是<em>www.souhu.com</em>，标签被转换为字符串当做内容了
        $("#box").text("<em>www.souhu.com</em>")
   });
</script>
</head>
<body>
    <div id="box"><strong>www.baidu.com</strong></div>
</body>

　　注意：当我们使用html()或text()设置元素里的内容时，会清空原来的数据。而我们期望能够追加数据的话，需要先获取原本的数据。

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
   $(function(){
        $('#box').html($('#box').html() + '<em>www.li.cc</em>'); //追加数据
   });
</script>
</head>
<body>
    <div id="box"><strong>www.baidu.com</strong></div>
</body>

　　如果元素是表单的话，jQuery 提供了val()方法进行获取或设置内部的文本数据。

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
   $(function(){
          alert($("input").val());//获取input里的value值
        $('input').val('www.li.cc'); //设置表单内容
   });
</script>
</head>
<body>
    <input value="123" type="text" />
</body>

　　如果想设置多个选项的选定状态，比如下拉列表、单选复选框等等，可以通过数组传递操作。

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
   $(function(){
          $("input").val(["女","男", "编程" ]); //value 值是这些的将被选定，要选择哪一个就直接将值传进去就能选中
   });
</script>
</head>
<body>
    <input value="男" type="radio" name="sex" />男
    <input value="女" type="radio" name="sex"/>女

    <input value="编程" type="checkbox"/>编程
</body>

JQuery_DOM 简介/设置元素及内容的更多相关文章

  1. javascript中DOM获取和设置元素的内容、样式及效果

    getElementById() 根据id获取dom元素 没有找到则返会Null <!DOCTYPE html> <html lang="en"> < ...

  2. js | javascript获取和设置元素的属性

    获取和设置元素的内容: var nv = document.getElementById("pid"); alert(nv.innerHTML); nv.innerHTML=&qu ...

  3. css设置元素垂直居中的几个方法

    最近有人问我怎么设置元素垂直居中?我....(这么基础的东西都不会?我有点说不出话来),  不过还是耐心的教了他几个方法,好吧教完他们,顺便把这些方法整理一下 第一种:通过设置成为表格元素的方式来实现 ...

  4. jQuery学习-访问设置元素内容

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. jQuery之设置元素内容(移动和复制元素,使用append(),appendTo()方法)

    jQuery之设置元素内容(移动和复制元素,使用append(),appendTo()方法) ---------- 如果想把内容添加到现有内容末尾,可以利用append()命令.append()命令语 ...

  6. WPF设置DataGrid行内容高度自适应 与 TextBox/TextBlock内容高度自适应

    WPF设置DataGrid行内容高度自适应  TextBox/TextBlock内容高度自适应  参考: DataGrid 控件中的调整大小选项: http://msdn.microsoft.com/ ...

  7. js设置元素class方法小结及classList相关

        给DOM元素设置class是我们在项目中非常容易遇到的,网上的资料和总结也比较多,下面比较全面的整理一下,希望给到大家一些帮助!并引用两种成熟的classList的兼容方法 一.el.setA ...

  8. jquery尺寸和jQuery设置和获取内容方法

    一.jquery尺寸 jQuery 提供多个处理尺寸的重要方法: width()    设置或返回元素的宽度(不包括内边距.边框或外边距),括号中可填数值宽度参数,无单位 height()   设置或 ...

  9. javascript 设置元素滚动大小

    3. 滚动大小 最后要介绍的是滚动大小(scroll dimension),指的是包含滚动内容的元素的大小. 有些元素(例如 元素),即使没有执行任何代码也能自动地添加滚动条:但另外一些元素,则需要通 ...

随机推荐

  1. rdesktop的使用

    整个地球都知道rdesktop,有了它,我们可以从Solaris或者Linux使用Windows,当然Windows要开启Windows Terminal Service.虽然也有基于GTK+的tsc ...

  2. Java多线程开发系列之四：玩转多线程（线程的控制1）

    在前文中我们已经学习了:线程的基本情况.如何创建多线程.线程的生命周期.利用已有知识我们已经可以写出如何利用多线程处理大量任务这样简单的程序.但是当应用场景复杂时,我们还需要从管理控制入手,更好的操纵 ...

  3. 夺命雷公狗-----React_native---1---jdk的安装

    目录结构如下 然后打开安装包 这样大致上都算是完成了,那么我们要在cmd窗口里面对她进行测试下... 比如用命令看下版本 java -version 然后开始配置环境变量: 然后创建一个"J ...

  4. linux Centos下安装 sqlserver

    我使用的是Centos7在虚拟机中完成测试 1.下载设置mssql的yum源,执行以下代码,现在sqlserver的linux版本130多兆,网速慢的请等待 curl https://packages ...

  5. Entity Framework7 有哪些不同？之具体功能

    Entity Framework7 有哪些不同?之具体功能 前面我们介绍了关于EF7的新特性.开发计划和入门介绍.今天,我们来看看EF7的具体新功能及用法.本文中的环境,为EF7入门里介绍的环境. 1 ...

  6. Redis客户端连接池

    使用场景 对于一些大对象,或者初始化过程较长的可复用的对象,我们如果每次都new对象出来,那么意味着会耗费大量的时间. 我们可以将这些对象缓存起来,当接口调用完毕后,不是销毁对象,当下次使用的时候,直 ...

  7. MVC Razor模板引擎 @RenderBody、@RenderPage、@RenderSection及Html.RenderPartial、Html.RenderAction

    一.Views文件夹 -> Shared文件夹下的 _Layout.cshtml 母版页 @RenderBody 当创建基于_Layout.cshtml布局页面的视图时,视图的内容会和布局页面合 ...

  8. [已解决] protobuf Missing input file

    如果proto描述文件在当前目录,要以"./"开始 如: protoc ./test.proto --java_out=./ 文章来源:http://www.cnblogs.com ...

  9. Linux中tcpdump的编译和使用

    tcpdump官网:http://www.tcpdump.org/ 转载于:http://www.cnblogs.com/hzl6255/p/6147985.html 目录 1. 介绍 2. 编译 2 ...

  10. Pro Git 第一章 起步 读书笔记

    Pro Git 笔记 第1章 起步 1.文件的三种状态. 已提交:文件已经保存在本地数据库中了.(commit) 已修改:修改了某个文件,但还没有提交保存.(vim) 已暂存:已经把已修改的文件放在下 ...