Java基础之jQuery概述篇

最新推荐文章于 2024-07-29 22:23:29 发布

EnNaKk

最新推荐文章于 2024-07-29 22:23:29 发布

阅读量211

点赞数

本文链接：https://blog.csdn.net/weixin_42078450/article/details/86547442

版权

1、jQuery介绍

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

2、jQuery下载

下载地址：jquery.com

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

3、引入和对象获取

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

<script src="js/jquery-1.11.0.js" type="text/javascript"></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>