JavaScript进阶篇_学习笔记

首页免费课 JavaScript进阶篇笔记

JavaScript进阶篇

                
                慕课官方号
            页面重构设计

                    查看讲师更多课程 
                    慕课官方号讲师的其他课程
                
帝堵抢车位动画制作
初级·36959
免费课程
                                
JavaScript入门篇 
入门·738222
免费课程
                                
                难度入门
            
                时长 8小时55分
            
                学习人数
            
综合评分9.47
                            2557人评价
                        查看评价
                                9.7
                                内容实用
                            
                                9.4
                                简洁易懂
                            
                                9.3
                                逻辑清晰

最热最新

AppMan

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>nextSibling | previousSibling</title>
</head>
<body>
<ul id="u1">
<li id="a">javascript</li>
<li id="b">jquery</li>
<li id="c">html</li>
</ul>
<ul id="u2">
<li id="d">css3</li>
<li id="e">php</li>
<li id="f">java</li>
</ul>
<script type="text/javascript">
function get_nextSibling(n) {
var x = n.nextSibling;
while (x && x.nodeType != 1) {
x = x.nextSibling;
}
return x;
}

function get_previousSibling(n) {
var x = n.previousSibling;
while (x && x.nodeType != 1) {
x = x.previousSibling;
}
return x;
}

var x = document.getElementsByTagName("li")[0];
document.write(x.nodeName);
document.write(" = ");
document.write(x.innerHTML);

var y = get_nextSibling(x);
if (y != null) {
document.write("<br />nextSibling: ");
document.write(y.nodeName);
document.write(" = ");
document.write(y.innerHTML);
} else {
document.write("<br>已经是最后一个节点");
}

var z = get_previousSibling(x);
if (z != null) {
document.write("<br />previousSibling: ");
document.write(z.nodeName);
document.write(" = ");
document.write(z.innerHTML);
} else {
document.write("<br>已经是最前面一个节点");
}
</script>
</body>
</html>

查看全部

0 采集收起来源：访问兄弟节点
2023-03-02
AppMan

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<ul id="con">
<li id="lesson1">javascript
<ul>
<li id="tcon"> 基础语法</li>
<li>流程控制语句</li>
<li>函数</li>
<li>事件</li>
<li>DOM</li>
</ul>
</li>
<li id="lesson2">das</li>
<li id="lesson3">dadf</li>
<li id="lesson4">HTML/CSS
<ul>
<li>文字</li>
<li>段落</li>
<li>表单</li>
<li>表格</li>
</ul>
</li></ul>
<script type="text/javascript">
var mylist = document.getElementById("tcon");
document.write("<br>=========<br>" + mylist.parentNode.parentNode.parentNode.lastChild.textContent);
</script>

</body>
</html>

查看全部

0 采集收起来源：访问父节点parentNode
2023-03-02
贞不戳

数组排序sort()
①document.write(对象.sort());
//这个我不知道是怎么排的
②
function sortNum(a,b) {
return a-b;
}
document.write(对象.sort(sortNum));
//这个是按顺序排的

查看全部

0 采集收起来源：数组排序sort()
2023-03-01
贞不戳

选定元素slice()
语法：document.write(对象.slice(start的位置数字,到你想截至的位置的后一位))
//因为开始是从0开始，结束的那一个数字不算，所以要取到你想取得那一个位置的后一位

查看全部

0 采集收起来源：选定元素slice()
2023-03-01
贞不戳

颠倒数组元素顺序reverse()
document.write(对象.reverse())
会让你的语句倒着来，但不会添加新的语句
例：
var myarr1= ["我","爱","你"];
document.write(myarr1.reverse())

结果：你爱我

查看全部

0 采集收起来源：颠倒数组元素顺序reverse()
2023-03-01
贞不戳

指定分隔符连接数组元素join()
document.write(对象.join(里面填入你想填的符号，也可以不填));

查看全部

0 采集收起来源：指定分隔符连接数组元素join()
2023-03-01
AppMan

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<div id="con">
<p>javascript</p>
<div>jQuery</div>
<h5>PHP</h5>
</div>
<script type="text/javascript">
var x=document.getElementById("con");
document.write("firstChild : " + x.firstChild + "<br>");
document.write("lastChild : " + x.lastChild + "<br>");
document.write("firstChild.nodeValue : " + x.firstChild.nodeValue + "<br>");
document.write("lastChild.nodeValue : " + x.lastChild.nodeValue + "<br>");
</script>
</body>
</html>

查看全部

