JSAP102
JSAP102
1、API
//案例：禁用文本框
<body>
<input type="button" value="禁用" id="btn"/>
<input type="text" value="文本框" id="txt"/>
<script>
document.getElementById("btn").onclick=function () {
document.getElementById("txt").disabled=true;
};
</script>//案例：点击按钮修改列表颜色
<body>
<input type="button" value="变色" id="btn"/>
<ul id="uu">
<li>汁烧鳗鱼</li>
<li>汁烧鳗鱼</li>
<li>汁烧鳗鱼</li>
</ul>
<script>
document.getElementById("btn").onclick=function () {
document.getElementById("uu").style.backgroundColor="pink";
}
</script>
</body>//阻止超链接默认跳转
<body>
<a href="http://www.baidu.com/" onclick="return f()">百度一下</a>
<script>
//阻止超链接的默认跳转：return false
function f() {
alert("stop!");
return false;
}
</script>
</body>
案例：点击小图切换大图
<body>
<a href="timg.jpg" id="ak"><img src="u=2124789894,3346559232&fm=11&gp=0.jpg"></a>
<img src="" id="big">
<script>
function my$(id) {
return document.getElementById(id);
}
my$("ak").onclick=function () {
my$("big").src=this.href;
return false;
};
</script>
</body>//案例列表隔行变色
<body>
<input type="button" value="隔行变色" id="btn"/>
<ul id="uu">
<li>素烧豆腐</li>
<li>素烧豆腐</li>
<li>素烧豆腐</li>
</ul>
<script>
//点击按钮
function my$(id) {
return document.getElementById(id);
}
my$("btn").onclick = function () {
//获取所有li标签
var list = my$("uu").getElementsByTagName("li");
for (var i = 0; i < list.length; i++) {
if (i % 2 == 0) {
list[i].style.backgroundColor="pink";
} else {
list[i].style.backgroundColor="skyblue";
}
}
};
</script>
</body>案例：列表高亮显示
<body>
<ul>
<li>特价日料</li>
<li>特价日料</li>
<li>特价日料</li>
</ul>
<script>
function my$(id) {
return document.getElementById(id);
}
//注意是鼠标进入和鼠标离开
var list = document.getElementsByTagName("li");
for (var i = 0; i < list.length; i++) {
list[i].onmouseover = function () {
this.style.backgroundColor = "skyblue";
}
list[i].onmouseout=function () {
this.style.backgroundColor="";
}
}
</script>
</body>//鼠标浮动显示，离开不显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>abc</title>
<style>
.show{
display: block;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div>
<img src="u=2124789894,3346559232&fm=11&gp=0.jpg" id="pic1">
</div>
<div>
<img src="timg.jpg" id="pic2">
</div>
<script>
function my$(id) {
return document.getElementById(id);
}
var aObj = my$("pic1");
aObj.onmouseover=function () {
my$("pic2").className="show";
}
aObj.onmouseout=function () {
my$("pic2").className="hide";
}
</script>
</body>//根据name属性值获取元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>abc</title>
<style>
</style>
</head>
<body>
<input type="button" value="显示效果" id="btn"><br/>
<input type="text" value="欢迎光临" name="name1"><br/>
<input type="text" value="欢迎光临" name="name2"><br/>
<input type="text" value="欢迎光临" name="name3"><br/>
<input type="text" value="欢迎光临" name="name1"><br/>
<script>
function my$(id) {
return document.getElementById(id);
}
//点击按钮，改变所有name属性值为name1的文本框中的value属性值
my$("btn").onclick = function () {
//通过name属性获取元素:主要指表单标签
var inputs = document.getElementsByName("name1");
for (var i = 0; i < inputs.length; i++) {
inputs[i].value="吃了吗";
}
}案例：根据类样式的名字获取元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>abc</title>
<style>
div {
width: 200px;
height: 50px;
background: indianred;
margin-top: 10px;
}
.cls {
background-color: aqua;
}
</style>
</head>
<body>
<p class="cls">你好</p>
<p>你也好</p><br/>
<span>番茄</span><br/>
<span class="cls">芝士</span><br/>
<div class="cls">鸡肉</div>
<div>鱼肉</div>
<input type="button" value="显示效果" id="btn"><br/>
<script>
//点击按钮设置应用cls类样式的标签背景颜色为绿色
function my$(id) {
return document.getElementById(id);
}
//点击按钮，改变所有name属性值为name1的文本框中的value属性值
//根据类样式的名字来获取元素
my$("btn").onclick = function () {
var Objs = document.getElementsByClassName("cls");
for (var i = 0; i < Objs.length; i++) {
Objs[i].style.backgroundColor = "green";
}
}
</script>
</body>//其他的获取元素方式及总结
//根据选择器的方式获取元素
.querySelector();
括号内放选择器，即#id名
返回一个元素
.querySelectorAll()
括号内放 .类名
返回伪数组
//案例：模拟搜索框
<body>
<input type="text" value="请输入搜索内容" id="txt"/>
<script>
function my$(id) {
return document.getElementById(id);
}
//获取文本框
//注册获取焦点事件
my$("txt").onfocus = function () {
//判断文本框的内容是不是默认的内容
if (this.value == "请输入搜索内容") {
this.value = "";//清空文本框
this.style.color = "black";
}
}
//注册失去焦点事件
my$("txt").onblur = function () {
if (this.value.length == 0) {
this.value = "请输入搜索内容";
this.style.color = "gray";
}
}
</script>
</body>//案例：验证文本框密码的长度
<body>
<input type="text" value="" id="txt">
<script>
function my$(id) {
return document.getElementById(id);
}
//获取文本框
my$("txt").onblur=function () {
//判断密码长度
if(this.value.length>=6&&this.value.length<=10){
this.style.backgroundColor="green";
}else {
this.style.backgroundColor="red";
}
}
</script>
</body>获取span/p/div等标签内容使用.textContent(ie8不支持，需使用.innerText，其他浏览器也支持)
如果某属性在浏览器中不支持，那么这个属性的类型是undefined
2、封装innerText和textContent
即兼容两种方式
//设置任意标签的文本内容
function setInnerText(element,text){
//判断浏览器是否支持该属性即判断该属性的值是不是undefined
if(typeof element.textContent=="undefined"){element.innnerText=text;
}else{
//支持该属性
element.textContent=text;
}
}
//获取任意标签的文本内容
function getInerText(element){
if(typeof element.textContent=="undefined"){
return element.innerText;
}else{
return element.textContent;
}
}3、innerText和innerHTML
1）设置
如果使用innerText主要是设置文本的，设置标签内容，是不会进行标签的解析而直接显示文本的，innerHTML可以设置文本内容，也可以解析标签，同时兼容所有浏览器，推荐使用
2）HTML
innerText在获取时可以获取标签中间的文本内容，如果标签内还有其他内容，那么也会一并被获取过来，但不会包括标签本身。innerHTML在把文本获取过来时，也会把标签获取过来。
4、自定义属性操作
1）程序员自己添加的属性
可在标签名内设置：
<li score="95">小勇的数学分数</li>但是通过id或类等方式获取该标签而形成的对象，却是不具备该自定义属性的。
通过.getAttribute(“属性名”));专门获取自定义属性值
如果要为标签设置，用setAttribute属性
.setAttribute("属性名",属性值)2）移除自定义属性
移除自定义属性，也可以移除元素自带的属性，如index：
removeAttribute(“属性名 “)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
.box {
width: 400px;
height: 300px;
border: 1px solid #ccc;
margin: 100px auto;
overflow: hidden;
}
.hd {
height: 45px;
}
.hd span {
display: inline-block;
width: 90px;
background-color: pink;
line-height: 45px;
text-align: center;
cursor: pointer;
}
.hd span.current {
background-color: purple;
}
.bd li {
height: 255px;
background-color: purple;
display: none;
}
.bd li.current {
display: block;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="hd">
<span class="current">体育</span>
<span>娱乐</span>
<span>新闻</span>
<span>综合</span>
</div>
<div class="bd">
<ul>
<li class="current">我是体育模块</li>
<li>我是娱乐模块</li>
<li>我是新闻模块</li>
<li>我是综合模块</li>
</ul>
</div>
</div>
<script>
function my$(id) {
return document.getElementById(id);
}
//获取最外面的div
var box = my$("box");
//获取的是里面的第一个div
var hd = box.getElementsByTagName("div")[0];
//获取的是里面第二个div
var bd = box.getElementsByTagName("div")[1];
//获取所有的li标签
var list = bd.getElementsByTagName("li");
//获取所有的span标签
var spans = hd.getElementsByTagName("span");
//循环遍历的方式，添加点击事件
for (var i = 0; i < spans.length; i++) {
//在点击之前就把索引保存在span标签中
spans[i].setAttribute("index", i);
spans[i].onclick = function () {
//第一件事：移除所有span的类样式,通过class
for (var j = 0; j < spans.length; j++) {
spans[j].removeAttribute("class");
}
//第二件事，当前被点击的span应用类样式
this.className = "current";
//span被点击时获取存储的索引值
var num = this.getAttribute("index");
//获取所有的li标签，每个先全部隐藏
for(var k=0;k<list.length;k++){
list[k].removeAttribute("class");
}
//当前被点击的标签显示
list[num].className="current";
};
}
</script>
</body>JSAP102的更多相关文章
随机推荐
- 微信小程序—文件系统
文件系统 文件系统是小程序提供的一套以小程序和用户维度隔离的存储以及一套响应的管理接口.通过wx.getFilesSystemManager()可以获取到全局唯一的文件管理器,所有文件管理操作通过Fi ...
- P1052 过河 线性dp
题目描述 在河上有一座独木桥,一只青蛙想沿着独木桥从河的一侧跳到另一侧.在桥上有一些石子,青蛙很讨厌踩在这些石子上.由于桥的长度和青蛙一次跳过的距离都是正整数,我们可以把独木桥上青蛙可能到达的点看成数 ...
- 给定数组长度2n，分成n对，求n对最小元素之和最大
给定长度为 2n 的数组, 你的任务是将这些数分成 n 对, 例如 (a1, b1), (a2, b2), ..., (an, bn) ,使得从1 到 n 的 min(ai, bi) 总和最大. 示例 ...
- 20165235 祁瑛 2018-4 《Java程序设计》第七周学习总结
20165235 祁瑛 2018-4 <Java程序设计>第七周学习总结 教材学习内容总结 MySQL数据管理系统 MySQL数据管理系统,简称MySQL,是世界上流行的数据管理系统. M ...
- 爬虫2 urllib3 爬取30张百度图片
import urllib3 import re # 下载百度首页页面的所有图片 # 1. 找到目标数据 # page_url = 'http://image.baidu.com/search/ind ...
- 不利用C语言库函数，实现字符串相关函数
#include<stdio.h> int strLength(char* s)//求字符长度 { ; while(s[i]!=NULL) { i++; } return i; } int ...
- Sumdiv POJ - 1845 （逆元/分治）
Consider two natural numbers A and B. Let S be the sum of all natural divisors of A^B. Determine S m ...
- HDU 3829 Cat VS Dog (最大独立集)【二分图匹配】
<题目链接> 题目大意: 动物园有n条狗.m头猫.p个小孩,每一个小孩有一个喜欢的动物和讨厌的动物.如今动物园要转移一些动物.假设一个小孩喜欢的动物在,不喜欢的动物不在,他就会happy. ...
- python专题 --- 递归
如果一个函数在函数内部调用自身本身,这个函数就是递归函数 举例如阶乘函数,其数学递归定义如下: 对应的算法实现 def fact(n): if n==1: return 1 return n * fa ...
- springboot2 config_toolkit 并且设置全局获取数据GlobalUtil
本文只贴相关代码段,完整代码请移步至本人github,若是喜欢,可以star给予支持 作者:cnJun 博客专栏: https://www.cnblogs.com/cnJun/ 本文实现目标 重要的配 ...