JavaScript基础

本节内容:

  • JavaScript基础
  • Dom编程   ---->操作html所有标签
  • jQeury         ---->开源模块,是对js的一个封装

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

1.代码样例:

jsfile.js文件
/**
 * Created by Administrator on 2016/2/14.
 */
function func(){
    alert('func');
}


html文件



    



2.变量和函数的声明

1、全局变量和局部变量
    name = 'eric'
    var name = 'saneri'
 
2、基本函数和自执行函数
    function Foo(arg){
        console.log(arg);
    }
 

    (function (arg) {
        alert(arg);
    })('888')

3.字符串常用方法和属性

obj.trim()			                  //去除空格

a = "   saneri   "
"   saneri   "
b = a.trim()
"saneri"
b.trim()
"saneri"

obj.charAt(index)		                  //根据索引获取字符串中的字符
b.trim()
"saneri"
b.charAt(1)
"a"
b.charAt(2)
"n"

obj.substring(start,end)		              //类似切片

b.trim()
"saneri"
b.substring(0,2)
"sa"
b.substring(0,3)
"san"

obj.indexOf(char)						//找字符的下标
b.trim()
"saneri"
b.indexOf('s')
0
b.indexOf('n')
2

obj.length							//字符长度

b.trim()
"saneri"
b.length
6

4、数组  

声明,如:
    var array = Array() 或 var array = []
 
添加
    obj.push(ele)                   追加
    obj.unshift(ele)                最前面插入数据
    obj.splice(index,0,'content')   指定索引插入,其中0位默认固定参数.
 
移除
    obj.pop()                       数组尾部获取
    obj.shift()                     数组头部获取
    obj.splice(index,count)         数组指定位置后count个字符
 
切片
    obj.slice(start,end)           
 
合并
    newArray = obj1.concat(obj2)   
 
翻转
    obj.reverse()
 
字符串化
    obj.join('_')
 
长度
    obj.length
 1 a = [11,22,33,44,55]
 2 [11, 22, 33, 44, 55]
 3 a.push('99')                    //追加
 4 6
 5 a
 6 [11, 22, 33, 44, 55, "99"]
 7 a.unshift("00")                //最前面插入数据
 8 7
 9 a
10 ["00", 11, 22, 33, 44, 55, "99"]
11 a.splice(2,0,'QQ')        //指定索引位置插入数据
12 []
13 a
14 ["00", 11, "QQ", 22, 33, 44, 55, "99"]
15 
16 a.pop()                                        //数据尾部获取
17 "99"
18 a.shift()                                    //数组头部获取
19 "00"
20 
21 a.slice(0,3)                            //切片
22 [11, "QQ", 22]
23 
24 a = [11,22]
25 [11, 22]
26 b = [44,55]
27 [44, 55]
28 a.concat(b)                                //合并
29 [11, 22, 44, 55]
30 a.reverse()                                //翻转
31 [22, 11]
32 a
33 [22, 11]
34 a.join('_')                                //字符串化
35 "22_11"
36 a.length                                    //长度
37 2
数组练习实例

注意:字典是一种特殊的数组

6、循环

两种循环方式:
//循环列表
a = [11,22,33,44]
[11, 22, 33, 44]
for (var item in a){console.log(item);}
0
1
2
3
//另一种for循环方式
a = [11,22,33,44]
[11, 22, 33, 44]
for(var i=0;i

7、异常处理

try{
		var mn=m;

}catch(e){

	console.log(e);

}finally{

	console.log('finally')
}

  

文件对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。

选择器:

  • document.getElementById('id')
  • document.getElementsByName('name')
  • document.getElementsByTagName('tagname')
 1 
 2     
3 123 4
5 6 16 17 18 当浏览器访问时由123跳转显示456.
操作实例

常用函数:

创建标签,document.createElement('a')

获取或者修改样式,obj.className 

获取或设置属性,setattribute(key,val)    getattribute(key)

获取或修改样式中的属性,obj.style.属性

提交表单,document.geElementById(‘form’).submit()

常用事件:

  • onclick
  • onblur
  • onfocus
  • on...
onload和ready
    body标签添加onload事件 或者 window.onload = function(){} 
        覆盖上一个onload只能注册一次,而ready就可以多次注册
    $(document).ready(function(){}) 或者 $(function(){})
onload是所有DOM元素创建、图片加载完毕后才触发的。而ready则是DOM元素创建完毕后触发的,不等图片加载完毕。图片还么有渲染,就可以进行事件的执行。

JavaScript基础_第1张图片  

其他函数:

  • console.log()
  • location.href = "url" 和 open('url')
  • alert()
  • confirm()
  • setInterval("alert()",2000);    clearInterval(obj)
  • setTimeout();    clearTimeout(obj)
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>
跑马灯
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>
搜索框

 

jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多),对javascript进行了封装,是的更加便捷的开发,并且在兼容性方面十分优秀。

  1. 选择器和筛选
  2. 属性
  3. css
  4. 文档处理
  5. 事件
  6. 扩展
  7. ajax

