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 相关文章推荐
javascript 拖动表格行实现代码
May 05 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
Nov 30 Javascript
JS JSON对象转为字符串的简单实现方法
Nov 18 Javascript
js实现div闪烁原理及实现代码
Jun 24 Javascript
使用纯javascript实现经典扫雷游戏
Apr 23 Javascript
javascript封装的sqlite操作类实例
Jul 17 Javascript
全面解析标签页的切换方式
Aug 21 Javascript
JS正则子匹配实例分析
Dec 22 Javascript
vue组件jsx语法的具体使用
May 21 Javascript
详解JavaScript中typeof与instanceof用法
Oct 24 Javascript
vue+mock.js实现前后端分离
Jul 24 Javascript
vue插槽slot的简单理解与用法实例分析
Mar 14 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
深入for,while,foreach遍历时间比较的详解
2013/06/08 PHP
PHP延迟静态绑定示例分享
2014/06/22 PHP
PDO操作MySQL的基础教程(推荐)
2017/08/18 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
PHP join()函数用法与实例讲解
2019/03/11 PHP
php实现记事本案例
2020/10/20 PHP
JAVASCRIPT对象及属性
2007/02/13 Javascript
百度判断手机终端并自动跳转js代码及使用实例
2014/06/11 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
javascript实现支持移动设备画廊
2015/08/24 Javascript
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
在一个页面重复使用一个js函数的方法详解
2016/12/26 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
2017/01/04 Javascript
JS+HTML+CSS实现轮播效果
2017/11/28 Javascript
基于vue2.x的电商图片放大镜插件的使用
2018/01/22 Javascript
Vue验证码60秒倒计时功能简单实例代码
2018/06/22 Javascript
Layui 设置select下拉框自动选中某项的方法
2018/08/14 Javascript
详解Vue中watch的详细用法
2018/11/28 Javascript
es6 symbol的实现方法示例
2019/04/02 Javascript
vue使用recorder.js实现录音功能
2019/11/22 Javascript
Python中if __name__ == &quot;__main__&quot;详细解释
2014/10/21 Python
举例讲解Python中字典的合并值相加与异或对比
2016/06/04 Python
浅谈使用Python变量时要避免的3个错误
2017/10/30 Python
python调用Delphi写的Dll代码示例
2017/12/05 Python
python3 requests中使用ip代理池随机生成ip的实例
2018/05/07 Python
在python中按照特定顺序访问字典的方法详解
2018/12/14 Python
Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法
2019/12/17 Python
Python使用docx模块实现刷题功能代码
2020/02/13 Python
python 根据列表批量下载网易云音乐的免费音乐
2020/12/03 Python
保证金退回承诺函格式
2015/01/21 职场文书
任命书标准格式
2015/03/02 职场文书
《生物入侵者》教学反思
2016/02/16 职场文书
2019年员工晋升管理制度范本!
2019/07/08 职场文书
Python上下文管理器Content Manager
2021/06/26 Python
教你在 Java 中实现 Dijkstra 最短路算法的方法
2022/04/08 Java/Android
mysql数据库如何转移到oracle
2022/12/24 MySQL