1.JavaScript
JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理。
1、JavaScript代码存在形式
<!-- 方式一 --> <script type"text/javascript" src="JS文件"></script> <!-- 方式二 --> <script type"text/javascript"> Js代码内容 </script>
2、JavaScript代码存在位置
- HTML的head中
- HTML的body代码块底部(推荐)
由于Html代码是从上到下执行,如果Head中的js代码耗时严重,就会导致用户长时间无法看到页面,如果放置在body代码块底部,那么即使js代码耗时严重,也不会影响用户看到页面效果,只是js实现特效慢而已。
如: <script src="https://www.gstatic.com/og/_/js/k=og.og2.en_US.iF4jnkQuaf0.O/rt=j/t=zcms/m=def/exm=in,fot/d=1/ed=1/rs=AA2YrTv5-POC4Ks9GtGRdY2ywUWisqz7-Q"></script> <script> alert('123'); </script>
3、变量
- 全局变量
- 局部变量
JavaScript中变量的声明是一个非常容易出错的点,局部变量必须一个 var 开头,如果未使用var,则默认表示声明的是全局变量
var name = "seven" # 局部变量 age = 18 # 全局变量
注:注释 // 或 /* */
4、基本数据类型
数字(Number)
var page = 111; var age = Number(18); var a1 = 1,a2 = 2, a3 = 3; parseInt("1.2"); parseFloat("1.2");
字符串(String)
var name = "wupeiqi"; var name = String("wupeiqi"); var age_str = String(18); 常用方法: obj.trim() obj.charAt(index) obj.substring(start,end) obj.indexOf(char) obj.length
布尔(Boolean)
var status = true; var status = false; var status = Boolen(1==1)
数组(Array)
var names = ['alex', 'tony', 'eric'] var names = Array('alex', 'tony', 'eric') 常用方法: 添加 obj.push(ele) 追加 obj.unshift(ele) 最前插入 obj.splice(index,0,'content') 指定索引插入 移除 obj.pop() 数组尾部获取 obj.shift() 数组头部获取 obj.splice(index,count) 数组指定位置后count个字符 切片 obj.slice(start,end) 合并 newArray = obj1.concat(obj2) 翻转 obj.reverse() 字符串化 obj.join('_') 长度 obj.length 字典 var items = {'k1': 123, 'k2': 'tony'}
更多操作见:http://www.shouce.ren/api/javascript/main.html
undefined
undefined表示未定义值 var name;
Null
null是一个特殊值
5、循环语句
var names = ["alex", "tony", "rain"]; // 数组:方式一 for(var i=0;i<names.length;i++){ console.log(i); console.log(names[i]); } // 数组:方式二 for(var index in names){ console.log(index); console.log(names[index]); } var names = {"name": "alex", "age": 18}; // 字典:方式一 for(var index in names){ console.log(index); console.log(names[index]); } // while循环 while(条件){ // break; // continue; }
6、条件语句
//if条件语句 if(条件){ }else if(条件){ }else{ } var name = 'alex'; var age = 1; // switch,case语句 switch(name){ case '1': age = 123; break; case '2': age = 456; break; default : age = 777; }
7、异常处理
try{ }catch(e) { }finally{ }
8、函数
函数的声明 function func(arg){ return true; } 匿名函数 var func = function(arg){ return "tony"; } 自执行函数 (function(arg){ console.log(arg); })('123')
9、面向对象
function Foo (name,age) { this.Name = name; this.Age = age; this.Func = function(arg){ return this.Name + arg; } } var obj = new Foo('alex', 18); var ret = obj.Func("sb"); console.log(ret);
2.Dom
文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容。
注:一般说的JS让页面动起来泛指JavaScript和Dom
1、选择器
document.getElementById('id'); document.getElementsByName('name'); document.getElementsByTagName('tagname');
2、内容
innerText innerHTML var obj = document.getElementById('nid') obj.innerText # 获取文本内容 obj.innerText = "hello" # 设置文本内容 obj.innerHTML # 获取HTML内容 obj.innerHTML = "<h1>asd</h1>" # 设置HTML内容 特殊的: input系列 textarea标签 select标签 value属性操作用户输入和选择的值
3、创建标签
方式一: var obj = document.createElement('a'); obj.href = "http://www.etiantian.org"; obj.innerText = "老男孩"; var container = document.getElementById('container'); //container.appendChild(obj); //container.insertBefore(obj, container.firstChild); //container.insertBefore(obj, document.getElementById('hhh')); 方式二: var container = document.getElementById('container'); var obj = "<input type='text' />"; container.innerHTML = obj; // 'beforeBegin', 'afterBegin', 'beforeEnd', 'afterEnd' //container.insertAdjacentHTML("beforeEnd",obj);
4、标签属性
var obj = document.getElementById('container'); 固定属性 obj.id obj.id = "nid" obj.className obj.style.fontSize = "88px"; 自定义属性 obj.setAttribute(name,value) obj.getAttribute(name) obj.removeAttribute(name)
5、提交表单
document.geElementById('form').submit()
6、事件
特殊的:
window.onload = function(){} //jQuery:$(document).ready(function(){}) //onload是所有DOM元素创建、图片加载完毕后才触发的。而ready则是DOM元素创建完毕后触发的,不等图片加载完毕。图片还么有渲染,就可以进行事件的执行。
特殊参数:this,event
7、其他功能
console.log() alert() confirm() // URL和刷新 location.href location.href = "url" window.location.reload() // 定时器 setInterval("alert()",2000); clearInterval(obj) setTimeout(); clearTimeout(obj)
实例
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
#跑马灯 <!DOCTYPE html> <html> <head> <meta charset='utf-8' > <title>欢迎blue shit莅临指导 </title> <script type='text/javascript'> function Go(){ var content = document.title; var firstChar = content.charAt(0) var sub = content.substring(1,content.length) document.title = sub + firstChar; } setInterval('Go()',1000); </script> </head> <body> </body> </html>跑马灯
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
#搜索框 <!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title></title> <style> .gray{ color:gray; } .black{ color:black; } </style> <script type="text/javascript"> function Enter(){ var id= document.getElementById("tip") id.className = 'black'; if(id.value=='请输入关键字'||id.value.trim()==''){ id.value = '' } } function Leave(){ var id= document.getElementById("tip") var val = id.value; if(val.length==0||id.value.trim()==''){ id.value = '请输入关键字' id.className = 'gray'; }else{ id.className = 'black'; } } </script> </head> <body> <input type='text' class='gray' id='tip' value='请输入关键字' onfocus='Enter();' onblur='Leave();'/> </body> </html>搜索框
3.jQuery
jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多),对javascript进行了封装,是的更加便捷的开发,并且在兼容性方面十分优秀。
http://www.php100.com/manual/jquery/
1、选择器和筛选器
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
#实例:加载 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Index</title> <style> a { color: #428bca; text-decoration: none; } .modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; background-color: #white; opacity: 0.8; } .modal { position: fixed; top: 30%; left: 50%; z-index: 1030; } .hide { display:none; } </style> </head> <body> <div> <input type="button" onclick="fadeIn();" value="加载条"/> </div> <div id="shade" class="modal-backdrop hide"> <div class="modal"> <img src="./images/loading_32.gif"/> </div> </div> <script > function fadeIn() { document.getElementById('shade').className = 'modal-backdrop'; } function fadeOut() { document.getElementById('shade').className = 'modal-backdrop hide'; } </script> </body> </html>加载
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
#实例:左侧菜单 <!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <link rel="stylesheet" type="text/css" href="common.css" /> <script type="text/javascript" src='jquery-1.8.2.js'></script> <style> .hide{ display: none; } .container{ width:300px; height: 600px; background-color: #ddd; border: 1px solid #999; } .container .title{ height: 38px; font-size: 28px; line-height: 38px; background-color: orange; cursor: pointer; } .container .body{ background-color:white; } .container .body a{ display:block; padding: 10px; } </style> </head> <body> <div class='container'> <div> <div class='title'>Menu1</div> <div class='body'> <a href="">content1</a> <a href="">content2</a> <a href="">content3</a> </div> </div> <div> <div class='title'>Menu1</div> <div class='body hide'> <a href="">content1</a> <a href="">content2</a> <a href="">content3</a> </div> </div> <div> <div class='title'>Menu1</div> <div class='body hide'> <a href="">content1</a> <a href="">content2</a> <a href="">content3</a> </div> </div> <div> <div class='title'>Menu1</div> <div class='body hide'> <a href="">content1</a> <a href="">content2</a> <a href="">content3</a> </div> </div> <div> <div class='title'>Menu1</div> <div class='body hide'> <a href="">content1</a> <a href="">content2</a> <a href="">content3</a> </div> </div> </div> <script type="text/javascript"> $(function(){ $('.title').click(function(){ $(this).parent().siblings().children('.body').addClass('hide'); $(this).next().removeClass('hide'); }); }); </script> </body> </html>实例:左侧菜单
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
#实例:Tab菜单-css /*公共开始*/ body { margin: 0 auto; font-family: Arial; _font-family: 宋体,Arial; font-size: 12px; } body, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, figure, div { margin: 0; padding: 0; } ol, ul, li { list-style: none; } a{ cursor:pointer; text-decoration:none; } /*a:hover{ color: #F60 !important; text-decoration: underline; }*/ img{ border:none; border-width:0px; } table{ border-collapse: collapse; border-spacing: 0; } .red{ color: #c00!important; } .m8{ margin:8px; } .mt10{ margin-top:10px; } .mt20{ margin-top:20px; } .mr5{ margin-right:5px; } .ml5{ margin-left:5px; } .ml10{ margin-left:10px; } .mb10{ margin-bottom:10px; } .pt18{ padding-top:18px; } .pt20{ padding-top:20px; } .pb20{ padding-bottom:20px; } .nbr{ border-right:0px; } .font12{ font-size:12px; } .font14{ font-size:14px; } .font16{ font-size:16px; } .bold{ font-weight:bold; } .left{ float:left; } .right{ float:right; } .hide{ display:none; } .show{ display:table; } .clearfix{ clear:both; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } * html .clearfix {zoom: 1;} .container{ width:1190px; margin-left:auto; margin-right:auto; } .group-box-1 .title{ height: 33px; line-height: 33px; border: 1px solid #DDD; background: #f5f5f5; padding-top: 0; padding-left: 0; } .group-box-1 .title .title-font{ display: inline-block; font-size: 14px; font-family: 'Microsoft Yahei','SimHei'; font-weight: bold; color: #333; padding-left: 10px; } .group-box-1 .body { border: 1px solid #e4e4e4; border-top: none; } .tab-menu-box1 { border: 1px solid #ddd; margin-bottom: 20px; } .tab-menu-box1 .menu { line-height: 33px; height: 33px; background-color: #f5f5f5; } .tab-menu-box1 .content { min-height: 100px; border-top: 1px solid #ddd; background-color: white; } .tab-menu-box1 .menu ul { padding: 0; margin: 0; list-style: none; /*position: absolute;*/ } .tab-menu-box1 .menu ul li { position: relative; float: left; font-size: 14px; font-family: 'Microsoft Yahei','SimHei'; text-align: center; font-size: 14px; font-weight: bold; border-right: 1px solid #ddd; padding: 0 18px; cursor: pointer; } .tab-menu-box1 .menu ul li:hover { color: #c9033b; } .tab-menu-box1 .menu .more { float: right; font-size: 12px; padding-right: 10px; font-family: "宋体"; color: #666; text-decoration: none; } .tab-menu-box1 .menu a:hover { color: #f60 !important; text-decoration: underline; } .tab-menu-box1 .menu .current { margin-top: -1px; color: #c9033b; background: #fff; height: 33px; border-top: 2px solid #c9033b; z-index: 10; } .tab-menu-box-2 .float-title { display: none; top: 0px; position: fixed; z-index: 50; } .tab-menu-box-2 .title { width: 890px; border-bottom: 2px solid #b20101; border-left: 1px solid #e1e1e1; clear: both; height: 32px; } .tab-menu-box-2 .title a { float: left; width: 107px; height: 31px; line-height: 31px; font-size: 14px; font-weight: bold; text-align: center; border-top: 1px solid #e1e1e1; border-right: 1px solid #e1e1e1; background: url(/Content/images/bg4.png?3) 0 -308px repeat-x; text-decoration: none; color: #333; cursor: pointer; } .tab-menu-box-2 .title a:hover { background-position: -26px -271px; text-decoration: none; color: #fff; } .tab-menu-box-2 .content { min-height: 100px; background-color: white; } .tab-menu-box3 { border: 1px solid #ddd; } .tab-menu-box3 .menu { line-height: 33px; height: 33px; background-color: #f5f5f5; } .tab-menu-box3 .content { height: 214px; border-top: 1px solid #ddd; background-color: white; } .tab-menu-box3 .menu ul { padding: 0; margin: 0; list-style: none; /*position: absolute;*/ } .tab-menu-box3 .menu ul li { position: relative; float: left; font-size: 14px; font-family: 'Microsoft Yahei','SimHei'; text-align: center; font-size: 14px; width:50%; cursor: pointer; } .tab-menu-box3 .menu ul li:hover { color: #c9033b; } .tab-menu-box3 .menu .more { float: right; font-size: 12px; padding-right: 10px; font-family: "宋体"; color: #666; text-decoration: none; } .tab-menu-box3 .menu a:hover { color: #f60 !important; text-decoration: underline; font-weight: bold; } .tab-menu-box3 .menu .current { margin-top: -1px; color: #c9033b; background: #fff; height: 33px; border-top: 2px solid #c9033b; z-index: 10; font-weight: bold; } /*公共结束*/Tab菜单-css
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
#实例:Tab菜单-html <!DOCTYPE html> <html> <head></head> <link href="common.css" rel="stylesheet" /> <body> <div class='container'> <div class='tab-menu-box1'> <div class='menu'> <ul id='tab-menu-title'> <li class='current' content-to='1'>价格趋势</li> <li content-to='2'>市场分布</li> <li content-to='3'>其他</li> </ul> </div> <div id='tab-menu-body' class='content'> <div content='1'>content1</div> <div content='2' class='hide'>content2</div> <div content='3' class='hide'>content3</div> </div> </div> </div> <script src="./jquery-1.8.2.js"></script> <script type='text/javascript'> $(function(){ ChangeTab('#tab-menu-title', '#tab-menu-body'); }) function ChangeTab(title, body) { $(title).children().bind("click", function () { $menu = $(this); $content = $(body).find('div[content="' + $(this).attr("content-to") + '"]'); $menu.addClass('current').siblings().removeClass('current'); $content.removeClass('hide').siblings().addClass('hide'); }); } </script> </body> </html>Tab菜单-html
2、属性和css
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
#实例:返回顶部 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .back{ position: fixed; bottom: 0px; right: 0px; } .hide{ display: none; } </style> </head> <body> <div style="height: 2000px;"></div> <div onclick="GoTop()" class="back hide">返回顶部</div> <script src="jquery-1.8.2.js"></script> <script type="text/javascript"> function GoTop(){ //返回顶部 $(window).scrollTop(0); } $(function(){ $(window).scroll(function(){ //当滚动滑轮时,执行函数体 //获取当前滑轮滚动的高度 var top = $(window).scrollTop(); if(top>100){ //展示“返回顶部” $('.back').removeClass('hide'); }else{ //隐藏“返回顶部” $('.back').addClass('hide'); } }); }); </script> </body> </html>实例:返回顶部
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
#实例:多选、反选和取消 <!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title></title> <script type="text/javascript" src='jquery-1.8.2.js'></script> <script type="text/javascript"> $(function(){ $('#selectAll').click(function(){ $('#checklist :checkbox').prop('checked',true); }) $('#unselectAll').click(function(){ $('#checklist :checkbox').prop('checked',false); }) $('#reverseAll').click(function(){ $('#checklist :checkbox').each(function(){ $(this).prop('checked',!$(this).prop('checked')) }) }) }) </script> </head> <body> <div id='checklist'> <input type='checkbox' value='1'/>篮球 <input type='checkbox' value='2'/>足球 <input type='checkbox' value='3'/>羽毛球 </div> <input type='button' value='全选' id='selectAll' /> <input type='button' value='不选' id='unselectAll' /> <input type='button' value='反选' id='reverseAll' /> </body> </html>实例:多选、反选和取消
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
#实例:滚动菜单 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0px; } img { border: 0; } ul{ padding: 0; margin: 0; list-style: none; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .wrap{ width: 980px; margin: 0 auto; } .pg-header{ background-color: #303a40; -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2); -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2); box-shadow: 0 2px 5px rgba(0,0,0,.2); } .pg-header .logo{ float: left; padding:5px 10px 5px 0px; } .pg-header .logo img{ vertical-align: middle; width: 110px; height: 40px; } .pg-header .nav{ line-height: 50px; } .pg-header .nav ul li{ float: left; } .pg-header .nav ul li a{ display: block; color: #ccc; padding: 0 20px; text-decoration: none; font-size: 14px; } .pg-header .nav ul li a:hover{ color: #fff; background-color: #425a66; } .pg-body{ } .pg-body .catalog{ position: absolute; top:60px; width: 200px; background-color: #fafafa; bottom: 0px; } .pg-body .catalog.fixed{ position: fixed; top:10px; } .pg-body .catalog .catalog-item.active{ color: #fff; background-color: #425a66; } .pg-body .content{ position: absolute; top:60px; width: 700px; margin-left: 210px; background-color: #fafafa; overflow: auto; } .pg-body .content .section{ height: 500px; } </style> </head> <body> <div class="pg-header"> <div class="wrap clearfix"> <div class="logo"> <a href="#"> <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn"> </a> </div> <div class="nav"> <ul> <li> <a href="#">首页</a> </li> <li> <a href="#">功能一</a> </li> <li> <a href="#">功能二</a> </li> </ul> </div> </div> </div> <div class="pg-body"> <div class="wrap"> <div class="catalog"> <div class="catalog-item" auto-to="function1"><a>第1张</a></div> <div class="catalog-item" auto-to="function2"><a>第2张</a></div> <div class="catalog-item" auto-to="function3"><a>第3张</a></div> </div> <div class="content"> <div menu="function1" class="section"> <h1>第一章</h1> </div> <div menu="function2" class="section"> <h1>第二章</h1> </div> <div menu="function3" class="section"> <h1>第三章</h1> </div> </div> </div> </div> <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script> <script type="text/javascript"> $(function(){ Init(); }); function Init(){ $(window).scroll(function() { var scrollTop = $(window).scrollTop(); if(scrollTop > 50){ $('.catalog').addClass('fixed'); }else{ $('.catalog').removeClass('fixed'); } $('.content').children().each(function(){ var offSet = $(this).offset(); var offTop = offSet.top - scrollTop; var height = $(this).height(); if(offTop<=0 && offTop> -height){ //去除其他 //添加自己 var docHeight = $(document).height(); var winHeight = $(window).height(); if(docHeight == winHeight+scrollTop) { $('.catalog').find('div:last-child').addClass('active').siblings().removeClass('active'); }else{ var target = $(this).attr('menu'); $('.catalog').find('div[auto-to="'+target+'"]').addClass('active').siblings().removeClass('active'); } } }); }); } </script> </body> </html>实例:滚动菜单
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
#实例:滚动菜单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div> <div id="currentPosition" style="position: fixed;top: 0px;right: 0px;"></div> <div> <div class="chapter" style="height: 500px;"> <h1>第一张</h1> </div> <div class="chapter" style="height: 1500px;"> <h1>第二张</h1> </div> <div class="chapter" style="height: 30px;"> <h1>第三张</h1> </div> </div> </div> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $(window).scroll(function(){ var scroll_top = $(window).scrollTop(); var list = []; $.each($('.chapter'), function(i){ var current_height = $($('.chapter')[i]).offset().top; list.push(current_height); }); $.each(list,function(i){ if (scroll_top+$(window).height() == $(document).height()){ $('#currentPosition').text($('.chapter').last().text()); return } if (scroll_top>list[i]){ $('#currentPosition').text($($('.chapter')[i]).text()); return } }) }) }); </script> </body> </html>实例:滚动菜单
3、文档处理
4、事件
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
#实例:移动面板 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div style="border: 1px solid #ddd;width: 600px;position: absolute;"> <div id="title" style="background-color: black;height: 40px;"></div> <div style="height: 300px;"></div> </div> <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script> <script> $(function(){ $('#title').mouseover(function(){ $(this).css('cursor','move'); }).mousedown(function(e){ //console.log($(this).offset()); var _event = e || window.event; var ord_x = _event.clientX; var ord_y = _event.clientY; var parent_left = $(this).parent().offset().left; var parent_top = $(this).parent().offset().top; $(this).bind('mousemove', function(e){ var _new_event = e || window.event; var new_x = _new_event.clientX; var new_y = _new_event.clientY; var x = parent_left + (new_x - ord_x); var y = parent_top + (new_y - ord_y); $(this).parent().css('left',x+'px'); $(this).parent().css('top',y+'px'); }) }).mouseup(function(){ $(this).unbind('mousemove'); }); }) </script> </body> </html>实例:移动面板
5、扩展
下载:https://files-cdn.cnblogs.com/files/lizexiong/%E7%99%BB%E9%99%86%E6%B3%A8%E5%86%8C.zip?t=1681195618&download=true
6、ajax和跨域
下载:https://files-cdn.cnblogs.com/files/lizexiong/ajax_demo.zip?t=1681195619&download=true
原文教程链接: https://www.cnblogs.com/wupeiqi/articles/5369773.html
标签:jQuery,function,obj,Dom,python,menu,height,color,var From: https://www.cnblogs.com/lizexiong/p/17325691.html