基础知识拓展一

最新推荐文章于 2024-07-22 14:15:06 发布

凡哈哈

最新推荐文章于 2024-07-22 14:15:06 发布

阅读量61

点赞数

文章标签： java

本文链接：https://blog.csdn.net/l65656565/article/details/123700078

版权

jQuery是什么？？？

官方地址：http://jquery.com/

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

二：如何下载？？？
下载网站：http://jquery.com/download/

Production version是压缩后的版本，Development version 是未压缩，可读的代码版本，根据自身需要下载。

若没有直接下载文件，可右键，另存为，保存jquery-3.3.1.min.js到本地。

END

安装Jquery插件
在已有的web项目中，新建文件夹Jquery，并把jquery-3.3.1.min.js复制到该文件夹下。

在项目中引用Jquery。

使用<script type="text/javascript" src="/static/plugins/Jquery/jquery-3.3.1.min.js"></script>引入Jquery到jsp或者html页面。

注意src的路径要与项目中jquery-3.3.1.min.js所在的路径一致。

使用jquery语法，页面加载完成时弹出提示语，安装完成。

具体代码如下（jsp页面）：

<%@ page contentType="text/html; charset=utf-8"%>

<html>

<head><title>hello Jquery!</title>

<script type="text/javascript" src="/static/plugins/Jquery/jquery-3.3.1.min.js"></script>

</head>

<body>

<script type="text/javascript">

$(function () { window.alert("好好学习，天天向上！"); });

</script>

</body>

</html>

三：为什么要学习？？？
查看官方jQueryLOGO：write less，do more

为了简化JavaScript开发：选择器、CSS、HTML事件处理、JS动画、浏览器兼容、丰富插件

四：哪些情况下使用？？？
中大型网站开发
是一些前端框架的基础，比如EasyUI，Bootstrap
五：怎么用？？？

推荐自学网址：
1.http://tool.oschina.net/apidocs（在线API文档）
2.http://www.w3school.com.cn/(w3school 在线教程)

推荐使用浏览器：谷歌
推荐使用开发工具：HBuilder
案例1：点击按钮获取输入框中的值（JS对比jQuery）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>选择器使用</title>
        <!-- jQuery导入 -->
        <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>

        <!-- 方法一 -->
        <script type="text/javascript">
            // 通过原生态js方式获取value值
            window.onload = function() {
                // 获取oBtn1
                var oBtn1 = document.getElementById('oBtn1');
                // 设置监听事件
                oBtn1.onclick = function() {
                    // 获取oInput的元素
                    var oInput = document.getElementById('oInput');
                    // 获取value属性
                    var result = oInput.value;
                    alert(result);
                }
            }
        </script>

        <script type="text/javascript">
            <!-- 方法二 
            -->
            $(document).ready(function() {
            //
            获取按钮
            $("#oBtn2").click(function() {
            alert($("#oInput").val());
            });
            });
        </script>


    </head>
    <body>
        <h1>选择器使用</h1>
        <hr>
        <input id="oInput" type="text" name="" />
        <br><br>
        <button id="oBtn1" type="button" value="[jsrcipt]获取value值">[jsrcipt]获取value值</button>
        <button id="oBtn2" type="button" value="[jQuery]获取value值">[jQuery]获取value值</button>
    </body>
</html>