`

jQuery之css

阅读更多
jQuery W3C文档
http://www.w3school.com.cn/jquery/index.asp
从零开始学习jQuery(4)-使用jQuery操作元素的属性与样式
http://www.cnblogs.com/tinawan/archive/2010/11/10/1874065.html
从零开始学习jQuery(3)-jQuery包装集
http://www.cnblogs.com/tinawan/archive/2010/11/10/1873837.html
jQuery 拥有三种用于 CSS 操作的重要函数:
    $(selector).css(name,value)
    $(selector).css({properties})
    $(selector).css(name)

具体代码如下:
CSS
<style type="text/css">
		.panel {
			margin-left:25%;
			margin-top:5%;
		    padding: 60px;
		    background-color: red;
		    color: #FFFFFF;
		    font-size:50px;
		    font-weight: bold;
		    width: 600px;
		    text-align:center;
		}
		
		.foo{
			background-color:lime;
			border: 13px solid #345355;
		}
		.divClick{
			margin-left:25%;
			margin-top:5%;
		    padding: 60px;
		    background-color: green;
		    color: #000000;
		    font-size:50px;
		    font-weight: bold;
		    width: 600px;
		    text-align:left;
		}
		input{
			margin-left:25%;
			margin-top:10px;			
		}
		</style>

jQuery
<script src="../scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
		<script type="text/javascript" >
		$(function(){
			//如有多个可:eq(1)...
		   //元素选择器
		   /*
		   $("input:button").eq(0).bind("click",function(){
		   	   $(".panel").addClass("divClick");
		   });		   
		   $("input:button").eq(1).bind("click",function(){
		   	   $(".panel").toggleClass("divClick");
		   });
		   $("input:button").eq(2).bind("click",function(){
		   	   $(".panel").removeClass("divClick");
		   });
		   */
		   
		   $("input:button").eq(0).bind("click",function(){
		   	   //加上div提高访问速度
		   	   $("div.panel").addClass("divClick");
		   	  //$(".panel").addClass("divClick");
		   }).end()//返回所有按钮
		   .eq(1).click(function(){//绑定第一个按钮事件
		   	   $("div.panel").toggleClass("divClick");
		   }).end().eq(2).click(function(){
		   	   $("div.panel").removeClass("divClick");
		   }).end().eq(3).click(function(){
		   	  $("div.panel").removeClass();
		   }).end().eq(4).click(function(){
		   	   $("div").eq(0).addClass("panel");
		   }).end().eq(5).click(function (){
		   	  $("div.panel").css("display","none");
		   }).end().eq(6).click(function(){
		   	   $("div.panel").css("display","");
		   	  // $("div.panel").css("display","block");
		   }).end().eq(7).click(function(){
		   	   $("div.panel").addClass("foo");
		   }).end().eq(8).click(function(){
		   	  $("div.panel").append("是否有clsass属性(foo): " + $("div.panel").hasClass('foo'));
		   }).end().eq(9).click(function(){
		   	   $("div.panel").css({"background-color":"#546456","font-size":"200%"});
		   }).end().eq(10).click(function(){
		   	   alert($("div.panel").css("background-color"));
		   });		   
		   
		});
		</script>

HTML
 <div class="panel">welcome to jQuery!</div>
        <input type="button" value="改变div的样式" /><br>
        <input type="button" value="切换div的样式" /><br>
        <input type="button" value="删除div的样式(divClick)" /><br>
        <input type="button" value="删除div的所有样式" /><br>
        <input type="button" value="添加div的样式(panel)" /><br>
        <input type="button" value="设置div的css的隐藏" /><br>
        <input type="button" value="设置div的css的显示" /><br>
        <input type="button" value="添加div的第二个Class属性(foo)" /><br>
        <input type="button" value="检查div的是否有Class属性(foo)" /><br>
        <input type="button" value="设置div的css属性:json方式" /><br>
        <input type="button" value="获取div的css属性:$(selector).css(name)方式" /><br>
分享到:
评论

相关推荐

    jQuery+css 流程图插件

    **jQuery+CSS流程图插件详解** 在网页开发中,流程图是一种常见且重要的可视化工具,用于展示逻辑步骤或工作流程。"jQuery+css 实现的单分支流程图插件"是一个利用JavaScript库jQuery和CSS样式来创建简单、动态流程...

    jQuery+CSS3做出IOS解锁屏幕特效.rar

    jQuery+CSS3做出IOS解锁屏幕特效.rar jQuery+CSS3做出IOS解锁屏幕特效.rar jQuery+CSS3做出IOS解锁屏幕特效.rar jQuery+CSS3做出IOS解锁屏幕特效.rar jQuery+CSS3做出IOS解锁屏幕特效.rar jQuery+CSS3做出IOS解锁...

    jQuery+CSS3实现动画相册代码.rar

    jQuery+CSS3实现动画相册代码.rar jQuery+CSS3实现动画相册代码.rar jQuery+CSS3实现动画相册代码.rar jQuery+CSS3实现动画相册代码.rar jQuery+CSS3实现动画相册代码.rar jQuery+CSS3实现动画相册代码.rar jQuery+...

    jquery css

    jquery css

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    2. jquery+css五屏焦点图淡入淡出+圆形按钮切换广告图片代码 3. jQuery+CSS实用图片收缩与放大效果插件 4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的...

    10个漂亮登录页面,jquery+css3

    10个漂亮登录页面,jquery+css310个漂亮登录页面,jquery+css310个漂亮登录页面,jquery+css310个漂亮登录页面,jquery+css310个漂亮登录页面,jquery+css310个漂亮登录页面,jquery+css3

    简洁时尚的jQuery和CSS3侧边栏菜单插件.rar

    简洁时尚的jQuery和CSS3侧边栏菜单插件.rar 简洁时尚的jQuery和CSS3侧边栏菜单插件.rar 简洁时尚的jQuery和CSS3侧边栏菜单插件.rar 简洁时尚的jQuery和CSS3侧边栏菜单插件.rar 简洁时尚的jQuery和CSS3侧边栏菜单插件...

    jQuery官网CSS样式复刻

    在本项目中,“jQuery官网CSS样式复刻”是一项旨在重现jQuery官方网站前端界面样式的实践任务。这个任务主要涉及五个核心技术领域:jQuery、CSS、JavaScript(包括ECMAScript)、HTML以及网页资源管理。下面我们将...

    jQuery+CSS3网页表单元素美化代码

    通过整合jQuery和CSS3的力量,开发者可以创建出既美观又实用的表单,提升用户在网站上的体验。无论是用于登录注册、搜索查询还是联系方式提交,这种美化方式都能让表单成为网页设计中的亮点,增加用户满意度。同时,...

    W3school,jquery,jquerymobile,css

    【标题】中的"W3school"、"jquery"、"jquerymobile"和"css"都是Web开发中的关键元素,它们代表了不同的技术栈和框架。以下是对这些知识点的详细阐述: **W3School**:这是一个非常知名的在线学习平台,提供丰富的...

    jquery+css3圆角动画导航

    【jQuery + CSS3 圆角动画导航】 在网页设计中,导航栏是用户与网站交互的重要部分,良好的导航设计能够提升用户体验。本示例“jquery+css3圆角动画导航”利用了JavaScript库jQuery和CSS3的新特性,为网页创建了一...

    jQuery和css3文章标题动画特效

    **jQuery和CSS3文章标题动画特效详解** 在网页设计中,动态效果往往能吸引用户的注意力,提高用户体验。本文将深入探讨如何使用jQuery和CSS3来创建丰富多样的文章标题动画特效,包括打印机效果、翻转效果、翻牌效果...

    Jquery+css3实现弹出层注册特效

    在网页设计和开发中,创建吸引用户的交互效果是至关重要的,而"Jquery+css3实现弹出层注册特效"就是一个实现这种效果的例子。这个项目结合了jQuery库的灵活性和CSS3的新特性,以创建一个动态且用户友好的注册表单。 ...

    jquery mobile css3手机表单页面布局按钮样式

    在移动应用开发中,jQuery Mobile 和 CSS3 是两个非常重要的技术。jQuery Mobile 是一个轻量级的框架,专为触摸设备设计,它提供了一套完整的组件和交互模式,包括表单、页面布局和按钮样式等。CSS3 则是新一代的CSS...

    jquery+css3控制音量调节

    本项目利用jQuery库、CSS3动画以及HTML5的Audio API来创建一个交互式的音量调节功能。以下是对这个项目的详细解析: 首先,jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画效果和Ajax交互。在这...

    jQuery+CSS3圆形布局卡牌滑动切换特效

    在本文中,我们将深入探讨如何使用jQuery和CSS3来创建一款圆形布局的卡牌滑动切换特效。这个特效适用于各种项目,例如展示产品、图片库或者动态内容展示,通过点击卡牌实现平滑的切换效果,给用户带来独特的交互体验...

    jquery.mobile css

    html5 开发 jquery.mobile.theme-1.4.5.min.css 样式表

    20种弹出层,弹窗 jQuery+CSS3 多功能弹出层插件v2.0.1

    《jQuery+CSS3多功能弹出层插件v2.0.1详解》 在Web开发中,弹出层(也称为对话框或模态窗口)是不可或缺的元素,它们用于显示重要的信息、提示用户确认操作或者提供交互式内容。本文将深入探讨一款名为“20种弹出层...

    jquery变换css样式

    jquery变换css样式,jquery方法

    jQuery和CSS3炫酷图片3D旋转幻灯片特效

    【jQuery和CSS3炫酷图片3D旋转幻灯片特效】是现代网页设计中一种吸引用户注意力的交互式元素,通常用于产品展示、图片画廊或动态内容展示。这种特效结合了JavaScript库jQuery和CSS3的新特性,为用户提供了一种三维...

Global site tag (gtag.js) - Google Analytics