jQuery使用手册之三 CSS操作


Posted in Javascript onMarch 24, 2007

传统javascript对css的操作相当繁琐,比如<div id="a" style="background:blue">css</div>取它的background语法是 document.getElementById("a").style.background,而jQuery对css更方便的操作,$("#a").background(),$("#a").background(“red”)
$("#a")得到jQuery对象[ <div id="a" … /div> ]
$("#a").background()将取出该对象的background样式。
$("#a").background(“red”)将该对象的background样式设为redjQuery提供了以下方法,来操作css
background ()   background (val)     color()    color(val)     css(name)    css(prop)   
css(key, value)      float()   float(val)   height()   height(val)  width()  width(val) 
left()   left(val)       overflow()   overflow(val)   position()   position(val)  top()   top(val)


这里需要讲解一下css(name)  css(prop)  css(key, value),其他的看名字都知道什么作用了!

<div id="a" style="background:blue; color:red">css</div><id="b">test</P>

css(name)  获取样式名为name的样式
$("#a").css("color") 将得到样式中color值red,("#a").css("background ")将得到blue

css(prop)  prop是一个hash对象,用于设置大量的css样式
$("#b").css({ color: "red", background: "blue" });
最终效果是<p id="b" style="background:blue; color:red">test</p>,{ color: "red", background: "blue" },hash对象,color为key,"red"为value,

css(key, value)  用于设置一个单独得css样式
$("#b").css("color","red");最终效果是<p id="b" style="color:red">test</p>

                                              :JavaScript处理

$.browser()  判断浏览器类型,返回boolen值

$(function(){
    
if($.browser.msie) {
        alert(
"这是一个IE浏览器");}
    
else if($.browser.opera) {
        alert(
"这是一个opera浏览器");}
})
当页面载入式判断浏览器类型,可判断的类型有msie、mozilla、opera、safari

$.each(obj, fn)  obj为对象或数组,fn为在obj上依次执行的函数,注意区分$().each()

$.each( [0,1,2], function(i){ alert( "Item #" + i + "" + this ); });
    分别将0,1,2为参数,传入到function(i)中
