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. Spring.net的Demo项目，了解什么是控制反转

    Spring这个思想,已经推出很多年了. 刚开始的时候,首先是在Java里面提出,后来也推出了.net的版本. Spring里面最主要的就是控制反转(IOC)和依赖注入(DI)这两个概念. 网上很多教 ...

  2. sql server中新增一条数据后返回该数据的ID

    开发中遇到的问题:在新增一条数据后往往不需要返回该数据的ID,但是有的时候可能需要返回该数据的ID以便后面的编程使用. 在这里介绍两种方法: 其一:使用存储过程: create procedure a ...

  3. PatentTips - Use of multiple virtual machine monitors to handle privileged events

    BACKGROUND OF THE INVENTION A conventional virtual-machine monitor (VMM) typically runs on a compute ...

  4. PatentTips - Resource partitioning and direct access utilizing hardware support for virtualization

    BACKGROUND The present disclosure relates to the resource management of virtual machine(s) using har ...

  5. 通过wmi获取本地硬件信息的一些疑问。

    通过wmi获取本地硬件信息的一些疑问. http://bbs.csdn.net/topics/391017789 http://blog.csdn.net/xcntime/article/detail ...

  6. Oracle动态SQL语句

    动态SQL返回游标: create or replace procedure proc_ValidityDueQuery( p_regioncode in number, p_pscode in nu ...

  7. android开发设计辅助工具整理

    1.Button设计工具button设计

  8. windows下安装emscripten

    windows下安装emscripten windows下安装emscripten需要python.git环境 python安装 git安装 开始安装 # 1.克隆emsdk git clone ht ...

  9. python基础-合并列表

    1.append()  向列表尾部追加一个新元素,列表只占一个索引位,在原有列表上增加 2.extend() 向列表尾部追加一个列表,将列表中的每个元素都追加进来,在原有列表上增加 3.+  直接用+ ...

  10. GridView与ArrayAdapter的结合

    activity_main.xml: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android ...