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时都是用到什么就去搜什么样的代码,但是在工作中有时候搜来的代码总是有那么点小问题,而当自己想去修改时,却又无从下 ...
随机推荐
- Centos 7 安装 Haproxy
[环境] Centos 7.2 Web1:192.168.136.170 web2:192.168.136.166 Haproxy:192.168.136.173 [web服务器1.2] 安装Ngin ...
- wepy框架入门
安装 wepy 命令行工具. npm install wepy-cli -g 在开发目录生成开发DEMO. wepy new myproject 开发实时编译. wepy build --watch ...
- dbcp_c3p0连接mysql8.0.13
背景 学习数据库的使用,上次没有记录,现在都回忆不起来了,所以这次重新学的时候顺便记录下. 配置环境 win10 jdk11 idea mysql8.0.13 DBCP连接使用 用配置文件目前我连接不 ...
- ssh免密码登录与常见问题
免密码登录 cd ~/.ssh ssh-keygen -t rsa #然后敲回车 mv id_rsa.pub master_rsa.pub cat master_rsa.pub >> au ...
- 深入理解JVM——关于垃圾回收
关于垃圾回收 仿佛来自上海居委会大妈的灵魂拷问:“你是什么垃圾?” 不 今天我们要说的是JVM的垃圾回收 假如我是一个“人”类的“对象”,也和人的生命一样必有一死,可是“我真的还想再活500年~~”, ...
- 实现Callable接口实现多线程
package com.roocon.thread.t2; import java.util.concurrent.Callable; import java.util.concurrent.Exec ...
- routine的加载
// Hearthbuddy.Windows.MainWindow // Token: 0x06000245 RID: 581 RVA: 0x0008C318 File Offset: 0x0008A ...
- RT-Thread 柿饼GUI
目前主流的嵌入式GUI开发技术中,RT-Thread/Persimmon.TouchGFX和emWin是最受人瞩目的. RT-Thread/ Persimmon是国内主导开发的实时线程操作系统RT ...
- LoadRunne遇到的一些问题FAQ(持续更新...)
1.LR11破解完成,添加License失败,报错License security violation Loadrunner11破解成功后,用deletelicense.exe工具把License全删 ...
- Linux笔记整理
[随时更新] ps aux | grep mysql 检测MySQL服务是否在运行 Linux查看某个进程的线程:ps -T -p <pid> 列出了由进程号为<pid>的进程 ...