JSAP101
JSAP101
1、DOM
1）文档对象模型
文档：把一个Html文件看成一个文档，所以把这个文档看成一个对象。XML文件也可以看成一个文件。XML侧重于存储数据，html主要以展示为主。一个页面就是一个文档。
页面中的每个标签，都是一个元素，每个元素都可以看成是1个对象。
页面中所有的内容都是节点：标签，属性，文本 。html是文档的根元素。由文档及文档中所有的元素（标签）组成的一个树形结构图脚树状图（DOM树）
DOM是用来操作页面元素的。
2）DOM初体验
<input type="button" value="弹窗" onclick="alert('hello!')"/><!--注意用单引号-->3、为元素注册事件
1）事件：以on开头
js代码应该和html代码分离
function f1(){
...
}
//可以通过事件调用函数
<input type="button" value="显示效果" onclick="f()"/>
//分离js与html,利用id
<input type="button" value="点击" id="btn"/>
<script>
function f(){
alert("分离");
}
//document.getElementById("ids属性名");返回的是一个元素对象
var btnObj=document.getElementById("btn");
//相当于为按钮注册了（点击）事件
btnObj.onclick=f;//不必加括号
</script>最终的代码，不再在script外定义函数（以下代码均在body标签内）：
使用匿名函数
若把input和script标签互换位置，则会报错，因为此时还没有btn这个id的值
//案例：点击按钮显示图片和设置宽高
<body>
<input type="button" value="显示图片" id="btn"/>
<img src="" id="im"/>
<script>
//点击按钮时设置img标签的src属性
//获取按钮
var btnObj=document.getElementById("btn");
btnObj.onclick=function () {
var imObj=document.getElementById("im");
imObj.src="timg.jpg";
//设置图片大小
imObj.width=300;
imObj.height=400;
};
</script>
</body>//案例：点击按钮设置p标签的文本内容
<body>
<input type="button" value="设置p的内容" id="btn"/>
<p id="p1">这是p标签</p>
<script>
document.getElementById("btn").onclick=function () {
document.getElementById("p1").innerText="我是一个p标签";
}//案例：点击按钮修改超链接的地址及文本内容
<body>
<input type="button" value="设置p的内容" id="btn"/>
<p id="p1">这是p标签</p>
<script>
document.getElementById("btn").onclick=function () {
document.getElementById("p1").innerText="我是一个p标签";
}
</body>//案例点击按钮设置所有P标签的内容
<body>
<input type="button" value="显示效果" id="btn"/>
<p>she is young.</p>
<p>she is young.</p>
<p>she is young.</p>
<p>she is young.</p>
<p>she is young.</p>
<script>
document.getElementById("btn").onclick=function(){
//根据标签名字获取标签
var pOBJ=document.getElementsByTagName("p");
console.log(pOBJ);//是一个伪数组
//循环遍历这个伪数组
for(var i=0;i<pOBJ.length;i++){
pOBJ[i].innerText="no way!"; }
}
</script>
</body>//案例：点击按钮修改图片的alt与title属性
<body>
<input type="button" value="显示效果" id="btn"/>
<img src="timg.jpg" alt="cc" title="dd"/>
<script>
document.getElementById("btn").onclick=function(){
//返回的是一个伪数组
var imgObjs=document.getElementsByTagName("img");
imgObjs[0].alt="修改";
imgObjs[0].title="完成";
}
</script>//案例：点击按钮修改多个文本的值
<body>
<input type="button" value="修改文本框" id="btn"/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<script>
//根据id获取按钮
//为按钮注册点击事件，添加事件处理函数
document.getElementById("btn").onclick=function () {
//获取所有的文本框
var inputs=document.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++){
//判断这个元素是不是按钮
if(inputs[i].type!="button") {
inputs[i].value="你好";
}
}
}
</script>
</body>//案例：点击每个图片弹出对话框
<body>
<img src="u=2124789894,3346559232&fm=11&gp=0.jpg" alt="" id="im1"/>
<img src="u=2124789894,3346559232&fm=11&gp=0.jpg" alt=""id="im2"/>
<img src="u=2124789894,3346559232&fm=11&gp=0.jpg" alt="" id="im3"/>
<script>
var imgObjs=document.getElementsByTagName("img");
//循环遍历
for(var i=0;i<imgObjs.length;i++){
imgObjs[i].onclick=function () {
alert("延禧攻略");
}
}
</script>
</body>//点击按钮修改其value属性
<body>
<input type="button" value="按钮" id="btn"/>
<script>
var btnObj=document.getElementById("btn");
btnObj.onclick=function () {
btnObj.value="你好";
}
</script>
</body>案例：点击图片修改其宽高
<body>
<img src="timg.jpg" alt="" id="im"/>
<script>
var imgObj=document.getElementById("im");
imgObj.onclick=function () {
this.width="200";
this.height="700";
}
</script>
</body>案例：按钮的排他功能
<body>
<input type="button" value="吃了吗"/>
<input type="button" value="吃了吗"/>
<input type="button" value="吃了吗"/>
<input type="button" value="吃了吗"/>
<input type="button" value="吃了吗"/>
<script>
//获取所有的按钮
var btnObjs=document.getElementsByTagName("input");
for(var i=0;i<btnObjs.length;i++){
btnObjs[i].onclick=function () {
for(var j=0;j<btnObjs.length;j++){
btnObjs[j].value="吃了吗";
}
this.value="还没有";
}
}
</script>
</body>//for循环在加载页面时就已经完成，而点击事件只在点击时才触发执行。因此上面的this.value不能写成btnObjs[i]，因为此时已经循环注册完事件，i=btnObjs.length
//点击图片修改路径
<body>
<a id="ak" href="u=2124789894,3346559232&fm=11&gp=0.jpg"><img id="im" src="timg.jpg"/></a>
<script>
document.getElementById("im").onclick=function () {
this.src=document.getElementById("ak").href;
}
</script>
</body>//点击按钮切换图片
<body>
<input type="button" value="显示大图" id="btn"/>
<img src="u=2124789894,3346559232&fm=11&gp=0.jpg" id="im">
<script>
//通过函数获取对象
function my$(id) {
return document.getElementById(id);
}
my$("btn").onclick=function () {
my$("im").src="timg.jpg";
};
</script>
</body>//点击按钮选择性别和兴趣
//修改兴趣
<body>
<input type="button" value="修改性别" id="btn1"/>
<input type="radio" name="sex" value="1" id="rad1"/>male
<input type="radio" name="sex" value="2"/>female
<input type="radio" name="sex" value="3"/>secret
<script>
function my$(id) {
return document.getElementById(id);
}
//规律：在表单标签中，如果属性和值只有一个，并且是这个属性本身，那么
//在写js代码时，进行DOM操作的时候，这个属性值，是布尔类型就可以了
my$("btn1").onclick=function(){
my$("rad1").checked=true;//不用checked，只用false,true
};
</script>
<br />
<input type="button" value="修改兴趣" id="btn2">
<input type="checkbox" value="1" name="hobby" id="ck1"/>游戏
<input type="checkbox" value="2" name="hobby"/>睡眠
<script>
my$("btn2").onclick=function () {
my$("ck1").checked=true;
}
</script>
</body>案例选择下拉框和文本域的相关属性
<body>
<input type="button" value="点菜" id="btn"/>
<select>
<option value="1">炸鸡蛋</option>
<option value="2">龙虾饭</option>
<option value="3" id="op1">凉拌鸡肉</option>
<option value="4">西式炖菜</option>
</select>
<!--<script src="xx.js"></script>可引用js文件-->
<script>
function my$(id) {
return document.getElementById(id);
}
my$("btn").onclick=function () {
//点击按钮选择菜
my$("op1").selected=true;
};
</script>
<textarea name="" id="tt" cols="30" rows="10" readonly="readonly">
今天半价吃寿司。有鸭胸芝士，鳗鱼蒸饭。
</textarea>
<input type="button" value="注册" id="btn2">
<script>
//disabled--这个属性是禁用的意思
//html中属性和值是自身的，且只有一个的，可以只写这个属性，不用赋值
my$("btn2").onclick=function () {
my$("tt").value="太美味了，下次尝尝炸鸡饭";
}
</script>
</body>案例：点击按钮设置div样式
<body>
<input type="button" value="设置样式" id="btn"/>
<div id="dv"></div>
<script>
//凡是css属性中多个单词的写法，在js代码中
//DOM操作时，有分号的属性不用写分号，改为首字母大写
function my$(id) {
return document.getElementById("id")
}
my$("btn").onclick=function () {
my$("dv").style.width="300px";
my$("dv").style.width="200px";
my$("dv").style.backgroundColor="red";
};
</script>
</body>//案例：点击按钮显示和隐藏
<input type="button" value="hide" id="btn"/>
<input type="button" value="display" id="btn2"/>
<div id="dv">
</div>
<script>
function my$(id) {
return document.getElementById(id)
}
my$("btn").onclick = function () {
my$("dv").style.display = "none";
}
my$("btn2").onclick = function () {
my$("dv").style.display = "block";
}
</script>div的显示和隐藏通过类样式实现
<body>
<input type="button" value="设置样式" id="btn"/>
<div id="dv">
</div>
<script>
function my$(id) {
return document.getElementById(id)
}
my$("btn").onclick=function () {
//在js代码中DOM操作时，设置元素的类样式，不用class
//关键字，应该使用className
my$("dv").className="cls";
}
</script>
</body>//案例：网页开关灯
<head>
<meta charset="UTF-8">
<title>abc</title>
<style>
.cls {
background-color: black;
}
</style>
</head>
<body>
<input id="btn" type="button" value="light">
<script>
function my$(id) {
return document.getElementById(id)
}
my$("btn").onclick = function () {//获取body标签
document.body.className = document.body.className != "cls" ? "cls" : "";
};
</script>
</body>
</html>JSAP101的更多相关文章
随机推荐
- L1与L2正则(转)
概念: L0范数表示向量中非零元素的个数:NP问题,但可以用L1近似代替. L1范数表示向量中每个元素绝对值的和: L1范数的解通常是稀疏性的,倾向于选择:1. 数目较少的一些非常大的值 2. 数目 ...
- js条件语句初步练习
var a=18 if(a<10){ alert("便宜") } else{ ...
- bat批处理文件 批量修改文件名
需要将一系列文件如out-M0.png, out-M1.png, out-M2.png, ... 重新命名为 color-0.png, color-1.png, color-2.png, ... 方法 ...
- 请推荐几个asp.net下做网站的好的开源框架
1.We7 CMS We7 CMS是由西部动力开发的一款充分发掘互联网Web2.0(如博客.RSS等)的信息组织优势,将其理念利用到政府企事业网站的构建.组织.管理中的网站建设和管理方面的产品. 系统 ...
- js防止安卓手机软键盘弹出挤压页面导致变形的方法
5防止安卓手机软键盘弹出挤压页面导致变形的方法 输入框定位在底部,手机端打开,输入框聚焦后软键盘打开为什么会瞬间自动关闭呢? 先看看问题: 1.原来是这样的: 2.在苹果手机里面是正常的: 3.到了安 ...
- day22 模块最后的补充。包。
前一天内容复习: # def func(): # a # # def main(): # func() # # try: # main() # except: # pass # raise NameE ...
- 组合数的简单求法（dfs）
组合数的具体应用可以参考这个例子:https://www.cnblogs.com/FengZeng666/p/10496223.html 下面这段代码可以作为求组合数的固定套路或者公式: #inclu ...
- scrapy 代码调试用 shell
在虚拟机里CD到你的scrapy某个项目的目录,再 1. scrapy shell + '网址'(注意引号) 2. response.xpath(' ')来提取 如: response.xpath(' ...
- SVM：随机产生100个点，建立模型，找出超平面方程——Jaosn niu
import numpy as np import pylab as pl from sklearn import svm # we create 40 separable points #np.ra ...
- Python自制微信机器人：群发消息、自动接收好友
运营公众号也有半年了,今年5月份开始的,之前一直用一款windows工具来运营自动接受好友请求.群发文章.自动回复等操作,但颇有不便. 举几个场景: 突然在外面看到一篇文章很好,临时写了一篇,想群发一 ...