jquery中的页面内容操作的三个方法

一、总结

一句话总结：记三个方法即可。text，html，val。因为这里是方法，所以设置值的是后面方法的参数。

1、jquery中的页面内容操作的三个方法？

text，html，val

  1. text()方法:获取和设置某个元素的“文本内容”。
  2. html()方法:获取和设置某个元素中的“HTML内容”
  3. val()方法：获取或设置“表单元素”的值。
30             // alert($('#main').text())

2、jquery中如何设置页面内容操作来设置元素的值？

因为这里是方法，所以设置值的是后面方法的参数

$('#title').html('锦瑟-<em>李商隐</em>')

二、页面内容操作

1、相关知识

  1. text()方法:获取和设置某个元素的“文本内容”。
  2. html()方法:获取和设置某个元素中的“HTML内容”
  3. val()方法：获取或设置“表单元素”的值。

2、代码

 <!DOCTYPE html>

 <html lang="en">

 <style>

 </style>

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>

     <style>

         h1{

             margin-left: 100px

         }

     </style>

 </style>

 </head>

 <body>

 <div id="main">

     <h1 id="title">锦瑟</h1>

     <p>锦瑟无端五十弦，一弦一柱思华年。</p>

     <p>庄生晓梦迷蝴蝶，望帝春心托杜鹃。</p>

     <p>沧海月明珠有泪，蓝田日暖玉生烟。</p>

     <p>此情可待成追忆？只是当时已惘然。</p>

 </div>

 <input type="button" id="btn1" value="获取">

 <input type="button" id="btn2" value="修改">

 <input type="button" id="btn3" value="删除">

 <script type="text/javascript">

     $(function(){

         $('#btn1').click(function(){

             // alert($('#main').text())

             // alert($('#main').html())

             alert($(this).val())

         })

         $('#btn2').click(function(){

             //$('#title').text('锦瑟-李商隐')

             $('#title').html('锦瑟-<em>李商隐</em>')

             $('#btn1').val('获取内容')

         })

     })

 </script>

 </body>

 </html>
 
 
 

js进阶 11-1 jquery中的页面内容操作的三个方法的更多相关文章

  1. js进阶 11-4/5 jquery中css的类的操作有哪些

    js进阶 11-4/5  jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...

  2. js进阶 11-3 jquery中css属性如何操作

    js进阶 11-3  jquery中css属性如何操作 一.总结 一句话总结:通过css()方法 1.attr和css是有交叉的,比如width,两者中都可以设置,那么他们的区别是什么? 其实通俗一点 ...

  3. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  4. js进阶课程 12-9 jquery的事件对象event的方法有哪些？

    js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...

  5. js进阶---12-10、jquery绑定事件和解绑事件是什么

    js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...

  6. js进阶 13-11/12 jquery如何实现折叠导航

    js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...

  7. js进阶---12-12、jquery事件委托怎么使用

    js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...

  8. js进阶 13-9/10 jquery如何实现三级列表

    js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...

  9. 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法（转载） IEnumerable,ICollection,IList接口问题 不吹不擂，你想要的Python面试都在这里了【315+道题】 基于mvc三层架构和ajax技术实现最简单的文件上传 事件管理

    服务器文档下载zip格式   刚好这次项目中遇到了这个东西,就来弄一下,挺简单的,但是前台调用的时候弄错了,浪费了大半天的时间,本人也是菜鸟一枚.开始吧.(MVC的) @using Rattan.Co ...

随机推荐

  1. SpringMVC 传递相同名称的参数的最佳方法

    华为云4核8G,高性能云服务器,免费试用 >>>   SpringMVC 多个对象的相同字段参数传递解决方案,在SpringMVC中,有时需要传递多个对象(除了Model和web元素 ...

  2. iOS多语言(国际化)开发(尾随系统 + APP内手动设置)

    一:尾随系统切换语言 1>创建好项目project后, 新建一个多语言文件: 2>加入要设置的语言类型: 3>加入成功 细心的朋友可能会发如今English后面写的是3 Files ...

  3. ＠转EXT2->EXT3->EXT4

    Linux文件系统第一篇—从Ext2到Ext3再到Ext4 1 概述 Linux继承了UNIX一切皆文件的设计哲学,用文件和树形目录的抽象逻辑概念代替了硬盘和光盘等物理设备使用数据块的概念,用户使用文 ...

  4. amazeui学习笔记一（开始使用1）--主干

    amazeui学习笔记一(开始使用1)--主干 一.总结 1.英语:学好英语,编程轻松很多 2. layouts compatibility change log web app collection ...

  5. 1.15 Python基础知识 - 函数

    函数是可重用的程序代码段. 一.函数的声明和调用 声明格式: def 函数名([形参列表]): 函数体 调用格式: 函数名([实参列表]) 函数名:是一种标识符,命名规则为全小写字母,可以使用下划线增 ...

  6. RMAN异机复制数据库（相同路径）

    有完整的备份,新的数据库datafile.controfile.logfile所在目录结构和原数据库一样. 创建好adump.bdump.cdump.udump等目录. 1.恢复参数文件. 设置环境变 ...

  7. 编程一一C语言问题,指针函数与函数指针

    资料来源于网上: 一.指针函数:指返回值是指针的函数      类型标识符    *函数名(参数表)       int *f(x,y); 首先它是一个函数,只不过这个函数的返回值是一个地址值.函数返 ...

  8. 2、应用程序及驱动-poll和select使用说明

    1.poll机制(如果中断机制出问题了,poll机制是对中断机制的补充,比如等一个小孩,如果小孩生病了,因此隔一段时间应该去找他) poll机制就是给定一段时间,在这一段时间内程序处于睡眠状态一直等待 ...

  9. JSP中文件的上传于下载演示样例

    一.文件上传的原理     1.文件上传的前提:         a.form表单的method必须是post         b.form表单的enctype必须是multipart/form-da ...

  10. WPF中实现验证码

    原文:WPF中实现验证码 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/m0_37591671/article/details/79563449 W ...