JS进阶1
一 表格案例
二 onchange事件（二级联动）
三 onmouse事件
四 事件委派
五 作用域链
一表格案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <button class="selectAll">全选</button>
<button class="reverse">反选</button>
<button class="cancel">取消</button>
<hr>
<table border="">
<tr>
<td><input type="checkbox" class="check"></td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>111</td>
<td>111</td>
</tr>
</table> <script> // 方式1
var ele_selectAll=document.getElementsByClassName("selectAll")[0];
var ele_reverse=document.getElementsByClassName("reverse")[0];
var ele_cancel=document.getElementsByClassName("cancel")[0];
var ele_input=document.getElementsByClassName("check"); ele_selectAll.onclick=function () {
for(var i=0;i<ele_input.length;i++){
ele_input[i].checked="checked"
}
}; ele_cancel.onclick=function () {
for(var i=0;i<ele_input.length;i++){
ele_input[i].checked=""
}
}; ele_reverse.onclick=function () {
for(var i=0;i<ele_input.length;i++){
var ele=ele_input[i];
if(ele.checked){
ele.checked=""
}
else {
ele.checked="checked"
}
}
}; // 方式2 // var eles_button=document.getElementsByTagName("button");
// var ele_input=document.getElementsByClassName("check");
// for (var i=0;i<eles_button.length;i++){
// eles_button[i].onclick=function () {
// if(this.innerHTML=="全选"){
// for(var i=0;i<ele_input.length;i++){
// ele_input[i].checked="checked"
// }
// }
//
// else if (this.innerHTML=="取消"){
//
// }
//
// else {
//
// }
//
// }
// } </script>
</body>
</html>
table案例
二 onchange事件（二级联动）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <form action=""> <select name="pro" id="s1">
<option value="">请输入省份</option>
<option value="hebei">河北省</option>
<option value="henan">河南省</option>
<option value="beijing">北京省</option>
</select> <select name="city" id="c1">
<option value="">请输入城市</option> </select> </form> <script> var arr=[1121,22,344];
var obj={"username":"Yuan","age":12}; // console.log(typeof arr);//object
// console.log(typeof obj);//object
// console.log(obj["username"]);//Yuan // for(var i in arr){
// console.log(arr[i]);//里面的数字
// console.log(i);//数组的索引
// };
//
for(var i in obj){
console.log(obj[i]);//相当于字典里的value
console.log(i);//相当于字典里的key
};
//
// var data={"hebei":["保定","石家庄"],"henan":["郑州","开封"],"beijing":["朝阳","昌平"]};
//
// var select_province=document.getElementById("s1");
// var select_city=document.getElementById("c1");
//
// select_province.onchange=function () {
// // console.log(this.value);
// var province=this.value;
// var citys=data[province];
// // console.log(citys);
//
// // 清空操作
// console.log(select_city.options.length);
// select_city.children.length=1;
//
// for(var i=0;i<citys.length;i++){
// var ele_option=document.createElement("option"); // <option></option>
// ele_option.innerHTML=citys[i]; // <option>郑州</option>
// ele_option.value=i+1; // <option value=1>郑州</option>
//
// select_city.appendChild(ele_option)
// }
// }
</script> </body>
</html>
二级联动
三 onmouse事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
.c1{
width: 200px;
height: 200px;
background-color: #0e90d2;
} .title{
background-color: goldenrod;
line-height: 30px;
}
.item{
line-height: 20px;
background-color: #cccccc; } .hide{
display: none;
} </style>
</head>
<body> <div class="c1"></div> <div class="box">
<div class="title">onmouseover</div>
<div class="con hide">
<div class="item"><a href="">111</a></div>
<div class="item"><a href="">222</a></div>
<div class="item"><a href="">333</a></div> </div>
</div>
<script>
// var ele=document.getElementsByClassName("c1")[0] // ele.onmouseover=function () {
// console.log(1234)
// };
//// ele.onmouseleave=function () {
//// console.log(666)
//// }
// ele.onmouseout=function () {
// console.log(888)
// } var ele_title=document.getElementsByClassName("title")[0];
var ele_box=document.getElementsByClassName("box")[0]; ele_title.onmouseover=function () {
this.nextElementSibling.classList.remove("hide")
};
ele_box.onmouseout=function () {
ele_title.nextElementSibling.classList.add("hide")
} ;
ele_box.onmouseleave=function () {
ele_title.nextElementSibling.classList.add("hide")
} // 1.不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。 // 2.只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。 </script>
</body>
</html>
onmouse事件
四 事件委派
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <ul>
<li>111</li>
<li>222</li>
<li>333</li> </ul> <button>Add</button> <script> var eles_li=document.getElementsByTagName("li");
var ele_btn=document.getElementsByTagName("button")[0];
var ele_ul=document.getElementsByTagName("ul")[0];
//// 添加li
ele_btn.onclick=function () {
var ele_li=document.createElement("li");
ele_li.innerHTML=444;
ele_ul.appendChild(ele_li)
};
//
// 绑定事件
// for(var i=0;i<eles_li.length;i++){
// eles_li[i].onclick=function () {
// alert(this.innerHTML)
// }
// } // 事件委派 ele_ul.addEventListener("click",function (e) {
// alert(123)
// console.log(e.target); // 标签
// console.log(e.target.tagName); // 标签名称
//
if(e.target.tagName=="LI"){
console.log(e.target.innerHTML)
}
}) </script>
</body>
</html>
事件委派
五 作用域链
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var s=12;
function f(){
alert(s);//定义未赋值返回时undefind和无返回值的也是undefind//undefind
var s=12;//12因为在编译时有s但是不会问它的赋值情况。
alert(s);//12
}
f();//先编译在执行如果局部作用域没有赋值python中会报错；而js中出返回undefind
</script> </body>
</html>
Js作用域链
JS进阶1的更多相关文章
- 2. web前端开发分享-css,js进阶篇
一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...
- 【 D3.js 进阶系列 】 进阶总结
进阶系列的文章从去年10月开始写的,晃眼又是4个多月了,想在年前总结一下. 首先恭祝大家新年快乐.今年是羊年吧.前段时间和朋友聊天,聊到十二生肖里为什么没猫,我张口就道:不是因为十二生肖开会的时候猫迟 ...
- web前端开发分享-css,js进阶篇
一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践 经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无 从 ...
- JS 进阶知识点及常考面试题
将会学习到一些原理相关的知识,不会解释涉及到的知识点的作用及用法,如果大家对于这些内容还不怎么熟悉,推荐先去学习相关的知识点内容再来学习原理知识. 手写 call.apply 及 bind 函数 涉及 ...
- js进阶---12-11、jquery如何给动态创建出来的元素绑定事件
js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...
- js进阶---12-12、jquery事件委托怎么使用
js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...
- js进阶---12-10、jquery绑定事件和解绑事件是什么
js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...
- Node.js进阶篇-koa、钩子函数、websocket、嵌入式开发
代码地址如下:http://www.demodashi.com/demo/12932.html 一.简介 koa是由Express原班人马打造的,致力于成为一个更小.更富有表现力.更健壮的We ...
- 【 D3.js 进阶系列 — 4.0 】 绘制箭头
转自:http://www.ourd3js.com/wordpress/?p=660 [ D3.js 进阶系列 — 4.0 ] 绘制箭头 发表于2014/12/08 在 SVG 绘制区域中作图,在绘制 ...
- js进阶 14 jquery的ajax有哪些函数和事件（多练）
js进阶 14 jquery的ajax有哪些函数和事件(多练) 一.总结 一句话总结:常用:load.ajax.post.get.getScript().getJSON().表单序列化,ajax事件这 ...
随机推荐
- 百度umeditor富文本编辑器插件扩展
富文本编辑器在WEB开发中经常用到,个人比较喜欢用百度出的ueditor这款,ueditor这款本身支持插件扩展的,但是ueditor的mini版本 umeditor 就没有那么方便了,不过找了很多资 ...
- css布局------左边宽度不定,右边宽度自动填满剩余空间
HTML <div class="container"> <div class="left"></div> <div ...
- 【F12】chrome浏览器中 F12 功能的简单介绍
chrome浏览器中 F12 功能的简单介绍 由于F12是前端开发人员的利器,所以我自己也在不断摸索中,查看一些博客和资料后,自己总结了一下来帮助自己理解和记忆,也希望能帮到有需要的小伙伴,嘿嘿! 首 ...
- [译]WebAPI下的如何实现参数绑定
本文将概述在WebAPI方式下将如何将参数绑定到一个action方法,包括参数是如何被读取,一系列规则决定特定环境采用的那种绑定方式,文章最后将给出一些实际的例子. Parameter binding ...
- 【转】CentOS 7部署ASP.NET Core应用程序
很早就看过关于net core部署在Linux上的文章,自己也曾亲自将项目部署在Linux上,今天看到这篇文章,为其格式之工整而转! 1.环境准备 网上看了一下,Linux云服务器还挺贵的,那就只好先 ...
- 菜鸟入门【ASP.NET Core】9：RoutingMiddleware介绍以及MVC引入
前言 前面介绍了使用app.Map来配置路由,但是对于一般不是特别大的项目来说,不使用Map来进行路由配置. 配置路由 我们首先需要在Startup.cs文件中的ConfigureServices方法 ...
- IQuerable与IEnumable的区别
核心区别: IQueryable该接口会把查询表达式先缓存到表达式树Expression 中,只有当真正用到数据的时候(例如 遍历 ),才会由IQueryProvider解析表达式树,生成sql语句执 ...
- 如何使tinymce编辑器的高度随内容自变化（转载）
如何使tinymce编辑器的高度随内容自变化 最简单的方法就是在配置时添加Autoresize插件: tinymce.init({ selector: "textarea", // ...
- 数据库编程Case when
数据库编程题 1. 姓名 日期 是否上班 张三 星期二 是 张三 星期三 是 李四 星期一 是 王五 星期二 是 张三 星期二 是 写出一条SQL语句输出下列结果 姓名 星期一 星期二 星期三 张三 ...
- 深入理解JVM——对象
对象的创建 虚拟机遇到一条new指令时,首先检查指令的参数能否在常量池中定位到一个类的符号引用,并且检查这个符号引用代表的类是否已经被加载.解析和初始化过.如果没有,必须先执行相应的类加载过程. 接下 ...