更多见:http://www.php100.com/manual/jquery/  

实例:

返回顶部

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>title>
 6     <style>
 7         .back{
 8             position: fixed;
 9             bottom: 0px;
10             right: 0px;
11         }
12         .hide{
13             display: none;
14         }
15     style>
16 head>
17 <body>
18 
19 <div style="height: 2000px;">div>
20 
21 <div onclick="GoTop()" class="back hide">返回顶部div>
22 
23 <script src="jquery-1.8.2.js">script>
24 <script type="text/javascript">
25 
26     function GoTop(){
27         //返回顶部
28         $(window).scrollTop(0);
29     }
30 
31     $(function(){
32 
33         $(window).scroll(function(){
34             //当滚动滑轮时,执行函数体
35 
36             //获取当前滑轮滚动的高度
37             var top = $(window).scrollTop();
38 
39             if(top>100){
40                 //展示“返回顶部”
41                 $('.back').removeClass('hide');
42             }else{
43                 //隐藏“返回顶部”
44                 $('.back').addClass('hide');
45             }
46         });
47     });
48 
49 script>
50 
51 body>
52 html>
返回顶部

多选框

 1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset='utf-8' />
 5         <title>title>
 6         <script type="text/javascript" src='jquery-1.8.2.js'>script>
 7         <script type="text/javascript">
 8             $(function(){
 9                 $('#selectAll').click(function(){
10                     $('#checklist :checkbox').attr('checked',true);
11                 })
12                 $('#unselectAll').click(function(){
13                     $('#checklist :checkbox').attr('checked',false);
14                 })
15                 $('#reverseAll').click(function(){
16                     $('#checklist :checkbox').each(function(){
17                         $(this).attr('checked',!$(this).attr('checked'))
18                     })
19                 })
20 
21             })            
22         script>
23     head>
24     <body>
25         <div id='checklist'>
26             <input type='checkbox' value='1'/>篮球
27             <input type='checkbox' value='2'/>足球
28             <input type='checkbox' value='3'/>羽毛球
29         div>
30         <input type='button' value='全选' id='selectAll' />
31         <input type='button' value='不选' id='unselectAll' />
32         <input type='button' value='反选' id='reverseAll' />
33     body>
34 html>
多选框

菜单

 1 .hide{
 2     display: none;
 3 }
 4 
 5 .container{
 6     width:300px;
 7     height: 600px;
 8     background-color: #ddd;
 9     border: 1px solid #999;
10 }
11 
12 .container .title{
13     height: 38px;
14     font-size: 28px;
15     line-height: 38px;
16     background-color: orange;
17     cursor: pointer;
18 }
19 
20 .container .body{
21     background-color:white;
22 }
23 
24 .container .body a{
25     display:block;
26     padding: 10px;
27 }
css
 1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset='utf-8' />
 5         <link rel="stylesheet" type="text/css" href="common.css" />
 6         <script type="text/javascript" src='jquery-1.8.2.js'>script>
 7 
 8     head>
 9     <body>
10         <div class='container'>
11             <div>
12                 <div class='title'>Menu1div>
13                 <div class='body'>
14                     <a href="">content1a>
15                     <a href="">content2a>
16                     <a href="">content3a>
17                 div>
18             div>
19 
20             <div>
21                 <div class='title'>Menu1div>
22                 <div class='body hide'>
23                     <a href="">content1a>
24                     <a href="">content2a>
25                     <a href="">content3a>
26                 div>
27             div>
28 
29             <div>
30                 <div class='title'>Menu1div>
31                 <div class='body hide'>
32                     <a href="">content1a>
33                     <a href="">content2a>
34                     <a href="">content3a>
35                 div>
36             div>
37             
38             <div>
39                 <div class='title'>Menu1div>
40                 <div class='body hide'>
41                     <a href="">content1a>
42                     <a href="">content2a>
43                     <a href="">content3a>
44                 div>
45             div>
46             
47             <div>
48                 <div class='title'>Menu1div>
49                 <div class='body hide'>
50                     <a href="">content1a>
51                     <a href="">content2a>
52                     <a href="">content3a>
53                 div>
54             div>
55 
56         div>
57 
58         <script type="text/javascript">
59             $(function(){
60                 $('.title').click(function(){
61                     $(this).parent().siblings().children('.body').addClass('hide');
62                     $(this).next().removeClass('hide');
63                 });
64             });
65         script>
66     body>
67 html>
Html

