jQuery使用之设置元素样式用法实例


Posted in Javascript onJanuary 19, 2015

本文实例讲述了jQuery使用之设置元素样式用法。分享给大家供大家参考。具体分析如下:

css是页面不能分隔的部分,jQuery中也提供了一些css相关的实用的办法。前面文章中有使用过 addClass()为元素添加css样式风格。这里主要介绍jQuery如何设置页面的样式风格。包括添加、删除、动态切换等。

1. 添加、删除css类别。

$(function() {

    //同时添加多个CSS类别

    $("img").addClass("css1 css2");

});

如以上代码对img元素添加了css1和 css2两个样式

removeClass与addClass方法相对应,这里不再重复例举。

2.在类别间动态切换。

很多时候根据用户的操作状态,希望某些元素的样式风格在某个类别之间切换,时而addClass()类别,时而removeClass()类别,Jq提供了一个直接的toggleClass(name)来进行类似的操作。

$(function() {

 $("p").click(function() {

     $(this).toggleClass("css1");

 })

});

以上代码实现了点击P元素时,对css1样式不断切换。toggleClass(name)方式只能设定一种css类别。不能对多个css进行切换。

3.直接获取、设置样式。

与attr()方法完全类似,jQuery提供了css()方法直接获取、设置元素的样式风格,比如使用css(name)获取某种样式的风格值。通过css(properties)列表来同事设置多种样式,通过css(name,value)设置元素的某种样式。

例如:通过设置鼠标mouseover和mouseout事件触发css(name,value)来修改颜色标记。

$(function() {

 $("p").mouseover(function() {

     $(this).css("color", "red");

 });

 $("p").mouseout(function() {

     $(this).css("color", "black");

 });

});

css方法提供了opacity属性。并且兼容各种浏览器。

如上例子修改,可以通过鼠标事件设置p元素的透明度值。

$(function() {

 $("p").mouseover(function() {

     $(this).css("opacity", "0.5");

 });

 $("p").mouseout(function() {

     $(this).css("opacity", "1");

 });

});

另外在css中提供了hasClass(name)方法判断某个元素是否设置了某个css类别。返回布尔值。例如:

$("li:last").hasClass("css1")

表达最后一个li的css属性是否包含css1类。和
$("li:last").is(".css1")

代码效果完全相同。

查看jQuery源码,hasClass方法就是调运is()方法。

hasClass: function(selector) {

 return this.is("." + selector);

}

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

Javascript 相关文章推荐
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
May 27 Javascript
jquery弹出关闭遮罩层实例
Aug 06 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
Sep 11 Javascript
12306验证码破解思路分享
Mar 25 Javascript
使用jQuery操作HTML的table表格的实例解析
Mar 13 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
Aug 29 Javascript
bootstrap表格分页实例讲解
Dec 30 Javascript
详解JavaScript中this的指向问题
Jan 20 Javascript
vue 中directive功能的简单实现
Jan 05 Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 Javascript
JavaScript设计模式之责任链模式实例分析
Jan 16 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
May 24 Javascript
jQuery学习笔记之基础中的基础
Jan 19 #Javascript
jQuery 选择器详解
Jan 19 #Javascript
jQuery使用之标记元素属性用法实例
Jan 19 #Javascript
jQuery应用之jQuery链用法实例
Jan 19 #Javascript
浅谈Unicode与JavaScript的发展史
Jan 19 #Javascript
jQuery中ready事件用法实例
Jan 19 #Javascript
jQuery中offsetParent()方法用法实例
Jan 19 #Javascript
You might like
自己写了一个php检测文件编码的函数
2014/04/21 PHP
PHP+jQuery 注册模块的改进(一):验证码存入SESSION
2014/10/14 PHP
CI配置多数据库访问的方法
2016/03/28 PHP
PHP实现登录搜狐广告获取广告联盟数据的方法【附demo源码】
2016/10/14 PHP
yii2 resetful 授权验证详解
2017/05/18 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
jquery必须知道的一些常用特效方法及使用示例(整理)
2013/06/24 Javascript
javascript 表格内容排序 简单操作示例代码
2014/01/03 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
2015/03/09 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
2017/10/24 Javascript
react native 获取地理位置的方法示例
2018/08/28 Javascript
在小程序Canvas中使用measureText的方法示例
2018/10/19 Javascript
Vue 组件参数校验与非props特性的方法
2019/02/12 Javascript
微信公众号平台接口开发 获取access_token过程解析
2019/08/14 Javascript
vue 根据选择条件显示指定参数的例子
2019/11/09 Javascript
Vue如何基于vue-i18n实现多国语言兼容
2020/07/17 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
2020/12/28 Javascript
[00:52]黑暗之门更新 新英雄孽主驾临DOTA2
2016/08/24 DOTA
Python标准库之collections包的使用教程
2017/04/27 Python
Python深度优先算法生成迷宫
2018/01/22 Python
对Python中内置异常层次结构详解
2018/10/18 Python
Python使用combinations实现排列组合的方法
2018/11/13 Python
python自定义时钟类、定时任务类
2021/02/22 Python
python自动保存百度盘资源到百度盘中的实例代码
2019/08/26 Python
Python3使用PySynth制作音乐的方法
2019/09/09 Python
NumPy中的维度Axis详解
2019/11/26 Python
python GUI库图形界面开发之PyQt5下拉列表框控件QComboBox详细使用方法与实例
2020/02/27 Python
Keras自定义IOU方式
2020/06/10 Python
检测浏览器对HTML5和CSS3支持度的方法
2015/06/25 HTML / CSS
Anya Hindmarch官网:奢侈设计师手袋及配饰
2018/11/15 全球购物
家长评语和期望
2014/02/10 职场文书
感恩母亲节演讲稿
2014/05/07 职场文书
公司爱心捐款倡议书
2014/05/14 职场文书
质量月口号
2014/06/20 职场文书
Jackson 反序列化时实现大小写不敏感设置
2021/06/29 Java/Android
RPM包方式安装Oracle21c的方法详解
2021/08/23 Oracle