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 相关文章推荐
基于jQuery的360图片展示实现代码
Jun 14 Javascript
js判断浏览器类型的方法
Aug 07 Javascript
jQuery实用技巧必备(上)
Nov 02 Javascript
jquery点击展示与隐藏更多内容
Dec 03 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 Javascript
vue的全局变量和全局拦截请求器的示例代码
Sep 13 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
Oct 25 Javascript
如何检查一个对象是否为空
Apr 11 Javascript
js实现指定时间倒计时效果
Aug 26 Javascript
Vue实现小购物车功能
Dec 21 Vue.js
vue+openlayers绘制省市边界线
Dec 24 Vue.js
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生成缩略图的函数代码(修改版)
2011/01/18 PHP
php实现的简易扫雷游戏实例
2015/07/09 PHP
PHP扩展迁移为PHP7扩展兼容性问题记录
2016/02/15 PHP
PHP操作XML中XPath的应用示例
2019/07/04 PHP
[原创]js获取数组任意个不重复的随机数组元素
2010/03/15 Javascript
jquery 全局AJAX事件使用代码
2010/11/05 Javascript
让angularjs支持浏览器自动填表
2014/11/10 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
AngularJS控制器controller正确的通信的方法
2016/01/25 Javascript
JS中dom0级事件和dom2级事件的区别介绍
2016/05/05 Javascript
逻辑表达式中与或非的用法详解
2016/06/06 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
2016/06/12 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
AngularJS基础 ng-model-options 指令简单示例
2016/08/02 Javascript
jQuery File Upload文件上传插件使用详解
2016/12/06 Javascript
Angular 4中如何显示内容的CSS样式示例代码
2017/11/06 Javascript
解决vue项目报错webpackJsonp is not defined问题
2018/03/14 Javascript
vue监听input标签的value值方法
2018/08/27 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
2019/12/02 Javascript
python使用xmlrpc实例讲解
2013/12/17 Python
python fabric实现远程操作和部署示例
2014/03/25 Python
Python实现的检测web服务器健康状况的小程序
2014/09/17 Python
Python入门篇之文件
2014/10/20 Python
python numpy 部分排序 寻找最大的前几个数的方法
2018/06/27 Python
Python如何调用外部系统命令
2019/08/07 Python
深入了解python中元类的相关知识
2019/08/29 Python
以SQLite和PySqlite为例来学习Python DB API
2020/02/05 Python
Pyspark获取并处理RDD数据代码实例
2020/03/27 Python
keras的siamese(孪生网络)实现案例
2020/06/12 Python
Python 绘制可视化折线图
2020/07/22 Python
CSS3 简写animation
2012/05/10 HTML / CSS
Canvas系列之滤镜效果
2019/02/12 HTML / CSS
手工制作的意大利礼服鞋:Ace Marks
2018/12/15 全球购物
测试时代收集的软件测试面试题
2013/09/25 面试题
自荐信格式简述
2014/01/25 职场文书
酒店管理毕业生自荐信
2014/05/25 职场文书