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实现字体选色板实例代码
Nov 20 Javascript
js中浮点型运算BUG的解决方法说明
Jan 06 Javascript
JS倒计时代码汇总
Nov 25 Javascript
innerHTML中标签可以换行的方法汇总
Aug 14 Javascript
jquery判断复选框选中状态以及区分attr和prop
Dec 18 Javascript
javascript显示上周、上个月日期的处理方法
Feb 03 Javascript
JavaScript学习笔记之数组去重
Mar 23 Javascript
bootstrap输入框组件使用方法详解
Jan 19 Javascript
Vue插件写、用详解(附demo)
Mar 20 Javascript
深入理解Angular4订阅(Subscribe)与取消
Nov 22 Javascript
基于jquery.page.js实现分页效果
Jan 01 jQuery
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
Aug 03 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
基于Windows下Apache PHP5.3.1安装教程
2010/01/08 PHP
判断是否为指定长度内字符串的php函数
2010/02/16 PHP
使用PHP实现Mysql读写分离
2013/06/28 PHP
PHP简单实现“相关文章推荐”功能的方法
2014/07/19 PHP
PHP中的排序函数sort、asort、rsort、krsort、ksort区别分析
2014/08/18 PHP
PHP和MySql中32位和64位的整形范围是多少
2016/02/18 PHP
php 如何设置一个严格控制过期时间的session
2017/05/05 PHP
PHP实现验证码校验功能
2017/11/16 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
JQuery困惑—包装集 DOM节点
2009/10/16 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
2015/11/24 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
2016/02/03 Javascript
jQuery的deferred对象使用详解
2016/09/25 Javascript
jQuery插件扩展实例【添加回调函数】
2016/11/26 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
2017/03/15 Javascript
基于JavaScript实现滑动门效果
2017/03/16 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
微信小程序实现默认第一个选中变色效果
2018/07/17 Javascript
JS实现获取自定义属性data值的方法示例
2018/12/19 Javascript
详解vue引入子组件方法
2019/02/12 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
2019/02/14 jQuery
浅谈Vue组件单元测试究竟测试什么
2020/02/05 Javascript
Jquery $.map使用方法实例详解
2020/09/01 jQuery
微信小程序canvas动态时钟
2020/10/22 Javascript
[43:26]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第二场 11.20
2020/11/23 DOTA
python中self原理实例分析
2015/04/30 Python
深入解析Python中的urllib2模块
2015/11/13 Python
python-opencv获取二值图像轮廓及中心点坐标的代码
2019/08/27 Python
python 穷举指定长度的密码例子
2020/04/02 Python
详解如何使用rem或viewport进行移动端适配
2020/08/14 HTML / CSS
新员工培训个人的自我评价
2013/10/09 职场文书
认识深刻的检讨书
2014/02/16 职场文书
《赵州桥》教学反思
2014/02/17 职场文书
实习生评语
2014/04/26 职场文书
实验心得体会
2014/09/05 职场文书
浅谈Python魔法方法
2021/06/28 Java/Android