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

Continuing Learning

new file

<!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>

submit Reset Code

Automatic operation

Introduction to jQuery

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]