Tab

  1 /*公共开始*/
  2 body {
  3     margin: 0 auto;
  4     font-family: Arial;
  5     _font-family: 宋体,Arial;
  6     font-size: 12px;
  7 }
  8 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 {
  9     margin: 0;
 10     padding: 0;
 11 }
 12 
 13 ol, ul, li {
 14     list-style: none;
 15 }
 16 a{
 17     cursor:pointer;
 18     text-decoration:none;
 19 }
 20 /*a:hover{
 21     color: #F60 !important;
 22     text-decoration: underline;
 23 }*/
 24 img{
 25     border:none;
 26     border-width:0px;
 27 }
 28 table{
 29     border-collapse: collapse;
 30     border-spacing: 0;
 31 }
 32 
 33 .red{
 34     color: #c00!important;
 35 }
 36 .m8{
 37     margin:8px;
 38 }
 39 .mt10{
 40     margin-top:10px;
 41 }
 42 .mt20{
 43     margin-top:20px;
 44 }
 45 .mr5{
 46     margin-right:5px;
 47 }
 48 .ml5{
 49     margin-left:5px;
 50 }
 51 
 52 .ml10{
 53     margin-left:10px;
 54 }
 55 
 56 .mb10{
 57     margin-bottom:10px;
 58 }
 59 .pt18{
 60     padding-top:18px;
 61 }
 62 .pt20{
 63     padding-top:20px;
 64 }
 65 .pb20{
 66     padding-bottom:20px;
 67 }
 68 .nbr{
 69     border-right:0px;
 70 }
 71 .font12{
 72     font-size:12px;
 73 }
 74 .font14{
 75     font-size:14px;
 76 }
 77 .font16{
 78     font-size:16px;
 79 }
 80 .bold{
 81     font-weight:bold;
 82 }
 83 .left{
 84     float:left;
 85 }
 86 .right{
 87     float:right;
 88 }
 89 .hide{
 90     display:none;
 91 }
 92 .show{
 93      display:table;
 94 }
 95 .clearfix{
 96     clear:both;
 97 }
 98 .clearfix:after {
 99     content: ".";
100     display: block;
101     height: 0;
102     clear: both;
103     visibility: hidden;
104 }
105 * html .clearfix {zoom: 1;}
106 
107 .container{
108     width:1190px;
109     margin-left:auto;
110     margin-right:auto;
111 
112 }
113 
114 .group-box-1 .title{
115     height: 33px;
116     line-height: 33px;
117     border: 1px solid #DDD;
118     background: #f5f5f5;
119     padding-top: 0;
120     padding-left: 0;
121                 
122 }
123 .group-box-1 .title .title-font{
124     display: inline-block;
125     font-size: 14px;
126     font-family: 'Microsoft Yahei','SimHei';
127     font-weight: bold;
128     color: #333;
129     padding-left: 10px;
130 }
131 .group-box-1 .body {
132     border: 1px solid #e4e4e4;
133     border-top: none;
134 }
135 
136 .tab-menu-box1 {
137     border: 1px solid #ddd;
138     margin-bottom: 20px;
139 }
140 
141 .tab-menu-box1 .menu {
142     line-height: 33px;
143     height: 33px;
144     background-color: #f5f5f5;
145 }
146 
147 .tab-menu-box1 .content {
148     min-height: 100px;
149     border-top: 1px solid #ddd;
150     background-color: white;
151 }
152 
153 .tab-menu-box1 .menu ul {
154     padding: 0;
155     margin: 0;
156     list-style: none;
157     /*position: absolute;*/
158 }
159 
160 .tab-menu-box1 .menu ul li {
161     position: relative;
162     float: left;
163     font-size: 14px;
164     font-family: 'Microsoft Yahei','SimHei';
165     text-align: center;
166     font-size: 14px;
167     font-weight: bold;
168     border-right: 1px solid #ddd;
169     padding: 0 18px;
170     cursor: pointer;
171 }
172 
173 .tab-menu-box1 .menu ul li:hover {
174     color: #c9033b;
175 }
176 
177 .tab-menu-box1 .menu .more {
178     float: right;
179     font-size: 12px;
180     padding-right: 10px;
181     font-family: "宋体";
182     color: #666;
183     text-decoration: none;
184 }
185 
186 .tab-menu-box1 .menu a:hover {
187     color: #f60 !important;
188     text-decoration: underline;
189 }
190 
191 .tab-menu-box1 .menu .current {
192     margin-top: -1px;
193     color: #c9033b;
194     background: #fff;
195     height: 33px;
196     border-top: 2px solid #c9033b;
197     z-index: 10;
198 }
199 
200 .tab-menu-box-2 .float-title {
201     display: none;
202     top: 0px;
203     position: fixed;
204     z-index: 50;
205 }
206 
207 .tab-menu-box-2 .title {
208     width: 890px;
209     border-bottom: 2px solid #b20101;
210     border-left: 1px solid #e1e1e1;
211     clear: both;
212     height: 32px;
213 }
214 
215 .tab-menu-box-2 .title a {
216     float: left;
217     width: 107px;
218     height: 31px;
219     line-height: 31px;
220     font-size: 14px;
221     font-weight: bold;
222     text-align: center;
223     border-top: 1px solid #e1e1e1;
224     border-right: 1px solid #e1e1e1;
225     background: url(/Content/images/bg4.png?3) 0 -308px repeat-x;
226     text-decoration: none;
227     color: #333;
228     cursor: pointer;
229 }
230 
231 .tab-menu-box-2 .title a:hover {
232     background-position: -26px -271px;
233     text-decoration: none;
234     color: #fff;
235 }
236 
237 .tab-menu-box-2 .content {
238     min-height: 100px;
239     background-color: white;
240 }
241 
242 
243 .tab-menu-box3 {
244     border: 1px solid #ddd;
245 }
246 
247 .tab-menu-box3 .menu {
248     line-height: 33px;
249     height: 33px;
250     background-color: #f5f5f5;
251 }
252 
253 .tab-menu-box3 .content {
254     height: 214px;
255     border-top: 1px solid #ddd;
256     background-color: white;
257 }
258 
259 .tab-menu-box3 .menu ul {
260     padding: 0;
261     margin: 0;
262     list-style: none;
263     /*position: absolute;*/
264 }
265 
266 .tab-menu-box3 .menu ul li {
267     position: relative;
268     float: left;
269     font-size: 14px;
270     font-family: 'Microsoft Yahei','SimHei';
271     text-align: center;
272     font-size: 14px;
273     width:50%;
274     cursor: pointer;
275 }
276  
277 .tab-menu-box3 .menu ul li:hover {
278     color: #c9033b;
279 }
280 
281 .tab-menu-box3 .menu .more {
282     float: right;
283     font-size: 12px;
284     padding-right: 10px;
285     font-family: "宋体";
286     color: #666;
287     text-decoration: none;
288 }
289 
290 .tab-menu-box3 .menu a:hover {
291     color: #f60 !important;
292     text-decoration: underline;
293     font-weight: bold;
294 }
295 
296 .tab-menu-box3 .menu .current {
297 
298     margin-top: -1px;
299     color: #c9033b;
300     background: #fff;
301     height: 33px;
302     border-top: 2px solid #c9033b;
303     z-index: 10;
304     font-weight: bold;
305     
306 }
307 
308 /*公共结束*/
css
 1 DOCTYPE html>
 2 <html>
 3 <head>head>
 4 <link href="common.css" rel="stylesheet" />
 5 <body>
 6     <div class='container'>
 7         <div class='tab-menu-box1'>
 8             <div class='menu'>
 9                 <ul id='tab-menu-title'>
