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. 右键菜单添加Total Commander

    Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\Folder\shell\OpeninTC]@="使用TotalCmd打开(& ...

  2. JQuery map()函数

    DOM.map(callback(index,domElement)); 对匹配元素执行函数对象. 返回值是 jQuery 封装的数组,使用 get() 来处理返回的对象以得到基础的数组. 返回数据类 ...

  3. Flask项目之手机端租房网站的实战开发（七）

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 接着上一篇博客继续往下写 :https://blog.csdn.net/qq_41782425/article/details/8 ...

  4. iOS 中使用 XIB 自定义cell的两种方法以及编译出现常见 的错误 (xcode6.0之后)

    一. 注册cell 1.创建自定义cell并勾选 xib :(勾选xib就会自动生成与cell文件关联的xib) 2.在 tableViewController里注册自定义Cell (或者遵守tabl ...

  5. Leetcode 第 2 题(Add Two Numbers)

    Leetcode 第 2 题(Add Two Numbers) 题目例如以下: Question You are given two linked lists representing two non ...

  6. AS2.0鼠标尾随和拖动代码

    1,鼠标尾随. a: Mouse.hide();//隐藏鼠标.Mouse.show()显示鼠标. MC1.startDrag(true);//直接利用函数实现. b: Mouse.hide(); on ...

  7. Java 学习（19）：Java 多线程编程

    Java 多线程编程 Java 给多线程编程提供了内置的支持.一个多线程程序包含两个或多个能并发运行的部分.程序的每一部分都称作一个线程,并且每个线程定义了一个独立的执行路径. 多线程是多任务的一种特 ...

  8. 搭建MHA问题汇总

    1,Can't exec "mysqlbinlog": No such file or directory at /usr/share/perl5/vendor_perl/MHA/ ...

  9. 4、linux下应用创建线程

    1.linux创建线程之pthread_create 函数简介 pthread_create是UNIX环境创建线程函数 头文件 #include<pthread.h> 函数声明 int p ...

  10. spark安装与调试

    I---- 1---jdk and scala install ****zyp@ubuntu:~/Desktop/software$ tar xvf jdk-7u67-linux-i586.tar.g ...