JavaScript-基础入门

最新推荐文章于 2024-09-02 17:34:07 发布

不会秃头的小齐

最新推荐文章于 2024-09-02 17:34:07 发布

阅读量126

点赞数

分类专栏： web开发 html 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_46972127/article/details/124656190

版权

web开发同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

4.3 innerText/innerHTML

4.4 关于jQuery 框架

4.4.1 什么是jQuery？

4.4.2 如何使用jQuery？

4.4.3 基于jQuery 实现聚合搜索

1、什么是JavaScript？

1.1 JS概览

JavaScript是世界上最流行的编程语言之一，它是一种脚本语言，通过解释器运行，主要在客户端（浏览器）上运行。

JS能完成的事情：

①网页开发

②网页游戏开发

③服务器开发

④桌面程序开发（比如VSCode）

⑤手机app开发

1.2 JS、CSS、HTML三者关系

HTML：网页的结构（基础结构）

CSS：网页的表面（包装）

JS：网页的行为（实现的操作）

1.3 JS是如何运行的？

JS通过浏览器可以直接运行，JS通常是包含在HTML页面中的，浏览器中包含了两大类引擎：渲染引擎（HTML渲染引擎、CSS渲染引擎）、JS执行引擎。

2、JS前置知识

2.1 JS书写格式

①行内格式

<body>
    <input type="button" value="点我" onclick="alert('haha')">
</body>

②内嵌格式

写到script标签中

    <script>
        alert("hh");
    </script>

③外部格式

写到单独的.js文件中

<script src="hello.js"></script>

2.2 消息打印

①弹出输入框:

alert("hello");

②弹出选择框

confirm("确认删除？");

③输出信息到控制台

console.log("这是一条日志");

重要概念：log（日志）

查日志是程序猿调式程序的重要手段，以后日志就是我们的好盆友。

注意：JS中字符串常量可以使用单引号表示，也可以使用双引号表示，但HTML中推荐使用双引号，JS中推荐使用单引号。

2.3 注释

单行注释：//

多行注释：/*.....*/

注释快捷键可自己设置

ctrl+/

注意与html中注释不同，html中注释为：

3、JS基础语法

3.1 定义变量

var name = '张三'；
var age = 20;

var是JS中的关键字，表示这是一个变量。JS为弱类型语言，所以所有的变量都需要使用var来定义。

3.2 定义方法

//定义方法
function myfun(){
    alert("执行了 myfun 方法")
}

//调用方法
myfun();

//定义带参数的方法
function myfun(name){
    alert(name+"执行了 myfun 方法")
}

//调用
myfun('java');

3.3 条件判断

判断等语法和java语法类似，具体使用如下：

  // if 写法 1
            if(flag){
                alert("标识为真");
            }
            */

            /*
   // if 写法 2
            if(flag){
                alert("标识为真");
            }else{
                alert("标识为假");
            
            }*/

            /**
     // if 写法 3
            var day = "3";
            if(day=="1"){
                alert("今天星期1");
            }else if(day=="2"){
                alert("今天星期2");
            }else if(day=="3"){
                alert("今天星期3");
            }else if(day=="4"){
                alert("今天星期4");
            }else{
               alert("其他"); 
            }
            **/

      // 写法4：三元表达式/三目表达式
            // flag ? alert("为真") : alert("为假");

      // switch 
               var day = 2;
            // switch(day){
            //     case 1:
            //         alert("今天是周一");
            //         break;
            //     case 2:
            //         alert("今天是周二");
            //         break;
            //         //...
            //     default:
            //         alert("其他");
            // }

       // while
            var num=0;
            // while(num<10){
            //     if(num==5){ 
            //         break;
            //     }
            //     // console.log(num);
            //     // num++;
            //     console.log(num++);
            // }

        // for
                for(var num=0;num<10;num++){
            //     console.log(num);
            // }

4、JS操作DOM树

4.1 得到控件

document.getElementById("元素id")

4.2 操纵控件

document.getElementById("username").value;  //获取元素值
document.getElementById("username").value = ...; //设置元素值

4.3 innerText/innerHTML

比如div标签，它没有value属性，此时若要获取控件，即获取元素开始和结束标签之间的Text或者HTML，此时用innerText/innerHTML，若需要用到css美化则用innerHTML，简单的文本就用innerText。

4.4 关于jQuery 框架

4.4.1 什么是jQuery？

jQuery是一个JS库，jQuery极大简化了JS编程。

与原生代码比较

4.4.2 如何使用jQuery？

导入js文件

<head>
    <meta charset="UTF-8">
    <title>我的文章列表</title>
    <script src="jquery-1.9.1.min.js"></script>
</head>

4.4.3 基于jQuery 实现聚合搜索

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聚合搜索</title>
    <script src="jquery-1.9.1.min.js"></script>
</head>
<body>
    <div>
        <div style="height:50px;margin-left: 40%;">
            <input value=" 必 应 " type="button" onclick="switchSearch('https://cn.bing.com/')"> &nbsp;&nbsp;&nbsp;&nbsp;
            <input value=" 360 " type="button" onclick="switchSearch('https://www.so.com/')"> &nbsp;&nbsp;&nbsp;&nbsp;
            <input value=" 搜狗 " type="button" onclick="switchSearch('https://www.sogou.com/')"> &nbsp;&nbsp;&nbsp;&nbsp;
        </div>
        <div>
            <iframe id="ifr" style="width: 100%;height: 600px;"
            src="https://cn.bing.com/"></iframe>
        </div>
    </div>
    <script>
        function switchSearch(site){
            jQuery("#ifr").attr("src",site);
        }
    </script>
</body>
</html>

不会秃头的小齐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript-基础入门

1、什么是JavaScript？1.1 JS概览JavaScript是世界上最流行的编程语言之一，它是一种脚本语言，通过解释器运行，主要在客户端（浏览器）上运行。JS能完成的事情：①网页开发②网页游戏开发③服务器开发④桌面程序开发（比如VSCode）⑤手机app开发1.2 JS、CSS、HTML三者关系HTML：网页的结构（基础结构）CSS：网页的表面（包装）JS：网页的行为（实现的操作）1.3 JS是如何运行的？JS通过浏览器可以直接运行，JS通
复制链接

扫一扫

专栏目录