current position:Home>JQuery framework

JQuery framework

2022-05-15 01:49:38aigo-2021

JQuery It's a fast one 、 Lightweight javaScript library ,JQuery Yes, it is javascript Compiling , Yes js The operations are encapsulated .

JQuery The advantages of :

1. send html Code and js The code is completely separate .

2. Cross browser .

3. Lightweight .

4. Provides a large number of selectors , You can select objects

jquery Use

1. stay html In file , introduce jquery library ( route )

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

2. In a block of code , Write jquery Code

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

understand :js Objects and jQuery object , js The object is javascript Objects in the ,jQuery The object is jQuery Framework encapsulated objects , have jQuery Function function of . be-all jQuery Objects are essentially arrays and expand function functions .

jquery There is a... In the frame jQuery function ,jQuery The function can change js object Convert to jQuery object .

$ Namely jQuery Abbreviation of function name

ready function : When the entire document object is loaded , Trigger ready The function in .

Why when all the document objects are loaded , perform jquery What about code? ?

Because use jquery when , It's operation. html Document object jquery Medium ready function and js Medium onload The difference between events

//document Triggered when the document object is loaded function
$(document).ready(function(){
    //jquery Code 
    alert("hello");
});
//document When the document object is loaded and all resources are loaded , Trigger 
window.onload = function(){
    alert("hello");
}

ready Than onload Earlier execution

Shorthand way

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

jQuery function :

1. jQuery(callback)

2. jQuery(html) : get html Of jquery object

3. jQuery(selector) : Using selectors to get jquery object

4. jQuery(dom object ) : take js Object to jQuery object

jQuery Objects and js Object conversion

1. js Object conversion jQuery object :jQuery(js object ) or $(js object )

2. jQuery Object conversion js object :jQuery object .get(0) or jQuery[0]

<html lang="en">
<head>
    <title>Document</title>
    <script src="js/jquery-3.2.1.js"></script>
    <script>
    $(function(){
        //js object 
        var text1 = document.getElementById("text1");
        alert(text1.value);
        //jquery object 
        var text2 = $(text1);
        alert(text2.val());
        //js object 
        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") To obtain a jquery object , It contains three input Element object 
            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>

 

copyright notice
author[aigo-2021],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/135/202205142048441423.html

Random recommended