javascript笔记
1、常用的js操作的属性
-
id
-
className
-
value
-
style
-
background
-
color
-
width
-
height
-
cssText
-
等等的一系列css样式
-
-
innerHTML
-
href
-
src
-
tagName
属性操作十注意事项:
-
href值和src值获取到的是绝对路径
-
style是行间的属性
-
cssText会替换掉当前的所有行间的属性
-
class是关键字,改成className
-
tagName获取到的是当前标签的大写字母
-
innerHTML会替换掉当前标签中的所有内容
window.οnlοad=function(){ var dm3=document.getElementById("demo3"); dm3.οnclick=function(){ demo2(); }; var ipt=document.getElementById("ipt"); var dm4=document.getElementById("demo4"); var sub=document.getElementById("sub"); var totxt=document.querySelector("#demo4").querySelector("h1"); //父元素下的子元素选择器 sub.οnclick=function(){ totxt.innerHTML=ipt.value; dm4.style.cssText="width:100%;height:100px;border:2px solid black;background:white;"; }; var dm5img=document.querySelector("#demo5").querySelector("img"); var get1=document.getElementById("get1"); var dm51=document.getElementById("demo51"); get1.οnclick=function(){ dm51.innerHTML=dm5img.src; dm51.style.cssText="width: 100%;height: 40px;background-color: gainsboro;" } } function demo2(){ var dm2=document.getElementById("demo2"); dm2.style.background="red"; dm2.style.width="500px"; } function clk() { alert("niahhaufdjksdvhjdhvfjskvbkshj"); }
typeof
获取当前值或变量的数据类型
var a=123; var b="666"; console.log(typeof a); console.log(typeof b);
javascript:; 防止a标签触动页面刷新
<a href="javascript:;"> </a> //轮播图中常用
1、javascript——数组
-
数组的定义
var list=["a","b","c"];
-
数组——length属性:获取数组的长度(元素的个数)
window.οnlοad=function(){ var list=["a","b","c","d"]; console.log(list); console.log(list.length); }
2、this : 当前调用事件或调用方法的某个元素
window.οnlοad=function(){ 获取一组div标签 var divs=document.querySelector(".clkSelectBox").querySelectorAll("div"); var ischkd=true; for(var i=0;i<divs.length;i++) { // 自定义属性 divs[i].mark=true; divs[i].οnclick=function(){ if(this.mark==true) { // this.classList.remove("checked"); this.className=""; this.mark=false; } else{ // this.classList.add("checked"); this.className="checked"; this.mark=true; } } }
3、classList :
-
add() //为一个标签添加类名
-
remove() //为一个标签移除类名
-
contains() // 判断一个标签中是否存在某个类名,存在返回true,不存在返回false
-
toggle() //
4、鼠标移入事件:onmouseover
for(var x=0;x<wimg.length;x++) { wimg[x].οnmοuseοver=function(){ this.style.backgroundImage='url(img/nv.jpg)'; } }
5、数据类型
-
简单数据类型
-
number //数字类型
-
string //字符串类型
-
boolean //布尔值类型
-
null //空值
-
undefined //未定义类型
-
symbol //es6新增的类型 唯一值/匿名的值
-
-
复杂类型 / 引用数据类型
-
object //对象类型
-
-
js常见的对象类型
-
Array
-
Object
-
Element
-
Elements
-
Function
-
6、typeof 数据类型检测,判断数据类型
7、数字类型,NaN,是一个数字类型,它是一个值,它不等于它自己,不等于任何一个值。isNaN( )方用于判断一个数字是不是NaN
8、函数的不定参数arguments
-
arguments的特性:length和下标
-
案例:参数求
var btn=document.querySelector("#btn"); function f1(){ alert(arguments[1]); }; btn.οnclick=f1(55,88,99,66,33,1010); // f1(55,777,88,66); // f1();