jQuery操作元素的内容和样式完整实例分析


Posted in jQuery onJanuary 10, 2020

本文实例讲述了jQuery操作元素的内容和样式。分享给大家供大家参考,具体如下:

<html>
 <head>
 <title>jQuery操作元素的样式和内容</title>
 <meta charset="UTF-8"/>
 <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
 <script type="text/javascript">
  //操作元素的样式
  function testHtml1(){
  //获取要操作的对象
  var showdiv=$("#showdiv");
  //操作对象的内容
  alert(showdiv.html());  //我们获得是对象中的内容,没有进行HTML执行的源代码内容,不论是标签还是内容
  }
  function testHtml2(){
  //获取要操作的对象
  var showdiv=$("#showdiv");
  //在对象中进行元素添加操作
  showdiv.html("<b>clannad 赛高!</b>");  //会对HTML标签进行解析执行
  }
  function testHtml3(){
  //获取要操作的对象
  var showdiv=$("#showdiv");
  //在对象中进行元素拼接操作
  showdiv.html(showdiv.html()+"<b>clannad 赛高!</b>");  //可以进行字符的拼接,其中showdiv的返回值是一个字符串,我们利用+进行拼接
  }
  function testText1(){
  //获取要操作的对象
  var showdiv=$("#showdiv");
  //在对象中进行元素添加操作
  alert(showdiv.text());         //显示的结果不会包含标签
  }
  function testText2(){
  //获取要操作的对象
  var showdiv=$("#showdiv");
  //在对象中进行元素添加操作
  showdiv.text("<b>古河渚 赛高!</b>");  //会把整个文本内容写入div,不会解析标签
  }
  //操作元素的样式
  function testCss1(){
  //获取对象
  var showdiv=$("#showdiv");
  //添加样式
  showdiv.css("background-color","yellow");
  //获取对象的对应元素值
  alert(showdiv.css("width"));    //返回输入属性的值
  }
  function testCss2(){
  //获取对象
  var showdiv=$("#show2");
  //添加样式
  showdiv.css({"background-color":"purple","border":"solid 1px"}); //我们利用{}把多个属性括起来一次设置几种元素样式,不同属性之间用,分割,元素的赋值用:
  }
  function testAddClass(){
  //获取对象
  var div=$("#show2");
  //添加一个类属性
  div.addClass("common");
  //叠加类属性
  div.addClass("word");   //一个对象可以添加多个类属性,注:如果原对象含有这个属性,类属性的值不会将其覆盖
  }
  function testRemoveClass(){
  //获取对象
  var div=$("#show2");
  //添加一个类属性
  div.remove("word");  //移除对象的一个类属性
  }
 </script>
 <style type="text/css">
  #showdiv{
  width: 300px;
  height: 300px;
  border: solid 1px;
  /*background-color: yellow;*/
  }
  #show2{
  width: 300px;
  height: 300px;
  /*border: solid 1px yellow;*/
  /*background-color: purple;*/
  }
  .common{
  width: 300px;
  height: 300px;
  border: solid 2px yellow;
  background-color: red;
  }
  .word{
  font-size: 40px;
  font-size: bold;
  }
 </style>
 </head>
 <body>
 <h3>jQuery操作元素的样式和内容</h3>
 <hr />
 <input type="button" name="" id="" value="测试对象内容-html" onclick="testHtml1()"/>
 <input type="button" name="" id="" value="测试对象添加内容-html" onclick="testHtml2()"/>
 <input type="button" name="" id="" value="测试对象拼接内容-html" onclick="testHtml3()"/>
 <input type="button" name="" id="" value="测试对象内容-text" onclick="testText1()"/>
 <input type="button" name="" id="" value="测试对象添加内容-text" onclick="testText2()"/>
 <hr />
 <input type="button" name="" id="" value="测试对象样式" onclick="testCss1()"/>
 <input type="button" name="" id="" value="测试对象样式---json" onclick="testCss2()"/>
 <input type="button" name="" id="" value="测试对象添加类样式" onclick="testAddClass()"/>
 <input type="button" name="" id="" value="测试对象移除类样式" onclick="testRemoveClass()"/>
 <hr />
 <div id="showdiv">
  <b>古河渚 赛高!</b>
 </div>
 <div id="show2">
  Clannad After Story
 </div>
 </body>
</html>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
jquery Form轻松实现文件上传
May 24 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
详解jQuery-each()方法
Mar 13 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
jQuery实现简易聊天框
Feb 08 jQuery
jquery选择器和属性对象的操作实例分析
Jan 10 #jQuery
jquery实现吸顶导航效果
Jan 08 #jQuery
基于jQuery实现挂号平台首页源码
Jan 06 #jQuery
详解jQuery中的prop()使用方法
Jan 05 #jQuery
jQuery 选择器用法基础入门示例
Jan 04 #jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 #jQuery
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 #jQuery
You might like
全国FM电台频率大全 - 29 青海省
2020/03/11 无线电
php简单获取目录列表的方法
2015/03/24 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
MooTools 1.2中的Drag.Move来实现拖放
2009/09/15 Javascript
Kibo 用于处理键盘事件的Javascript工具库
2011/10/28 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
2014/06/19 Javascript
js实现仿阿里巴巴城市选择框效果实例
2015/06/24 Javascript
浅谈javascript的Touch事件
2015/09/27 Javascript
jQuery添加和删除指定标签的方法
2015/12/16 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
javascript实现方法调用与方法触发小结
2016/03/26 Javascript
jquery自定义表单验证插件
2016/10/12 Javascript
Sortable.js拖拽排序使用方法解析
2016/11/04 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
2016/11/30 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
2019/05/05 Javascript
JS判断数组里是否有重复元素的方法小结
2019/05/21 Javascript
vue-socket.io跨域问题有效解决方法
2020/02/11 Javascript
为react组件库添加typescript类型提示的方法
2020/06/15 Javascript
python使用urllib模块和pyquery实现阿里巴巴排名查询
2014/01/16 Python
Python yield 小结和实例
2014/04/25 Python
python中getaddrinfo()基本用法实例分析
2015/06/28 Python
python保存字符串到文件的方法
2015/07/01 Python
Python实现的十进制小数与二进制小数相互转换功能
2017/10/12 Python
windows下cx_Freeze生成Python可执行程序的详细步骤
2018/10/09 Python
Python中extend和append的区别讲解
2019/01/24 Python
PyQt5 实现给窗口设置背景图片的方法
2019/06/13 Python
Python新手如何理解循环加载模块
2020/05/29 Python
使用Keras实现简单线性回归模型操作
2020/06/12 Python
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
Lungolivigno Fashion官网:高级时装在线购物
2020/10/17 全球购物
应聘教师自荐信
2013/10/12 职场文书
儿子婚宴答谢词
2014/01/09 职场文书
2014年五四青年节活动方案
2014/03/29 职场文书
县长“四风”对照检查材料思想汇报
2014/10/05 职场文书
学生犯错保证书
2015/05/09 职场文书
Rust 连接 PostgreSQL 数据库的详细过程
2022/01/22 PostgreSQL