JQuery框架简介

最新推荐文章于 2024-06-22 14:50:48 发布

Astar丶

最新推荐文章于 2024-06-22 14:50:48 发布

阅读量8.5k

点赞数 4

分类专栏：知识总结

本文链接：https://blog.csdn.net/qq_43124926/article/details/88709641

版权

知识总结专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.1jQuery简介

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。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+等。

1.2如何向页面添加jQuery

jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。

可以通过下面的代码把 jQuery 添加到网页中：

<head>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript">
</script>
</head>

PS:<script> 标签应该位于页面的 <head> 部分。

练习1.在当前页面输入用户名并输出

  $(function () {
            $("#Button1").click(function () {//创建Button1点击事件
                var name = $("#TextName").val();//用来获取TextName的值
                $("#name").text(name);//把值输出在lable标签name上
            });
        });


<body>
    请输入用户名:<input id="TextName" type="text" />
    <input name="Button1" id="Button1" type="button" value="CLICK ME" />
    <br />
    你的用户名为:<label id="name"></label>
</body>

练习2.在练习1的基础上创建确认弹窗

   <script type="text/javascript">
        $(function () {
            $("#Button1").click(function () {//创建Button1点击事件
                var cfm = confirm("是否查看内容?");//创建判断
                if (cfm == true) {//如果点击了Button1则输出cfm
                    var name = $("#TextName").val();
                    $("#name").text(name);
                }

            });
        });
    </script>

<body>
    请输入用户名:<input id="TextName" type="text" />
    <input name="Button1" id="Button1" type="button" value="CLICK ME" />
    <br />
    你的用户名为:<label id="name"></label>
</body>

Astar丶

关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
JQuery框架简介

1.1jQuery简介jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画...
复制链接

扫一扫