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自定义多选下拉框效果
Jun 19 jQuery
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
简单实现jQuery弹窗效果
Oct 30 jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
jQuery 选择器用法基础入门示例
Jan 04 jQuery
jQuery实现日历效果
Sep 11 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
ajax 的post方法实例(带循环)
2011/07/04 PHP
PHP两种去掉数组重复值的方法比较
2014/06/19 PHP
php实现不通过扩展名准确判断文件类型的方法【finfo_file方法与二进制流】
2017/04/18 PHP
轻轻松松学习JavaScript
2007/02/25 Javascript
Array.prototype 的泛型应用分析
2010/04/30 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
2011/08/28 Javascript
JS localStorage实现本地缓存的方法
2013/06/22 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
2014/06/05 Javascript
js父页面与子页面不同时显示的方法
2014/10/16 Javascript
JS阻止事件冒泡行为和闭包的方法
2016/06/16 Javascript
浅谈FastClick 填坑及源码解析
2018/03/02 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
2018/07/10 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
2020/11/13 Javascript
[13:39]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第一场
2014/05/26 DOTA
Python脚本修改阿里云的访问控制列表的方法
2019/03/08 Python
如何利用python给图片添加半透明水印
2019/09/06 Python
Python3.7+tkinter实现查询界面功能
2019/12/24 Python
pytorch:torch.mm()和torch.matmul()的使用
2019/12/27 Python
Tensorflow: 从checkpoint文件中读取tensor方式
2020/02/10 Python
django从后台返回html代码的实例
2020/03/11 Python
python torch.utils.data.DataLoader使用方法
2020/04/02 Python
使用Keras实现Tensor的相乘和相加代码
2020/06/18 Python
详解HTML5表单新增属性
2016/12/21 HTML / CSS
市场营销专业推荐信
2013/11/03 职场文书
CNC数控操作工岗位职责
2013/11/19 职场文书
军训自我鉴定
2014/01/22 职场文书
艺术设计专业个人求职信
2014/04/10 职场文书
保护环境倡议书范文
2014/05/13 职场文书
公司授权委托书范本
2014/09/18 职场文书
2014年商场工作总结
2014/11/22 职场文书
2015年大学教师工作总结
2015/05/20 职场文书
《赵州桥》教学反思
2016/02/17 职场文书
修辞手法有哪些?
2019/08/29 职场文书
三年级作文之小小梦想
2019/12/06 职场文书
导游词之太行山青龙峡
2020/01/14 职场文书
MySQL的Query Cache图文详解
2021/07/01 MySQL