javascript - 我的 jQuery 无法处理特定的事情-6ren

javascript - 我的 jQuery 无法处理特定的事情

转载作者：太空宇宙更新时间：2023-11-03 21:03:10

我写了一些 jQuery，但我写的似乎没有任何效果。我已经通过执行 $(document).ready(function(){ alert("jQuery is working !"); }); 测试了 jQuery 以检查其是否正常工作。它确实发送了警报。

我尝试重新链接 jQuery 并检查了我的 <head>标记了数百万次，我的眼睛找不到任何错误。

<!DOCTYPE html>
<html>

<head>
    <title>Abdalla Abouzeid</title>
    <script src="jquery-ui.min.js"></script>
    <script src="jquery-3.4.1.min.js"></script>
    <script src="javascript.js"></script>
    <meta name="description" content="This is my portoflio">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta property="og:site_name" content="www.anzads.com" />
    <meta property="og:type" content="Portoflio" />
    <meta property="og:image" content="413976bd.jpg">
    <link href="https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Poiret+One&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Sacramento&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://use.typekit.net/zyl3kwb.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="jquery-ui.min.css">
    <link rel="stylesheet" type="text/css" href="jquery-ui.structure.min.css">
    <link rel="stylesheet" type="text/css" href="jquery-ui.theme.min.css">
</head>

<body>
    <!--This is the header {logo , menu}-->
    <div id="container">
        <div id="header">
            <div class="logo">
                <a href="default.html">
                    <p>
                        A n Z
                    </p>
                </a>
            </div>

            <ul class="menu">


                <a href="default.html">
                    <li>Home</li>
                </a>
                <a class="links" href="Contact.html">
                    <li>Contact</li>
                </a>


                <a class="links" href="Projects.html">
                    <li>Projects</li>
                </a>
            </ul>



        </div>


        <div class="content">
            <hr>

            <h1>
                Are you trying to build a professional website ?
            </h1>

            <P>
                Hello , i am a web designer / front end developer. Bringing your vision alive is pivotal to me and that is what sets me apart. Let's create a professional yet astonishing desgins for our website that shows your vision.
            </P>


            <hr>

            <h2>My Services</h2>
            <hr class="titleUnderline">
            <div class="services , separation">

                <div class="leftBox , serviceBox">
                    <img class="serviceLogo" src="web-design.svg">
                    <h3> Web Design <br/> <span class="subTitle">UI Focused</span></h3>

                    <p>
                        Designing a website must be specific to its activity. This is what i do , designing a website professionally to deliver its purpose to the users of the website. User focused website should be the primary goal of any website.
                    </p>
                </div>

                <div class="rightBox , serviceBox">
                    <img class="serviceLogo" src="responsive-design-symbol.svg">
                    <h3> Web Development <br/> <span class="subTitle">Responsive and Fast</span></h4>
                        <p>
                            Every Website must have to goals to achieve . First it must be resposive which means for it to work on all devices . Second it has to to load as fast as possible to guarantee a very good user experiece.
                        </p>
                </div>
            </div>
            <div class="services , separation">
                <div class="leftBox , serviceBox">
                    <img class="serviceLogo" src="G designing.svg">
                    <h3>Logo Designing <br/> <span class="subTitle">Iconic Styles</span></h3>
                    <p>
                        A website's logo describes their product , targets audience and industry . It commonly outlines fundamental information about the business, the desired design , the project timing and the budget.
                </div>

                <div class="rightBox , serviceBox">
                    <img class="serviceLogo" src="htmlcss.svg">
                    <h3>Front-End Development <br/> <span class="subTitle">HTML / CSS</span></h3>
                    <p>
                        Creating a strong foundation for a website means getting the HTML and CSS architecture right. If you've got a design I can create the front-end code for it.
                    </p>

                </div>
            </div>
        </div>
        <br/>
        <hr>
        <div id="footer">
            <div class="copyright">
                <p>
                    &copy;Copyright 2019 AnZ <sup>&reg;</sup>
                </p>


                <a href="https://www.instagram.com/abuzied365/?hl=en" target="_blank">
                    <img src="instagram.svg"></a>
                <a href="https://www.facebook.com/AbuziedAbdalla" target="_blank">
                    <img src="facebook.svg">
                </a>
                <a href="https://twitter.com/AbuzeidAbdalla" target="_blank">
                    <img src="twitter.svg">
                </a>
            </div>
        </div>

    </div>
    </div>

