jQuery框架

2024-01-02 08:58:15

1.1、jQuery简介

jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。目前超过90%的网站都使用了jQuery库，jQuery的宗旨：写的更少，做得更多！

1.4、jQuery引入方式?

  • 本地引入：将jQuery下载下来，然后导入项目中，使用script标签进行引用CDN引入 
    <head>
    <%--src 指定本地jQuery的所在地址路径--%>
    <script src="jquery-1.9.1.min.js"></script>
</head>
  • 使用远程CDN资源库在线引入，避免了文件下载（本教程所采用）?
<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

????????????????或者

<!-- 引入CDN加速的jQuery -->
<script src="https://code.jquery.com/jquery-1.6.1.js"></script>

1.3、jQuery快速使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<body>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
    $(function () {
        // 请将jQuery代码书写在这里 ...
        alert('Hello,World!');
    });
</script>
</body>
</html>

1.4、jQuery的常用操作

??????? 1.4.1 选择器的使用

<div id="myId"></div>

<script>
    //获取id值为myId的元素对象
    $("#myId")
</script>

??????? 1.4.2 元素对象的操作?? (取值、赋值等)

<div id="myId">张三</div>

<script>

    //取值
    var html  =  $("#myId").html();
    //弹窗
    alert(html)
    //赋值
    $("#myId").html("hello")
</script>

??????? 1.4.3 事件绑定

<button>say hello</button>
<script>
    $('button').click(function () {
        alert("hello")
    });
</script>

??????? 1.4.4 链式编程

<ul>
    <li>三国演义</li>
    <li>水浒传</li>
    <li>齐天大圣</li>
    <li>红楼梦</li>
</ul>
<script>
    //多个方法链式调用,将ul中索引为2的li元素的内容设置为西游记
    $('ul').find('li').eq(2).html("西游记");
</script>

??????? 1.4.5 jQuery中的load方法

<button id="btn">加载数据</button>

<div id="box"></div>
<script>
    $("#btn").click(function () {
        $("#box").load("http://localhost:8080/target.jsp")
    });
</script>
<body>
<h3>早发白帝城</h3>
<h6>唐 李白</h6>

<p>朝辞白帝彩云间,</p>
<p>千里江陵一日还。</p>
<p>两岸猿声啼不住,</p>
<p>轻舟已过万重山。</p>
</body>

未完待续......

文章来源:https://blog.csdn.net/kelouze06/article/details/135282740
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。