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 相关文章推荐
做网页的一些技巧(续)
Feb 01 Javascript
基于jQuery的图片不完全按比例自动缩小
Jul 11 Javascript
JS烟花背景效果实现方法
Mar 03 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
Mar 24 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
Feb 19 Javascript
jQuery弹出层插件popShow(改进版)用法示例
Jan 23 Javascript
前端跨域的几种解决方式总结(推荐)
Aug 16 Javascript
JavaScript 中的 this 简单规则
Sep 19 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
Oct 20 Javascript
利用node实现一个批量重命名文件的函数
Dec 21 Javascript
vue动画打包后失效问题的解决方法
Sep 18 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
Jul 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)
2013/06/21 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
2009/04/24 Javascript
JavaScript的eval JSON object问题
2009/11/15 Javascript
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
使用隐藏的new来创建对象
2011/03/29 Javascript
基于JQuery的动态删除Table表格的行和列的代码
2011/05/12 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
JQuery标签页效果实例详解
2015/12/24 Javascript
TypeScript Type Innference(类型判断)
2016/03/10 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
2016/06/12 Javascript
基于滚动条位置判断的简单实例
2017/12/14 Javascript
解决layui 复选框等内置控件不显示的问题
2018/08/14 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
2019/04/22 Javascript
vue实现鼠标经过动画
2019/10/16 Javascript
ES6函数实现排它两种写法解析
2020/05/13 Javascript
vue.js封装switch开关组件的操作
2020/10/26 Javascript
Python 实现子类获取父类的类成员方法
2019/01/11 Python
ubuntu 16.04下python版本切换的方法
2019/06/14 Python
Python箱型图处理离群点的例子
2019/12/09 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
使用Python实现牛顿法求极值
2020/02/10 Python
django列表筛选功能的实现代码
2020/03/27 Python
django 连接数据库出现1045错误的解决方式
2020/05/14 Python
python解压zip包中文乱码解决方法
2020/11/27 Python
python爬虫如何解决图片验证码
2021/02/14 Python
利用css3制作3D样式按钮实现代码
2013/03/18 HTML / CSS
皮姆斯勒语言学习:Pimsleur Language Programs
2018/06/30 全球购物
英国天然宝石首饰购买网站:Gemondo Jewellery
2018/10/23 全球购物
extern在函数声明中是什么意思
2014/01/19 面试题
应届实习生的自我评价范文
2014/01/05 职场文书
信访稳定工作汇报
2014/10/27 职场文书
2016年大学生暑假爱心支教活动策划书
2015/11/26 职场文书