JQuery CSS样式控制 学习笔记


Posted in Javascript onJuly 23, 2009

jQuery 就不多说了,这是JS的一个函数库,比较常用,我们今天是就jQuery的三种用于css的操作进行总结
$(selector).css("name","value")
$(selector).css({properties})
$(selector).css(name)
$(selector).css("name","value")为所有元素给定CSS属性设置值:
下面看我刚写的代码

<html><head> 
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script> 
<script type="text/javascript"> 
var jq=jQuery.noConflict(); 
jq(document).ready(function(){ 
jq("#red").click(function(){ 
jq("p").css("background-color","red"); 
}); 
jq("#white").click(function(){ 
jq("p").css("background-color","white"); 
}); 
}); 
</head><body> 
<p>当你点击下面的按钮时背景将变成红色</p> 
<button id="red" type="button">红色</button> 
<button id="white" type="button">白色</button> 
</body></html>

函数css({properties})同时为所有匹配的元素的一系列css属性设置值:
来一段代码大家就明白了
<script type="text/javascript"> 
var jq=jQuery.noconflict(); 
jq(document).ready(function{ 
jq("#font_red").click(function(){ 
jq("p.info").css({"background-color":"red","font-size"="200%"}); 
}); }); 
</script>

对应的html我们可以写成
<p class="info" >这段文字的背景变成红色的时候,大小也会变大两倍</p>
<button id="font_red" type="button">点击这</button>
看一下效果:
JQuery CSS样式控制 学习笔记

我们看看最后一个css(name)
这个用到地方比较少
看看实例
$(this).css("background-color");
实际就是返回"name"的属性值,基本用到地方比较少就不详细解释了。
jQuery Size是要单独列出来的
尺寸有两种参数:$(selector).height(value)和$(selector).width(value)
两者用法一样,下面就列出一个实例:

<html><head> 
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"> 
var jq=jQuery.noConflict(); 
jq(document).ready(function(){ 
jq("#font").click(function(){ 
jq(".font_s").height("200px"); 
jq(".font_s").width("20px"); 
}); }); 
</script> 
</head><body> 
<p class="font_s">这个p标签框的高度会变大到200px,同时宽度变成20px</p> 
<button id="font" type="button">点击这里将发生变化</button> 
</body></html>

