JavaScript

JavaScript是一门编程语言，浏览器内置了JavaScript语言的解释器，所以在浏览器上按照JavaScript语言的规则编写相应代码之，浏览器可以解释并做出相应的处理。

1. JavaScript的存在形式

JavaScript有两种存在形式，分别是文件形式和代码块形式

文件形式：

<!-- 方式一 -->

<script type"text/javascript" src="JS文件"></script>

js代码块存在形式：

<script type"text/javascript">

    Js代码内容

</script>

2、JavaScript代码存在位置

  • html的head标签内
  • html的body底部，推荐使用这种方式，因为html代码是从上往下执行的，这样可以避免某些js脚本问题而导致页面内容不显示，一般会让页面先显示出来然后再执行js脚本。

　　代码示例：

　　

<body>

    <script src="jquery-2.2.3.min.js"></script>

    <script>

       (function(){alert(1);})();

       (function(arg){

           console.log("aaabbb",arg)

       })("cccddd");

        function foo(num1,num2){

            this.num1=num1;

            this.num2=num2;

            this.Func= function (arg) {

                return this.num1+arg;

            }

        }

    </script>

</body>

3、变量

  • 全局变量
  • 普通变量

　　JavaScript中变量的声明是一个非常容易出错的点，局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量

　　

var name = "seven"  # 局部变量

age = 18            # 全局变量

注：注释 // 或 /* */

4、基本数据类型

  • 数字（Number）

　　定义方法：　

var age=19

var age=parseInt("20")

var age=Number("21")
  • 字符串(String)　　
        var name =String("北京故宫")

        console.log(name[0]) //按照索引取相应的字符串

        console.log(name.charAt(2))//按照索引取相应的字符串

        console.log(name.substring(1,4))//连续取字符串

        console.log(name.indexOf("京"))//取某字符串的索引

        console.log(name.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')   指定索引插入，中间的0是固定参数必须为0

    移除

        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'}
 

5. 循环

<script>

        //数组 方式一

        var names=["alex", "tony", "rain"]

        for (var i=0;i<names.length;i++){

            console.log(names[i]);

        }

        var dics = {"name1":"alex","name2":"tony"}

        for (var n in dics) {

            console.log(dics[n])

        }

        //数组 方式二

        var names=["alex", "tony", "rain"]

        for (var index in names){

            console.log(names[index])

        }

        //while循环

        while (1==1){

            console.log("ok!");

            break;

        }

    </script>

6. if语句

    <script>

        //if语句

        a = "alex"

        if (a=="tony"){

            console.log("wrong!");

        }else if (a=="alex"){

            console.log("right!");

        }else{

            console.log("no!");

        }

        //switch case 语句

        names="tony"

        switch(names){

            case "tony":

                console.log("tony");

                break;

            case "rack":

                console.log("rack");

                break;

            case "alex":

                console.log("alex");

                break;

        }

    </script>

7. 异常处理

        //异常处理

        try {

            dfadfadfadf;

        }catch (e){

            console.log("出错了！");

        }finally {

            console.log("endly");

        }

8. 函数

<script>

       //普通函数

        function func(){

            console.log("普通函数！")

        }

        func()

        //匿名函数

        var func2 = function(){

            console.log("匿名函数")

        }

        func2()

        //自执行函数

        (function(){

            console.log("ok")

        })();

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);

Dom编程

Dom

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

注：一般说的JS让页面动起来泛指JavaScript和Dom

1、选择器

document.getElementById('id');//根据id获取

document.getElementsByName('name');//根据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. 5、提交表单

document.geElementById('form').submit()

6. 事件

特殊的：

window.onload = function(){}

        //jQuery：$(document).ready(function(){})

        //onload是所有DOM元素创建、图片加载完毕后才触发的。而ready则是DOM元素创建完毕后触发的，不等图片加载完毕。图片还么有渲染，就可以进行事件的执行。

7、其他功能

console.log()

alert()

confirm()

// URL和刷新

location.href

location.href = "url"  window.location.reload()

// 定时器

setInterval("alert()",2000);

clearInterval(obj)

setTimeout();

clearTimeout(obj)

jQuery

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

http://www.php100.com/manual/jquery/

