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 相关文章推荐
jqPlot Option配置对象详解
Jul 25 Javascript
JavaScript 空位补零实现代码
Feb 26 Javascript
JQuery中serialize()用法实例分析
Feb 06 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
Mar 23 Javascript
原生js和jquery实现图片轮播淡入淡出效果
Apr 23 Javascript
理解javascript封装
Feb 23 Javascript
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 Javascript
angularJs select绑定的model取不到值的解决方法
Oct 08 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
Nov 21 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
Nov 21 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
Jun 17 Javascript
vue本地打开build后生成的dist文件夹index.html问题
Sep 04 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 中的类
2006/10/09 PHP
火车头discuz6.1 完美采集的php接口文件
2009/09/13 PHP
PHP array_push 数组函数
2009/12/26 PHP
PHP has encountered a Stack overflow问题解决方法
2014/11/03 PHP
PHP基于CURL进行POST数据上传实例
2014/11/10 PHP
人脸识别测颜值、测脸龄、测相似度微信接口
2016/04/07 PHP
php 解决substr()截取中文字符乱码问题
2016/07/18 PHP
PHP常用排序算法实例小结【基本排序,冒泡排序,快速排序,插入排序】
2017/02/07 PHP
PHP验证码无法显示的原因及解决办法
2017/08/11 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
php实现商城购物车的思路和源码分析
2020/07/23 PHP
Jquery插件 easyUI属性汇总
2011/01/19 Javascript
JavaScript在多浏览器下for循环的使用方法
2012/11/07 Javascript
js传中文参数controller里获取参数乱码问题解决方法
2014/01/03 Javascript
indexOf 和 lastIndexOf 使用示例介绍
2014/09/02 Javascript
基于jQuery创建鼠标悬停效果的方法
2015/03/07 Javascript
js实现仿阿里巴巴城市选择框效果实例
2015/06/24 Javascript
D3.js实现散点图和气泡图的方法详解
2016/09/21 Javascript
详解Angular 4.x NgTemplateOutlet
2017/05/24 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
2017/09/04 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
2018/01/08 Javascript
vue中如何使用ztree
2018/02/06 Javascript
Vue的elementUI实现自定义主题方法
2018/02/23 Javascript
BootStrap模态框闪退问题实例代码详解
2018/12/10 Javascript
Vue项目中配置pug解析支持
2019/05/10 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
2019/09/03 Javascript
vue移动端使用canvas签名的实现
2020/01/15 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
[49:58]完美世界DOTA2联赛PWL S3 Magma vs DLG 第一场 12.18
2020/12/19 DOTA
详解python 字符串和日期之间转换 StringAndDate
2017/05/04 Python
python绘制散点图并标记序号的方法
2018/12/11 Python
wxPython色环电阻计算器
2019/11/18 Python
台湾菁英交友:结识黄金单身的台湾人
2018/01/22 全球购物
大学生旅游业创业计划书
2014/01/29 职场文书
博士导师推荐信
2015/03/25 职场文书
使用refresh_token实现无感刷新页面
2022/04/26 Javascript