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的inArray 方法介绍
Oct 08 Javascript
js中的preventDefault与stopPropagation详解
Jan 29 Javascript
AngularJS学习笔记之TodoMVC的分析
Feb 22 Javascript
node.js入门实例helloworld详解
Dec 23 Javascript
深入浅析JS的数组遍历方法(推荐)
Jun 15 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
Aug 11 Javascript
javascript中的面向对象
Mar 30 Javascript
实例详解JSON取值(key是中文或者数字)方式
Aug 24 Javascript
微信小程序自定义轮播图
Nov 04 Javascript
详解微信小程序之提高应用速度小技巧
Jan 07 Javascript
js实现简单的秒表
Jan 16 Javascript
vue设置默认首页的操作
Aug 12 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
php中防止恶意刷新页面的代码小结
2012/10/31 PHP
PHP简单验证码功能机制实例详解
2019/03/27 PHP
用JavaScript显示随机图像或引用
2009/04/21 Javascript
JQuery的自定义事件代码,触发,绑定简单实例
2013/08/01 Javascript
点击进行复制的JS代码实例
2013/08/23 Javascript
javascript中动态函数用法实例分析
2015/05/14 Javascript
用js编写的简单的计算器代码程序
2015/08/04 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
2015/12/04 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
2016/09/20 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
2017/01/13 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
2017/04/13 jQuery
vue v-model表单控件绑定详解
2017/05/17 Javascript
关于使用js算总价的问题
2017/06/23 Javascript
微信小程序调用摄像头隐藏式拍照功能
2018/08/22 Javascript
简述vue状态管理模式之vuex
2018/08/29 Javascript
详解React项目中碰到的IE问题
2019/03/14 Javascript
[02:51]DOTA2 2015国际邀请赛中国区预选赛第一日战报
2015/05/27 DOTA
[01:33]DOTA2上海特级锦标赛 LIQUID战队完整宣传片
2016/03/16 DOTA
python ElementTree 基本读操作示例
2009/04/09 Python
Python3实现连接SQLite数据库的方法
2014/08/23 Python
Python中死锁的形成示例及死锁情况的防止
2016/06/14 Python
itchat和matplotlib的结合使用爬取微信信息的实例
2017/08/25 Python
python 读取视频,处理后,实时计算帧数fps的方法
2018/07/10 Python
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
Python批量查询关键词微信指数实例方法
2019/06/27 Python
pytorch实现查看当前学习率
2020/06/24 Python
scrapy结合selenium解析动态页面的实现
2020/09/28 Python
查找适用于matplotlib的中文字体名称与实际文件名对应关系的方法
2021/01/05 Python
令人啧啧称赞的经理推荐信
2013/11/07 职场文书
2014年国培研修感言
2014/03/09 职场文书
县级领导干部开展党的群众路线教育实践活动工作汇报
2014/10/25 职场文书
大国崛起观后感
2015/06/02 职场文书
初中语文教学研修日志
2015/11/13 职场文书
golang interface判断为空nil的实现代码
2021/04/24 Golang
详解MySQL数据库千万级数据查询和存储
2021/05/18 MySQL
Go 通过结构struct实现接口interface的问题
2021/10/05 Golang