刚才在做内外发光(内外阴影)的一些效果时,突然间发现了一种很好看效果,就是只有border-bottom的内发光效果。

其具体css代码如下

 border-bottom:1px solid #414141;
 behavior:url(css/PIE.htc);
 box-shadow:0 0 8px #FFF;
 background: #000;

只设border-bottom,然后设box-shadow,用background是为了遮掩上一条shadow的下半面,behavior是为了兼容IE。由于时间问题,笔者没能测试其他效果。如果想要其他效果的友友们,可以自己增删改一些属性值,其中box-shadow还可以加上inset这个值哟。

 

<script type=”text/javascript”>
//变量
var i = ‘I am a string’;
console.log(‘变量:’,i);

//数组
var arr = [1,2,3,4,5];
console.log(‘数组:’,arr);

//对象
var obj1 = {
key1 : ‘value1′,
key2 : ‘value2′,
key3 : ‘value3′
};
var obj2 = {
key6 : ‘value4′,
key5 : ‘value5′,
key4 : ‘value6′
};
var obj3 = {
key9 : ‘value7′,
key8 : ‘value8′,
key7 : ‘value9′
};

console.log(‘对象:’,obj1);
//对象数组
var objArr1 = [obj1,obj2,obj3];
var objArr2 = [[obj1],[obj2],[obj3]];

console.log(‘对象数组1:’,objArr1);
console.log(‘对象数组1:’,objArr2);
</script>

 

输出:

变量:I am a string
数组:[1, 2, 3, 4, 5]
 

jQuery 基本选择器

  jQuery选择器的符号与CSS样式表选择器一样,id使用#,class使用.,html选择器直接使用标签,如div,td等,还有其他多种选择器,后面会陆续介绍到。

[ id 选择器]

原本在JavaScript下,要想选择一个id=“aa”的需要这样:document.getElementById(“aa”); 才能获取到aa这个对象,而通过jQuery选择器,只需这样:$(“#aa”)  就获取到了id为aa的对象,从而就可以对它进行操作,十分的方便。也是我使用最频繁的一个选择器。

如果查找含有特殊字符的元素,如:
<span id=”aa:bb”></span>
<span id=”aa[bb]“></span>
<span id=”aa.bb”></span>

就需要使用反斜杠来进行字符的转义了,以上三个例子就需要这样获取到对应的对象:

$(“#aa\\:bb”)
$(“#aa\\[bb\\]“)
$(“#aa\\.bb”)
这样才能通过ID正确获取到该对象。如果存在多个id相同的对象,则只会匹配到第一次出现的。

[ class 选择器 ]

  使用上与id选择器差不多,只是id用的是“ # ”而class选择器使用的就是“ . ”,只要class相同的,就能被匹配到,如:
<div class=’notSelect’>不选择我</div>
<span class=’selectMe’>选择我</div>
<p class=’selectMe’>也选我</p>
使用$(“.selectMe”)将会匹配到<span class=’selectMe’>选择我</div> 与 <p class=’selectMe’>也选我</p>

[ * 选择器 ]

$(“*”)将会匹配到网页中所有的元素,我个人是没用过这个,因为好像用不到这种,不过了解下也好。

[ HTML 选择器 ]

如果需要选择网页中出现的所有div,则可以通过这种方式进行选择 $(“div”) ,用的也比较少,css中倒是经常这么来编辑样式,不过jQuery这种方式选择,是不是说可以用来整体修改某中html标签的整体样式?有空可以尝试一下。

[ 同时选择多种元素 ]

最后这种应该算是比 * 选择器范围小点的了,它可以选择多个元素,然后一起返回,用法是$(“#id,p.myClass,div,span,td”)

中间用“ , ”分开,就会将id为id的,class=”myClass”的p标记,还有div,span,td都匹配到,并且返回。十分的牛X。

 

 

jQuery 索引值选择器

索引值都是从 0 开始的。也是非常有用的一种选择器。比如想让表格奇偶行显示不同的颜色,则可以使用索引值选择器进行操作。

[ :first 选择器 ] [ :last 选择器 ]

<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
比如上面的html代码,我们需要查找到第一行的元素对象,则可以通过这样获取 $(“tr:first”) 就可以获得
<tr><td>Header 1</td></tr>
使用 $(“tr:last”) 就可以获取到 <tr><td>Value 2</td></tr> 元素对象

[ :not 选择器 ]

去除所有与给定选择器匹配的元素 在jQuery 1.3中,已经支持复杂选择器了,例如:not(div a) 和 :not(div,a)

查找所有未选中的 input 元素
<input name=”apple” />
<input name=”flower” checked=”checked” />
使用 $(“input:not(:checked)”) 得到 <input name=”apple” />

[ :even 偶选择器 ]  [ : odd  奇选择器 ]     奇偶选择器

<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>

奇偶选择器是从0开始计算的,如果需要选择上面表格的偶行,则使用 $(“tr:even”) 选中
<tr><td>Header 1</td></tr> 与 <tr><td>Value 2</td></tr>
使用$(“tr:odd”) 选中   <tr><td>Value 1</td></tr>

[ :eq 索引选择器 ] 

<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>

索引选择器,也是从0开始,如果我要选择第二行,则使用 $(“tr:eq(1)”)即可获得  <tr><td>Value 1</td></tr>

[ :gt 比给定索引大 ] [ :lt 比给定索引小 ] 的选择器

<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>

$(“tr:gt(0)”) 将匹配  <tr><td>Value 1</td></tr> 与 <tr><td>Value 2</td></tr>  选择比给定索引为 0 大的元素

$(“tr:lt(2)”) 将匹配  <tr><td>Header 1</td></tr> 与 <tr><td>Value 1</td></tr>  选择比给定索引为 2 小的元素

[ :header 标题元素选择器 ]

<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>

如果要选择h1,h2元素,则使用 $(“:header”) 即可获得 <h1>Header 1</h1> 与 <h2>Header 2</h2>元素,从而对它们进行操作,可以修改背景,或者字体等。

[ :animated 正在执行动画元素 选择器 ]

没用过这种选择器,API上介绍说是:只有对不在执行动画效果的元素执行一个动画特效。一个页面内,没动画的元素多了去了,如果都执行动画,那不卡死,不过通过这个选择器与其它选择器结合,倒是能执行很多功能。API实例:
<button id=”run”>Run</button><div></div>
执行如下代码:
$(“#run”).click(function(){
$(“div:not(:animated)”).animate({ left: “+=20″ }, 1000);
});
实现的效果,每1秒钟,不在执行动画的div元素向右移动20像素。

 

 

jQuery 层级选择器

一般情况下,通过上面的选择器,灵活的运用,就已经能方便,快捷的找到自己所需的绝大部分的元素了,但是,还有一些特殊情况下,可能通过上面的查找方式不太适合,并且效率上有所欠缺,所以我们还要了解层级选择器的用法,这样才能更方便,更高效的让jQuery为我们服务。

[ 先人 后代选择器 ]

先来看看实例:

<div>
<a href=’chengwei2009.blog.163.com’ >snail的博客</a>
<span>Snail的博客</span>
<input type=’text’ name=’txtName’ value=’Snail_博客’ />
<a href=’chengwei2009.blog.163.com’ >依然是snail的博客</a>
</div>
<a href=’chengwei2009.blog.163.com’ >还是snail的博客</a>

这时,如果这么使用选择器 $(“div a”)将会选择到
<a href=’chengwei2009.blog.163.com’ >snail的博客</a> 与 <a href=’chengwei2009.blog.163.com’ >依然是snail的博客</a>
比起$(“a”)将所有a标记都选中,范围小了很多,通过这种方式,我们可以选择某类或者某个id区域内的某种或者某个元素,先选中了“先人”,再去找它的“后代”,而不会盲目的查找全文,也是很有用的,比如说清空一个form中的input,如果不使用rest按钮,就可以使用这种方式来进行清除数据。

[ 父 > 子 选择器 ]

定义为:在给定的父元素下匹配所有的子元素。先看一个实例:

<div id =”parent”>
<div>小儿子</div>
<div>大儿子
<div>孙子</div>
<div>孙女</div>
</div>
</div>

如果使用:$(“#parent > div”) 则只会匹配到<div>小儿子</div> 与 <div>大儿子</div> 不会再选择到“孙子”与“孙女”,当然,你要是通过大儿子,再去找孙子,孙女,是另外一回事。

[ 前 +  后 选择器 ]

格式 $(“prev + next”)   其中prev为:任何有效选择器,next为:一个有效选择器,并且紧跟在着第一个选择器后面,API文档上面的例子:
<form>
<label>Name:</label>
<input name=”name” />
<fieldset>
<label>Newsletter:</label>
<input name=”newsletter” />
</fieldset>
</form>
<input name=”none” />
使用 $(“label + input”),将得到 <input name=”name” /> 与 <input name=”newsletter” />

[ 前 ~ 同辈 选择器 ]

格式 $(“prev ~ siblings”)    其中prev为:任何有效选择器,siblings 一个选择器,并且它作为prev选择器的同辈,API文档例子:

找到所有与表单同辈的 input 元素
<form>
<label>Name:</label>
<input name=”name” />
<fieldset>
<label>Newsletter:</label>
<input name=”newsletter” />
</fieldset>
</form>
<input name=”none” />
使用 $(“form ~ input”)选择器,查找到的结果为:<input name=”none” />

 

刚才在做项目的时候,有个地方需要获取某元素的高度值,所以就自己写了一个函数,请高手们指点。

H.DOM.getHeight = function(node){
	var height,arr;
	if(typeof node == "string"){
		nodeStr = node.toString().substr(1);
		if(node.match(/^#/)){
			node = document.getElementById(nodeStr);
		}else{
			node = H.DOM.getElementsByClassName(nodeStr)[0];
		}
	}
	if(document.all){
		height = node.currentStyle.height;
	}else{
		height = window.getComputedStyle(node,null).height;
	}
	if(height == "auto"){
		return null;
	}else{
		arr = height.toString().split("px");
		height = parseInt(arr[0]);
		return height;
	}
}

第一行可以不用管,是我用了命名空间而已。

第一个if,判断node是从外面传进来的值还是自己输入的id或className。
ps:

node = H.DOM.getElementsByClassName(nodeStr)[0];

是我自己写的一个getElementsByClassName()函数,详见http://hedgehogking.com/?p=203

第二个if,判断浏览器是否为IE,然后利用currentStyle和getComputedStyle兼容各种浏览器,获取元素高度

第三个if,当元素没有设定高度时,在IE下,其值为auto,其他浏览器则可以正常读取。

想问一下高手,当其值为auto时,有办法获取其确定值吗?ps:元素里面的内容也没定高度,或者只有文字。(答:用offsetHeight)

以下是经过改进后的,提高了重用性的模版。有很多不足之处,请斧正。

//获取元素的style属性的数字值(带px单位)
//node --> id or className	格式: "#id" or ".className"
//prop --> style的属性名
H.DOM.getNumVal = function(node,prop){
	var val,arr;
	if(typeof node == "string"){
		nodeStr = node.toString().substr(1);
		if(node.match(/^#/)){
			node = document.getElementById(nodeStr);
		}else{
			node = H.DOM.getElementsByClassName(nodeStr)[0];
		}
	}
	if(document.all){
		val = node.currentStyle[prop];
	}else{
		val = window.getComputedStyle(node,null)[prop];
	}
	if(val == "auto"){
		return "auto";
	}else{
		arr = val.toString().split("px");
		val = parseInt(arr[0]);
		return val;
	}
}
 

浏览器支持方面:

支持:firefox 4+ ; opera 11+ ; chrome 10+ ; safari 5+;
不支持:IE系列, firfox 3.6

由于各大现代浏览器Firefox,Safari,Chrome,Opera都还不支持W3C的标准写法,所以一般都一起写:

-moz-transition: // Firefox 4
-webkit-transition: // Safari
-o-transition: // Opera
transition: //官方标准

属性:

transition-property(变换的属性)
transition-duration(持续时间)
transition-timing-function(动画效果)
transition-delay(延迟时间)

transition-property——用于检索或设置对象中的参与变换的属性
属性值有3类

  • transition-property:all; 表示所有可以进行变换的css属性,也是transition-property属性的默认值
  • transition-property:none; 不指定变换的css属性,当属性值为none时,动画立即停止
  • transition-property:某一具体的属性值; 如color,写法:transition-property:color 表示具体要进行变换的css属性

transition-duration——指定对象变换的持续时间,也可以理解为整个过程需要的时间,常用单位为秒(s)和毫秒(ms), 默认值为0

transition-timing-function——检索或设置对象中变换的动画类型
属性值有6种

  • linear:线性变换。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)(点击了解什么是贝赛尔曲线)
  • ease:平滑变换。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0). ease也是transition-timing-function属性的默认值
  • ease-in:由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
  • ease-out:由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
  • ease-in-out:由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
  • cubic-bezier(, , , ):特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内
    查看动画效果demo

transition-delay——指定对象变换的延迟时间,常用单位为秒(s)和毫秒(ms), 默认值为0

单个属性有多个值存在时,用逗号进行分割,如:
transition-timing-function:ease,ease-in,ease-out;

简例:
-webkit-transition:background-color 2s ease 0,color 3s ease 0;
-moz-transition:background-color 2s ease 0,color 3s ease 0;
-o-transition:background-color 2s ease 0,color 3s ease 0;
transition:background-color 2s ease 0,color 3s ease 0;

一般是通过CSS中的伪类来让一些元素产生简单的交互状态(就像a标签的那些伪类love hate),以方便我们在不同状态时使用transition来达到动画效果。
但是需要注意的是,并不是所有的伪类都能起作用

Hedgehog’s Blog–>鼠标移到这里背景会变颜色

引自:http://xiep.net/2011/06/14/css3-transition.html/

 

当容器里面所有的子容器都float了,容器的高度不会随着内容的增多而增大,这个时候就需要清除浮动了。

.clearfix:after{ content: "."; display:block; height:0; clear:both; visibility:hidden;}
.clearfix{display:inline-block;}
*html.clearfix{ height:1%;}
.clearfix{ display:block;}

清除浮动有很多种方法,其中上面这一段是笔者在《编写高质量代码–Web前端开发修炼之路》一书中学到的,既不影响布局,也不增加无意义的标签,破坏语义化。

而下面这个是网上搜回来的,简洁一点。

.clearfix:before,.clearfix:after{ content:""; display:table;} .clearfix:after{ clear:both;} .clearfix{ zoom:1;}

以上的方法是笔者觉得清除浮动最好的方法。笔者测试过没问题。

至于第二个,为什么要用before还不知道,因为笔者尝试过把它删除掉,但是效果还是可以做到clear,而且效果跟有写before是一样的(如下)。所以如果有知情人请爆一下料。

.clearfix:after{ content:""; display:table; clear:both;} .clearfix{ zoom:1;}
 

刚刚想用css写个三角形出来,可是在IE6下transparent却是黑色,在网上找了一下,解决方法是这样的

<div style="width:0px; height:0px; overflow:hidden; border-top:100px solid #f00;
 border-left:100px solid transparent; _border-left:100px solid white;
_filter:chroma(color=white);"></div>

transparent——透明色(ie6 例外)
overflow——ie6下被拉得很高
white——白色
_filter:chroma(color=white)——css 滤镜,透明色

如此,理论上是可以的。但是可能这边测试时IEtest出了问题,IE6下对滤镜没反应,所以一下只能用背景色(白色)代替了。能做出效果的朋友请留个言,谢谢哈!

要写出其他的形状,可以看看这里http://css-tricks.com/examples/ShapesOfCSS/

 
<style id="sss">
.movementdiv
{
        position:absolute;
        border:slategray 2px solid;
        padding:0;
        z-index:1;
        margin:0;
}
</style>

在IE里面,js代码:
var obj = document.getElementById(“sss”);
obj.styleSheet.rules[0].style.width = 100;
obj.styleSheet.rules[0].style.height = 100;
就可以把页面中所有class为“movementdiv”的div都改成长100px;宽100px;

firefox里面不能用ID取得,只能通过document来取得: 这样OK~
document.styleSheets[0].cssRules[0].style.width = 100;
document.styleSheets[0].cssRules[0].style.height = 100;

 

今天写了一个getNextSibling()函数,不单只适合通过id来获取,而且还可以通过class来获取,不过前提是要再写一个getElementsByClassName(),因为原生的js是没有getElementsByClassName()。

HTML代码

<div class="a" id="aa"><p id="p">1</p></div>
<div id="b">2</div>
<div id="c" onclick="check()">3</div>

javascript代码

function getElementsByClassName(str,root,tag){//自定义封装getElementsByClassName()函数
	if(root){
		root = typeof root == "string" ? document.getElementById(root) : root;
	}else{
		root = document.body;
	}
	var tag = tag || "*";
	var ele = root.getElementsByTagName(tag) , arr=new Array();
	for(var i = 0 , k = ele.length ; i < k ; i++ ){
		for(var j = 0 , l = ele[i].className.split(" ") ; j < l.length ; j++){
			if(str == l[j]){
				arr.push(ele[i]);
				break;
			}
		}
	}
	return arr;
}
function getNextSibling(node){/*自定义封装getNextSibling()函数,
                                输入参数node必须带"."的className或带"#"的id*/
	if(typeof node == "string"){
		if(node.match(/^#/)){
			var nodestr = node.toString().substr(1);
			node = document.getElementById(nodestr);
		}else{
			var nodestr = node.toString().substr(1);
			node = getElementsByClassName(nodestr)[0];
		}
	}
	var nextNode = node.nextSibling;
	if(!nextNode) return null;
	if((nextNode.nodeType != 1) && (nextNode.nextSibling)){
		nextNode = nextNode.nextSibling;
	}
	return nextNode;
}
function check(){
	alert(getNextSibling("#aa").id)
}
 

通过className来获取html元素是很方便的,所以基本上任何js库都会有getElementsByClassName()函数。

但是原生的js并不支持getElementsByClassName(),那当我们不使用任何js库的时候怎么办呢?唯有自己写一个getElementsByClassName()函数出来。注意:自定义的getElementsByClassName()函数不能用document

function getElementsByClassName(str,root,tag){//自定义封装getElementsByClassName()函数
	if(root){
		root = typeof root == "string" ? document.getElementById(root) : root;
	}else{
		root = document.body;
	}
	var tag = tag || "*";
	var ele = root.getElementsByTagName(tag) , arr=new Array();
	for(var i = 0 , k = ele.length ; i < k ; i++ ){
		for(var j = 0 , l = ele[i].className.split(" ") ; j < l.length ; j++){
			if(str == l[j]){
				arr.push(ele[i]);
				break;
			}
		}
	}
	return arr;
}
© 2012 Hedgehog Suffusion theme by Sayontan Sinha