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. 今天看到可以用sqlalchemy在python上访问Mysql

    from sqlalchemy import create_engine, MetaData, and_ 具体的还没有多看.

  2. Codeforces 559A Gerald&#39;s Hexagon 数三角形

    题意:按顺序给出一个各内角均为120°的六边形的六条边长,求该六边形能分解成多少个边长为1的单位三角形. 把单位三角形面积看做1,实际上就是求六边形面积.随便找六边形的三条互相不相邻的边,分别以这三条 ...

  3. 程序猿必须知道FTP命令

                                             程序猿必须知道FTP命令 文件传输软件的使用格式为:FTP<FTP地址>.若连 接成功.系统将提示用户输入 ...

  4. cocos2d-x认识之旅

    cocos2d-x 学习历程 1. 了解cocos2d-x.官网 : www.cocos2d-x.org 2. 搭建cocos2d-x. 使用版本号cocos2d-x 3.0 搭建好开发环境教程:ht ...

  5. C#程序集引入无效的解决方法

    在项目类库中已经引用了相关了类库,生成解决方案也没问题,但是到了后置代码,通过using引用其他类库的时候,再生成解决方案或者生成单个类库,就会报“未能找到类型或命名空间“xxx"(是否缺少 ...

  6. Python 极简教程（十二）逻辑控制语句 if else

    计算机软件之所以能够对不同的情况进行不同的处理,就是我们在编码的时候,通过逻辑控制语句,告诉软件在不同的情况下应该做什么处理. 比如我们在登录的时候,那么当你输入正确的账号密码和错误的账号密码,完全是 ...

  7. WebService学习总结（2）——WebService是什么？

    一.WebService是什么? 1. 基于Web的服务:服务器端整出一些资源让客户端应用访问(获取数据) 2. 一个跨语言.跨平台的规范(抽象) 3. 多个跨平台.跨语言的应用间通信整合的方案(实际 ...

  8. 洛谷——U10206 Cx的治疗

    https://www.luogu.org/problem/show?pid=U10206 题目背景 「Cx的故事」众所周知,Cx是一个宇宙大犇.由于Cx在空中花园失足摔下,导致他那蕴含着无穷智慧的大 ...

  9. nginx服务器,访问时如何不直接显示index.php,而是显示目录

    版权声明:m_nanle_xiaobudiu https://blog.csdn.net/m_nanle_xiaobudiu/article/details/79502787 效果: 这里,我使用的是 ...

  10. Ehcache与Memcache的差别

    ehcache是纯java编写的.通信是通过RMI方式,适用于基于java技术的项目. memcachedserver端是c编写的.client有多个语言的实现,如c.php(淘宝.sina等各大门户 ...