尊重作者原创,未经作者允许不得转载!作者:xtfnpgy,原文地址:

https://www.cnblogs.com/xtfnpgy/p/9285359.html

一.js基础知识

<!--  -->是HTML的注释标签,使用 < 和 > 是符合HTML标签语法规则的。
//(注释单行)是JS的注释标签

/* */(注释代码块)是CSS的注释标签  推荐使用!js净化以后不影响

回车 \r\n
等于  ==  
不等于  !=
赋值 =
或且非  ||  && !

加减乘除 +-*/

类型转换 parseInt(str) parseFloat(str)  str.toString()

强制类型转换 Number(str)   String(num) (不适合javascript)

字符串长度:  str.length
字符串截取:  str.substr(1,5)
字符串连接: str1 + str2
字符串替换: str.replace
字符串查找: str.indexOf()
字符串分割: arr = str.split(",")
字符串固定位置值: str.chatAt(0)  ,类似s[0]
字符串大小写: str.toLowerCase str.toUpperCase

Node.childNodes      //获取所有子节点
Node.firstChild      //返回第一个子节点
Node.lastChild       //返回最后一个子节点
Node.parentNode      //返回父节点
Node.previousSibling //返回前一个节点
Node.nextSibling     //返回后一个节点
parentNode.removeChild(childNode);           //移除节点
parentNode.appendChild(childNode);           //追加节点
parentNode.insertBefore(newNode, targetNode) //插入节点 
ele.fireEvent('onchange', oEvent);           //激活事件

二、登录例子

var ele_user=document.getElementById('txtUserName');

var ele_pwd=document.getElementByName('txtPassword')[0];

var ele_login=document.getElementByClassName('login')[0];

ele_user.setAttribute('value','admin');

ele_pwd.setAttribute('value','admin');

function ClickElement(AObj) {
    AObj.target = '_self';

var e = document.createEvent("MouseEvent");  /*事件名Cef1区分大小写*/

e.initEvent("click", true, true);                            /*click必须小写!*/

AObj.dispatchEvent(e);
 } ;                                                                         /*结尾必须加分号";"*/

ClickElement(ele_login);                                        /*点击登录*/

三、获取元素及属性

1.getElementById

var ele_user=document.getElementById('txtUserName');

2.getElementsByName

var ele_user=document.getElementsByName('userName')[0];  /*取集合的第一个元素*/

3.getElementsByTagName /*根据元素类型标识元素*/

/*常用Tag:HTML FRAME FORM TABLE TR TD DIV SPAN A INPUT IMG (不区分大小写)*/

var ele = document.getElementsByTagName('html')[0];

alert(ele.innerHTML);

4.getElementsByClassName /*根据元素class获取元素*/

var ele = document.getElementsByClassName('form-control')[0];

alert(ele.innerHTML);

四、元素常用属性

1.可以直接用.操作的

ele.id

ele.name

ele.className  /*区分大小写,源代码对应class*/

ele.type           /*type属性*/

ele.value         /*输入的值*/

ele.href

ele.innerText   /*显示的文本内容,例如标签*/

ele.innerHTML

ele.outerHTML

2.其他属性获取和设置
style 不能直接.获取,必须通过getAttribute获取

ele.getAttribute('onClick'); //不存在返回null

ele.setAttribute('onClick', null);

五、扩展方法

1.JavaScript 遍历页面中所有的元素
function GetAllElements(tag)
{
  var nodes;
  var s; 
  var temp;
  if((tag=="")  || (tag==null))
 {nodes = document.all;}
  else
 {nodes = document.getElementsByTagName(tag);}
  for(var i=0;i<nodes.length;i++)
  {  
    var o = nodes[i]; 
    temp = i+'  id:'+o.id +',name:' + o.name +',tagName:'+ o.tagName ; 
    if(tag=='A')
   {
    temp = temp + ',innerText:' + o.innerText+ ',href:' + o.href+"\r\n"; 
    } 
    else if((tag=='SPAN')||(tag=='DIV'))
   {
    temp = temp + ',innerText:' + o.innerText+ ',className:' + o.className+"\r\n";
    } 
    else if(tag=='IMG')
   {
    temp=temp + ',src:' + o.src+"\r\n"; 
    } 
   else
   {
     if((o.innerText=="") || (o.innerText==null))
     {
     if((o.innerHTML=="") || (o.innerHTML==null))
     {temp = temp + ',outerHTML:' + o.outerHTML+"\r\n";}
     else
     {temp = temp + ',innerHTML:' + o.innerHTML+"\r\n"; }
      }
      else
     {temp = temp + ',innerText:' + o.innerText+"\r\n"; }
    } 
   if(temp.length>100)
   { temp = temp.substr(1,100)+"\r\n";}
   s = s + temp;
  }  
  alert(s);
};