</body>

</html>

        body {
            width: 100%;
            margin: auto;
            color: #7D7B7B;
        }

        #header {
            font-family: 'Yanone Kaffeesatz', sans-serif;
            height: 15%;
            position: relative;
            top: 10px;
            text-align: center;
        }

        h2,
        h3,
        h4,
        h5,
        h5 {
            font-family: 'Yanone Kaffeesatz', sans-serif;
        }

        h1 {
            font-family: 'Yanone Kaffeesatz', sans-serif;
            font-size: 45px;
        }

        p {
            font-family: 'Poiret One', cursive;
            font-size: 20px;
            font-weight: 650;
        }

        a:link {
            text-decoration: none;
        }

        a:active {
            text-decoration: none;
        }

        a:hover {
            text-decoration: none;
        }

        .logo p {
            font-family: 'Sacramento', cursive;
            font-size: 50px;
            outline: 0;
            text-rendering: optimizeLegibility;
            color: #7D7B7B;
        }

        ul {
            list-style-type: none;
        }

        #container {
            width: 80%;
            margin: auto;
        }

        hr {
            border: 1px solid #7D7B7B;
            margin-top: 15px;
            margin-bottom: 15px;
        }

        .menu li {
            display: inline;
            font-size: 20px;
        }

        .links {
            margin-left: 7%;
        }

        .menu {
            padding: 4px;
        }

        .menu a {
            color: #7D7B7B;
        }

        .leftBox {
            width: 30%;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            margin-right: 10%;
            margin-left: 5%;
            text-align: center;
            border-radius: 15px;
            -webkit-border-radius: 15px;
            -moz-border-radius: 15px;
            -ms-border-radius: 15px;
            -o-border-radius: 15px;
        }

        .rightBox {
            width: 30%;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            margin-left: 10%;
            text-align: center;
            border-radius: 15px;
            -webkit-border-radius: 15px;
            -moz-border-radius: 15px;
            -ms-border-radius: 15px;
            -o-border-radius: 15px;
        }

        h2 {
            font-size: 35px;
        }

        h3 {
            font-size: 30px;
        }

        .services {
            width: 100%;
            display: flex;
            flex-flow: row;
        }

        .services p,
        h3 {
            padding: 5px;
            line-height: 35px;
        }

        .subTitle {
            font-weight: 100;
            font-size: 25px;
        }

        .titleUnderline {
            width: 8%;
            float: left;
            margin-bottom: 25px;
        }

        .serviceLogo {
            width: 150px;
            height: 200px;
        }

        .separation {
            margin-top: 100px;
        }

        .copyright {
            text-align: center;
        }

        .copyright img {
            width: 40px;
            height: 40px;
            margin-bottom: 50px;
        }

        .contactMe img {
            width: 50px;
            height: 50px;
            float: left;
            margin-right: 30px;
        }

        .underline {
            width: 11%;
            float: left;
        }

        .title {
            margin-bottom: 100px;
        }

        .number,
        .myEmail {
            font-family: 'Gruppo', cursive;
            font-weight: 600;
            font-size: 26px;
        }

        .comingSoon {
            font-size: 60px;
            text-align: center;
        }
        /*  @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
        .leftBox,
        .rightBox {
            width: 80%;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            margin-right: 10%;
            margin-left: 5%;
            text-align: center;
            border-radius: 15px;
            -webkit-border-radius: 15px;
            -moz-border-radius: 15px;
            -ms-border-radius: 15px;
            -o-border-radius: 15px;
        }
    }*/

$(".logo").click(function() {
    $("body").css("background-color", "black");
});

这些是我页面上的所有代码。我认为这可能是一个链接问题，但我不知道它是否真的是。我检查了 visual studio 代码编辑器，看看是否有任何语法或语义错误，但它没有显示任何内容。

最佳答案

假设您只包含标准的 jQuery，您的 jQuery 将按预期工作；点击 .logo类更改了 <body>颜色到黑色:

