Java基础之jQuery概述篇

傷城~ 2022-03-25 06:12 393阅读 0赞

1、jQuery介绍

jQuery是一个JavaScript框架。它兼容css3，还兼容各种浏览器。文档说明很全，应用详细，成熟插件多。核心理念是write less，do more。

2、jQuery下载

下载地址：jquery.com

\*(以.js结尾为非压缩版，测试环境使用；以.min.js结尾的为压缩版，生成环境使用。在eclipse中报错，运行没有问题)

3、引入和对象获取

学习JavaScript有自定义js库导入，学习jQuery只需要将对应js库下载，并导入到项目中，在html页面使用<script>导入即可。

\*基本语法：jQuery（选择器） == $（选择器） ，区分大小写

//获得jQuery对象
    //命名约定，jQuery对象变量名建议以$开头
    var $demoId = $("#demoId");

4、jQuery对象和DOM转换

jQuery对象和DOM对象可以相互转换，但是不能彼此混搭使用。

DOM --> jQuery  ：jQuery(DOM对象)

jQuery -->DOM  : $username\[index\]      (\*jQuery对象内部以数组方式存放所有的匹配数据，如果只匹配到一个，索引为0)

//1、原生JavaScript获得value值
    var d1 = document.getElementById("demoId");
    alert(d1.value);
    
    //2、dom对象转换成jQuery对象
    var $d2 = $(d1);
    alert(d2.val());
    
    //3、jQuery对象转换成dom对象
    var d3 = $d2[0];
    alert(d3.value);

5、jQuery页面加载

jQuery提供ready()函数，用于页面成功加载后执行。与window.onload函数类似。

<head>
    <script>
        //获取匹配对象的个数，0表示没有匹配对象
        alert($("demoId").length);
    
        //1、JavaScript页面加载
        window.onload = function(){
            alert("js页面加载");
        }
    
        //2、jQuery页面加载
        $(document).ready(function(){
            alert("jquery页面加载");
        });
    
        /*
         *js给onload只能赋一个值，如果多次赋值，后面的将覆盖前面的
         *
         *jQuery的ready可以使用多次，多个页面加载将依次执行。
         */
    
    </script>
    </head>
    <body>
        <input type="text" id="demoId" value="that's all ok">
    </body>