/*调用:GetAllElements('');  GetAllElements('A'); */

2.JavaScript 遍历元素所有的属性
  function GetAllAttributes(obj)
  {
    var s='';
    if(obj!=null)
    {
      for(var i=0;      i<obj.attributes.length;      i++)
      {
        s=s+obj.attributes[i].name+':'+obj.attributes[i].value+'\r\n';        
      }      
    }
    return s;

}  ;

调用:

var ele = document.getElementById('login');

alert(GetAllAttributes(ele));

3.JavaScript 遍历元素所有子节点
  function GetAllChilds(obj)
  {
    var s='';
    if(obj!=null)
    {
      for(var i=0;  i<obj.childNodes.length;      i++)
      {
        s=s+obj.childNodes[i].innerHTML+'\r\n';        
      }      
    }
    return s;    
  } ;

调用:

var ele = document.getElementByTagName('HTML')[0];

alert(GetAllChilds(ele));

4.根据元素属性获取元素

function GetElementByTagProperty(tag,str_property,str_value,bl_exact)
{
  var nodes;
  var s; 
  var temp;
  var attr;
  if((tag=="")  || (tag==null))
 {nodes = document.all;}
  else
 {nodes = document.getElementsByTagName(tag);} 
  
  for(var i=0;i<nodes.length;i++)
  {  
    if(str_property == 'innerText'){
      attr = nodes[i].innerText;} else
    if(str_property == 'class'){
      attr = nodes[i].className;} else
    if(str_property == 'classname'){
      attr = nodes[i].className;} else
    if(str_property == 'className'){
      attr = nodes[i].className;} else {
      attr =nodes[i].getAttribute(str_property);}
     
    if(bl_exact)
   {
     if(attr==str_value)
     {
      temp=nodes[i];
      }
    }
    else 
    {
     if(attr!=null)
     {
       if(attr.indexOf(str_value)>-1){temp=nodes[i];}
      }
    }
  }  
  return temp;
}
调用:

var o=GetElementByTagProperty('A','id','540219887479',false);

5.某宝搜索动态插入勾选框元素:

function AddCheckBoxElement()
{
  var nodes;
  var ele; 
  var temp;
  nodes = document.getElementsByTagName('A');
  var oCheckbox;

for(var i=0;i<nodes.length;i++)
  {  
   if(nodes[i].getAttribute('id')!=null)
   {
      if(nodes[i].getAttribute('id').indexOf('J_Itemlist_TLink_')>-1)
      {
       ele = nodes[i];
       temp = ele.getAttribute('id');
       temp = temp.replace('J_Itemlist_TLink_','');

oCheckbox=document.createElement("input");
       oCheckbox.setAttribute("type","checkbox");  /*勾选框*/
       oCheckbox.setAttribute("id","chk_" + temp);
       oCheckbox.setAttribute("href",ele.href);
       ele.parentNode.insertBefore(oCheckbox,ele);

var myText=document.createTextNode("选中"+oCheckbox.id);
       ele.parentNode.insertBefore(myText,ele);

oCheckbox.addEventListener('click', function(){

alert(document.activeElement.id + document.activeElement.checked);}, false);

}
    }
  }  
}

AddCheckBoxElement();

六、其他

1.定时器

function doTimer(){ window.location.reload();};  
执行一次:
var t1 = window.setTimeout('doTimer()',5000);
执行多次:
var t2 = window.setInterval('doTimer()',5000); 
清除定时器:

window.clearInterval(t1);

2.判断是否IE
function isIE() { 
 if (!!window.ActiveXObject || "ActiveXObject" in window)
  return true;
  else
  return false;

};

3.点击勾选框

if(isIE()){oCheckbox.attachEvent("onclick",ClickCheckbox); }
       else{

oCheckbox.addEventListener('click',ClickCheckbox, false);}

function ClickCheckbox(){

var evtTarget = event.target || event.srcElement;
    evtTarget.focus();
    if(document.activeElement.getAttribute("attrChecked")=="true")
         {document.activeElement.setAttribute("attrChecked",false) }
           else         {document.activeElement.setAttribute("attrChecked",true) };
          alert('Checked='+document.activeElement.getAttribute("attrChecked")+',href='+
          document.activeElement.getAttribute("href")+',');}

尊重作者原创,未经作者允许不得转载!作者:xtfnpgy,原文地址:

https://www.cnblogs.com/xtfnpgy/p/9285359.html

