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实现下载远程文件并保存在本地的脚本
May 06 Javascript
JavaScript 注册事件代码
Jan 27 Javascript
json的前台操作和后台操作实现代码
Jan 20 Javascript
JavaScript常用的弹出广告及背投广告实现方法
Feb 06 Javascript
学习JavaScript设计模式(单例模式)
Nov 26 Javascript
使用Node.js实现RESTful API的示例
Aug 01 Javascript
使用vue制作FullPage页面滚动效果
Aug 21 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
May 28 Javascript
解决vue打包后vendor.js文件过大问题
Jul 03 Javascript
使用 Element UI Table 的 slot-scope方法
Oct 10 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
Dec 17 Javascript
React实现类似淘宝tab居中切换效果的示例代码
Jun 02 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
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
解析PHP实现下载文件的两种方法
2013/07/05 PHP
PHP变量内存分配问题记录整理
2013/11/27 PHP
PHP return语句另类用法不止是在函数中
2014/09/17 PHP
PHP实现会员账号单唯一登录的方法分析
2019/03/07 PHP
Javascript 面向对象 继承
2010/05/13 Javascript
关于javascript function对象那些迷惑分析
2011/10/24 Javascript
Jquery为单选框checkbox绑定单击click事件
2012/12/18 Javascript
jquery入门—数据删除与隔行变色以及图片预览
2013/01/07 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
2013/11/17 Javascript
js实现仿百度瀑布流的方法
2015/02/05 Javascript
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
js倒计时小实例(多次定时)
2016/12/08 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
2016/12/13 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
2017/05/02 Javascript
老生常谈js数据类型
2017/08/03 Javascript
Vue中建立全局引用或者全局命令的方法
2017/08/21 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
2018/03/08 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
2018/04/25 Javascript
js实现弹出框的拖拽效果实例代码详解
2019/04/16 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
2019/05/20 Javascript
layui多图上传实现删除功能的例子
2019/09/23 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
2020/07/18 Javascript
jQuery实现简单轮播图效果
2020/12/27 jQuery
python实现发送邮件及附件功能
2021/03/02 Python
Python socket处理client连接过程解析
2020/03/18 Python
Python中的wordcloud库安装问题及解决方法
2020/05/27 Python
input元素的url类型和email类型简介
2012/07/11 HTML / CSS
美国开幕式潮店:Opening Ceremony
2018/02/10 全球购物
shell程序如何生命变量?shell变量是弱变量吗?
2014/11/10 面试题
大学学习计划书范文
2014/05/02 职场文书
负责人任命书范本
2014/06/04 职场文书
县政府领导班子“四风”方面突出问题整改措施
2014/09/23 职场文书
县委务虚会发言材料
2014/10/20 职场文书
售后服务承诺函格式
2015/01/21 职场文书
标准演讲稿格式结尾应该怎么书写?
2019/07/17 职场文书