Python【13】【前端编程】- JS基础

最新推荐文章于 2024-10-17 11:21:39 发布

HEJIAHUI073291

最新推荐文章于 2024-10-17 11:21:39 发布

阅读量142

点赞数

文章标签： python 前端 javascript ViewUI

原文链接：http://www.cnblogs.com/YaYaTang/p/5220601.html

版权

JavaScript

1、介绍

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

2、存在形式

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

3、代码块的位置

　　<body>标签内的代码底部

4、变量和函数的声明

a、全局变量和局部变量
    name ＝ 'kim'
    var name ＝ 'kim'
 
b、基本函数和自执行函数
  基本函数 
    function Foo(arg){
        console.log(arg);
    }
 自动执行函数
    (function (arg) {
        alert(arg);
    })('kim')

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

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

6、数组

声明，如：
    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

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

7、循环

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

8、异常处理

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

DOM

JQuery

1、简单介绍

jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)，对javascript进行了封装，是的更加便捷的开发，并且在兼容性方面十分优秀。
jQuery，顾名思义，也就是JavaScript和查询（Query），即是辅助JavaScript开发的库。

2、基础组成

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

链式编程,更多使用方法

3、选择器

$ ＝ JQuery
$("条件")      
$("条件1" "条件11")   上下条件，空格分隔
$("条件1","条件2")     两个条件，逗号分隔

======================================
    - #xx
        <div id='t1'></div>
        
        $("#t1")
    - .xx
        <div class='t2'></div>
        
        $('.t2')
        
    -  标签
        <p>asdfasdf</p>
        <p>asdfasdf</p>
        
        $('p')
        
    - 空格
        <div id='tt'>
            <div class='t3'>
                <p></p>
                <span></span>
            </div>
        </div>
        
        $("#tt p")
    
    - 逗号
        <p class='t5'></p>
        <div class='t5'></div>
        <span></span>
        <a></a>
    
            $('.t5,a')

        - 属性选择器
        <div kim='boy'></div>
        <div tom='boy'></div>
        
        $("div[kim='boy']")

4、Map循环

<body>
    <table>
        <thead></thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td onclick="get(this)">edit</td>
            </tr>
        </tbody>
    </table>
    <script src="jquery-2.1.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        // siblings() 找到其它兄弟标签
        // map() 循环找到的每一个标签
        // 每一个标签循环时,会执行map()内部的函数并取得返回返回值
        // 将所有返回值封装到一个数组中
        // 返回数组
        function get(){
            var list = $(arg).siblings().map(function(){
                // $(this) 当前在循环中的标签
                return $(this).text;
            })
        }
        console.log(list[0],list[1],list[2]);
    </script>
</body>

5、each循环

<script src="jquery-2.1.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        var l = [11,22,33];
        $.each(l,function(item){
            console.log(l[item]);
        })
        var d = {'k1':'v1','k2':'v2'};
        $.each(d,function(key,value){
            console.log(key,value);
        })

转载于:https://www.cnblogs.com/YaYaTang/p/5220601.html