1. 변수
1. 배열을 정의하려면 새 배열("1", "2")을 사용할 수 있습니다.
2. 다음과 같이 null을 할당하여 변수를 지울 수 있습니다.
//首先定义一个变量 var i1=10; i1=null; //此时的i1就被清除了
함수에서 이와 같은 변수를 정의할 때는 주의하세요
funtion demo(){ x=10; } //而此前的代码中都没有出现x,那么这里就是定义了x,在调用demo函数以后,x就是一个全局变量了。
2. 연산자 == 및 ===
var i="5"; var j=5; if(i==j) alert(""hello); if(i===j) alert("world");
//위 코드만 i와 j의 값은 동일하지만 i와 j의 데이터 유형이 동일하지 않기 때문에 실행 후 hello가 팝업됩니다. 따라서 ==에는 동일한 값만 필요하지만 ===에는 동일한 값이 필요할 뿐만 아니라 동일한 데이터 유형도 필요합니다.
셋, 예외 캡쳐
try{ if() throw ""; }catch(err){ alert(throw); }
넷, 이벤트
onload 웹 페이지 로딩 이벤트
onclick 클릭 이벤트
onfocus 커서 수집 이벤트
onselect 텍스트 상자 선택 이벤트
onmouseover 마우스 통과 이벤트
onmouserout 마우스 아웃 이벤트
five, dom 연산
1, 소개: 웹 페이지가 로드되면 브라우저는 페이지의 문서 객체 모델을 생성합니다.
2. DOM 작업 HTML
1) js는 페이지의 모든 HTML 요소를 변경할 수 있습니다.
①출력 스트림 변경: document.write()는 문서의 모든 내용을 덮어씁니다. 주의해서 사용하세요!
②요소 가져오기: document.getElementById();
document.getElementByTagName() 등
document.getElementById("btn").addEventListener("click",function(){ var x=document.getElementsByName("people"); var y=x[2].value; alert(y); });③Html 내용 변경: innerHTML;
4속성 내용 변경: 객체를 얻은 후 속성 = "속성 값"이면 setAttribute() 메서드를 사용할 수도 있습니다. 첫 번째 매개 변수는 속성 이름입니다. , 두 번째 매개변수는 속성 값입니다
document.getElementById("pid").setAttribute("class","pid2");
alert(document.getElementById("name").getAttribute("name"));dom 컨트롤 html 메소드 중 일부:
1,设置属性:如var attr=document.getElementById("demo1"); attr.setAttribute("title","dhello");//设置属性 var st=attr.getAttribute("title");//得到属性 alert(st); 2.得到子节点: var child=document.getElementsByTagName("ul")[1].childNodes; alert(child.length); 3得到父节点: var parent=document.getElementsByTagName("li")[0].parentNode; alert(parent.nodeName); 4创建元素节点: var body=document.body; var inp=document.createElement("input");//创建一个input节点 inp.type="button";//节点类型 inp.value="ann"; body.appendChild(inp);//把新的子节点添加到指定节点。(添加到末尾 ) 5创建文本节点 6删除子节点:<p id="p1"> <p id="p1">这是一个段落。</p> <p id="p2">这是另一个段落。</p> </p> var parent=document.getElementById("p1");//找到 id="p1" 的元素: var child=document.getElementById("p1");//找到 id="p1" 的 <p> 元素: parent.removeChild(child);//从父元素中删除子元素: 第二种方法:var child=document.getElementById("p1"); child.parentNode.removeChild(child); 7动态添加节点(课选择添加的位置) var p=document.getElementById("p"); var node=document.getElementById("pid"); var newnode=document.creatElement("p"); p.inserBefore(newnode,node); 要添加的 在这之前的2) js는 페이지의 모든 HTML 속성을 변경할 수 있습니다
fef50554eca1a427827adaa329da8122
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
<title>hello world</title>9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
<a id="aid"/> <p id=pid>hello world!!</p>< ;script>
document.getElementById("aid").href="www.baidu.com";//改变属性值2cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
이벤트 핸들은 이벤트를 트리거하는 작업입니다. 예를 들어 onclick은 클릭할 때의 핸들입니다.
이벤트 핸들러를 js에 추가하면 많은 코드를 줄일 수 있습니다.
예를 들어 다음은 전통적인 이벤트 트리거 방법입니다
f4d5e46e10f3e67579b6b3e20e30fb19button65281c5ac262bf6d81768915a4a77ac0
추가 기능 js 코드 이벤트 핸들은 다음과 같습니다. 처리 함수는 () 대괄호를 추가할 수 없습니다!
var x=document.getElementById("btn");
x.addEventListener("click",demo);//여기에는 두 개의 매개변수가 있습니다. 하나는 이벤트 핸들이고 후자는 이벤트를 처리하는 함수입니다. event
1. 이벤트 흐름: 페이지에서 이벤트가 수락되는 순서는 이벤트 버블링(내부에서 외부로)과 이벤트 캡처( 외부에서 내부로).
1) HTML 이벤트 처리: HTML 구조에 직접 추가
<button onclick="demo()"><button>2) dom 레벨 0 이벤트 처리: 이벤트 핸들러 속성에 함수 지정
<button id="btn"></button> <script> var btn1=document.getElementById("btn"); btn1.onclick= function () { document.getElementById("pid").style.backgroundColor="red"; }; </script>//레벨 0 이벤트 처리 이벤트 지우기 처리는 onclick을 비우도록 할당하는 것만 큼 간단합니다. 설정시 객체가 아닌 객체의 시간이 null로 설정됩니다!
btn1.onclick=null;
btn1.onclick= function () { document.getElementById("pid").style.backgroundColor="red";//被覆盖 }; btn1.onclick= function () { document.getElementById("pid").style.backgroundColor="blue"; };3) dom 레벨 2 이벤트 처리:
addEventListener("事件名",“事件处理函数”,“true/false”);true: 이벤트 캡처
false: 이벤트 버블링
이벤트 처리를 지우려면 RemoveEventListener()를 사용하세요.
이벤트 detachEvent삭제
if(btn.addEventListener){ btn.addEventListener(); } else{ btn.attachEventListener() }3. 객체: DOM 이벤트가 트리거되면 객체가 생성됩니다. 이벤트 개체의 속성:
1) 유형: 이벤트 유형 가져오기
document.getElementById("btn").addEventListener("click",showType); function showType(e){ alert(e.type); }2) 대상: 이벤트 가져오기 대상: 이벤트가 트리거되는 위치, 즉 이 이벤트의 개체가 html 요소의 어떤 요소인지 .
document.getElementById("btn").addEventListener("click",showTarget); function showTarget(e){ alert(e.target); }3) stopPropagation(): 이벤트 버블링 방지: 가장 안쪽 요소의 이벤트가 발생하지만, 이 이벤트가 발생한 후에는 이 요소가 포함된 상위 요소의 이벤트도 발생합니다! 따라서 때때로 우리는 이런 일이 발생하는 것을 원하지 않으며, 이는 이벤트 버블링이 발생하는 것을 방지합니다.
event.stopPropagation();
event.preventDefault();
//dom 0级事件处理
// var btn1=document.getElementById("btn");
// btn1.onclick= function () {
// document.getElementById("pid").style.backgroundColor="red";
// };
//
// btn1.onclick=null;
////dom 2级事件处理,处理函数不能加()括号符!
//
//var btn=document.getElementById("btn");
//btn.addEventListener("click",demo1);
//
//function demo1(){
//
//// alert("dom 2级事件处理!");
//
// document.getElementById("pid").innerHTML="dom 2级事件处理!";
//}
//事件对象
//1.获取事件对象的类型
//document.getElementById("btn").addEventListener("click",showType);
//function showType(e){
// alert(e.type);
//}
//2.获取事件对象的目标
//document.getElementById("btn").addEventListener("click",showTarget);
//function showTarget(e){
// alert(e.target);
//}
八,内置对象
1.什么是对象:js中所有事物都是对象,例如字符串,数组,时间,数值,函数等,每个对象都会带有属性和方法;
2.创建对象:
1)使用new object创建
people=new objet();
people.name="krys";
people.age=20;
2)直接创建:
people={name:"krys",age:20,addres:"guangdong"};
3)使用函数创建
funtion people(name,age){ this.name=name;this.age=age}; son=new people("jess",20);//然后创建一个对象 document.getElementById("btn").addEventListener("click",creat); function people(name,age){ this.name=name; this.age=age; } function creat(){ var name1= document.getElementById("name").value; var age1=document.getElementById("age").value; son=new people(name1,age1); alert(son.name); alert(son.age); }
3.字符串对象:String:字符串可以使用双引号也可以使用单引号!
属性:length:str.length可得到字符串的长度、
indexOf(),在字符串中查找字符串,并返回字符串所在的位置。
document.getElementById("btn").addEventListener("click",creat); function creat(){ var name= document.getElementById("name").value; if(name.match("krys")){ alert("r所在的位置是"+name.indexOf("r")); }else{ alert("sorry~you didnt have rights!") } }
match(),在字符串中匹配字符串,如果字符串1在字符串中存在,则将字符串1打印出来,如果没有就返回NULL
document.getElementById("btn").addEventListener("click",creat); function creat(){ var name= document.getElementById("name").value; if(name.match("krys")){ alert(name); }else{ alert("sorry~you didnt have rights!") } }
replace(a,b) a是要替换掉的原来的字符或字符串,b是新的字符或字符串
document.getElementById("btn").addEventListener("click",creat); function creat(){ var name= document.getElementById("name").value; if(name.match("krys")){ alert(name.replace("krys","krys小仙女")); }else{ alert("sorry~you didnt have rights!") } }
toUpperCase()转换成大写
toLowerCase()转换成小写
split()分隔线,将一个字符串分隔成若干部分,如str="hello,world,welcome,to";var s=str.split(","); s[0]="hello";
4.Date对象
1)创建Date对象:
var date=new Date();
alert(date);
var h=date.getHours();//时
var m=date.getMinutes();//分
var s=date.getSeconds();//秒
2)获取具体年份:getFullYear();
3)获取毫秒数:getTime();
4)设置具体的日期:setFullYear();
5)获取星期:getDay();
6)设置每秒更新一次
setTimeout(function(){
showTime();},1000);
//每秒调用一次showTime函数
5.数组对象:
1)数组的创建:var a=["1","krys","ok"];
var a=new Array(); a[0]="hell0"; a[1]="world";
var a=new Array("hello","world","welcome");
2)数组常用的方法:
concat()合并数组如 a=["krys"];b=["tal"];a.concat(b)=krystal;
sort()排序数组 var a=["a","c","b"];a.sort();->a b c (默认从低到高排序)
设置为降序:a.sort(funtion(a,b){return a-b;})
push()在数组末尾添加一个元素var a=["a","c","b"]; a.push("d");
reverse()翻转,对称中心点相互交换:a.reverse()= c b a ;
6.math对象
1)常用函数
round()四舍五入 Math.round(2.5)=3;
random()返回0~1之间的随机数 Math.random();
可以转换成整数:parseInt(Matn.random()*10);
max()返回最大值
min()返回最小值
abs()返回绝对值
九,浏览器的内置对象BOM(browser object model)
1,window对象:大部分对象的祖先,最高级别对象之一。
1)简介:Window对象是指当前的浏览器窗口,所有的js全局变量函数以及变量都是Window对象的成员。
其中,全局变量是window对象的属性,全局函数是window对象的方法。
2)获得浏览器内部窗口的尺寸(即内容区域的尺寸,不包括滚动条工具栏等):
window.innerHeight浏览器窗口的内部高度,window.innerWidth,浏览器的内部宽度。
3)使用window.open(url)可以打开一个窗口,使用window.close()可以关闭当前窗口。
2,history对象
window.history()对象包含浏览器的历史(url)的集合
有三个方法:
1)history.back()后退,返回到前一页
2)history.forward(),前进,进入到下一页
3)history.go(),带参数,参数就是要进入的页数,-1是前一页,-2是前两页,依次类推,当前页是0.
3. Timer
js를 사용하면 함수 호출 직후가 아닌 설정된 시간 간격 후에 코드가 실행됩니다. 하나는 setInterval()입니다. 간격은 밀리초 단위로 지정됩니다. 지정된 코드
One은 setTimeout()입니다. - 지정된 밀리초 동안 일시 중지한 후 지정된 코드를 실행합니다.
setTimeout을 사용하여 setInterval() 함수를 구현할 수 있습니다. 호출 함수 코드에서 자신을 호출하면 됩니다!
setInterval(funtion(){},1000);
setTimeout(funtion(){},1000);
clearInterval(),clearTimeout()을 사용하여 이 호출을 삭제할 수 있습니다.
4, Location 객체
가 사용됩니다. 현재 페이지의 주소를 얻고 브라우저를 새 페이지로 리디렉션합니다(실제로 내 이해는 현재 주소를 구문 분석하는 것입니다)
Location 개체의 속성:
location .pathname: 현재 페이지를 반환합니다. 경로 및 파일 이름을 반환합니다.
location.port: 웹 호스트의 포트를 반환합니다.
location.protocol: 사용된 웹 프로토콜을 반환합니다.
location.href: 현재 페이지의 URL을 반환합니다.
location.sign ()는 새 문서를 로드하며 매개변수는 필수입니다. 문서를 로드할 경로입니다.
window.location.hostname;
5, 화면 객체
window.screen 객체에는 사용자 화면screen.avaiilWidth; //사용 가능한 화면 높이
screen.availHeight; //화면 높이
screen.width;//화면 너비
6, 탐색 개체
7, 팝업 창, 쿠키
ten, js 객체 지향적 사고
중요한 JavaScript 지식 요약 포인트 1
JavaScript 이벤트 "이벤트 객체"에 대한 주의 사항_javascript 기술
JavaScript 기초 향상 동영상 튜토리얼
위 내용은 자바스크립트의 핵심을 가장 체계적으로 정리한 책(기본 언어 구문 제외)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!