Web阶段:第五章:JQuery库

Jquery介绍
1.什么是JQuery ?
jQuery,顾名思义,也就是JavaScript和查询(Query),它就是辅助JavaScript开发的js类库。

2.JQuery核心思想:
它的核心思想是write less,do more(写得更少,做得更多),所以它实现了很多浏览器的兼容问题。

3.JQuery流行程度
jQuery现在已经成为最流行的javascript库,在世界前10000个访问最多的网站中,有超过55%在使用jQuery。

4.JQuery好处:
jQuery是免费、开源的,jQuery的语法设计可以使开发更加便捷,例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。

Jquery 的初体验
需求:使用Jquery和javascript给一个按钮绑定单击事件
注意:使用Jquery之前要将第三方jar包导入

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>Insert title here</title>
            <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
            <script type="text/javascript">
                //使用javaScript给一个按钮绑定单击事件
                window.onload = function() {
                    //1 获取标签对象
                    var btnObj = document.getElementById("btnId");
                    //2 通过标签对象.事件名 = function(){}
                    btnObj.onclick = function() {
                        alert("js原生绑定的单击事件");
                    }
                }
                //使用Jquery给一个按钮绑定单击事件,Jquery中的$()代替window.onload
                // alert($); // 测试jquery引入是否成功!$是jquery的核心函数
                $(function(){ // 页面加载完成之后====>>>>window.onload = function()功能一样
                    var $btnObj = $("#btnId");// 根据id属性值查询标签对象
                    $btnObj.click( function(){    // 绑定事件
                        alert("这是jquery绑定的单击事件");
                    } );
                });
            </script>
        </head>
        <body>
            <button id="btnId">SayHello</button>
        </body>
    </html>

 

常见问题?
1、使用jquery一定要引入jquery库吗? 答案: 是
2、jquery中的$到底是什么? 答案: 核心函数
3、怎么为按钮添加点击响应函数的? 答案: 操作如下:
①获取标签对象 var $btnObj = $("#btnId");// 根据id属性值查询标签对象
②通过标签对象.click( function(){} ) 绑定了函数

Jquery 核心函数 $()
$ 是jquery的核心函数,能完成jquery的很多功能。( ) 就 是 调 用 ()就是调用()用这个函数

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/120768447

posted @ 2023-09-15 16:31  忘川信使  阅读(6)  评论(0编辑  收藏  举报