0 采集收起来源：访问子节点的第一和最后项
2023-03-01
AppMan

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>childNodes</title>
</head>
<body>
<div>
javascript
<p>javascript</p>
<div>jQuery</div>
<h5>PHP</h5>
</div>
<script type="text/javascript">
document.write("-----------<br>");
var chs = document.getElementsByTagName("div");
for (var i = 0; i < chs.length; i++) {
document.write((i + 1) + ", nodeType : " + chs[i].nodeType + "<br>");
document.write((i + 1) + ", nodeName : " + chs[i].nodeName + "<br>");
document.write((i + 1) + ", nodeValue : " + chs[i].nodeValue + "<br>");
document.write((i + 1) + ", childNodes : " + chs[i].childNodes + "<br>");
}

</script>
</body>
</html>

查看全部

0 采集收起来源：访问子节点childNodes
2023-03-01
AppMan

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>节点属性</title>
</head>
<body>
<ul>
<li>javascript</li>
<li>HTML/CSS</li>
<li>jQuery</li>
</ul>
<script type="text/javascript">
var lis = document.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
document.write((i + 1) + ', innerHTML : ' + lis[i].innerHTML + "<br>");
document.write((i + 1) + ", nodeName : " + lis[i].nodeName + "<br>");
document.write((i + 1) + ", nodeType : " + lis[i].nodeType + "<br>");
document.write((i + 1) + ', nodeValue : ' + lis[i].nodeValue + "<br>");
}
</script>
</body>
</html>

查看全部

0 采集收起来源：节点属性
2023-03-01
AppMan

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<p id="intro">我的课程</p>
<ul>
<li title="JS">JavaScript</li>
<li title="JQ">JQuery</li>
<li title="">HTML/CSS</li>
<li title="JAVA">JAVA</li>
<li title="">PHP</li>
</ul>
<h1>以下为li列表title的值,当title为空时，新设置值为"WEB前端技术":</h1>
<script type="text/javascript">
var Lists=document.getElementsByTagName("li");
for (var i=0; i<Lists.length;i++)
{
var text = Lists[i].getAttribute("title");
document.write(text +"<br>");
if(text=="")
{
Lists[i].setAttribute("title", "WEB前端技术"+i);
document.write(Lists[i].getAttribute("title")+"<br>");
}
}
</script>
</body>
</html>

查看全部

0 采集收起来源：setAttribute()方法
2023-03-01
AppMan

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>getAttribute()</title>
</head>
<body>
<p id="intro">课程列表</p>
<ul>
<li title="第1个li">HTML</li>
<li>CSS</li>
<li title="第3个li">JavaScript</li>
<li title="第4个li">Jquery</li>
<li>Html5</li>
</ul>
<p>以下为获取的不为空的li标签title值:</p>
<script type="text/javascript">
var con=document.getElementsByTagName("li");
for (var i=0; i< con.length;i++){
var text = con.item(i).getAttribute("title");
if(text!=null)
{
document.write(text+"<br>");
}
}
var p = document.getElementById("intro");
document.write(".getAttribute() : " + p.getAttribute("id"));
</script>
</body>
</html>

查看全部

0 采集收起来源：getAttribute()方法
2023-03-01
AppMan

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>

<body>
<form>
请选择你爱好:<br>
<input type="checkbox" name="hobby" id="hobby1"> 音乐
<input type="checkbox" name="hobby" id="hobby2"> 登山
<input type="checkbox" name="hobby" id="hobby3"> 游泳
<input type="checkbox" name="hobby" id="hobby4"> 阅读
<input type="checkbox" name="hobby" id="hobby5"> 打球
<input type="checkbox" name="hobby" id="hobby6"> 跑步 <br>
<input type="button" value="全选" onclick="checkall();">
<input type="button" value="全不选" onclick="clearall();">
<p>请输入您要选择爱好的序号，序号为1-6:</p>
<input id="wb" name="wb" type="text">
<input name="ok" type="button" value="确定" onclick="checkone();">
</form>
<script type="text/javascript">
function checkall() {
var hobby = document.getElementsByTagName("input");
// document.write("check-hobby.length = " + hobby.length);
// 任务1
for (var i = 0; i < hobby.length; i++) {
if (hobby.item(i).type == "checkbox") {
hobby.item(i).checked = true;
}
}
}

function clearall() {
var hobby = document.getElementsByName("hobby");
// document.write("clear-hobby.length = " + hobby.length);
// 任务2
for (var i = 0; i < hobby.length; i++) {
hobby.item(i).checked = false;
}
}

function checkone() {
var j = document.getElementById("wb").value;
j = (parseInt(j) - 1) % 6;
// 任务3
var hobby = document.getElementsByName("hobby");
// document.write(j + " - hobby.length = " + hobby.length);
// 任务2
for (var i = 0; i < hobby.length; i++) {
if (j == i) {
hobby.item(i).checked = !hobby.item(i).checked;
break;
}
}
}

