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 相关文章推荐
网页自动跳转代码收集
Sep 27 Javascript
jQuery 扩展对input的一些操作方法
Oct 30 Javascript
Javascript学习笔记8 用JSON做原型
Jan 11 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
Jun 25 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
Jun 05 Javascript
禁用页面部分JavaScript方法的具体实现
Jul 31 Javascript
JavaScript使用slice函数获取数组部分元素的方法
Apr 06 Javascript
JavaScript中的对象和原型(一)
Aug 12 Javascript
微信小程序 wxapp画布 canvas详细介绍
Oct 31 Javascript
详解django模板与vue.js冲突问题
Jul 07 Javascript
uni-app从安装到卸载的入门教程
May 15 Javascript
vue实现移动端div拖动效果
Mar 03 Vue.js
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编程中八种常见的文件操作方式
2006/11/19 PHP
php下连接mssql2005的代码
2011/01/17 PHP
PHP+MySQL投票系统的设计和实现分享
2012/09/23 PHP
PHP获取某个月最大天数(最后一天)的方法
2015/07/29 PHP
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
2010/09/12 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
JS调用CS里的带参方法实例
2013/08/01 Javascript
用jquery的方法制作一个简单的导航栏
2014/06/23 Javascript
Js实现京东无延迟菜单效果实例(demo)
2017/06/02 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
2017/06/21 Javascript
JavaScript之underscore_动力节点Java学院整理
2017/07/03 Javascript
详解nodejs的express如何自动生成项目框架
2017/07/12 NodeJs
vue实现页面加载动画效果
2017/09/19 Javascript
React 组件转 Vue 组件的命令写法
2018/02/28 Javascript
详解小程序原生使用ES7 async/await语法
2018/08/06 Javascript
element-ui表格列金额显示两位小数的方法
2018/08/24 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
2018/08/31 Javascript
javascript删除数组元素的七个方法示例
2019/09/09 Javascript
[45:15]Optic vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
python实现文件名批量替换和内容替换
2014/03/20 Python
Python3中的2to3转换工具使用示例
2015/06/12 Python
PyQt 线程类 QThread使用详解
2017/07/16 Python
python-opencv在有噪音的情况下提取图像的轮廓实例
2017/08/30 Python
Python SVM(支持向量机)实现方法完整示例
2018/06/19 Python
在python里从协程返回一个值的示例
2019/02/19 Python
使用pandas读取文件的实现
2019/07/31 Python
解决Tensorflow占用GPU显存问题
2020/02/03 Python
python3 xpath和requests应用详解
2020/03/06 Python
Python Switch Case三种实现方法代码实例
2020/06/18 Python
python两个list[]相加的实现方法
2020/09/23 Python
几款Python编译器比较与推荐(小结)
2020/10/15 Python
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
幼儿园教师师德表现自我评价
2015/03/05 职场文书
2015年党建工作总结
2015/03/30 职场文书
国庆节主题班会
2015/08/15 职场文书
Axios代理配置及封装响应拦截处理方式
2022/04/07 Vue.js