js日常小笔记
一、getElementsByClassName
h5中新增的方法，但是只有较新的浏览器才支持它，现在使用DOM方法来实现，能适用于新老浏览器
function getElementsByClassName(node,classname)
{
if(node.getElementsByClassName)
{ //使用现有方法
return node.getElementsByClassName(classname);
}else{
var results=new Array();
var elems=node.getElementsByTagName("*");
for(var i=0;iif(elems[i].className.indexOf(classname)!=-1)
{ results[results.length]=elems[i]; }
}
return results;
}
} 二、给链接a添加点击事件
在onclick事件处理函数中返回false,可以防止用户被带到目标链接窗口
<a href="http://www.baidu.com" onclick="showPic(this);return false;">Click mea>
<a href="javascript:showPic(this);return false;">Click mea> 三、childNodes属性
childNodes属性可以用来获取任何一个元素的所有的子元素，包含所有类型的节点，而不仅仅是元素节点，甚至连空格和换行符都会被解释为节点，最常见的的有元素节点（nodeType为1），属性节点（nodeType为2），文本节点（nodeType为3）
四、nodeValue属性的应用
"p1">this is text
//获取p元素的文本内容
var pid=document.getElementById("p1");
alert(pid.childNodes[0].nodeValue);
alert(pid.firstChild.nodeValue);)
//设置p元素的文本内容
pid.firstChild.nodeValue=text; 五、给多选框添加全选和取消全选
//网上查阅资料知：jQuery1.9.1针对checkbox的调整方法，用prop代替attr。在jquery 1.8.x中的版本，对于checkbox的选中与不选中操作如下：
1.判断是否选中：$('#checkbox').prop('checked')
2.设置选中与不选中状态：$('#checkbox').attr('checked',true)$('#checkbox').attr('checked',false)
但此方法在jquery1.9.1中，有些处理不一样，同事执行正常的使用的正好是1.8版本，本人使用的是1.11版本。
<script src="js/jquery-1.11.1.min.js" type="text/javascript">script>
<script type="text/javascript">
$(function() {
$("#checkAll").click(function() {
$('input[name="subBox"]').prop("checked",this.checked);
});
var $subBox = $("input[name='subBox']");
$subBox.click(function(){
$("#checkAll").prop("checked",$subBox.length == $("input[name='subBox']:checked").length ? true : false);
});
});
script>
head>
<body>
<div>
<input id="checkAll" type="checkbox" />全选
<input name="subBox" type="checkbox" />项1
<input name="subBox" type="checkbox" />项2
<input name="subBox" type="checkbox" />项3
<input name="subBox" type="checkbox" />项4
div> 六、当前日期与无效日期对比
<script>
$(document).ready(function() {
var d = new Date;
var yy=d.getFullYear()
if(yy<1900) yy = yy+1900;
var MM=d.getMonth()+1;
if(MM<10) MM = '0' + MM;
var dd =d.getDate();
if(dd<10) dd = '0' + dd;
var hh =d.getHours();
if(hh<10) hh = '0' + hh;
var mm =d.getMinutes();
if(mm<10) mm = '0' + mm;
var ss = d.getSeconds();
if(ss<10) ss = '0' + ss;
var ww = d.getDay();
var Otoday =yy+"-"+MM+"-"+dd+" "+hh+":"+mm+":"+ss;
$(".tabggl tr").each(function(){
var content=$(this).find(".pdate").html();
if(content == null || content.length == 0)
{$(this).css("display","none");}
else{
var today =Otoday.replace(/-/g,"/");
var temp=$(this).find(".pdate").text().replace(/-/g,"/");
if (temp>today)
{
$(this).css("display","block");
}
}
})
});
script><table width="100%" border="0" cellspacing="0" cellpadding="0" class="tabggl">
<tbody>
<CMSPRO_DOCUMENTS DOCUMENTTYPE="0|1|2|3" NUM="15" STARTPOS="0" PAGESIZE="0" CHANNELCODE="tgl">
<tr style="display:none;">
<td class="row-py-02-titlelist-02">
<span><CMSPRO_DOCUMENT FIELD="title" AUTOLINK="true" LINKALT="true" LINKALTTEXT=" " NUM="15">信息标题CMSPRO_DOCUMENT>span>
<span class="pdate" style="display:none"><CMSPRO_DOCUMENT FIELD="sxtime" DOMAINMETADATANAME="失效日期" DATEFORMAT="yyyy-MM-dd HH:mm:ss">失效日期
CMSPRO_DOCUMENT>span>
td>
tr>
CMSPRO_DOCUMENTS>
tbody>
table>七、动态创建标记
1、document.write()
2、innerHTML属性
3、DOM方法–createElement()、appendChild()、createTextNode()、insertBefore(newElement,targetElement)、
4、DOM方法中没有提供insertAfter函数，insertAfter自定义的insertAfter函数如下：
function insertAfter(newElement,targetElement){
var parent=targetElement.parentNode;
if(parent.lastChild==targetElement){
parent.appendChild(newElement);
}
else{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}八、Ajax
var request;
if(window.XMLHttpRequest){
request=new XMLHttpRequest(); //IE7+、Firefox、Chrome、Opera、Safari....
}
else{
request=new ActiveXObject("Microsoft.XMLHTTP");//IE6、IE5
}
request.open("GET","get.php",true);
request.send();
request.onreadystatechange=function(){
if(request.readyState==4&&request.status==200){
//做一些事情 request.responseText
}
}发送请求方法：
open(method,url,async)
send(string)
例子：
request.open(“GET”,”get.php”,true);
request.send();
request.open(“POST”,”create.php”,true);
request.setRequestHeader(“Conetent-type”,”application/x-www-form-urlencoded”);
request.send(“name=王二狗&sex=男”);//当使用post方法时要带参数
取得相应的方法：
responseText:获得字符串形式的相应数据
responseXML:获得XML形式的相应数据
status和statusText:以数字和文本形式返回HTTP状态码
getAllResponseHeader():获取所有的相应报头
getResponseHeader():查询相应中的某个字段的值
重要属性：
readyState属性
0：请求未初始化，open还没有调用
1：服务器连接已建立，open已经调用了
2：请求已接收，也就是接收到头信息了
3：请求处理中
4：请求已完成
例子： Ajax应用实例——登录
九、style属性
(1)style属性只能返回行内样式，这是style属性获取样式很大的局限性，注意：用DOM设置样式，就可以用DOM再把它检索出来（在外部样式表里声明的样式不会进入style对象，在文档的部分里声明的样式也是如此，style对象只包含在HTML代码里用style属性声明的样式）
element.style.color;
element.style.fontFamily;
element.style.marginTopWidth;//对应margin-top-width(2)设置样式
element.style.property=value;