JavaScript 框架之jQuery

目录

 

一、JavaScript 框架之jQuery

二、JavaScript - 测试 jQuery

引用 jQuery

jQuery 描述

测试 jQuery


一、JavaScript 框架之jQuery


jQuery

jQuery 是目前最受欢迎的 JavaScript 框架。

它使用 CSS 选择器来访问和操作网页上的 HTML 元素(DOM 对象)。

jQuery 同时提供 companion UI(用户界面)和插件。

许多大公司在网站上使用 jQuery:

  • Google
  • Microsoft
  • IBM
  • Netflix

    引用 jQuery

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
    </script>

    二、JavaScript - 测试 jQuery


    引用 jQuery

    如需测试 JavaScript 库,您需要在网页中引用它。

    为了引用某个库,请使用 <script> 标签,其 src 属性设置为库的 URL:


    引用 jQuery

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
    </script>
    </head>
    <body>
    </body>
    </html>
    

    jQuery 描述

    主要的 jQuery 函数是 $() 函数(jQuery 函数)。如果您向该函数传递 DOM 对象,它会返回 jQuery 对象,带有向其添加的 jQuery 功能。

    jQuery 允许您通过 CSS 选择器来选取元素。

    在 JavaScript 中,您可以分配一个函数以处理窗口加载事件:


    JavaScript 方式:

    function myFunction()
    {
    var obj=document.getElementById("h01");
    obj.innerHTML="Hello jQuery";
    }
    οnlοad=myFunction;
    

    等价的 jQuery 是不同的:


    jQuery 方式:

    function myFunction()
    {
    $("#h01").html("Hello jQuery");
    }
    $(document).ready(myFunction);
    

    上面代码的最后一行,HTML DOM 文档对象被传递到 jQuery :$(document)。

    当您向 jQuery 传递 DOM 对象时,jQuery 会返回以 HTML DOM 对象包装的 jQuery 对象。

    jQuery 函数会返回新的 jQuery 对象,其中的 ready() 是一个方法。

    由于在 JavaScript 中函数就是变量,因此可以把 myFunction 作为变量传递给 jQuery 的 ready 方法。

    提示:jQuery 返回 jQuery 对象,与已传递的 DOM 对象不同。jQuery 对象拥有的属性和方法,与 DOM 对象的不同。您不能在 jQuery 对象上使用 HTML DOM 的属性和方法


    测试 jQuery

    例子 1

    请试一下下面这个例子:

  • 点击这里 测试

例子 2

请再试一下这个例子:

点击这里 测试

 


下次更新一篇jQuery 基础教程篇,感兴趣的关注一下。thank your

  • 4
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Django是一个基于Python的开源Web框架,而jQuery是一个JavaScript库,用于简化HTML文档的操作、事件处理、动画效果等。在Django中使用jQuery可以为网页添加交互性和动态效果。 要在Django中使用jQuery,首先需要在HTML模板中引入jQuery库。可以通过以下步骤实现: 1. 在项目的静态文件目录中创建一个文件夹,例如"static"。 2. 在该文件夹中下载并保存jQuery库的文件,例如"jquery.js"。 3. 在HTML模板中引入jQuery库,可以使用以下代码: ```html <script src="{% static 'jquery.js' %}"></script> ``` 引入jQuery后,你可以使用jQuery提供的方法来操作HTML元素、处理事件等。以下是一些常见的使用示例: 1. 选择元素:可以使用选择器来选择HTML元素,例如: ```javascript $("p") // 选择所有 <p> 元素 $(".myclass") // 选择所有 class 为 "myclass" 的元素 $("#myid") // 选择 id 为 "myid" 的元素 ``` 2. 修改元素内容:可以使用`text()`或`html()`方法来修改元素的文本内容或HTML内容,例如: ```javascript $("p").text("新的文本内容") // 修改所有 <p> 元素的文本内容 $("#myid").html("<b>加粗文本</b>") // 修改 id 为 "myid" 的元素的HTML内容 ``` 3. 处理事件:可以使用`on()`方法来绑定事件处理函数,例如: ```javascript $("button").on("click", function() { // 处理点击事件的代码 }); ``` 以上是使用jQuery的一些基本示例,你可以根据具体需求进一步学习和使用jQuery的其他功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值