</script>
</body>
</html>

查看全部

0 采集收起来源：区别getElementByID,getElementsByName,getElementsByTagName
2023-03-01
AppMan

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JavaScript</title>
</head>
<body>

<form name="Input">
<table align="center" width="500px" height="50%" border="1">
<tr>
<td align="center" width="100px">
学号:
</td>
<td align="center" width="300px">
<input type="text" id=userid name="user" onblur="validate();">
<div id=usermsg></div>
</td>
</tr>
<tr>
<td align="center" width="100px">
姓名:
</td>
<td align="center">
<input type="text" name="name">
</td>
</tr>
<tr>
<td align="center" width="%45">
性别:
</td>
<td align="center">
<input type="radio" name="sex" value="男">
男
<input type="radio" name="sex" value="女">
女
</td>
</tr>
<tr>
<td align="center" width="30%">
年龄:
</td>
<td align="center" width="300px">
<input type="text" name="age">
</td>
</tr>
<tr>
<td align="center" width="100px">
地址:
</td>
<td align="center" width="300px">
<input type="text" name="addr">
</td>
</tr>

</table>
</form>
<h1 id="myHead" onclick="getValue()">
看看三种获取节点的方法?
</h1>
<p>
点击标题弹出它的值。
</p>
<input type="button" onclick="getElements()"
value="看看name为sex的节点有几个?" />
<Br>
<input type="button" onclick="getTagElements()"
value="看看标签名为input的节点有几个?" />

<script type="text/javascript">
function getValue()
{
var myH = document.getElementById("myHead");
alert(myH.innerHTML)
}
function getElements()
{
var myS = document.getElementsByName("sex")
alert(myS.length);
}

function getTagElements()
{
var myI = document.getElementsByTagName("input");
alert(myI.length);
}

</script>

</body>
</html>

查看全部

0 采集收起来源：getElementsByTagName()方法
2023-03-01
AppMan

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function getnum(){
// document.getElementsByName() 返回带有指定名称的节点对象的集合。
// 与getElementById() 方法不同的是，通过元素的 name 属性查询元素，而不是通过 id 属性。
var mynode= document.getElementsByName("myt") ;
alert(mynode.length);
}
</script>
</head>
<body>
<input name="myt" type="text" value="1">
<input name="myt" type="text" value="2">
<input name="myt" type="text" value="3">
<input name="myt" type="text" value="4">
<input name="myt" type="text" value="5">
<input name="myt" type="text" value="6">
<br />
<input type="button" onclick="getnum()" value="看看有几项？" />
</body>
</html>

查看全部

0 采集收起来源：getElementsByName()方法
2023-03-01
AppMan

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>screen</title>
</head>
<script type="text/javascript">
/*
.screen.height 屏幕分辨率的高度，单位像素
.screen.width 屏幕分辨率的宽度，单位像素
.screen.availHeight 窗口可以使用的屏幕高度,减去界面特性，比如任务栏，单位像素
.screen.availWidth 窗口可以使用的屏幕宽度,减去界面特性，比如任务栏，单位像素
.screen.colorDepth 用户浏览器表示的颜色位数，通常为32位
.screen.pixelDepth 用户浏览器表示的颜色位数，通常为32位（IE浏览器不支持此属性）
*/
document.write("height 屏幕分辨率的高度： " + window.screen.height + "<br>");
document.write("width 屏幕分辨率的宽度： " + window.screen.width + "<br>");
document.write("availHeight 屏幕可以使用的屏幕高度： " + window.screen.availHeight + "<br>");
document.write("availWidth 屏幕可以使用的屏幕宽度： " + window.screen.availWidth + "<br>");
document.write("colorDepth 用户浏览器表示的颜色位数： " + window.screen.colorDepth + "<br>");
document.write("pixelDepth 用户浏览器表示的颜色位数： " + window.screen.pixelDepth + "<br>");
</script>
<body>
</body>
</html>

查看全部

0 采集收起来源：屏幕可用高和宽度
2023-03-01

首页上一页 6 7 8 9 10 11 12 下一页尾页

0/150

提交

取消

开始学习

课程须知: 你需要具备HTML、css基础知识，建议同学们也可以想学习下js入门篇，快速认识js，熟悉js基本语法，更加快速入手进阶篇！

老师告诉你能学到什么？: 通过JavaScript学习，掌握基本语法，制作简单交互式页面

微信扫码，参与3人拼团

热搜

最近搜索清空

JavaScript进阶篇

数组排序sort()

选定元素slice()

颠倒数组元素顺序reverse()