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 相关文章推荐
一直复略了的一个问题,关于表单重复提交
Feb 15 Javascript
通过身份证号得到出生日期和性别的js代码
Nov 23 Javascript
jQuery Lightbox 图片展示插件使用说明
Apr 25 Javascript
js判断字符长度及中英文数字等
Mar 19 Javascript
跟我学习javascript的循环
Nov 18 Javascript
bootstrap laydate日期组件使用详解
Jan 04 Javascript
详解PHP中pathinfo()函数导致的安全问题
Jan 05 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
Aug 16 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
Jan 25 Javascript
vue实现图片加载完成前的loading组件方法
Feb 05 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
May 22 Javascript
实例分析javascript中的异步
Jun 02 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
使用无限生命期Session的方法
2006/10/09 PHP
PHP加速 eAccelerator配置和使用指南
2009/06/05 PHP
PHP生成唯一的促销/优惠/折扣码(附源码)
2012/12/28 PHP
php打印输出棋盘的实现方法
2014/12/23 PHP
WordPress中用于更新伪静态规则的PHP代码实例讲解
2015/12/18 PHP
HTML中嵌入PHP的简单方法
2016/02/16 PHP
PHP-CGI远程代码执行漏洞分析与防范
2017/05/07 PHP
点击广告后才能获得下载地址
2006/10/26 Javascript
javascript中2个感叹号的用法实例详解
2014/09/04 Javascript
jquery.mobile 共同布局遇到的问题小结
2015/02/10 Javascript
js实现点击链接后窗口缩小并居中的方法
2015/03/02 Javascript
javascript中 try catch用法
2015/08/16 Javascript
常用javascript表单验证汇总
2020/07/20 Javascript
js贪吃蛇游戏实现思路和源码
2016/04/14 Javascript
jquery获取easyui日期控件的值实现方法
2016/11/09 Javascript
解析jQueryEasyUI的使用
2016/11/22 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
2016/11/25 Javascript
jQuery实现可兼容IE6的遮罩功能详解
2017/09/19 jQuery
Vue代码分割懒加载的实现方法
2017/11/23 Javascript
js array数组对象操作方法汇总
2019/03/18 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
2019/03/26 Javascript
VUE渲染后端返回含有script标签的html字符串示例
2019/10/28 Javascript
JS通用方法触发点击事件代码实例
2020/02/17 Javascript
vue实现前端列表多条件筛选
2020/10/26 Javascript
Python中的defaultdict模块和namedtuple模块的简单入门指南
2015/04/01 Python
Python读写ini文件的方法
2015/05/28 Python
python使用Tkinter实现在线音乐播放器
2018/01/30 Python
Python交互式图形编程的实现
2019/07/25 Python
python找出列表中大于某个阈值的数据段示例
2019/11/24 Python
现代家居用品及礼品:LBC Modern
2018/06/24 全球购物
安全生产投入制度
2014/01/29 职场文书
党风廉设责任书
2014/04/16 职场文书
党员干部作风建设思想汇报范文
2014/10/25 职场文书
支行行长竞聘报告
2014/11/06 职场文书
Python趣味挑战之给幼儿园弟弟生成1000道算术题
2021/05/28 Python
Python实现照片卡通化
2021/12/06 Python