48.javascript基础学习

javascript基础学习： http://www.w3school.com.cn/jsref/index.asp

jS的引入方式：

1、行间事件：为某一个具体的元素标签赋予js内容，onclink点击按钮触发弹窗事件，alert是弹框提示
- ```
<input type="button" value="按钮" onclick="alert('点我');">
```

2、嵌入引入：在文档页面通过Script标签嵌入

<head>
    <title>....</title>
    <script type="text/javascript">
        alert("ok!");
    </script>
</head>

3、外部引入；定义单独的js文件，通过script标签进行引入
- ```
<script type="text/javascript" src="js/main.js"></script>
```
列外：js跟css一样引用的修饰放到前面很有可能出现代码错误等等：一下两种方法：
- 1，最简单的就是可以将修饰的内容引入在<body>内容下面
- 2，当窗口内容全部加载完后再执行
- ```
window.onload = function(){}     //当窗口全部加载完后再执行
```

javascript选择器以id的形式，并以函数方式表达，获取方法如下：
- ```
document.getElementById('button1')
```

js定义变量

var 函数

var op = document.getElementById('button1');//这里是定义id标签实例化变量op

var a = 1; //number类型
var c = 'abc'; //string类型
var d = new Array; //数组类型 ，跟python里面的列表一样 可以通过索引值添加内容
d[0] = '张三';
d[1] = '李四';
var e = {"age":1,"name":"张三"};//对象数据类型，类似python里面的字典
console.log(d,e)//控制台输出d变量 自动在窗口执行完就会执行

js控制台输出，类似于python里的print打印

console.log(d,e)//控制台输出d变量 自动在窗口执行完就会执行
console.log(a + c) //拼接操作
var x = 1;
console.log(++x)

以上内容整合：

<!DOCTYPE html>
<html>
    <head>
        <title>js的基础学习</title>
    </head>
    <body>
            <p>
                <button id=button1>登录</button>
            </p>
    </body>
    <script type="text/javascript">
        var a = 1;
        var b = 2;
        var c = 'abc';
        var d = new Array; //数组 ，跟python里面的列表一样 可以通过索引值添加内容
        d[0] = '张三';
        d[1] = '李四';
        var e = {"age":1,"name":"张三"};//对象数据类型，类似python里面的字典
        console.log(d,e)//控制台输出d变量 自动在窗口执行完就会执行
        console.log(a + c) //拼接操作
        var x = 1;
        console.log(++x);
        var obutton = document.getElementById('button1');//这里是定义id标签实例化变量
        var button_times = 0;
        obutton.onclick = function(){
            alert(button_times++)    //点击一下按钮 button_times数字加1
        };
    </script>
</html>

jQuery库引入方式：

jQuery 极大地简化了 JavaScript 编程。
$(document).ready() //拿到文本内的所有标签

<script type="text/javascript" src="E:\python学习资料\上课视屏\九阶段：Web，Django\8-4-jQuery\js\jquery-1.10.2.min.js"></script>

语法一般为：$(选择器).事件(function(){将要执行的函数}) //当事件触发执行里面的函数

<!DOCTYPE html>
<html>
    <head>
        <title>js的基础学习</title>
    </head>
    <body>
            <p id="p1" style="color:blue;">
                这是一个标签
            </p>
    </body>
    <script type="text/javascript" src="E:\python学习资料\上课视屏\九阶段：Web，Django\8-4-jQuery\js\jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){ //先拿到文本里面的所有标签
            $("#p1").click(function(){ //对p1标签设置点击时的操作
                $("#p1").css("color","red") //将字体颜色改为红色
            });
        });
    </script>
</html>

jQuery标签选择器

$("h") 元素选择器
$("#id")　id选择器
$(".class") 类选择器

48.javascript基础学习的更多相关文章

