js日常小笔记

来源：互联网发布：降龙九九软件安装编辑：程序博客网时间：2024/04/29 19:19

一、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;i<elems.length;i++){            if(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 me</a><a href="javascript:showPic(this);return false;">Click me</a>

三、childNodes属性
childNodes属性可以用来获取任何一个元素的所有的子元素，包含所有类型的节点，而不仅仅是元素节点，甚至连空格和换行符都会被解释为节点，最常见的的有元素节点（nodeType为1），属性节点（nodeType为2），文本节点（nodeType为3）

四、nodeValue属性的应用

<p id="p1">this is text</p>  //获取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">          <!--列表处理 begin-->          <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>            <!--列表处理end-->             <!--空行处理begin-->             <!--空行处理end-->          </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对象，在文档的<head>部分里声明的样式也是如此，style对象只包含在HTML代码里用style属性声明的样式）

element.style.color;element.style.fontFamily;element.style.marginTopWidth;//对应margin-top-width

(2)设置样式

element.style.property=value;

0 0