js日常小笔记

最新推荐文章于 2024-04-02 20:25:59 发布

置顶 lixiaohong2012

最新推荐文章于 2024-04-02 20:25:59 发布

阅读量673

点赞数

分类专栏： Web前端 javascript jQuery 文章标签： javascript

本文链接：https://blog.csdn.net/lixiaohong2012/article/details/70134330

版权

Web前端同时被 3 个专栏收录

26 篇文章 0 订阅

订阅专栏

jQuery

7 篇文章 0 订阅

订阅专栏

javascript

4 篇文章 0 订阅

订阅专栏

一、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;

lixiaohong2012

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录