首页 > Javascript > JavaScript、Dom、jQuery基础
2016
09-24

JavaScript、Dom、jQuery基础

本节内容：

  • JavaScript基础

  • Dom编程

  • jQeury

JavaScript基础

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

1、存在形式

1、文件形式
   <script src="js/oldboy.js"></script>
2、嵌入html
   <script type='text/javascript'>alert('page');</script>

2、代码块的位置

　　<body>标签内的代码底部

3、变量和函数的声明

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

4、字符串常用方法和属性

obj.trim()
obj.charAt(index)
obj.substring(start,end)
obj.indexOf(char)
obj.length

5、数组

声明，如：
   var array = Array() 或 var array = []
添加
   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

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

6、循环

var a = '123456789';
for(var i=0;i<10;i++){
     console.log(a[i]);
}<br>
for(var item in a){
     console.log(a[item]);
}

7、异常处理

try{
   
}catch(e) {
     
}finally{
     
}

DOM编程

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

选择器：

  • document.getElementById('id')

  • document.getElementsByName('name')

  • document.getElementsByTagName('tagname')

常用函数：

  • 创建标签，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元素创建完毕后触发的，不等图片加载完毕。图片还么有渲染，就可以进行事件的执行。

其他函数：

  • 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莅临指导&nbsp;&nbsp;</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

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

  1. 选择器和筛选

  2. 属性

  3. css

  4. 文档处理

  5. 事件

  6. 扩展

  7. ajax

ps：链式编程

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

实例

终极版下载

登陆注册验证

　　点击这里下载

更多实例

　　猛击这里下载

 

 

作者：admin
admin
TTF的家园-www.ttfde.top 个人博客以便写写东西，欢迎喜欢互联网的朋友一起交流!
TTF的家园 站点 QQ交谈

您可能还会对这些文章感兴趣！

《本文》有 0 条评论

留下一个回复