Introduction to...LOGIN

Introduction to jQuery

What is jQuery?

jQuery = JavaScript + jQuery

jQuery is a JavaScript library. It obtains a set of defined methods by encapsulating native JavaScript functions.

jQuery greatly simplifies JavaScript programming. Look at the example below

Assume that the page has the following two elements

<input type="text" id="txt" />
<button type="button" onclick="get_text();">Go</button>

After clicking the Go button, the content entered by the user in the text box will pop up. Using the original JavaScript code, you can write like this

alert(document.getElementById('txt').value);

When using jQuery, you can simply write it as

alert($('#txt').val());

You can see that we use document.getElementById to get the element with the specified id, and using jQuery, we only need to use $('# ') can accomplish all this


The main purpose of jQuery is to achieve more functions with less code

The jQuery library includes the following functions:

  • HTML element selection

  • HTML element operation

  • CSS operation

  • HTML event function

  • JavaScript special effects and animation

  • ##HTML DOM traversal and modification

  • AJAX

Tips: In addition, Jquery also provides a large number of plug-ins.


Conditions for learning jQuery

  • HTML (including css, the necessary foundation for web pages Knowledge)

  • JavaScript (even though jQuery is simpler than JavaScript, jQuery’s various syntaxes come from JavaScript)

  • PHP (jQuery It belongs to the front-end technology, which is extremely complementary and echoes the back-end)


Is jQuery applicable to all browsers?

The jQuery community knows that JS has a lot of compatibility issues in different browsers. Currently, jQuery is compatible with all major browsers, including Internet Explorer 6!


Let’s look at a jQuery example first

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" type="text/javascript">
    </script>
    <script>
        $(document).ready(function(){
            $("p").click(function(){
                $(this).hide();
            });
        });
    </script>
</head>
<body>
<p>如果你点我,我就会消失。</p>
<p>继续点我!</p>
<p>接着点我!</p>
</body>
</html>

Run the program and try it




Next Section
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" type="text/javascript"> </script> <script> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); </script> </head> <body> <p>如果你点我,我就会消失。</p> <p>继续点我!</p> <p>接着点我!</p> </body> </html>
submitReset Code
ChapterCourseware