• JavaScript百宝箱


    Js的外部引用

    外部文件中不用添加<script>标签,引用书写位置需在使用之前

    <script type="text/javascript" src="xx.js"></script>

    DOM操作

    获取节点对象:

    通过标签的id属性值进行查找,结果唯一

    divobjx=document.getElementById("divid")

    通过标签的name属性值进行查找,返回数组,排序与文档出现顺序相关

    var nameobjx=document.getElementsByName("namedong");

    通过标签名进行查找, 返回数组,排序与文档出现顺序相关

    var divobjx=document.getElementsByTagName("div");

     HTML属性操作:

    得到标签中value属性的值,操作标签有<input>、<select>、<textarea>等

    var xx=document.getElementById("inputid").value;

    得到name属性的值

    var textx=document.getElementById("inputid").name;

    通过任意属性名获取属性值

    var h1objx=document.getElementsByName("h1namex")[0];
    alert(h1objx.getAttribute("class"));

    修改标签属性值

    imgobj=document.getElementsByTagName("img")[0];
    imgobj.src="img/0.jpg";    

    设置或者添加属性值

    var h1objx=document.getElementsByName("h1namex")[0];
    h1objx.setAttribute("class","c11");

    获取属性值

    var devadd=document.getElementById("adddevid");
    devadd.getAttribute('devid');
    devadd.getAttribute('devname');

    删除属性

    h1objx.removeAttribute("class");

    修改(添加)其CSS样式:

    更改或添加css样式的值必须使用双引号扩起,如【opacity="0.2"】、【width="10px"】 

    document.getElementById("inid").style.backgroundColor="red";

    Class属性操作

    1 /*class="c1 c2"*/
    2 divobjx=document.getElementsByTagName("div")[0];
    3 divobjx.classList.add("c3");//添加
    4 divobjx.classList.remove("c1");//删除
    5 alert(divobjx.classList);//得到class的列表值

    标签内容操作:

    得到标签包裹内容

    1 textx=document.getElementById("divid").textContent;// 得到标签包裹的所有文字内容
    2 
    3 alert(document.getElementsByTagName("div")[0].innerText);//得到标签包含的内容,但标签可能会被浏览器解释
    4 alert(document.getElementsByTagName("div")[0].innerHTML);//得到标签包含的内容,内容转为字符串,不会被浏览器解释

    更改标签包裹内容

    1 document.getElementById("dongid").innerHTML="<h1>dongxiaodong<h1>"
    2 document.getElementById("dongid"). innerText ="dongxiaodong"

    标签节点操作

    操作子节点

    1 var ulobjx=document.getElementsByTagName("ul")[0];
    2 alert(ulobjx.children.length)//得到子结点的个数
    3 ulobjx.children[0].setAttribute("class","c11");//修改第一个子节点的属性

    操作父节点

    1 var spanobjx=document.getElementById("spanidx");
    2 spanobjx.onclick=function(){
    3     alert(spanobjx.parentNode.nodeName);//得到父节点的名字
    4     spanobjx.parentNode.setAttribute("class","c11");//更改父节点的属性
    5 }

    节点的创建1:

     1 var spanobjx=document.getElementById("spanidx");
     2 spanobjx.onclick=function(){
     3     //创建标签方法一
     4     //var inputx="<input type='text' value='东小东' dong='xiaoddd'>"
     5     //创建结点方法二
     6     var inputx=document.createElement("input");
     7     inputx.type="text";
     8     inputx.value="东小东";
     9     inputx.dong="xiaoddd";
    10     //添加结点
    11     spanobjx.appendChild(inputx);//
    12 }

    节点创建2:

    1 //创建标签
    2 var inputx="<input type='text' value='东小东' dong='xiaoddd'>"
    3 //添加结点 beforeBegin afterBegin  beforeEnd afterEnd
    4 spanobjx.insertAdjacentHTML("afterBegin",inputx);

    删除节点:

    1 var divobjx=document.getElementById("dividx");
    2 divobjx.onclick=function(){
    3     divobjx.removeChild(divobjx.children[0])
    4 }

    屏幕宽高获取

    得到当前网页的宽高:

    1 var wid=document.documentElement.offsetWidth;
    2 var hei=document.documentElement.offsetHeight;
    3 alert(wid+","+hei);

    Screen

     屏幕整体宽高

    1 var wid=screen.width;
    2 var hei=screen.height;
    3 alert(wid+","+hei);

    浏览器最大可用宽高:

    1 var wid=screen.availWidth;
    2 var hei=screen.availHeight;
    3 alert(wid+","+hei);

    Windown对象,得到浏览器宽高

    1 var wid=window.innerWidth;
    2 var hei=window.innerHeight;
    3 alert(wid+","+hei);

    表单提交按钮模拟

    模拟HTML的form表单的提交按钮

    1 <script>
    2     function fsub(){
    3         fomrobjx=document.getElementById("formx");
    4         fomrobjx.submit();//表单提交
    5     }
    6 </script>

     浏览器前进与后退按钮模拟(History)

    1 history.back();//相对于浏览器的后台方向
    2 history.forward;//相对于浏览器的前进方向
    3 history.go(-1);//通过索引进行页面跳转

    URL操作及页面跳转

    Location,获取相关值

    1 alert(location.hostname);//主机名称,如(localhost)
    2 alert(location.pathname);//返回路径和文件名
    3 alert(location.port);//主机端口
    4 alert(location.protocol);//web协议,http或者https
    5 alert(location.href);//返回当前URL

    页面跳转:

    1 //方法一
    2 location.href="https://www.cnblogs.com/dongxiaodong/p/10269788.html";
    3 //方法二
    4 location.assign("https://www.cnblogs.com/dongxiaodong/p/10269788.html");

     返回上一页

    window.history.go(-1); //返回上一页
    window.history.back(); //返回上一页
    window.location.go(-1); //刷新上一页
    window.history.back();location.reload();//强行刷新(返回上一页刷新页面)

    变量及运算

    JS是弱类型语言

    局部变量:var函数内定义,在当前函数中使用

    全局变量:var函数外定义,在函数外定义,各处共享

    全局变量:直接使用【xx=123】,在函数内外定义,各处共享

    变量的作用域为函数,函数的作用域链在程序加载时已经确定

    1 //声明变量
    2 var vardong=1;//int类型
    3 var vardong2="dongxiaodong"//string类型
    4 var boolx=false; //声明boolean类型

    字符串:

    字符串可以使用单双引号进行包括,操作及方法与java与诸多相似

     1 var strx="12345678923东aBc";
     2 alert("字符串的长度:"+strx.length);//中文长度为1
     3 alert(strx.indexOf("23x"));//从头查找字符串位置,有则返回位置,无则返回-1
     4 alert(strx.lastIndexOf("23"));//从尾部查找
     5 alert(strx.match("23"));//有则返回字符串,无则返回空
     6 alert(strx.replace("东","东小东"));//内容替换,参数(原,新)
     7 alert(strx.substring(0,2));//提取字符串,区间为[0,2)
     8     
     9 alert("aBc".toLocaleLowerCase());//全部转换为小写字母,另外大写:toLocaleUpperCase()
    10 
    11 alert("dd,xx,nn,bb".split(",")[0]);//字符串分隔
    12     
    13 alert("  dongxiaodong   ".trim());//去掉前后空格
    14 alert("定时时间到".charAt(0));//得到第一个字符:定

    正则表达式:

    基本语法类似于PHP

    内容查找(test)

    1 repx=/gg*D/;
    2 resbool=repx.test("123459gggDDxxxggggDDD");
    3 alert(resbool);

    内容提取(exec)

    或者匹配的第一个值,如果需要全部则使用 repx=/gg*D/g;,执行一句则获取到下一个,直到返回null,之后又循环

    1 repx=/gg*D/;
    2 resstr=repx.exec("123459gggDDxxxggggDDD");
    3 alert(resstr);

    类型转换:

    字符串转为数字:ii=parseInt("100");

    字符串转换为小数:ff=parseFloat("55.26");

    数组操作:

    1 var x=[11,15,"dddd",99];//array类型,取值arrdong[1]
    2 var y=[3,2,1,"a","c"];
    3 alert(y.length)//得到数组长度
    4 alert(x.concat(y));//数组的合并
    5 alert(y.sort());//排序
    6 alert(x.reverse())//翻转
    7 y.push("dddd");//追加元素,等价于:arrdong[y.length]="xx";
    8 alert(y.join("分隔符")); //将数组元素用分隔符隔开拼接成字符串

    数组的遍历其中一种方法:

    1 var arrdong=[11,15,"dddd",99];//array类型,取值arrdong[1]
    2 for(var varx in arrdong){
    3     document.write(varx+"=>"+arrdong[varx]+"<br/>");
    4 }

    字典:

    1 dict={dong1:"dongxiaodong1",dong2:"dongxiaodong2"};
    2 alert(dict["dong1"]);
    3 //字典的遍历
    4 for(var varx in dict){
    5     alert(varx+"=>"+dict[varx]);
    6 }

    JS的运算:

    其大部分运算相似与Java和PHP等,如(if,while,for等)

    任何类型与字符串相加,都会转换为字符串,呈现拼接效果

    三元运算:

     【? : 】结果变量=条件?满足则为结果1:结果2;

    数学运算相关:

    1 alert(Math.round(2.5));//四舍五入
    2 alert(parseInt(Math.random()*100));//随机数,本来区间为0至1
    3 alert(Math.max(11,22,99,33,101,999,0.1));//得到最大值,对应于min()
    4 alert(Math.abs(-100));//绝对值

    函数及面向对象

    一个带默认参数和返回值的函数定义

    1 function dongfun(x,y=10){
    2     var sum=0;
    3     sum=x+y;
    4     return sum;
    5 }

    函数调用

    方法1:直接在js里调用

    方法2:在HTML中,使用标签属性方式:

    onClick="dongfun(20)"

    面向对象,简单的实现

     1 //类声明
     2 var classdong={
     3     name:"dongxiaodong",
     4     user:"东小东",
     5     dongfunx:function(){
     6      alert("---方法:dongfunx---")
     7    }
     8 };
     9 //访问类属性
    10 alert(classdong.name);
    11 
    12 //添加类属性并方法
    13 classdong.dongnew="小小";
    14 alert(classdong.dongnew);
    15     
    16 //访问类方法
    17 classdong.dongfunx();

    滚动条设置

    返回顶部

    document.body.scrollTop=0;

    Json的序列化和反序列化

    1 //json的序列化 
    2 strj=JSON.stringify({dong1:"dongxiaodong1",dong2:"dongxiaodong2"});
    3 alert(strj);
    4 
    5 //json的反序列化
    6 objjsonx=JSON.parse(strj);
    7 alert(objjsonx["dong2"]);
    8 alert(objjsonx.dong1);

     序列化方法2

    var data = [];
    var person1 = new Object();
    person1.devid=devadd.getAttribute('devid');
    person1.devname=devadd.getAttribute('devname');
    data.push(person1);
    var senddata = JSON.stringify(data);    

     JS获取GET参数

     1 var GET = (function(){
     2     var url = window.document.location.href.toString();
     3     var u = url.split("?");
     4     if(typeof(u[1]) == "string"){
     5         u = u[1].split("&");
     6         var get = {};
     7         for(var i in u){
     8             var j = u[i].split("=");
     9             get[j[0]] = j[1];
    10         }
    11         return get;
    12     } else {
    13         return {};
    14     }
    15 })();
    16 if(GET["user"]) alert("user的值为:"+GET["user"]);
    17 else alert("不存在改键值");

    JS复制文本

     1 //复制函数
     2 function copystr(strdata)
     3 {
     4     var Url2=strdata;
     5     var oInput = document.createElement('input');
     6     oInput.value = Url2;
     7     document.body.appendChild(oInput);
     8     oInput.select(); // 选择对象
     9     document.execCommand("Copy"); // 执行浏览器复制命令
    10     oInput.className = 'oInput';
    11     oInput.style.display='none';
    12     alert("复制完成");
    13 }    

  • 相关阅读:
    实用技巧——让你的网站变成响应式的3个简单步骤
    C#网络编程初步之TCP
    C#调用WebService实例和开发
    获取GridView中RowCommand的当前索引行
    创建Spring项目 IOException parsing XML document from class path resource [ApplicationContext.xml];
    java8的日期处理
    使用IDEA创建动态web项目
    连接数据库出现The server time zone value '�й���׼ʱ��' is unrecogni的解决方案
    Spring Boot RabbitMQ 应用场景--转载
    SpringBoot可视化监控
  • 原文地址:https://www.cnblogs.com/dongxiaodong/p/10418259.html
Copyright © 2020-2023  润新知