10                     <li class='current' content-to='1'>价格趋势li>
11                     <li content-to='2'>市场分布li>
12                     <li content-to='3'>其他li>
13                 ul>
14             div>
15 
16             <div id='tab-menu-body' class='content'>
17                 <div content='1'>content1div>
18                 <div content='2' class='hide'>content2div>
19                 <div content='3' class='hide'>content3div>
20             div>
21         div>
22     div>
23     <script src="./jquery-1.8.2.js">script>
24     <script type='text/javascript'>
25     $(function(){
26         ChangeTab('#tab-menu-title', '#tab-menu-body');
27     })
28     function ChangeTab(title, body) {
29             $(title).children().bind("click", function () {
30                 $menu = $(this);
31                 $content = $(body).find('div[content="' + $(this).attr("content-to") + '"]');
32                 $menu.addClass('current').siblings().removeClass('current');
33                 $content.removeClass('hide').siblings().addClass('hide');
34             });
35         }
36     script>
37 body>
38 html>
html

滚动菜单

  1 DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title>title>
  6     <style>
  7 
  8         body{
  9             margin: 0px;
 10         }
 11         img {
 12             border: 0;
 13         }
 14         ul{
 15             padding: 0;
 16             margin: 0;
 17             list-style: none;
 18         }
 19         .clearfix:after {
 20             content: ".";
 21             display: block;
 22             height: 0;
 23             clear: both;
 24             visibility: hidden;
 25         }
 26 
 27         .wrap{
 28             width: 980px;
 29             margin: 0 auto;
 30         }
 31         
 32         .pg-header{
 33             background-color: #303a40;
 34             -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
 35             -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
 36             box-shadow: 0 2px 5px rgba(0,0,0,.2);
 37         }
 38         .pg-header .logo{
 39             float: left;
 40             padding:5px 10px 5px 0px;
 41         }
 42         .pg-header .logo img{
 43             vertical-align: middle;
 44             width: 110px;
 45             height: 40px;
 46 
 47         }
 48         .pg-header .nav{
 49             line-height: 50px;
 50         }
 51         .pg-header .nav ul li{
 52             float: left;
 53         }
 54         .pg-header .nav ul li a{
 55             display: block;
 56             color: #ccc;
 57             padding: 0 20px;
 58             text-decoration: none;
 59             font-size: 14px;
 60         }
 61         .pg-header .nav ul li a:hover{
 62             color: #fff;
 63             background-color: #425a66;
 64         }
 65         .pg-body{
 66 
 67         }
 68         .pg-body .catalog{
 69             position: absolute;
 70             top:60px;
 71             width: 200px;
 72             background-color: #fafafa;
 73             bottom: 0px;
 74         }
 75         .pg-body .catalog.fixed{
 76             position: fixed;
 77             top:10px;
 78         }
 79 
 80         .pg-body .catalog .catalog-item.active{
 81             color: #fff;
 82             background-color: #425a66;
 83         }
 84 
 85         .pg-body .content{
 86             position: absolute;
 87             top:60px;
 88             width: 700px;
 89             margin-left: 210px;
 90             background-color: #fafafa;
 91             overflow: auto;
 92         }
 93         .pg-body .content .section{
 94             height: 500px;
 95         }
 96     style>
 97 head>
 98 <body>
 99 
