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 相关文章推荐
Ucren Virtual Desktop V2.0
Nov 07 Javascript
脚本安需导入(装载)的三种模式的对比
Jun 24 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
Mar 16 Javascript
jquery图片滚动放大代码分享(1)
Aug 25 Javascript
一起学写js Calender日历控件
Apr 14 Javascript
如何使用AngularJs打造权限管理系统【简易型】
May 09 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
Jul 09 Javascript
JS防止网页被嵌入iframe框架的方法分析
Sep 13 Javascript
jQuery图片切换动画特效
Nov 02 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
Jan 04 Javascript
Vue Router去掉url中默认的锚点#
Aug 01 Javascript
vue 基于element-ui 分页组件封装的实例代码
Dec 10 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简单命令代码集锦
2007/09/24 PHP
基于PHP的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
PHP判断图片格式的七种方法小结
2013/06/03 PHP
Yii使用find findAll查找出指定字段的实现方法
2014/09/05 PHP
php简单获取目录列表的方法
2015/03/24 PHP
Laravel源码解析之路由的使用和示例详解
2018/09/27 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
将jQuery应用于login页面的问题及解决
2009/10/17 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
2014/03/21 Javascript
jquery中获取元素里某一特定子元素的代码
2014/12/02 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
JavaScript中的cacheStorage使用详解
2015/07/29 Javascript
JS控制FileUpload的上传文件类型实例代码
2016/10/07 Javascript
Vue.js开发环境快速搭建教程
2017/03/17 Javascript
JS实现多选框的操作
2020/06/24 Javascript
node.js基础知识汇总
2020/08/25 Javascript
Python数据结构与算法之字典树实现方法示例
2017/12/13 Python
flask使用session保存登录状态及拦截未登录请求代码
2018/01/19 Python
python中找出numpy array数组的最值及其索引方法
2018/04/17 Python
pytorch中tensor的合并与截取方法
2018/07/26 Python
对python生成业务报表的实例详解
2019/02/03 Python
对Python3 序列解包详解
2019/02/16 Python
pyinstaller打包找不到文件的问题解决
2020/04/15 Python
用 Python 制作地球仪的方法
2020/04/24 Python
python用Configobj模块读取配置文件
2020/09/26 Python
CSS3 制作旋转的大风车(充满童年回忆)
2013/01/30 HTML / CSS
俄罗斯鲜花递送:AMF
2020/04/24 全球购物
购房意向书
2014/04/01 职场文书
高中教师评语大全
2014/04/25 职场文书
竞选学生会演讲稿
2014/04/25 职场文书
世界遗产的导游词
2015/02/13 职场文书
保护动物的宣传语
2015/07/13 职场文书
劳保用品管理制度范本
2015/08/06 职场文书
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS
Python使用Kubernetes API访问集群
2021/05/30 Python
详解Vue router路由
2021/11/20 Vue.js