Some common use jquery

A. First of all it is necessary to use jquery need two guides such as script files

jquery-3.4.1.js This is the annotated version

jquery-3.4.1.min.js this is not annotated version

Here is the download link: The two addresses

Link: https: //pan.baidu.com/s/1yg2-wHXwuFjUtCM7II93OA

Extraction code: b233

II. Here's to introduce the foundation to use jquery

1. Place the file in WebContent directory

2. Introduction to use (on the code word does not say)

Note: css page is a scripting file format, following the blog will continue to be written

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<style type="text/css">
/* css的选择器，找到相应的标签 */
#div1{
width: 100px;
height: 100px;
background-color: red;
}
#div2{
width: 100px;
height: 100px;
background-color: green;
}
</style>
<script type="text/javascript" src="./js/jquery-3.4.1.js"></script>
<script type="text/javascript">

// onload document loaded before calling the function js
/ * $ (function () {
var divTag = document.getElementById ( "DIV1")
divTag.innerHTML = 'Hello';
}); * /
$ (function () {

$ ( 'BTN #') the Click (function () {.
// plus the id element of choice selector
$ ( '# span S1') CSS ( 'background-Color', 'Red');.
// Select element is plus class selector
$ ( 'span.s2') CSS ( 'background-Color', 'Blue');.
$ ( 'P # P1') CSS ( 'background-Color', "Yellow").;
$ ( 'div p.p2') CSS ( 'background-Color', "Gray");.
// attribute selector
. $ ( 'IMG') CSS ( 'border-style', 'Solid');
$ ( '[the src = "./ Image / 2.jpg"]') CSS ( 'border-style', 'Solid');.

});
});

</ Script>
</ head>
<body>
<div the src = "XX">
<span ID = "S1"> SPAN1 </ span>
<span class = "s2">span2</span>
</div>
<div>
<p id="p1">段落一</p>
<p class="p2">段落二</p>

</div>

Code explanation:

jquery script function is to the $ symbol in the beginning;

Advantages show:

　　JQuery written by:

$(function(){

$('#btn').click(function(){

$('div p.p2').css('background-color',"gray");

}

Writing with css:

<-! Css stylesheet ->
<style type = "text / CSS">
/ * CSS selectors, find the corresponding label * /
# DIV1 {
width: 100px;
height: 100px;
background-Color: Red;
}

However js written in native code, then it is necessary to obtain the label inside to add 'id', 'name' and other elements before they can get the code as follows:

function(){

var spanid=doucment.getElementById（“id");

doucment.getElementById("btn").click(function(){

spanid.css('background-color',"gray");

});

};

Obviously you can find more convenient to use jquery, jquery because you can get a note to random elements, but js is not the same.

Code up the code. If you have questions correct.

Some common use jquery

Guess you like