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的更多相关文章
随机推荐
- 使用Eclipse绑定Tomcat并发布应用
l 步骤1:获得服务器运行环境配置,Window/Preferences/Server/Runtime Environmen l步骤2:添加服务器 l步骤3:选择服务器在硬盘的地址,然后所有的都是确定 ...
- pkusc2018数学题
题解: 还是很水的 复制个题面过来 好吧我不会复制 https://www.cnblogs.com/skylee03/p/9127130.html 题目链接 第一题是个傻逼题 初中数学题随便凑凑 ( ...
- 【转】通过 INotifyPropertyChanged 实现观察者模式
通过 INotifyPropertyChanged 实现观察者模式 原博客地址 http://frankdzu.blog.sohu.com/117654536.html 普通观察者模式存在的问题 我们 ...
- ubuntu系统安装mysql登陆提示 解决Mysql ERROR 1045 (28000): Access denied for user 'root'@'localhost'问题
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAqoAAABtCAIAAADmldQYAAAe/0lEQVR4nO1dveslR3btzJGFk02GmU
- mousedown和click冲突事件
鼠标事件,一般用button来区分鼠标的按键(DOM3标准规定: click事件只能监听左键, 只能通过mousedown和mouseup来判断鼠标键): 1.鼠标左键 button = 0 2.鼠标 ...
- BZOJ3230 相似子串 字符串 SA ST表
原文链接http://www.cnblogs.com/zhouzhendong/p/9033092.html 题目传送门 - BZOJ3230 题意 给定字符串$s$.长度为$n$. 现在有$Q$组询 ...
- 最终一致性2PC复杂场景，事务报数据库操作超时。
稀里糊涂的,忘了开启SqlServer的is read committed snapshot on
- Echarts官网展示
1.参考实例 http://echarts.baidu.com/examples/ 点击去的效果: 2.配置项手册 http://echarts.baidu.com/option.html#title ...
- JavaScript 作用域的误区
了解JavaScript的同学可能知道,JavaScript语言由于设计原因,导致语言本身存在很多先天性的不足,当然这并非设计者有意的,js语言最初是被设计来作为网页交互的脚本语言,依照现有的js语法 ...
- logback实践笔记
前言 每次看公司配置好的logback文件的时候,都不知道什么意思.导致有的时候,一些项目发到测试环境的时候,有的项目没有打印日志,自己都不知道哪里有问题.所以自己新建一个springboot项目 ...