当前位置: 首页 > 图文教程 > 网络编程 > Javascript > jQuery 中关于CSS操作部分使用说明

Javascript
Dhtml:浏览大图时鼠标感应控制层滚动条的移动
初试javascript :贪吃蛇啊
只让输入数字的输入框
只能输入汉字的输入框
在JS中定义数组删除方法
在网页中使用realplayer播放rm文件
用层实现为网页中的图添加水印的效果
所见即所得编辑器 aynHTML 大全:(一)如何部署、嵌入、装载动态内容
JavaScript 收集的两个小代码!
JScript中正则表达函数的说明与应用
网页上内容导出到word里
关于开发在线网页编辑器按回车会输入<p>而不是<br>的解决方法
OOP In JS [JS脚本中的面向对象]
一个很通用的javascript的下拉菜单
将金额小写转化成汉字大写
VML Chart 控件
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
Javascript实例教程(21) OLE Automation(4)
javascript进行客户端数据的校验
JavaScript 小技巧(第三集)

Javascript 中的 jQuery 中关于CSS操作部分使用说明


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 44 ::
收藏到网摘: n/a

刚刚看了下jQuery的源代码,其中关于CSS及className的操作思想确实很不错,值得借鉴。
其中关于jQuery.className.has的定义部分,是用的正则来实现的,其实此处直接利用Javascript中String对象的indexOf方法来作处理的话,比用正则效率会更些,因此
复制代码 代码如下:

jQuery.className.has的定义可以改进成:
has: function( t, c ) {
t = t.className || t;
t = " " + t + " ";
c = " " + c + " ";
return t.indexOf(c)>-1;
}

原代码中关于CSS及className的操作部分节选如下:
复制代码 代码如下:

className: {
// internal only, use addClass("class")
add: function( elem, c ){
jQuery.each( c.split(/\s+/), function(i, cur){
if ( !jQuery.className.has( elem.className, cur ) )
elem.className += ( elem.className ? " " : "" ) + cur;
});
},
// internal only, use removeClass("class")
remove: function( elem, c ){
elem.className = c ?
jQuery.grep( elem.className.split(/\s+/), function(cur){
return !jQuery.className.has( c, cur );
}).join(" ") : "";
},
// internal only, use is(".class")
has: function( t, c ) {
t = t.className || t;
// escape regex characters
c = c.replace(/([\.\\\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:])/g, "\\$1");
return t && new RegExp("(^|\\s)" + c + "(\\s|$)").test( t );
}
},
swap: function(e,o,f) {
for ( var i in o ) {
e.style["old"+i] = e.style[i];
e.style[i] = o[i];
}
f.apply( e, [] );
for ( var i in o )
e.style[i] = e.style["old"+i];
},
css: function(e,p) {
if ( p == "height" || p == "width" ) {
var old = {}, oHeight, oWidth, d = ["Top","Bottom","Right","Left"];
jQuery.each( d, function(){
old["padding" + this] = 0;
old["border" + this + "Width"] = 0;
});
jQuery.swap( e, old, function() {
if (jQuery.css(e,"display") != "none") {
oHeight = e.offsetHeight;
oWidth = e.offsetWidth;
} else {
e = jQuery(e.cloneNode(true))
.find(":radio").removeAttr("checked").end()
.css({
visibility: "hidden", position: "absolute", display: "block", right: "0", left: "0"
}).appendTo(e.parentNode)[0];
var parPos = jQuery.css(e.parentNode,"position");
if ( parPos == "" || parPos == "static" )
e.parentNode.style.position = "relative";
oHeight = e.clientHeight;
oWidth = e.clientWidth;
if ( parPos == "" || parPos == "static" )
e.parentNode.style.position = "static";
e.parentNode.removeChild(e);
}
});
return p == "height" ? oHeight : oWidth;
}
return jQuery.curCSS( e, p );
},
curCSS: function(elem, prop, force) {
var ret;
if (prop == "opacity" && jQuery.browser.msie)
return jQuery.attr(elem.style, "opacity");
if (prop == "float" || prop == "cssFloat")
prop = jQuery.browser.msie ? "styleFloat" : "cssFloat";
if (!force && elem.style[prop])
ret = elem.style[prop];
else if (document.defaultView && document.defaultView.getComputedStyle) {
if (prop == "cssFloat" || prop == "styleFloat")
prop = "float";
prop = prop.replace(/([A-Z])/g,"-$1").toLowerCase();
var cur = document.defaultView.getComputedStyle(elem, null);
if ( cur )
ret = cur.getPropertyValue(prop);
else if ( prop == "display" )
ret = "none";
else
jQuery.swap(elem, { display: "block" }, function() {
var c = document.defaultView.getComputedStyle(this, "");
ret = c && c.getPropertyValue(prop) || "";
});
} else if (elem.currentStyle) {
var newProp = prop.replace(/\-(\w)/g,function(m,c){return c.toUpperCase();});
ret = elem.currentStyle[prop] || elem.currentStyle[newProp];
}
return ret;
},

附录:
jQuery官方网站:http://jquery.com/
jQuery源码下载:http://docs.jquery.com/Downloading_jQuery
jQuery API文档:http://docs.jquery.com/Main_Page
jQuery 中国:http://jquery.org.cn/
VisualJQuery.com : http://visualjquery.com/