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中文網(wǎng)(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>繼續(xù)點我!</p>
<p>接著點我!</p>
</body>
</html>Run the program and try it
