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";    

设置或者添加属性值

];
h1objx.setAttribute("class","c11");

获取属性值

var devadd=document.getElementById("adddevid");
devadd.getAttribute('devid'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"

标签节点操作

操作子节点

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

操作父节点

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

节点的创建1:

 1  2 spanobjx.onclick= 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:

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

删除节点:

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

屏幕宽高获取

得到当前网页的宽高:

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

Screen

 屏幕整体宽高

screen.width;
screen.height;

浏览器最大可用宽高:

screen.availWidth;
screen.availHeight;

Windown对象,得到浏览器宽高

window.innerWidth;
window.innerHeight;

表单提交按钮模拟

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

1 <script>
2      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

页面跳转:

方法一
2 location.href="https://www.cnblogs.com/dongxiaodong/p/10269788.html"方法二
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】,在函数内外定义,各处共享

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

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

字符串:

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

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,之后又循环

2 resstr=repx.exec("123459gggDDxxxggggDDD"3 alert(resstr);

类型转换:

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

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

数组操作:

var x=[11,15,"dddd",99];array类型,取值arrdong[1]
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("分隔符")); 将数组元素用分隔符隔开拼接成字符串

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

var arrdong=[11,1)">for(var varx in arrdong){
3     document.write(varx+"=>"+arrdong[varx]+"<br/>"4 }

字典:

1 dict={dong1:"dongxiaodong1",dong2:"dongxiaodong2"};
2 alert(dict["dong1"]);
字典的遍历
 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));绝对值

函数及面向对象

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

function dongfun(x,y=10){
var sum=03     sum=x+y;
4     return sum;
5 }

函数调用

方法1:直接在js里调用

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

onClick="dongfun(20)"

面向对象,简单的实现

类声明
 2 var classdong={
 3     name:"dongxiaodong", 4     user:"东小东" 5     dongfunx: 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的序列化和反序列化

json的序列化 
2 strj=JSON.stringify({dong1:"dongxiaodong1",1)">});
alert(strj);
4 
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();
person1.devname=devadd.getAttribute();
data.push(person1);
var senddata = JSON.stringify(data);    

 JS获取GET参数

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

JS复制文本

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

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)