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 相关文章推荐
Visual Studio中的jQuery智能提示设置方法
Mar 27 Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
Apr 02 Javascript
JavaScript之AOP编程实例
Jul 17 Javascript
jQuery validate验证插件使用详解
May 11 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
Nov 09 Javascript
利用JS判断鼠标移入元素的方向
Dec 11 Javascript
微信端开发--登录小程序步骤
Jan 11 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
Mar 10 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
Nov 12 Javascript
小程序日历控件使用方法详解
Dec 29 Javascript
js图片无缝滚动插件使用详解
May 26 Javascript
Postman内建变量常用方法实例解析
Jul 28 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中的正则表达式函数介绍
2012/02/27 PHP
在PHP上显示JFreechart画的统计图方法
2013/11/03 PHP
php使用ob_start()实现图片存入变量的方法
2014/11/14 PHP
phpstudy2018升级MySQL5.5为5.7教程(图文)
2018/10/24 PHP
PHP中如何使用Redis接管文件存储Session详解
2018/11/28 PHP
JS实现随机数生成算法示例代码
2013/08/08 Javascript
ajax与302响应代码测试
2013/10/23 Javascript
Javascript节点关系实例分析
2015/05/15 Javascript
JS+CSS实现仿msn风格选项卡效果代码
2015/10/22 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
2016/05/09 Javascript
jQuery组件easyui对话框实现代码
2016/08/25 Javascript
JS实现图片上传预览功能
2016/11/21 Javascript
Javascript中call,apply,bind方法的详解与总结
2016/12/12 Javascript
jQuery插件zTree实现获取一级节点数据的方法
2017/03/08 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
JS简单实现数组去重的方法示例
2017/03/27 Javascript
JavaScript生成指定范围随机数和随机序列的方法
2018/05/05 Javascript
在Vue项目中引入JQuery-ui插件的讲解
2019/01/27 jQuery
vue组件之间的数据传递方法详解
2019/04/19 Javascript
vue2.0自定义指令示例代码详解
2019/04/25 Javascript
vue页面跳转实现页面缓存操作
2020/07/22 Javascript
[01:51]历届DOTA2国际邀请赛举办地回顾 TI9落地上海
2018/08/26 DOTA
Python遍历指定文件及文件夹的方法
2015/05/09 Python
[原创]pip和pygal的安装实例教程
2017/12/07 Python
python列表,字典,元组简单用法示例
2019/07/11 Python
python实现静态服务器
2019/09/05 Python
Python实现打印实心和空心菱形
2019/11/23 Python
海淘母婴商城:国际妈咪
2016/07/23 全球购物
德国婴儿推车和儿童安全座椅商店:BABYSHOP
2016/09/01 全球购物
英国最大的电子零件及配件零售商:Partmaster
2017/04/24 全球购物
全球性的奢侈品梦工厂:Forzieri(福喜利)
2019/02/20 全球购物
廉政承诺书
2015/01/19 职场文书
2015国庆节66周年演讲稿
2015/03/20 职场文书
2015年领班工作总结
2015/04/29 职场文书
2015年公司国庆放假通知
2015/07/30 职场文书
排查并解决Oracle sysaux表空间异常增长
2022/04/20 Oracle