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基础学习的更多相关文章

  1. JavaScript 基础学习1-day14

    JavaScript 基础学习1 知识预览JavaScript概述二 JavaScript的基础三 JavaScript的对象BOM对象DOM对象实例练习js扩展 JavaScript概述 JavaS ...

  2. JavaScript 基础学习（二）js 和 html 的结合方式

    第一种 使用一个标签 <script type="text/javascript"> js代码; </script> 第二种 使用 script 标签,引入 ...

  3. JavaScript 基础 学习 （四）

    JavaScript 基础 学习 (四) 解绑事件 dom级 事件解绑 ​ 元素.on事件类型 = null ​ 因为赋值的关系,所以给事件赋值为 null 的时候 ​ 事件触发的时候,就没有事件处理 ...

  4. JavaScript 基础 学习（三）

    JavaScript 基础 学习(三) 事件三要素 ​ 1.事件源: 绑定在谁身上的事件(和谁约定好) ​ 2.事件类型: 绑定一个什么事件 ​ 3.事件处理函数: 当行为发生的时候,要执行哪一个函数 ...

  5. JavaScript 基础 学习 （二）

    JavaScript 基础 学习 节点属性 ​ 每一个节点都有自己的特点 ​ 这个节点属性就记录着属于自己节点的特点 1. nodeType(以一个数字来表示这个节点类型) ​ 语法:节点.nodeT ...

  6. JavaScript 基础 学习 （一）

    JavaScript 基础 学习 获取页面中的元素的方法 作用:通过各种方式获取页面中的元素 ​ 比如:id,类名,标签名,选择器 的方式来获取元素 ​ 伪数组: ​ 长的和数组差不多,也是按照索引排 ...

  7. 几张非常有意义的JavaScript基础学习思维图

    分享几张对于学习JavaScript基础知识非常有意义的图,无论你的JavaScript级别如何,“温故而知新”完全可以从这些图中得到. 推荐理由:归类非常好,非常全面 JavaScript 数组 J ...

  8. HTML JavaScript 基础学习

    HTML 中肯定会用到 JavaScript 的知识点,会点 JavaScript 的基础知识不会吃亏,其实打算去买JavaScript的教程去专门学习一下,但是交给我的时间不多了,记录一点,能会一点 ...

  9. javascript基础学习--HTML DOM

    写在前面的话:由于学校没有开过javascript这门课,所以平时用javascript时都是用到什么就去搜什么样的代码,但是在工作中有时候搜来的代码总是有那么点小问题,而当自己想去修改时,却又无从下 ...

随机推荐

  1. 学到了林海峰,武沛齐讲的Day17-5 内置函数

    zip print(list(zip(('a','n','c','d'),(1,2,3))))  =====[('a', 1), ('n', 2), ('c', 3)]   一一对应====元组变列表 ...

  2. 洛谷 UVA10298 Power Strings 题解

    Analysis 结论:设字符串长度为n,最长相同前后缀的长度为kmp[i],如n%(n-kmp[n])=0,则答案为n/(n-kmp[n]),否则为1. 如果循环节多于一个,以前n-kmp[n]个为 ...

  3. surprise库官方文档分析（一）

    一:入门 1.基本用法 (1).自动交叉验证 Surprise有一套内置的 算法和数据集供您使用.在最简单的形式中,只需几行代码即可运行交叉验证程序: from surprise import SVD ...

  4. RDMA Programming - Base on linux-rdma

    RDMA Programming - Base on linux-rdma 首页分类标签留言关于订阅2017-11-08 | 分类 Network  | 标签 RDMA  RoCE  Linux-RD ...

  5. 解决Navicat无法连接到centos上的MySQL，但命令行可以，修改权限，MySQL密码权限受限：ERROR 1820 (HY000) ERROR 1819 (HY000)

    问题分析 查看MySQL文档发现5.7版本后加入了对用户密码严格的管理规范,具体设置字段如下: validate_password_dictionary_file #插件用于验证密码强度的字典文件路径 ...

  6. [WEB安全]给BurpSuite设置非本地的网络代理

    目录 0x01 一般情况 0x02 移动端流量抓取 0x03 多重代理的情形 0x04 参考链接 在Web渗透测试过程中,BurpSuite是不可或缺的神器之一. BurpSuite的核心是代理Pro ...

  7. Multiple commands produce "*.framework"

    参考链接记录个问题,这是xcode10后新build系统导致的,新系统帮我们检查了很多东西,最优化我们的构建, 两种方案 1.用旧的系统(不推荐)   2.这个是build setting->b ...

  8. html 与 xml 的区别与联系

    [引言] 前一阵子刚刚学习了html(HyperText Markup Language),最近又接触了xml(Extensible Markup Language),它们之间有什么联系和区别呢?现在 ...

  9. Error: unable to load xmlsec-openssl library

    yum install libxml2-devel xmlsec1-devel xmlsec1-openssl-devel libtool-ltdl-devel

  10. PyTorch Tutorials 4 训练一个分类器

    %matplotlib inline 训练一个分类器 上一讲中已经看到如何去定义一个神经网络,计算损失值和更新网络的权重. 你现在可能在想下一步. 关于数据? 一般情况下处理图像.文本.音频和视频数据 ...