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. http 500 Internal Server Error的错误 ajax请求SpringMVC后台中返回500 Internal Server Error

    使用httprequester接口测试能返回数据,但是用ajax返回json格式的时候返回报500Internal Server Error. The server encountered an in ...

  2. oracle学习之路（二）------数组类型/记录类型的使用

    Oracle记录类型介绍 RECORD:用户自己定义数据类型,由单行多列的标量构成的复合数据类型.它将一个或多个标量封装成一个对象进行操作记录不能够总体拿来比較也不能够总体推断为空.能够总体拿来赋值. ...

  3. PHPki

    PHPki PHPki是一个基于开放源码Web的应用程序,用来管理遵守HIPAA的多代理"公钥基础结构".它可以用于创建X.509数字证书,并主要为支持S/MIME的电子邮件客户端 ...

  4. .condarc（conda 配置文件）

    Configuration - Conda documentation .condarc以点开头,一般表示 conda 应用程序的配置文件,在用户的家目录(windows:C:\\users\\use ...

  5. golang matrix

    package main import ( "fmt" "go.matrix-go1" //比较有名的关于Matrix在golang中的方法库 "st ...

  6. C++ 中的异或操作^

    好好的利用异或能够产生奇妙的效果. 异或运算的性质: 不论什么一个数字异或它自己都等于0.也就是说.假设我们从头到尾依次异或数组中的每个数字,那么终于的结果刚好是那个仅仅出现一次的数字.由于那些出现两 ...

  7. 四种布局JS

    现代 Web 开发在将体验和功能做到极致的同时,对于美观的追求也越来越高.在推荐完图形库之后,再来推荐一些精品的独立 UI 组件.这些组件可组合在一起,形成美观而交互强大的 Web UI . 给 We ...

  8. （转）DOS批处理的字符串功能

    批处理有着具有非常强大的字符串处理能力,其功能绝不低于C语言里面的字符串函数集.批处理中可实现的字符串处理功能有:截取字符串内容.替换字符串特定字段.合并字符串.扩充字符串等功能.下面对这些功能一一进 ...

  9. 【Codeforces Round #445 (Div. 2) B】Vlad and Cafes

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 傻逼模拟 [代码] #include <bits/stdc++.h> using namespace std; cons ...

  10. BP神经网络公式推导及实现(MNIST)

    BP神经网络的基础介绍见:http://blog.csdn.net/fengbingchun/article/details/50274471,这里主要以公式推导为主. BP神经网络又称为误差反向传播 ...