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,Angular实现登录界面验证码详解
Apr 27 jQuery
jquery dataTable 获取某行数据
May 05 jQuery
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
jQuery ajax动态生成table功能示例
Jun 14 jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
基于jquery的on和click的区别详解
Jan 15 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 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
phpExcel导出大量数据出现内存溢出错误的解决方法
2013/02/28 PHP
JoshChen_php新手进阶高手不可或缺的规范介绍
2013/08/16 PHP
javascript 跳转代码集合
2009/12/03 Javascript
jquery trim() 功能源代码
2011/02/14 Javascript
JS操作iframe里的dom(实例讲解)
2014/01/29 Javascript
标题过长使用javascript按字节截取字符串
2014/04/24 Javascript
理解javascript中的严格模式
2016/02/01 Javascript
详解AngularJS中ng-src指令的使用
2016/09/07 Javascript
JS实现简单的二元方程计算器功能示例
2017/01/03 Javascript
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
详解vue-cli官方脚手架配置
2018/07/20 Javascript
NodeJs项目中关闭ESLint的方法
2018/08/09 NodeJs
关于vue-cli 3配置打包优化要点(推荐)
2019/04/22 Javascript
如何在postman中添加cookie信息步骤解析
2020/06/30 Javascript
JavaScript十大取整方法实例教程
2020/12/03 Javascript
Python针对给定字符串求解所有子序列是否为回文序列的方法
2018/04/21 Python
python检测空间储存剩余大小和指定文件夹内存占用的实例
2018/06/11 Python
python 将json数据提取转化为txt的方法
2018/10/26 Python
python 列表输出重复值以及对应的角标方法
2019/06/11 Python
PageFactory设计模式基于python实现
2020/04/14 Python
python实现快速文件格式批量转换的方法
2020/10/16 Python
css3实现蒙版弹幕功能
2019/06/18 HTML / CSS
复古服装:RetroStage
2019/05/10 全球购物
ParcelABC西班牙:包裹运送和快递服务
2019/12/24 全球购物
儿科护理实习自我鉴定
2013/09/19 职场文书
文体活动实施方案
2014/03/27 职场文书
财务管理专业毕业生求职信
2014/06/02 职场文书
科技节口号
2014/06/19 职场文书
美德少年事迹材料500字
2014/08/19 职场文书
低碳环保演讲稿
2014/08/28 职场文书
教师纪念9.18事件演讲稿范文
2014/09/14 职场文书
大学生自荐信怎么写
2015/03/26 职场文书
如何撰写促销方案?
2019/07/05 职场文书
浅谈如何提高PHP代码质量之单元测试
2021/05/28 PHP
Spring Boot 使用 Spring-Retry 进行重试框架
2022/04/24 Java/Android
Windows Server 2012配置DNS服务器的方法
2022/04/29 Servers