谷歌浏览器内核Cef js代码整理(一)的更多相关文章

  1. 谷歌浏览器内核Cef js代码整理(三) 字符串处理

    *字符串截取方法*/ var s="abc_def[ghi]jk[i]"; var temp;function CopyFromStr(str_source,str_key, bl ...

  2. 谷歌浏览器内核Cef js代码整理(二) 滚动条

    1.隐藏滚动条 document.documentElement.style.overflow = 'hidden';隐藏竖向滚动条:document.documentElement.style.ov ...

  3. 常用js代码整理、收集

    个人整理了一下个人常用到的一些js代码,以方便学习以及日后使用,或许有一些是个人之前从网上摘下来的,但是不记得是具体从哪里来的了,如果你看到有一段代码跟你的文章很相似甚至一样,请不要气愤,请告诉我,我 ...

  4. 常用JS代码整理

    1: function request(paras) { 2: var url = location.href; 3: var paraString = url.substring(url.index ...

  5. 【JS学习】-利用谷歌浏览器调试JS代码(转)

    谷歌浏览器是常用来调试JS代码的工具,本文主要介绍如何利用谷歌浏览器来调试JS代码,协助我们进行开发工作. 首先,打开谷歌浏览器,按快捷键F12或者ctrl+shift+j,就可以打开谷歌浏览器的开发 ...

  6. 谷歌浏览器如何调试JS

    平常在开发过程中,经常会接触到前端页面.那么对于js的调试那可是家常便饭,谷歌浏览器是常用来调试JS代码的工具,本文主要介绍如何利用谷歌浏览器来调试JS代码,协助我们进行开发工作,加快开发效率. 1. ...

  7. JS代码大全 (都是网上看到 自己整理的)

    事件源对象  event.srcElement.tagName  event.srcElement.type 捕获释放  event.srcElement.setCapture();   event. ...

  8. JS代码大全(都是网上看到自己整理的)

    事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture();  event.srcE ...

  9. 最新的JavaScript核心语言标准——ES6,彻底改变你编写JS代码的方式!【转载+整理】

    原文地址 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructu ...

随机推荐

  1. Weka中数据挖掘与机器学习系列之Weka系统安装(四)

    能来看我这篇博客的朋友,想必大家都知道,Weka采用Java编写的,因此,具有Java“一次编译,到处运行”的特性.支持的操作系统有Windows x86.Windows x64.Mac OS X.L ...

  2. fiddler抓取用tomcat来部署的项目接口请求包

    Fiddler 是以代理web服务器的形式工作的,它使用代理地址:127.0.0.1,端口:8888. 当Fiddler退出的时候它会自动注销, 这样就不会影响别的程序.关于fiddler这个工具的使 ...

  3. linux安装mysql图文教程

    ---恢复内容开始--- 1.下载mysql [root@localhost ~]# yum install mysql mysql-server 输入y 输入y 输入y 下载完成 接下来我们要使用w ...

  4. 如何利用一台pc获取百万利益 《标题党》

    这是我在quora上看到的一个问题,我看到的被推荐的答案的第一句话就很nb. 有想法很容易做起来很难(不是这句) I’m going to give you something much more v ...

  5. 外网访问SQLServer数据库holer实现

    外网访问内网SQLServer数据库 内网主机上安装了SQLServer数据库,只能在局域网内访问,怎样从公网也能访问本地SQLServer数据库? 本文将介绍使用holer实现的具体步骤. 1. 准 ...

  6. 自动化测试-10.selenium的iframe与Frame

    前言 有很多小伙伴在拿163作为登录案例的时候,发现不管怎么定位都无法定位到,到底是什么鬼呢,本篇详细介绍iframe相关的切换 以http://mail.163.com/登录页面10为案例,详细介绍 ...

  7. php 调用天气接口

    前几天没事的时候,浏览博客看到了一篇免费天气接口的文章,然后调用了一下文章中提到的接口,自己琢磨了半天,把数据处理了一下,虽然现在用不到,但是说不定以后会用,所以打算记录一下,毕竟这也算是自己第一次在 ...

  8. python 数据库查询

    查询多个为空返回是() 查询一个为空返回是None

  9. 日常遇错之ModuleNotFoundError: No module named request

    用pycharm写python的时候,import request时,报错:ModuleNotFoundError: No module named request emmmm.解决方法:pip in ...

  10. Linux装agent

    解压Linux.zip  Linux的负载机链接:https://pan.baidu.com/s/1yrmsT3PYfuL9Wlh4FEYxaA 密码:s72n unzip Linux.zip chm ...