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 相关文章推荐
extJs 下拉框联动实现代码
Apr 09 Javascript
jQuery.Autocomplete实现自动完成功能(详解)
Jul 13 Javascript
今天是星期几的4种JS代码写法
Sep 17 Javascript
jquery form 隐藏的input 选择
Apr 29 Javascript
JQuery查找DOM节点的方法
Jun 11 Javascript
详解AngularJS中自定义过滤器
Dec 28 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
Jan 28 Javascript
去除html代码里面的script正则方法
May 19 Javascript
详解Vue路由开启keep-alive时的注意点
Jun 20 Javascript
值得收藏的八个常用的js正则表达式
Oct 19 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
Dec 16 Javascript
自定义Vue中的v-module双向绑定的实现
Apr 17 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
sqlyog 中文乱码问题的设置方法
2008/10/19 PHP
PHP实现异步调用方法研究与分享
2011/10/27 PHP
PHP图片等比例缩放生成缩略图函数分享
2014/06/10 PHP
php从文件夹随机读取文件的方法
2015/06/01 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
laravel-admin 中列表筛选方法
2019/10/03 PHP
javascript jscroll模拟html元素滚动条
2012/12/18 Javascript
js/html光标定位的实现代码
2013/09/23 Javascript
javaScript arguments 对象使用介绍
2013/10/18 Javascript
JavaScript中的操作符==与===介绍
2014/12/31 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
2015/03/04 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
2016/02/15 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
2016/10/10 Javascript
ajax级联菜单实现方法实例分析
2016/11/28 Javascript
Bootstrap CSS布局之表单
2016/12/17 Javascript
js手机号批量滚动抽奖实现代码
2020/04/17 Javascript
详解使用create-react-app快速构建React开发环境
2018/05/16 Javascript
Vue中实现权限控制的方法示例
2019/06/07 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
聊聊vue 中的v-on参数问题
2021/01/29 Vue.js
[01:18:36]LGD vs VP Supermajor 败者组决赛 BO3 第一场 6.10
2018/07/04 DOTA
对Python 检查文件名是否规范的实例详解
2019/06/10 Python
anaconda中更改python版本的方法步骤
2019/07/14 Python
Jupyter Notebook输出矢量图实例
2020/04/14 Python
keras实现图像预处理并生成一个generator的案例
2020/06/17 Python
解决Pyinstaller打包软件失败的一个坑
2021/03/04 Python
牦牛毛户外探险服装:Kora
2019/02/08 全球购物
德国、奥地利和瑞士最大的旅行和度假门户网站:HolidayCheck
2019/11/14 全球购物
英语专业毕业生自荐信
2013/10/28 职场文书
高校毕业生登记表自我鉴定
2013/11/03 职场文书
大学生工作推荐信范文
2013/12/02 职场文书
优秀的毕业生的自我评价
2013/12/12 职场文书
工会主席岗位责任制
2014/02/11 职场文书
个人安全承诺书
2014/05/22 职场文书
小学校本培训方案
2014/06/06 职场文书
Memcached介绍及php-memcache扩展安装
2021/04/01 PHP