<body>

  <div id="div1">

    <h3>我是标题</h3>

  </div>

  <div id="div2">

    <p>我是p标签</p>

    script src="jquery-1.12.4.js"></script>

    <script>

      $(function () {

        //html:相当于innerHTML  text:相当于innerText

        //获取

        console.log($("div").html()); //<h3>我是标题</h3>

        console.log($("p").text()); //我是p标签

        //设置

        $("div h3").html("<p>我是文本</p>");

        $("p").text("我是文本");

      });

    </script>

</body>
<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style>

    div {

      width: 200px;

      height: 200px;

      background-color: red;

      padding: 10px;

      border: 10px solid #000;

      margin: 10px;

    }

  </style>

</head>

<body>

  <div></div>

  <script src="jquery-1.12.4.js"></script>

  <script>

    $(function () {

      //width与height的用法一样

      //获取div的宽度

      console.log($("div").css("width"));

      //设置div的width

      $("div").css("width", "400px");

      $("div").css("height", "400px");

      //直接获取到的是数字

      //就是获取的width的值

      console.log($("div").width()); //width

      console.log($("div").innerWidth()); //padding + width

      console.log($("div").outerWidth()); //padding + width + border

      console.log($("div").outerWidth(true)); //padding + width + border + margin

    });

  </script>

</body>

</html>

jquery text html width heigth的用法的更多相关文章

  1. jQuery css,position,offset,scrollTop,scrollLeft用法

    jQuery css,position,offset,scrollTop,scrollLeft用法: <%@ page language="java" import=&quo ...

  2. jquery组件WebUploader文件上传用法详解

    这篇文章主要为大家详细介绍了jquery组件WebUploader文件上传用法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 WebUploader是由Baidu WebFE(FEX)团队开发的一 ...

  3. jquery中append跟prepend的用法

    jquery中append和prepend的用法 append   是插入到元素中,并放到元素内的最后面prepend  是插入到元素中,并放到元素内的最前面例$("body"). ...

  4. jquery中attr()与prop()函数用法实例详解(附用法区别)

    本文实例讲述了jQuery中attr()与prop()函数用法.分享给大家供大家参考,具体如下: 一.jQuery的attr()方法 jquery中用attr()方法来获取和设置元素属性,attr是a ...

  5. jquery uploadify文件上传插件用法精析

      jquery uploadify文件上传插件用法精析 CreationTime--2018年8月2日11点12分 Author:Marydon 一.参数说明 1.参数设置 $("#fil ...

  6. jquery教程-Jquery 获取标签个数 size()函数用法

    jquery教程-Jquery 获取标签个数 size()函数用法,size() 方法返回被 jQuery 选择器匹配的元素的数量. 语法 $(selector).size()     jQuery ...

  7. jquery中this与$(this)的用法区别

    jquery中this与$(this)的用法区别.先看以下代码: $("#textbox").hover( function() { this.title = "Test ...

  8. jQuery中【width(),innerWidth(),outerWidth()】

    这个问题,已经别扭我多年了,今天终于彻底解决了,拿出来庆贺一下.jquery作为开源项目,无论从思路上,还是从严谨性上,让人崇敬. 随着时间的流逝,jquery的一些功能被逐渐挖掘出来.通过jQuer ...

  9. jQuery插件制作之全局函数用法实例

    原文地址:http://www.jb51.net/article/67056.htm 本文实例讲述了jQuery插件制作之全局函数用法.分享给大家供大家参考.具体分析如下: 1.添加新的全局函数 所谓 ...

随机推荐

  1. CF 990 Educational Codeforces Round 45

    既然补了就简单记录一下. 感觉还算有一点营养. 官方题解传送门:点我 A Commentary Boxes 对拆掉$n \mod m$个和新建$m - (n \mod m)$求个最小. #includ ...

  2. yarn 完美替代 npm

    众所周知,npm是nodejs默认的包管理工具,我们通过npm可以下载安装或者发布包,但是npm其实存在着很多小问题,比如安装速度慢.每次都要在线重新安装等,而yarn也正是为了解决npm当前存在的问 ...

  3. [Java] 通过XPath获取XML中某个节点的属性

    /** * Get PA Url * @author jzhang6 * @return url */ public String getPAUrl(){ String PAUrl = "& ...

  4. [Selenium]计算坐标进行拖拽，重写dragAndDropOffset

    //@author jzhang6 public void dragAndDropOffset(WebDriver driver,WebElement dragableEl, WebElement d ...

  5. 我读《大数据时代的IT架构设计》

    架构设计是一门艺术,对架构的掌握要通过多看,多学,多交流,多积累,从实战架构上总能吸收到很好的营养,这边书虽然 (一).hadoop技术处理电信行业的上网日志 根据上网的url或未知url爬取内容,进 ...

  6. UITableView.separatorInset

    [UITableView.separatorInset] separatorInset指定每行row之间的分隔线的长度,iOS7.0后提供,官方文档如下: 示例截图如下,分隔线没有紧贴着左右边界:

  7. 启动项目报错：502 Server dropped connection The following error occurred while trying to access http://localhost:8080/TestDemo:

    之前的项目一直是好的,可以启动,但最近启动出了问题,访问不了,于是找到原因发现是启用了访问国外网站的加速器, 更改了浏览器的代理模式,如下: 解决方法: 打开浏览器,进入到浏览器的网络设置中,将局域网 ...

  8. JQuery中button提交表单报TypeError: elem[type] is not a function jquery

    错误: TypeError: elem[type] is not a function jquery 解决: 出现这种现象的原因是,提交的表单中,有标签的name,有以submit命名的 name中不 ...

  9. windows下 git+tortoiseGit的使用【转】

    一定要自己写出来才能牢记,所以我来写一下 git确实比svn好用的多了,最起码只有一个文件夹用来标记版本信息比svn所有文件夹下都要放一个文件夹来标记版本信息先进多了,不然你不想要版本管理这些文件的时 ...

  10. NideShop项目的安装部署教程

    本文档为微信小程序商城NideShop项目的安装部署教程,欢迎star NideShop商城api服务:https://github.com/tumobi/nideshop NideShop微信小程序 ...