$.each({ name: "John", lang: "JS" },  function(i){ alert( "Name: " + i + ", Value: " + this );
    { name: "John", lang: "JS" }为一个hash对象,依次将hash中每组对象传入到函数中

$.extend(obj, prop)  用第二个对象扩展第一个对象

var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
$.extend(settings, options);
执行后settings对象为{ validate: true, limit: 5, name: "bar" }
可以用下面函数来测试
$(function(){
       
var settings = { validate: false, limit: 5, name: "foo" };
        
var options = { validate: true, name: "bar" };
        $.extend(settings, options);
        $.each(settings,  
function(i){ alert( i + "=" + this ); });
})

$.grep(array,fn)  通过函数fn来过滤array,将array中的元素依次传给fn,fn必须返回一个boolen,如fn返回true,将被过滤
$(function(){
        
var arr= $.grep( [0,1,2,3,4], function(i){ return i > 2; });
        $.each(arr, 
function(i){ alert(i); });
})
我们可以看待执行$.grep后数组[0,1,2,3,4]变成[0,1]

$.merge(first, second)  两个参数都是数组,排出第二个数组中与第一个相同的,再将两个数组合并

$(function(){ 
        
var arr = $.merge( [0,1,2], [2,3,4] )
        $.each(arr,  
function(i){ alert(i); });
})
可以看出arr的结果为[0,1,2,3,4]

$.trim(str)  移出字符串两端的空格
    $.trim("   hello, how are you?   ")的结果是"hello, how are you?"

                                   :动态效果

       在将这部分之前我们先看个例子,相信做网页的朋友都遇到n级菜单的情景,但点击某菜单按钮时,如果它的子菜单是显示的,则隐藏子菜单,如果子菜单隐藏,则显示出来,传统的javascript做法是先用getElementById取出子菜单所在容器的id,在判断该容器的style.display是否等于none,如果等于则设为block,如果不等于这设为none,如果在将效果设置复杂一点,当点击按钮时,不是忽然隐藏和显示子菜单,而是高度平滑的转变,这时就要通过setTimeout来设置子菜单的height了,再复杂一点透明度也平滑的消失和显现,这时显现下来需要编写很多代码,如果js基础不好的朋友可能只能从别人写好的代码拿过来修改了!jQuery实现上面效果只需要1句话就行,$("#a").toggle("slow"),,学完jQuery后还需要抄袭修改别人的代码吗?下面我们逐个介绍jQuery用于效果处理的方法。

hide()  隐藏匹配对象

<id="a">Hello Again</p><href="#" onClick=' ("#a").hide()'>jQuery</a>
当点击连接时,id为a的对象的display变为none。

show() 显示匹配对象

hide(speed)  以一定的速度隐藏匹配对象,其大小(长宽)和透明度都逐渐变化到0,speed有3级("slow", "normal",  "fast"),也可以是自定义的速度。

show(speed)  以一定的速度显示匹配对象,其大小(长宽)和透明度都由0逐渐变化到正常

hide(speed, callback)  show(speed, callback) 当显示和隐藏变化结束后执行函数callback

toggle()    toggle(speed) 如果当前匹配对象隐藏,则显示他们,如果当前是显示的,就隐藏,toggle(speed),其大小(长宽)和透明度都随之逐渐变化。

jQuery使用手册之三 CSS操作<img src="1.jpg" style="width:150px"/>
jQuery使用手册之三 CSS操作
<href="#" onClick='$("img").toggle("slow")'>jQuery</a>

fadeIn(speeds)   fadeOut(speeds)  根据速度调整透明度来显示或隐藏匹配对象,注意有别于hide(speed)和show(speed),fadeIn和fadeOut都只调整透明度,不调整大小
<img src="1.jpg" style="display:none"/><href="#" onClick='$("img ").fadeIn("slow")'> jQuery </a>
点击连接后可以看到图片逐渐显示。

fadeIn(speed, callback)  fadeOut(speed, callback)   callback为函数,先通过调整透明度来显示或隐藏匹配对象,当调整结束后执行callback函数

<img src="1.jpg"/>
<href="#" onClick='$("img ").fadeIn("slow",function(){ alert("Animation Done."); })'> jQuery </a>
点击连接后可以看到图片逐渐显示,显示完全后弹出对话框

fadeTo(speed, opacity, callback)  将匹配对象以speed速度调整倒透明度opacity,然后执行函数callback。Opacity为最终显示的透明度(0-1).

<img src="1.jpg"/><br>
<href="#" onClick='$("img ").fadeTo("slow",0.55,function(){ alert("Animation Done."); })'> jQuery </a>
大家可以看一下自己看看效果,如果不用jQuery,编写原始javascript脚本可能很多代码!

slideDown(speeds)  将匹配对象的高度由0以指定速率平滑的变化到正常!

<img src="1.jpg" style="display:none"/>
<href="#" onClick='$("img ").slideDown("slow")'>jQuery</a>

slideDown(speeds,callback)  将匹配对象的高度由0变化到正常!变化结束后执行函数callback

slideUp("slow")  slideUp(speed, callback) 匹配对象的高度由正常变化到0

slideToggle("slow") 如果匹配对象的高度正常则逐渐变化到0,若为0,则逐渐变化到正常
Javascript 相关文章推荐
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
Nov 14 Javascript
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
Jul 31 Javascript
jquery操作select大全
Apr 25 Javascript
在JavaScript中判断整型的N种方法示例介绍
Jun 18 Javascript
javascript原型模式用法实例详解
Jun 04 Javascript
js实现网页收藏功能
Dec 17 Javascript
javascript 数组去重复(在线去重工具)
Dec 17 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
Feb 13 Javascript
Vue修改mint-ui默认样式的方法
Feb 03 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
Mar 06 Javascript
Javascript实现鼠标点击冒泡特效
Dec 24 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
Sep 10 Javascript
jQuery使用手册之二 DOM操作
Mar 24 #Javascript
jQuery使用手册之一
Mar 24 #Javascript
5 cool javascript apps
Mar 24 #Javascript
用JQuery 实现的自定义对话框
Mar 24 #Javascript
JQuery 简便实现页面元素数据验证功能
Mar 24 #Javascript
AutoSave/自动存储功能实现
Mar 24 #Javascript
用 javascript 实现的点击复制代码
Mar 24 #Javascript
You might like
php 获取可变函数参数的函数
2009/08/26 PHP
fetchAll()与mysql_fetch_array()的区别详解
2013/06/05 PHP
php实现图片按比例截取的方法
2017/02/06 PHP
php 实现简单的登录功能示例【基于thinkPHP框架】
2019/12/02 PHP
最简单的jQuery程序 入门者学习
2009/07/09 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
JavaScript中json对象和string对象之间相互转化
2012/12/26 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
2014/09/01 Javascript
JavaScript Function函数类型介绍
2015/04/08 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
2015/05/03 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
js实现遍历含有input的table实例
2015/12/07 Javascript
详解js中class的多种函数封装方法
2016/01/03 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
2016/09/05 Javascript
实例解析jQuery中如何取消后续执行内容
2016/12/01 Javascript
JavaScript函数中的this四种绑定形式
2017/08/15 Javascript
jQuery动态移除与增加onclick属性的方法详解
2018/06/07 jQuery
原生JS实现的轮播图功能详解
2018/08/06 Javascript
Vue中引入svg图标的两种方式
2021/01/14 Vue.js
[01:00]选手抵达华西村 整装待发备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
使用python 获取进程pid号的方法
2014/03/10 Python
python 字典(dict)遍历的四种方法性能测试报告
2014/06/25 Python
详解Python中break语句的用法
2015/05/14 Python
Python聚类算法之DBSACN实例分析
2015/11/20 Python
python OpenCV学习笔记实现二维直方图
2018/02/08 Python
Anaconda2 5.2.0安装使用图文教程
2018/09/19 Python
详解Python二维数组与三维数组切片的方法
2019/07/18 Python
英国知名奢侈品包包品牌:Milli Millu
2016/12/22 全球购物
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
自我鉴定的范文
2013/10/03 职场文书
倡议书格式模板
2014/05/13 职场文书
2014大学生中国梦主题教育学习思想汇报
2014/09/10 职场文书
2014大学生学生会工作总结
2014/12/19 职场文书
信访工作个人总结
2015/03/03 职场文书
2015年创先争优活动总结
2015/03/27 职场文书
JS前端轻量fabric.js系列之画布初始化
2022/08/05 Javascript