python之路(十七)-javascript的更多相关文章

  1. python之路十七

    jQuery        http://jquery.cuishifeng.cn/        模块 <=>类库    DOM/BOM/JavaScript的类库        版本: ...

  2. Python之路【第十七篇】：Django【进阶篇 】

    Python之路[第十七篇]:Django[进阶篇 ]   Model 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段 使用 MySQLdb 来连接 ...

  3. Python之路【第十七篇】：Django之【进阶篇】

    Python之路[第十七篇]:Django[进阶篇 ]   Model 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段 使用 MySQLdb 来连接 ...

  4. Python之路【第十七篇】：Django【进阶篇】

    Python之路[第十七篇]:Django[进阶篇 ]   Model 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段 使用 MySQLdb 来连接 ...

  5. Python之路-python(css、JavaScript)

    css JavaScript 一.CSS 分层: position: fixed;(固定到页面的具体位置) 例如:返回顶部 <!DOCTYPE html> <html lang=&q ...

  6. Python 之路

    Python之路[第一篇]:Python简介和入门 Python之路[第二篇]:Python基础(一) Python之路[第三篇]:Python基础(二) Python之路[第四篇]:模块 Pytho ...

  7. python之路 目录

    目录 python python_基础总结1 python由来 字符编码 注释 pyc文件 python变量 导入模块 获取用户输入 流程控制if while python 基础2 编码转换 pych ...

  8. Python之路【第十八篇】：Web框架们

    Python之路[第十八篇]:Web框架们   Python的WEB框架 Bottle Bottle是一个快速.简洁.轻量级的基于WSIG的微型Web框架,此框架只由一个 .py 文件,除了Pytho ...

  9. 常用脚本语言Perl，Python，Ruby，Javascript一 Perl，Python，Ruby，Javascript

    常用脚本语言Perl,Python,Ruby,Javascript一 Perl,Python,Ruby,Javascript Javascript现阶段还不适合用来做独立开发,它的天下还是在web应用 ...

随机推荐

  1. jmeter学习笔记--线程组

    jmeter组件:线程组 是什么? 进程:一个正在执行的程序对应一个进程 线程:进程中的执行线索(一个进程中有多个执行线索) 线程组:按照线程性质对线程进行分组 并发执行:多个线程同时进行    特点 ...

  2. python中的函数和变量

    本节内容 函数的定义方法 函数功能 函数的返回值 函数的形参与实参 全局变量与局部变量 递归 函数的作用域 匿名函数lambda 函数式编程 常用内置函数 其他内置函数 函数 函数的定义方法 函数就相 ...

  3. Mysql优化策略

    总的来说:1.数据库设计和表创建时就要考虑性能 2.sql的编写需要注意优化 3.分区.分表.分库 设计表的时候: 1.字段避免null值出现,null值很难查询优化且占用额外的索引空间,推荐默认数字 ...

  4. ./configure -build,-host,-target设置

    build:执行代码编译的主机,正常的话就是你的主机系统.这个参数一般由config.guess来猜就可以.当然自己指定也可以.host:编译出来的二进制程序所执行的主机,因为绝大多数是如果本机编译, ...

  5. sqlserver 3145

    参考链接:http://www.uoften.com/dbs/mssql2005/20180415/73780.html 第一步:查询 use master;--用此语句得到备份文件的逻辑文件名RES ...

  6. 直接插入排序（js版）

    直接插入排序(从小到大) 基本思想:将一个记录插入到已经排好序的有序表中,得到一个新的,记录数加1的有序表. function insertSort(arr){ var i,j,temp=0; for ...

  7. centos中病毒

    嗯 很开中了病毒,,,而且这是第二次了.... 然后大佬说让我  crontab -l  一下 然后试了下 然后出来这个东东 执行下  crontab -r  这个  然后就crontab -l  就 ...

  8. 把button中文字的省略号放到后面

    butt.titleLabel.lineBreakMode = NSLineBreakByTruncatingTail; 加上这句话就可以,uibutton有uilabel的方法

  9. jmeter手写脚本，使用正则获取cookie（禁用cookies管理器）

    注:这里以bugfree为例 1.bugfree登录时会有重定向,这会导致每个URL都会有.因此要手动获取cookie的时候,需要去掉重定向勾选 正则获取动态PHPsession 获取到值后,放到信息 ...

  10. JS的深浅拷贝

    项目中根据各种需求或多或少会需要用到拷贝,通过查询整理之后今天简单的记录一下. 我们可以利用 slice.concat 返回一个新数组的特性可以实现数组的拷贝. var arr = ['a', 1, ...