jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)


Posted in Javascript onSeptember 08, 2016

本文实例分析了jQuery常用样式操作。分享给大家供大家参考,具体如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.high {
  font-weight: bold; /* 粗体字 */
  color : red; /* 字体颜色设置红色*/
}
.another {
  font-style: italic;
  color: blue;
}
</style>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
  //获取样式
  $("input:eq(0)").click(function(){
    alert( $("p").attr("class") );
  });
  //设置样式
  $("input:eq(1)").click(function(){
    $("p").attr("class","high");
  });
  //追加样式
  $("input:eq(2)").click(function(){
    $("p").addClass("another");
  });
  //删除全部样式
  $("input:eq(3)").click(function(){
    $("p").removeClass();
  });
  //删除指定样式
  $("input:eq(4)").click(function(){
    $("p").removeClass("high");
  });
  //重复切换样式
  $("input:eq(5)").click(function(){
    $("p").toggleClass("another");
  });
  //判断元素是否含有某样式
  $("input:eq(6)").click(function(){
    alert( $("p").hasClass("another") )
    alert( $("p").is(".another") )
  });
});
//]]>
</script>
</head>
<body>
<input type="button" value="输出class类"/>
<input type="button" value="设置class类"/>
<input type="button" value="追加class类"/>
<input type="button" value="删除全部class类"/>
<input type="button" value="删除指定class类"/>
<input type="button" value="重复切换class类"/>
<input type="button" value="判断元素是否含有某个class类"/>
<p class="myClass" title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
  <li title='苹果'>苹果</li>
  <li title='橘子'>橘子</li>
  <li title='菠萝'>菠萝</li>
</ul>
</body>
</html>

效果图:

jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)

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

Javascript 相关文章推荐
Ctrl+Enter提交内容信息
Jun 26 Javascript
JS根据生日算年龄的方法
May 05 Javascript
jquery实现通用的内容渐显Tab选项卡效果
Sep 07 Javascript
JQuery实现简单的服务器轮询效果实例
Mar 31 Javascript
基于angularjs实现图片放大镜效果
Aug 31 Javascript
基于angular实现三级联动的生日插件
May 12 Javascript
JS中移除非数字最多保留一位小数
May 09 Javascript
在vue 中使用 less的教程详解
Sep 26 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
Mar 27 Javascript
vue 表单之通过v-model绑定单选按钮radio
May 13 Javascript
axios 实现post请求时把对象obj数据转为formdata
Oct 31 Javascript
Vue 请求传公共参数的操作
Jul 31 Javascript
js发送短信倒计时的简单实现方法
Sep 08 #Javascript
JavaScript-html标题滚动效果的简单实现
Sep 08 #Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
Apr 23 #Javascript
jQuery遍历节点树方法分析
Sep 08 #Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
Sep 08 #Javascript
jQuery ready()和onload的加载耗时分析
Sep 08 #Javascript
Angularjs实现mvvm式的选项卡示例代码
Sep 08 #Javascript
You might like
深入解析PHP中逗号与点号的区别
2013/08/05 PHP
Laravel 之url参数,获取路由参数的例子
2019/10/21 PHP
javascript 图片上一张下一张链接效果代码
2010/03/12 Javascript
javascript 四则运算精度修正函数代码
2010/05/31 Javascript
探讨JavaScript中声明全局变量三种方式的异同
2013/12/03 Javascript
js 实现浏览历史记录示例
2014/04/20 Javascript
js中的caller和callee属性介绍和例子
2014/06/07 Javascript
window.print打印指定div指定网页指定区域的方法
2014/08/04 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
2014/09/15 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
2015/03/03 Javascript
JS产生随机数的用法小结
2016/12/10 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
2017/07/19 Javascript
vue axios请求拦截实例代码
2018/03/29 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
2020/02/24 Javascript
JavaScript React如何修改默认端口号方法详解
2020/07/28 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
2020/08/08 Javascript
python实现telnet客户端的方法
2015/04/15 Python
Python判断文件或文件夹是否存在的三种方法
2017/07/27 Python
Python numpy 点数组去重的实例
2018/04/18 Python
pandas通过索引进行排序的示例
2018/11/16 Python
对python遍历文件夹中的所有jpg文件的实例详解
2018/12/08 Python
将pytorch转成longtensor的简单方法
2020/02/18 Python
Pycharm配置PyQt5环境的教程
2020/04/02 Python
树莓派升级python的具体步骤
2020/07/05 Python
您熟悉ORM(Object-Relation Mapping)吗?请谈谈您所理解的ORM
2016/02/08 面试题
医学专业个人求职自荐信格式
2013/09/23 职场文书
仓库管理制度
2014/01/21 职场文书
十一酒店活动方案
2014/02/20 职场文书
银行先进个人事迹材料
2014/05/11 职场文书
四风专项整治工作情况汇报
2014/10/28 职场文书
公司捐书倡议书
2015/04/27 职场文书
收入证明申请书
2015/06/12 职场文书
初中毕业生感言
2015/07/31 职场文书
会计手工模拟做账心得体会
2016/01/22 职场文书
MySQL下使用Inplace和Online方式创建索引的教程
2021/05/26 MySQL
低版本Druid连接池+MySQL驱动8.0导致线程阻塞、性能受限
2021/07/01 MySQL