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. Xamarin.Form怎么调用原生方法

    ---恢复内容开始--- Xamarin.Form怎么调用原生包 今天我想和大家分享的是有关Xamarin如何调用安卓的原生代码,下面的例子以大家可能会经常用到的微信WX方法的调用. 首先我们新建一个 ...

  2. 用js实现一个简单的mvvm

    这里利用的object.defineproperty() 方法; <input     id='input'><p id='p'><p/>js: const dat ...

  3. html入门第一天（知识总结）。

    一文本标签:----------双标签.<b>标签 <strong>标签,文本呈现粗体(Html5中建议用strong,strong语义更强)<i>标签 <e ...

  4. 【JAVA】String[]配列の相関

    配列の作成: ①String[] str = new String[5]; ②String[] str = new String[]{"","","& ...

  5. Vue如何更新子组件

    黑科技: 给子组件绑定一个key值,当key值改变时,子组件就会更新 ~

  6. Myeclipse加载php插件

    下载PHPEclipse-1.2.3.200910091456PRD-bin.zip 解压缩后.发现内容包含:两个目录features和plugins,一个xml文件site.xml 全部扔进myec ...

  7. TZOJ 2289 Help Bob(状压DP)

    描述 Bob loves Pizza but is always out of money. One day he reads in the newspapers that his favorite ...

  8. mysql学习5：数据库设计

    mysql学习5:数据库设计 本文转载:https://blog.51cto.com/9291927/2087925:原创为天山老妖S 一.数据库设计简介 按照规范设计,将数据库的设计过程分为六个阶段 ...

  9. 20165315 2018-2019-2 《网络对抗技术》Exp0 Kali安装 Week1

    20165315 2018-2019-2 <网络对抗技术>Exp0 Kali安装 Week1 一.安装过程 1.基本配置 创建一个新的自定义vm 选择创建自定虚拟机 操作系统选择" ...

  10. JavaSE基础知识（5）—面向对象（对象数组和对象关联）

    一.对象数组 1.说明 数组的定义类型为对象类型 2.动态初始化 1.声明并开辟空间 Person[] pers = new Person[长度];2.赋值 for(int i=0;i<pers ...