以下是补充测试代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<style type="text/css"> 
.test1{ 
    color:#0C9;} 
.test2{ 
    color:red;} 
</style> 
<script src="js/jquery-1.3.2.js"> 
</script> 
<script type="text/javascript"> 
    $(function(){ 
             var count = 2; 
             $("#aAdd").click(function(){ 
                    $(    "#testDIV").addClass("test1"); 
                }) 
             $("#aRemove").click(function(){ 
                    $(    "#testDIV").removeClass("test1"); 
                }) 
             $("#aToggle1").click(function(){ 
                    $(    "#testDIV").toggleClass("test2"); 
                }) 
             $("#aToggle2").click(function(){ 
                    $(    "#testDIV").toggleClass("test2",count++ % 3 == 0 ); 
                }) 
        $("#aCSS1").click(function(){ 
            $("#testDIV").css({background:"red"}).css("color","white"); 
        })     }) 
</script> 
</head> 
<body> 
<div id="testDIV" >我会变颜色哦</div> 
<a href="#" id="aAdd">添样式</a> 
<a href="#" id="aRemove">去除样式</a> 
<a href="#" id="aToggle1">变样式</a> 
<a href="#" id="aToggle2">多点几下变样式</a> 
<a href="#" id="aCSS1">变色</a> 
</body> 
</html>

1.addClass(class)
描述:为选择的元素集合添加指定样式。
2.removeClass([class])
描述:为选择的元素集合删除指定样式。
3.toggleClass(class)
描述:替换选择的元素集合样式。备注下,如果当前元素的样子已经为class时,将会去除该样式,相当于addClass与removeClass的结合方法。
4.toggleClass(class, switch)
描述:与上一个方法类似,区别就是多加了个switch判断,当switch值为true时,对进行样式的改变
5.css(styleName,value)/css(styleName)/css({value})
描述:css(styleName,value)用于设置当前元素的styleName样式属性值为value,css(styleName)用于获取当前元素的styleName样式属性值,而css({value})而为另一种设置样式属性值的方法,具体用法参考例子^^,因为跟element.attr的用法类似所以在这就不详细说明了
Javascript 相关文章推荐
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
Apr 25 Javascript
jquery中eq和get的区别与使用方法
Apr 14 Javascript
学习JavaScript的最佳方法分享
Oct 21 Javascript
Javascript根据指定下标或对象删除数组元素
Dec 21 Javascript
JS获取单击按钮单元格所在行的信息
Jun 17 Javascript
JS辨别访问浏览器判断是android还是ios系统
Aug 19 Javascript
javascript中$(function() {});写与不写有哪些区别
Aug 10 Javascript
总结几道关于Node.js的面试问题
Jan 11 Javascript
如何获取元素的最终background-color
Feb 06 Javascript
js html实现计算器功能
Nov 13 Javascript
Node.js + express基本用法教程
Mar 14 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
JQuery 学习笔记 element属性控制
Jul 23 #Javascript
JQuery 学习笔记 选择器之六
Jul 23 #Javascript
JQuery 学习笔记 选择器之五
Jul 23 #Javascript
JQuery 学习笔记 选择器之四
Jul 23 #Javascript
JQuery 学习笔记 选择器之三
Jul 23 #Javascript
JQuery 学习笔记 选择器之二
Jul 23 #Javascript
JQuery 学习笔记 选择器之一
Jul 23 #Javascript
You might like
使用zend studio for eclipse不能激活代码提示功能的解决办法
2009/10/11 PHP
PHP数学运算函数大汇总(经典值得收藏)
2016/04/01 PHP
PHP PDOStatement::bindColumn讲解
2019/01/30 PHP
PHP registerXPathNamespace()函数讲解
2019/02/03 PHP
Laravel核心解读之异常处理的实践过程
2019/02/24 PHP
JS教程:window.location使用方法的区别介绍
2013/10/04 Javascript
jquery 通过name快速取值示例
2014/01/24 Javascript
JavaScript新窗口与子窗口传值详解
2014/02/11 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
2015/03/04 Javascript
基于jQuery实现的菜单切换效果
2015/10/16 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
2016/07/06 Javascript
JavaScript数值千分位格式化的两种简单实现方法
2016/08/01 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
2017/01/16 Javascript
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
webpack手动配置React开发环境的步骤
2018/07/02 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
2018/09/25 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
2020/08/17 Javascript
JavaScript Array.flat()函数用法解析
2020/09/02 Javascript
原生JS实现相邻月份日历
2020/10/13 Javascript
vue登录页实现使用cookie记住7天密码功能的方法
2021/02/18 Vue.js
对Python新手编程过程中如何规避一些常见问题的建议
2015/04/01 Python
Python中单、双下划线的区别总结
2017/12/01 Python
pandas重新生成索引的方法
2018/11/06 Python
python flask几分钟实现web服务的例子
2019/07/26 Python
python用线性回归预测股票价格的实现代码
2019/09/04 Python
python系列 文件操作的代码
2019/10/06 Python
解决Python在导入文件时的FileNotFoundError问题
2020/04/10 Python
pandas apply使用多列计算生成新的列实现示例
2021/02/24 Python
Free People中国官网:波西米亚风格女装服饰
2016/08/30 全球购物
英国花园药房: The Garden Pharmacy
2017/12/28 全球购物
优衣库美国官网:UNIQLO美国
2018/04/14 全球购物
药学专业个人自我评价
2013/11/11 职场文书
英语道歉信范文
2014/01/09 职场文书
给女朋友的道歉短信
2015/05/12 职场文书
幼儿园毕业典礼园长致辞
2015/07/29 职场文书
V Rising 服务器搭建图文教程
2022/06/16 Servers