100     <div class="pg-header">
101         <div class="wrap clearfix">
102             <div class="logo">
103                 <a href="#">
104                     <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">
105                 a>
106             div>
107             <div class="nav">
108                 <ul>
109                     <li>
110                         <a  href="#">首页a>
111                     li>
112                     <li>
113                         <a  href="#">功能一a>
114                     li>
115                     <li>
116                         <a  href="#">功能二a>
117                     li>
118                 ul>
119             div>
120 
121         div>
122     div>
123     <div class="pg-body">
124         <div class="wrap">
125             <div class="catalog">
126                 <div class="catalog-item" auto-to="function1"><a>第1张a>div>
127                 <div class="catalog-item" auto-to="function2"><a>第2张a>div>
128                 <div class="catalog-item" auto-to="function3"><a>第3张a>div>
129             div>
130             <div class="content">
131                 <div menu="function1" class="section">
132                     <h1>第一章h1>
133                 div>
134                 <div menu="function2" class="section">
135                     <h1>第二章h1>
136                 div>
137                 <div menu="function3" class="section">
138                     <h1>第三章h1>
139                 div>
140             div>
141         div>
142 
143     div>
144 
145     <script type="text/javascript" src="../js/jquery-1.8.2.min.js">script>
146     <script type="text/javascript">
147         $(function(){
148             Init();
149         });
150         function Init(){
151             $(window).scroll(function() {
152                 var scrollTop = $(window).scrollTop();
153                 if(scrollTop > 50){
154                     $('.catalog').addClass('fixed');
155                 }else{
156                     $('.catalog').removeClass('fixed');
157                 }
158                 $('.content').children().each(function(){
159                     var offSet = $(this).offset();
160                     var offTop = offSet.top - scrollTop;
161                     var height = $(this).height();
162 
163                     if(offTop<=0 && offTop> -height){
164                         //去除其他
165                         //添加自己
166                         var docHeight = $(document).height();
167                         var winHeight = $(window).height();
168 
169                         if(docHeight == winHeight+scrollTop)
170                         {
171                             $('.catalog').find('div:last-child').addClass('active').siblings().removeClass('active');
172                         }else{
173                             var target = $(this).attr('menu');
174                             $('.catalog').find('div[auto-to="'+target+'"]').addClass('active').siblings().removeClass('active');
175                         }
176 
177 
178                     }
179                 });
180 
181             });
182 
183 
184         }
185 
186     script>
187 body>
188 html>
滚动菜单

登陆注册验证

  点击这里下载

更多实例

  猛击这里下载

.

.

参阅文档:http://www.cnblogs.com/wupeiqi/articles/4457274.html 

你可能感兴趣的:(JavaScript基础)