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 相关文章推荐
js字符编码函数区别分析
Jun 05 Javascript
js tab 选项卡
Apr 26 Javascript
jQuery.Validate 使用笔记(jQuery Validation范例 )
Jun 25 Javascript
修改file按钮的默认样式实现代码
Apr 23 Javascript
jquery实现的用户注册表单提示操作效果代码分享
Aug 28 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
Dec 12 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
Jan 19 Javascript
Vue.js每天必学之表单控件绑定
Sep 05 Javascript
vue项目中导入swiper插件的方法
Jan 30 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
Feb 05 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
Jun 12 Javascript
vue-router实现编程式导航的代码实例
Jan 19 Javascript
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
DOTA2 无惧惊涛骇浪 昆卡大型水友攻略
2020/04/20 DOTA
FCKeditor的安装(PHP)
2007/01/13 PHP
一家之言的经验之谈php+mysql扎实个人基本功
2008/03/27 PHP
Array of country list in PHP with Zend Framework
2011/10/17 PHP
xml在joomla表单中的应用详解分享
2012/07/19 PHP
PHP模板引擎Smarty的缓存使用总结
2014/04/24 PHP
php获取textarea的值并处理回车换行的方法
2014/10/20 PHP
php获取当月最后一天函数分享
2015/02/02 PHP
今天是星期几的4种JS代码写法
2013/09/17 Javascript
jquery实现滑动特效代码
2015/08/10 Javascript
jquery 仿锚点跳转到页面指定位置的实例
2017/02/14 Javascript
Bootstrap表单控件学习使用
2017/03/07 Javascript
深入理解JavaScript继承的多种方式和优缺点
2017/05/12 Javascript
element-ui循环显示radio控件信息的方法
2018/08/24 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
在Django框架中编写Contact表单的教程
2015/07/17 Python
Python的Django框架中自定义模版标签的示例
2015/07/20 Python
Python 遍历子文件和所有子文件夹的代码实例
2016/12/21 Python
浅析Python中的赋值和深浅拷贝
2017/08/15 Python
对numpy中数组元素的统一赋值实例
2018/04/04 Python
python之信息加密题目详解
2019/06/26 Python
浅谈Python3实现两个矩形的交并比(IoU)
2020/01/18 Python
python GUI库图形界面开发之PyQt5开发环境配置与基础使用
2020/02/25 Python
python删除某个目录文件夹的方法
2020/05/26 Python
thinkphp5 路由分发原理
2021/03/18 PHP
澳大利亚领先的在线葡萄酒零售商:Get Wines Direct
2018/03/27 全球购物
Kiwi.com中国:找到特价机票并发现新目的地
2019/10/27 全球购物
介绍一下Python下range()函数的用法
2013/11/07 面试题
文化与传播毕业生求职信
2014/03/09 职场文书
工作岗位说明书模板
2014/05/09 职场文书
电子商务专业自荐信
2014/06/02 职场文书
2014年商场国庆节活动策划方案
2014/09/16 职场文书
高三毕业评语
2014/12/31 职场文书
2019关于实习生工作安排及待遇的管理方案!
2019/07/16 职场文书
MySQL 那些常见的错误设计规范,你都知道吗
2021/07/16 MySQL
Win11快速关闭所有广告推荐
2022/04/19 数码科技