「网易官方」极客战记（codecombat）攻略-网页开发2-查询已确认-query-confirmed

Posted 2021-02-18 codecombat

(点击图片进入关卡)

介绍网络最流行的库的基础知识：jQuery。

简介

使用 css() jQuery 函数更改图像的大小。

默认代码

<!-- <script> 标签允许您添加javascript！ -->

<!-- 浏览器只能读取JavaScript，而不是Python！ -->

<script>

    // JavaScript应该写在<script>标签中。

    // 极客战计使用jQuery使JavaScript更容易。

    // jQuery是一个函数，比如moveLeft().。

    // 除了"moveLeft()"之外，它只是："$()"

    // 找到 #theImage。

    var image = $("#theImage");

    // 改变它。

    image.css("background-color", "red");

    // 将图像的"width"设置为"200px"并按下运行：

 

</script>

<style>

    /* CSS应该写在&tSyt>标签中。 */

    body {

        text-align:center;

    }

</style>

<img id="theImage"

src="http://direct.codecombat.com/file/db/thang.type

/540f389a821af8000097dc5a/portrait.png"

/>

概览

jQuery

极客战记Web开发系列使用jQuery让基于Web的JavaScript开发变得更加简单。 jQuery引入了两个新函数：jQuery() 和 $() 。 它们的作用完全相同，但 $() 能使问题得到简化。 对于JavaScript， $ 其实和 enemy 或moveLeft 没有什么区别！ 极客战记使用 $() ，因为它更便于键入，而且是jQuery库的标志。

$

$ 是一个函数，因此调用时也要记得使用括号 ( 和 ) 。 需要传入的最常用参数（ argument ）是一个字符串（ "string" ）。 特别地， $() 需要一个CSS样式选择器。

查询已确认 解法

<!-- <script> 标签允许您添加JavaScript！ -->

<!-- 浏览器只能读取JavaScript，而不是Python！ -->

 

<script>

    // JavaScript应该写在<script>标签中。

    // 极客战计使用jQuery使JavaScript更容易。

    // jQuery是一个函数，比如moveLeft().。

    // 除了"moveLeft()"之外，它只是："$()"

    // 找到 #theImage。

    var image = $("#theImage");

    // 改变它。

    image.css("background-color", "red");

    // 将图像的"width"设置为"200px"并按下运行：

    image.css("width", "200px");

</script>

<style>

    /* CSS应该写在&tSyt>标签中。 */

    body {

        text-align:center;

    }

</style>

<img id="theImage"

src="http://direct.codecombat.com/file/db/thang.type

/540f389a821af8000097dc5a/portrait.png"

/>

 

本攻略发于极客战记官方教学栏目，原文地址为：

https://codecombat.163.com/news/jikezhanji-chaxunyiqueren

极客战记——学编程，用玩的！