1. JQuery is a set of JavaScript function library (class library), which can greatly simplify the js code. Therefore, it is more convenient to use Jquery to operate HTML elements.
1. The core function of JQuery: the jQuery() function, which can be used to complete the selection function of html elements. In order to simplify the development process, JQuery provides the $ sign instead of JQuery core functions
比如jQuery("div");等价于$("div");
2. Jquery's document ready event
We know that the JavaScript code should be embedded in the <script> element, and because the browser parses the front-end code by sequential parsing,
the location of the <script> element has certain requirements.
Therefore, we often see the situation where JavaScript code is placed at the bottom of the body, and developers can also solve the above problems through the onload event.
We have seen that the JavaScript code in the head is also successfully executed. So developers can write the js code into the document ready event to avoid the situation that it can't be found when getting the html element.
The same is true for JQuery, which also provides the document ready event ready() to solve this problem. The specific code is shown in the figure below. (note that there are two ways of writing)
3. JQuery selectors, JQuery selectors allow us to operate on a single html element or a group of elements (multiple html elements), which is consistent with the concept of css selectors, and CSS selectors are still practical in JQuery. For
example , in css To set the style of an html element, you need to use the css selector to select the specific html element. For
example , to complete the operation of the html element in JavaScript, you first need to obtain the dom object corresponding to the html element, and then use the dom object to pair the html element. Operation on html elements
In jquery, to complete the operation of html elements, you must first select the html element to be operated through the selector of jquery, and then you can operate it.
4. JQuery object and DOM object, the object obtained through $ in JQuery is the JQuery object, not the DOM object, and the dom object and the JQuery object cannot be used in common. That is, the JQuery object cannot access the dom object, and the dom object cannot access the methods in the methods in the JQuery object.
5. Conversion between DOM objects and JQuery objects
1. Convert dom objects into jq objects
var jqObj=$(dom对象); 2. Convert the jquery object into a dom object
var domObj=$("div").get(0);
var domObj=$("div")[0];
6. JQuery's processing of html events. In JavaScript, related processing can be performed through DOM object html events. In JQuery, JQuery can also
process html events. ①. JavaScript handles html events:
2. How JQuery handles events:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
background-color: blueviolet;
}
</style>
<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
<script type="text/javascript">
// javascript提供的用于绑定html元素事件的方法
var pObj=document.getElementById("d1");
pObj.click=function () {
console.log("这里是JavaScript对html单击事件的处理机制");
}
$(document).ready(function () {
// jquery绑定事件，在事件名称括号中通过匿名函数绑定事件的处理程序
$("div").mouseover(function(){
$("div").css("backgroundColor","red");
});
$("div").mouseout(function(){
// $("div").css("backgroundColor","blueviolet");
/*
注意：若直接写this，这个this是dom对象而非是jquery对象，若希望this是JQuery对象的话，
需要将this这个dom对象通过转化方式转化成JQuery对象。类型转换$(domObj) 即 $(this);
*/
$(this).css("backgroundColor","yellow");
});
//jQuery提供的鼠标进入事件，与html原生的mouseover基本一样
// 区别：
$("p").mouseenter(function () {
$(this).css("backgroundColor","blue");
});
//jQuery提供的鼠标离开事件，与html原生的mouseout基本一样
$("p").mouseleave(function () {
$(this).css("backgroundColor","orange");
});
});
</script>
</head>
<body>
<div>我是<p>div</p>元素的值</div>
<p id="d1">我是p元素的值</p>
</body>
</html>
7. JQuery to obtain the value of html elements Jquery provides a powerful method for operating html elements and attributes, and also provides a method to obtain the value of html elements. The method
provided by JQuery to obtain the content (value) of html elements is compared with JavaScript as follows
①, html() —->domObj.innerHTML
②, text() —->domObj.innerText
③, val() —->domObj.value; the
code example is as follows: