Js与css零碎笔记1

js学习参考博客:http://www.cnblogs.com/wzmaodong

el表达式

<c:if test="${NonEasouDown_flag ne null }">

<div style="background:#D2ECED;font-size:16;60%;">非宜搜歌曲</div>

<div>

<p>

<table>

<c:if test="${nonEasouEntity ne null}">

<tr><td>歌曲名：</td><td><b>${nonEasouEntity.song}</b></td></tr>

<tr><td>歌手名：</td><td><b>${nonEasouEntity.songer}</b></td></tr>

<c:forEach var="items" items="${itemsList}" varStatus="vs">

<tr><td colspan="2"><a href="${items.downurl}">${items.filetype}</a></td></tr>

</c:forEach>

</c:if>

<c:if test="${nonEasouEntity eq null}"><tr><td colspan="2">暂无资源</td></tr></c:if>

</table>

</p>

</div>

</c:if>

jQuery.combobox, 给文本框添加下拉选项的轻量级插件

Description

jQuery.combobox is a lightweight jQuery plugin which transforms a textbox into a combobox, so users can enter text or select from supplied options.

It could be called more than once on the same textbox.

It would work with jQuery.bgiframe plugin to fix the IE select/zIndex bug if you include it in the same page.

Tested in IE 7, Firefox 3.

Updates

2009-3-18

Suggestion matching is now case-insensitive

The second time setting up combobox on the same textbox is working now

Fixed the IE relative z-index bug by avoiding relative positioning

Demostartion

Combobox 1

Combobox 2

This is a select box to see if there is a problem in IE.

Usage

Html

Script

jQuery('.combo').combobox(['option1', 'option2', 'option3', ...], {imageUrl : '/images/dropdown.gif'});

Copyright

It's released under the MIT licence, so use it however you want.

By deerchao@gmail.com on 2009-3-16

Download

https://files.cnblogs.com/deerchao/jquery.combobox.zip

正则表达示学习：http://deerchao.net/tutorials/regex/regex.htm

display:inline-block

将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。

1	<audio id="media" src="http://www.abc.com/test.mp3" controls></audio>

<video> 标签属性：

src：视频的URL

poster：视频封面，没有播放时显示的图片

1	<video id="media" src="http://www.abc.com/test.mp4" controls width="400px"heigt="400px"></video>

获取HTMLVideoElement和HTMLAudioElement对象

1	//audio可以直接通过new创建对象
2	Media = new Audio("http://www.abc.com/test.mp3");

3	//audio和video都可以通过标签获取对象
4	Media = document.getElementById("media");

Media方法和属性：

HTMLVideoElement 和 HTMLAudioElement 均继承自 HTMLMediaElement

01	//错误状态
02	Media.error; //null:正常

03	Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效
04

05	//网络状态
06	Media.currentSrc; //返回当前资源的URL

07	Media.src = value; //返回或设置当前资源的URL
08	Media.canPlayType(type); //是否能播放某种格式的资源

09	Media.networkState; //0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源
10		Media.load(); //重新加载src指定的资源

11	Media.buffered; //返回已缓冲区域，TimeRanges
12	Media.preload; //none:不预载 metadata:预载资源信息 auto:

13
14	//准备状态

15	Media.readyState; //1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
16		Media.seeking; //是否正在seeking

17
18	//回放状态

19	Media.currentTime = value; //当前播放的位置，赋值可改变位置
20	Media.startTime; //一般为0，如果为流媒体或者不从0开始的资源，则不为0

21	Media.duration; //当前资源长度流返回无限
22	Media.paused; //是否暂停

23	Media.defaultPlaybackRate = value;//默认的回放速度，可以设置
24	Media.playbackRate = value;//当前播放速度，设置后马上改变

25	Media.played; //返回已经播放的区域，TimeRanges，关于此对象见下文
26	Media.seekable; //返回可以seek的区域 TimeRanges

27	Media.ended; //是否结束
28	Media.autoPlay; //是否自动播放

29	Media.loop; //是否循环播放
30	Media.play(); //播放

31	Media.pause(); //暂停
32

33	//控制
34	Media.controls;//是否有默认控制条

35	Media.volume = value; //音量
36	Media.muted = value; //静音

37
38	//TimeRanges(区域)对象

39	TimeRanges.length; //区域段数
40	TimeRanges.start(index) //第index段区域的开始位置

41	TimeRanges.end(index) //第index段区域的结束位置

事件：

01	eventTester = function(e){
02	Media.addEventListener(e,function(){

03	console.log((new Date()).getTime(),e);
04	});

05	}
06

07	eventTester("loadstart"); //客户端开始请求数据
08	eventTester("progress"); //客户端正在请求数据

09		eventTester("suspend"); //延迟下载
10	eventTester("abort"); //客户端主动终止下载（不是因为错误引起），

11	eventTester("error"); //请求数据时遇到错误
12	eventTester("stalled"); //网速失速

13	eventTester("play"); //play()和autoplay开始播放时触发
14	eventTester("pause"); //pause()触发

15	eventTester("loadedmetadata"); //成功获取资源长度
16	eventTester("loadeddata"); //

17	eventTester("waiting"); //等待数据，并非错误
18	eventTester("playing"); //开始回放

19	eventTester("canplay"); //可以播放，但中途可能因为加载而暂停
20	eventTester("canplaythrough"); //可以播放，歌曲全部加载完毕

21	eventTester("seeking"); //寻找中
22	eventTester("seeked"); //寻找完毕

23	eventTester("timeupdate"); //播放时间改变
24	eventTester("ended"); //播放结束

25	eventTester("ratechange"); //播放速率改变
26	eventTester("durationchange"); //资源长度改变

27	eventTester("volumechange"); //音量改变

Html5演示地址：http://directguo.com/code/html5teach/media.html

EL和JSTL核心标签库：http://wenku.baidu.com/view/0ede03e29b89680203d82549.html

html5学习博客

js画圆：http://www.cnblogs.com/iamzhanglei/archive/2011/08/16/2140113.html

javascript的nodeValue和value的区别?

<body>

</body>

alert(document.body.childNodes[4].value)这句是说第5个节点的值是hao

为什么改成alert(document.body.childNodes[4].nodeValue)就不行,意思都一样的,为什么不行,

childNodes[4].nodeValue是第5个节点的nodeValue节点值,为什么就不行啊,弹出null,怎么回事?

答：document.body.childNodes[]指的是<body>这个标签的子节点

而你这个文档中，<body>的子节点有4个，<input><br><br><input>

document.body.childNodes[4].value指的是第四个节点<input>中的value属性值

如果你把这个语句换成document.body.childNodes[4].id，相信返回的就是kk了~~~

nodeValue指的是节点的值...

value指的是元素节点中的value属性...

nodeValue以及其与value的区别以及JS nodeName、nodeValue、nodeType返回类型

nodeName、nodeValue 以及 nodeType 包含有关于节点的信息。

nodeName 属性含有某个节点的名称。

元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
注释：nodeName 所包含的 XML 元素的标签名称永远是大写的

nodeValue
对于文本节点，nodeValue 属性包含文本。

对于属性节点，nodeValue 属性包含属性值。

nodeValue 属性对于文档节点和元素节点是不可用的。

nodeType
nodeType 属性可返回节点的类型。

最重要的节点类型是：

元素类型 --> 节点类型
元素element --> 1
属性attr --> 2
文本text --> 3
注释comments --> 8
文档document --> 9

nodeValue就是用来得到"文本元素的值"的，即只适用于"文本节点"；

例子：

<html>

<head>
<script type="text/javascript">
function getNodeValue()
{
var nv=document.getElementById("td1").firstChild.nodeValue;
var nn=document.getElementById("tr1").firstChild.nodeName;
var nv1=document.getElementById("tr1").firstChild.nodeValue;
alert("nv="+nv);
alert("nn="+nn);
alert("nv1="+nv1);
}
</script>

</head>

<body>
<table>
<tr id="tr1">
    <td id="td1" >John</td>
    <td>Doe</td>
    <td>Alaska</td>
</tr>
</table>
<input type="button" value="button1" onclick="getNodeValue()"/>
</body>

</html>

以上得到的结果：

nv=John;

nn=td;

nv1=null;

要分清元素的value属性和nodeValue 不一样，nodeValue适用于"文本节点"和"属性节点"；对应"文档节点"和"标签节点"不起作用

接口	nodeType常量	nodeType值	备注
Element	Node.ELEMENT_NODE	1	元素节点
Text	Node.TEXT_NODE	3	文本节点
Document	Node.DOCUMENT_NODE	9	document
Comment	Node.COMMENT_NODE	8	注释的文本
DocumentFragment	Node.DOCUMENT_FRAGMENT_NODE	11	document片断
Attr	Node.ATTRIBUTE_NODE	2	节点属性

/*
        定义和用法
　　        childNodes 属性可返回指定节点的子节点的节点列表，也就是包含在容易内的所有控件与文本属性字段，如果希望得到这些中的某些，必须通过
　　        类别属性进行筛选。
　　        childNodes常用属性：
　　        nodeValue：nodeValue适用于"文本节点（<td>中的文本内容）"和"属性节点"；对应"文档节点"和"标签节点（li）"不起作用
　　        nodeName：元素节点的 nodeName 是标签名称
            属性节点的 nodeName 是属性名称
            文本节点的 nodeName 永远是 #text
            文档节点的 nodeName 永远是 #document
            nodeType:返回的数值 1：元素节点、2：属性节点、3：文本节点
            firstChild：返回容器内的第一个控件对象，可以利用这个返回对象去获取该控件的属性信息
            parentNode：返回子节点对象外层的父对象，可以利用这个返回父对象去获取该控件的属性信息
            previousSibling:获取同级节点上级节点对象，可以利用这个返回对象去获取该节点的属性信息
            nextSibling：获取同级节点下级节点对象，可以利用这个返回对象去获取该节点的属性信息

        语法：
　　        nodeObject.childNodes
        提示和注释
　　        提示：请使用 length 属性来计算一个节点列表中节点的数目。当你已获悉节点列表的长度后，您就可以轻松地循环遍历此列表，并提取您所需要的值！
        实例
　　        在所有的例子中，我们将使用 XML 文件 books.xml，以及 JavaScript 函数 loadXMLDoc()。　　
　　        下面的代码片段显示了此XML文档的子节点：　　
　　        xmlDoc=loadXMLDoc("books.xml"); 　　
　　        var x=xmlDoc.childNodes; 　　
　　        for (i=0;i<x.length;i++) { document.write("Nodename: " + x[i].nodeName) document.write(" (nodetype: " + x[i].nodeType + ")<br />") }
        */