JavaScript 基础学习1-day14
JavaScript 基础学习1 知识预览JavaScript概述二 JavaScript的基础三 JavaScript的对象BOM对象DOM对象实例练习js扩展 JavaScript概述 JavaS ...
JavaScript 基础学习（二）js 和 html 的结合方式
第一种使用一个标签 <script type="text/javascript"> js代码; </script> 第二种使用 script 标签,引入 ...
JavaScript 基础学习（四）
JavaScript 基础学习 (四) 解绑事件 dom级事件解绑元素.on事件类型 = null 因为赋值的关系,所以给事件赋值为 null 的时候事件触发的时候,就没有事件处理 ...
JavaScript 基础学习（三）
JavaScript 基础学习(三) 事件三要素 1.事件源: 绑定在谁身上的事件(和谁约定好) 2.事件类型: 绑定一个什么事件 3.事件处理函数: 当行为发生的时候,要执行哪一个函数 ...
JavaScript 基础学习（二）
JavaScript 基础学习节点属性每一个节点都有自己的特点这个节点属性就记录着属于自己节点的特点 1. nodeType(以一个数字来表示这个节点类型) 语法:节点.nodeT ...
JavaScript 基础学习（一）
JavaScript 基础学习获取页面中的元素的方法作用:通过各种方式获取页面中的元素比如:id,类名,标签名,选择器的方式来获取元素伪数组: 长的和数组差不多,也是按照索引排 ...
几张非常有意义的JavaScript基础学习思维图
分享几张对于学习JavaScript基础知识非常有意义的图,无论你的JavaScript级别如何,“温故而知新”完全可以从这些图中得到. 推荐理由:归类非常好,非常全面 JavaScript 数组 J ...
HTML JavaScript 基础学习
HTML 中肯定会用到 JavaScript 的知识点,会点 JavaScript 的基础知识不会吃亏,其实打算去买JavaScript的教程去专门学习一下,但是交给我的时间不多了,记录一点,能会一点 ...
javascript基础学习--HTML DOM
写在前面的话:由于学校没有开过javascript这门课,所以平时用javascript时都是用到什么就去搜什么样的代码,但是在工作中有时候搜来的代码总是有那么点小问题,而当自己想去修改时,却又无从下 ...

随机推荐

三十二. 多表查询 MySQL管理工具、用户授权及撤销
1.MySQL管理工具部署LAMP+phpMyAdmin平台安装httpd.mysql.php-mysql及相关包启动httpd服务程序解压phpMyAdmin包,部署到网站目录配置conf ...
Codeforces 1182D Complete Mirror [树哈希]
Codeforces 中考考完之后第一个AC,纪念一下qwq 思路简单理解一下题之后就可以发现其实就是要求一个点,使得把它提为根之后整棵树显得非常对称. 很容易想到树哈希来判结构是否相同,而且由于只 ...
python下载后出现python 已停止工作
背景: 在执行IDLE或者在terminal窗口执行 python命令时出现如下提示,修改了防火墙关闭也不行,找不到解决办法? 如图: [解决方案] 1.卸载重装python,确保python版本与系 ...
xyz
import numpy as np a = np.array([[,],[,]]) sumo = np.sum(a,axis=) suml = np.sum(a,axis=O) print(sumo ...
[bzoj 3534][Sdoi2014] 重建
传送门 Description T国有N个城市,用若干双向道路连接.一对城市之间至多存在一条道路. 在一次洪水之后,一些道路受损无法通行.虽然已经有人开始调查道路的损毁情况,但直到现在几乎没有消息传 ...
ES里设置索引中倒排列表仅仅存文档ID——采用docs存储后可以降低pos文件和cfs文件大小
index_options The index_options parameter controls what information is added to the inverted index, ...
spring boot + vue 前后分离实现登录功能（二）
安装 axios 进行路由转发 npm install axios --save-dev 或者 cnpm install axios --save-dev 修改 Main.js 新增 var axio ...
createElement与createDocumentFragment的一些小区别
在DOM操作里,createElement是创建一个新的节点,createDocumentFragment是创建一个文档片段. 网上可以搜到的大部分都是说使用createDocumentFragmen ...
Docker学习知识图
这个图更能明白他们之间的关系文章来源:外星人来地球欢迎关注,有问题一起学习欢迎留言.评论
扯扯python的多线程的同步锁 Lock RLock Semaphore Event Condition
我想大家都知道python的gil限制,记得刚玩python那会,知道了有pypy和Cpython这样的解释器,当时听说是很猛,也就意味肯定是突破了gil的限制,最后经过多方面测试才知道,还是那德行… ...

48.javascript基础学习

javascript基础学习： http://www.w3school.com.cn/jsref/index.asp

jS的引入方式：

js定义变量

jQuery库引入方式：

$(document).ready() //拿到文本内的所有标签

jQuery标签选择器

48.javascript基础学习的更多相关文章

随机推荐

热门专题