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,超强推荐expand.js
Dec 23 Javascript
一个用js实现的页内搜索代码
May 23 Javascript
jQuery 性能优化指南(2)
May 21 Javascript
JavaScript 核心参考教程 内置对象
Oct 13 Javascript
jQuery中map()方法用法实例
Jan 06 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
Mar 05 Javascript
Javascript URI 解析介绍
Mar 15 Javascript
jQuery点击头像上传并预览图片
Feb 23 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
javascript 使用sleep函数的常见方法详解
Apr 26 Javascript
如何在postman中添加cookie信息步骤解析
Jun 30 Javascript
Vue中computed和watch有哪些区别
Dec 19 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设计模式小结
2013/02/15 PHP
PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
2016/04/07 PHP
PHP设计模式之适配器模式原理与用法分析
2018/04/25 PHP
Yii2结合Workerman的websocket示例详解
2018/09/10 PHP
PHP实用小技巧之调用录像的方法
2019/12/05 PHP
收藏Javascript中常用的55个经典技巧
2007/08/12 Javascript
JS对URL字符串进行编码/解码分析
2008/10/25 Javascript
在javascript将NodeList作为Array数组处理的方法
2010/07/09 Javascript
关于textarea提交的内容无法换行的解决办法
2013/04/09 Javascript
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
浅谈javascript中call()、apply()、bind()的用法
2015/04/20 Javascript
简单谈谈javascript中this的隐式绑定
2016/02/22 Javascript
AngularJS 单元测试(二)详解
2016/09/21 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
2016/12/30 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
2017/02/17 Javascript
Angular多选、全选、批量选择操作实例代码
2017/03/10 Javascript
使用classList来实现两个按钮样式的切换方法
2018/01/24 Javascript
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
Vue 实例事件简单示例
2019/09/19 Javascript
前端vue如何使用高德地图
2020/11/05 Javascript
[02:17]TI4西雅图DOTA2前线报道 啸天mik夫妻档解说
2014/07/08 DOTA
老生常谈Python序列化和反序列化
2017/06/28 Python
python机器学习之神经网络(二)
2017/12/20 Python
详解python单元测试框架unittest
2018/07/02 Python
详解python数据结构和算法
2019/04/18 Python
pytorch自定义初始化权重的方法
2019/08/17 Python
python3 反射的四种基本方法解析
2019/08/26 Python
解决Keras自带数据集与预训练model下载太慢问题
2020/06/12 Python
Canvas 文本转粒子效果的实现代码
2019/02/14 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
2020/07/20 HTML / CSS
GOLFINO英国官网:高尔夫服装
2020/04/11 全球购物
高校教师自荐信范文
2014/03/13 职场文书
师德师风个人反思
2014/04/28 职场文书
公司员工体检通知
2015/04/21 职场文书
Tomcat配置访问日志和线程数
2022/05/06 Servers