$(".logo").click(function() {
    $("body").css("background-color", "black");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
    <!--This is the header {logo , menu}-->
    <div id="container">
        <div id="header">
            <div class="logo">
                <a href="default.html">
                    <p>
                        A n Z
                    </p>
                </a>
            </div>

            <ul class="menu">


                <a href="default.html">
                    <li>Home</li>
                </a>
                <a class="links" href="Contact.html">
                    <li>Contact</li>
                </a>


                <a class="links" href="Projects.html">
                    <li>Projects</li>
                </a>
            </ul>



        </div>


        <div class="content">
            <hr>

            <h1>
                Are you trying to build a professional website ?
            </h1>

            <P>
                Hello , i am a web designer / front end developer. Bringing your vision alive is pivotal to me and that is what sets me apart. Let's create a professional yet astonishing desgins for our website that shows your vision.
            </P>


            <hr>

            <h2>My Services</h2>
            <hr class="titleUnderline">
            <div class="services , separation">

                <div class="leftBox , serviceBox">
                    <img class="serviceLogo" src="web-design.svg">
                    <h3> Web Design <br/> <span class="subTitle">UI Focused</span></h3>

                    <p>
                        Designing a website must be specific to its activity. This is what i do , designing a website professionally to deliver its purpose to the users of the website. User focused website should be the primary goal of any website.
                    </p>
                </div>

                <div class="rightBox , serviceBox">
                    <img class="serviceLogo" src="responsive-design-symbol.svg">
                    <h3> Web Development <br/> <span class="subTitle">Responsive and Fast</span></h4>
                        <p>
                            Every Website must have to goals to achieve . First it must be resposive which means for it to work on all devices . Second it has to to load as fast as possible to guarantee a very good user experiece.
                        </p>
                </div>
            </div>
            <div class="services , separation">
                <div class="leftBox , serviceBox">
                    <img class="serviceLogo" src="G designing.svg">
                    <h3>Logo Designing <br/> <span class="subTitle">Iconic Styles</span></h3>
                    <p>
                        A website's logo describes their product , targets audience and industry . It commonly outlines fundamental information about the business, the desired design , the project timing and the budget.
                </div>

                <div class="rightBox , serviceBox">
                    <img class="serviceLogo" src="htmlcss.svg">
                    <h3>Front-End Development <br/> <span class="subTitle">HTML / CSS</span></h3>
                    <p>
                        Creating a strong foundation for a website means getting the HTML and CSS architecture right. If you've got a design I can create the front-end code for it.
                    </p>

                </div>
            </div>
        </div>
        <br/>
        <hr>
        <div id="footer">
            <div class="copyright">
                <p>
                    &copy;Copyright 2019 AnZ <sup>&reg;</sup>
                </p>


                <a href="https://www.instagram.com/abuzied365/?hl=en" target="_blank">
                    <img src="instagram.svg"></a>
                <a href="https://www.facebook.com/AbuziedAbdalla" target="_blank">
                    <img src="facebook.svg">
                </a>
                <a href="https://twitter.com/AbuzeidAbdalla" target="_blank">
                    <img src="twitter.svg">
                </a>
            </div>
        </div>

    </div>
    </div>

</body>

你的.logo一文不值仅受到单个 <a> 的影响标签，然后单击此按钮将使您离开(可能在您看到颜色变化之前)。

问题本身几乎肯定在您的 <head> 中文件:您在 jQuery 本身之前引用 jQuery UI，然后似乎有第三个 JavaScript 文件:

<script src="jquery-ui.min.js"></script>
<script src="jquery-3.4.1.min.js"></script>
<script src="javascript.js"></script>

您需要在 jQueryUI 之前加载 jQuery，确保不会意外地包含 jQuery 两次，或使用任何声明 $ 的框架。本身:

<script src="jquery-3.4.1.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="javascript.js"></script>

关于javascript - 我的 jQuery 无法处理特定的事情，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57487818/

文章推荐： python - 在Python中使简单的绘图变得平滑

文章推荐： python - set_column 未将颜色格式应用于大型 Excel 文件的列

文章推荐： css - 名为 "stylesheet.css"的文件是否必要/强制？

java - 无法 Autowiring
我通过 spring ioc 编写了一些 Rest 应用程序。但我无法解决这个问题。这是我的异常(exception): org.springframework.beans.factory.BeanC
java - 无法@Autowire配置
我对 TestNG、Spring 框架等完全陌生，我正在尝试使用注释 @Value通过 @Configuration 访问配置文件注释。我在这里想要实现的目标是让控制台从配置文件中写出“hi”，通过
无法 malloc 然后转到程序顶部
为此工作了几个小时。我完全被难住了。这是 CS113 的实验室。如果用户在程序(二进制计算器)结束时选择继续，我们需要使用 goto 语句来到达程序的顶部。但是，我们还需要释放所有分配的内存。
无法 avformat_open_input .mp3
我正在尝试使用 ffmpeg 库构建一个小的 C 程序。但是我什至无法使用 avformat_open_input() 打开音频文件设置检查错误代码的函数后，我得到以下输出: Error code:
java - 无法 Autowiring
使用 Spring Initializer 创建一个简单的 Spring boot。我只在可用选项下选择 DevTools。创建项目后，无需对其进行任何更改，即可正常运行程序。现在，当我尝试在项目
macos - 无法 brew 链接qt
所以我只是在 Mac OS X 中通过 brew 安装了 qt。但是它无法链接它。当我尝试运行 brew link qt 或 brew link --overwrite qt 我得到以下信息: ton
git - 无法 pull 或提交
我在提交和 pull 时遇到了问题:在提交的 IDE 中，我看到: warning not all local changes may be shown due to an error: unable
gcc - 无法 grep 特定格式的文本
我跑 man gcc | grep "-L" 我明白了 Usage: grep [OPTION]... PATTERN [FILE]... Try `grep --help' for more inf
curl - 无法 CURL 远程文件
我有一段代码，旨在接收任何 URL 并将其从网络上撕下来。到目前为止，它运行良好，直到有人给了它这个 URL: http://www.aspensurgical.com/static/images/a
WireGuard - 无法 ping 服务器或解析域
在过去的 5 个小时里，我一直在尝试在我的服务器上设置 WireGuard，但在完成所有设置后，我无法 ping IP 或解析域。下面是服务器配置 [Interface] Address = 10.
GitLab:无法 fork 我自己的项目
我正在尝试在 GitLab 中 fork 我的一个私有(private)项目，但是当我按下 fork 按钮时，我会收到以下信息: No available namespaces to fork the
javascript - 无法 GET/定义路由
我这里遇到了一些问题。我是 node.js 和 Rest API 的新手，但我正在尝试自学。我制作了 REST API，使用 MongoDB 与我的数据库进行通信，我使用 Postman 来测试我的路
javascript - 无法 AppendChild - 尝试使一个方法在不同的类中附加另一个方法
下面的代码在控制台中给出以下消息: Uncaught DOMException: Failed to execute 'appendChild' on 'Node': The new child el
javascript - 数组被视为对象，无法 NgFor
我正在尝试调用一个新端点来显示数据，我意识到在上一组有效的数据中，它在数据周围用一对额外的“[]”括号进行控制台，我认为这就是问题是，而新端点不会以我使用数据的方式产生它! 这是 NgFor 失败的原
git - 无法 checkout 到无效路径
我正在尝试将我的 Symfony2 应用程序部署到我的 Azure Web 应用程序，但遇到了一些麻烦。推送到远程时，我在终端中收到以下消息 remote: Updating branch 'mas
docker - Minikube具有IP-无法 curl
Minikube已启动并正在运行，没有任何错误，但是我无法 curl IP。我在这里遵循:https://docs.traefik.io/user-guide/kubernetes/，似乎没有提到关闭
linux - 无法 docker 组成任何项目
每当我尝试docker组成任何项目时，都会出现以下错误。我尝试过有和没有sudo 我在这台机器上只有这个问题。我可以在Mac和Amazon WorkSpace上运行相同的容器。 (myslabs)
python - 无法 pip 安装手电筒
我正在尝试 pip install stanza 并收到此消息: ERROR: No matching distribution found for torch>=1.3.0 (from stanza
kubernetes 无法 ping 通其他服务
DNS 解析看起来不错，但我无法 ping 我的服务。可能是什么原因？来自集群中的另一个 Pod: $ ping backend PING backend.default.svc.cluster.l
spring - 无法 Autowiring 字段
我正在使用Hibernate 4 + Spring MVC 4当我开始 Apache Tomcat Server 8我收到此错误: Error creating bean with name 'wel

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 我的 jQuery 无法处理特定的事情