jquery框架

原创于 2022-05-13 23:27:18 发布 · 795 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript #前端

javaWeb 专栏收录该内容

33 篇文章

订阅专栏

JQuery是一个快速的、轻量级的javaScript库，JQuery是用javascript编写的，对js的操作进行了封装。

JQuery的优点：

1. 使html代码和js代码完全分离。

2. 跨浏览器。

3. 轻量级。

4. 提供了大量的选择器，可以选择对象

jquery的使用

1. 在html文件中，引入jquery库（路径）

<script src="jquery-3.2.1.js"></script>

2. 在一段代码块中，写jquery代码

<script>
    $(document).ready(function(){
        //jquery代码
    });
</script>

理解：js对象和jQuery对象， js对象是javascript中的对象，jQuery对象是jQuery框架封装的对象，具有 jQuery的函数功能。所有的jQuery对象实质都是数组并扩充了功能函数。

jquery框架中有一个jQuery函数，jQuery函数能将js对象转换为 jQuery对象。

$就是jQuery函数名的简写

ready函数：当整个文档对象加载完成时，触发ready中的函数。

为什么要在文档对象全都加载完成时，执行jquery代码呢？

因为使用jquery时，就是操作html文档对象的 jquery中的ready函数和 js中的onload事件的区别

//document文档对象加载完成时触发function
$(document).ready(function(){
    //jquery代码
    alert("hello");
});
//document文档对象加载完成且所有的资源加载完成时，触发
window.onload = function(){
    alert("hello");
}

ready比onload更早执行

简写方式

<script>
    $(function(){
        alert("hello");
    });
</script>

jQuery函数：

1. jQuery(callback)

2. jQuery(html) : 获得html的jquery对象

3. jQuery(selector) ：使用选择器获得jquery对象

4. jQuery(dom对象) ：将js对象转为jQuery对象

jQuery对象和js对象的转换

1. js对象转换jQuery对象：jQuery(js对象) 或 $(js对象)

2. jQuery对象转换js对象：jQuery对象.get(0) 或 jQuery[0]

<html lang="en">
<head>
    <title>Document</title>
    <script src="js/jquery-3.2.1.js"></script>
    <script>
    $(function(){
        //js对象
        var text1 = document.getElementById("text1");
        alert(text1.value);
        //jquery对象
        var text2 = $(text1);
        alert(text2.val());
        //js对象
        var text3 = text2[0];
        alert(text3.value);
    });
    </script>
</head>
<body>
    <input type="text" id="text1" value="abc">
</body>
</html>

<html lang="en">
<head>
    <title>Document</title>
    <script src="js/jquery-3.2.1.js"></script>
    <script>
        $(function(){
            //$("input")获得一个jquery对象，包含了三个input元素对象
            alert($("input")[0].value);
            alert($("input")[1].value);
            alert($("input")[2].value);
        $("input").css("color","red");
    });
    </script>
</head>
<body>
    <input type="text" value="111">
    <input type="text" value="222">
    <input type="text" value="333">
</body>
</html>