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.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
基于jQuery封装的分页组件
Jun 26 jQuery
jQuery事件对象的属性和方法详解
Sep 09 jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
详解jquery和vue对比
Apr 16 jQuery
jQuery操作元素追加内容示例
Jan 10 jQuery
jQuery实现小火箭返回顶部特效
Feb 03 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
PHP框架Swoole定时器Timer特性分析
2014/08/19 PHP
PHP递归实现层级树状展开
2016/04/01 PHP
深入理解PHP之源码目录结构与功能说明
2016/06/01 PHP
日期函数扩展类Ver0.1.1
2006/09/07 Javascript
javascript之querySelector和querySelectorAll使用介绍
2011/12/20 Javascript
node.js操作mongodb学习小结
2015/04/25 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
Ext JS动态加载JavaScript创建窗体的方法
2016/06/23 Javascript
vue.js初学入门教程(1)
2016/11/03 Javascript
基于es6三点运算符的使用方法(实例讲解)
2017/10/12 Javascript
解决Linux无法正常安装与卸载Node.js的方法
2018/01/19 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
2018/04/21 Javascript
element-ui 限制日期选择的方法(datepicker)
2018/05/16 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
2018/10/29 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
2019/09/16 Javascript
JavaScript代码简化技巧实例解析
2020/09/09 Javascript
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
python使用正则表达式提取网页URL的方法
2015/05/26 Python
Django自定义分页效果
2017/06/27 Python
python paramiko模块学习分享
2017/08/23 Python
python实现闹钟定时播放音乐功能
2018/01/25 Python
磁盘垃圾文件清理器python代码实现
2020/08/24 Python
python 多线程重启方法
2019/02/18 Python
Scrapy框架爬取Boss直聘网Python职位信息的源码
2019/02/22 Python
pandas对dataFrame中某一个列的数据进行处理的方法
2019/07/08 Python
Python3.7基于hashlib和Crypto实现加签验签功能(实例代码)
2019/12/04 Python
python 实现目录复制的三种小结
2019/12/04 Python
Python判断字符串是否为合法标示符操作
2020/09/03 Python
Python解析m3u8拼接下载mp4视频文件的示例代码
2021/03/03 Python
优秀团员事迹材料1500字
2014/08/31 职场文书
领导干部查摆“四风”问题自我剖析材料思想汇报
2014/10/05 职场文书
一年级班主任工作总结2014
2014/11/08 职场文书
奖学金申请个人主要事迹材料
2015/11/04 职场文书
自愿离婚协议书范本2016
2016/03/18 职场文书
mysql查找连续出现n次以上的数字
2022/05/11 MySQL