One, JQuery

1. Set properties

1.1, attr() method

The attr() method is used to set and change attribute values.

	//改变（设置）链接中 href 属性的值
	$("button").click(function(){
    
    
	  $("soso").attr("href","https://www.baidu.com");
	});

The attr() method also allows multiple attributes to be set at the same time.

	$("button").click(function() {
    
    
		//同时设置 href 和 title 属性
		$("#soso").attr({
    
    
			"href": "http://www.baidu.com",
			"title": "百度"
		});
	});

Note: Although the attributes of objects can be set using the attr method, not all objects can be completed by the attr method. For example: the attr method cannot be used for checked, but the prop method is used.

1.2, prop() method

The prop() method sets or returns the properties and values of the selected element.

(1) Setting the value of an attribute: When used to set the value of an attribute, set one or more attributes for the set of matched elements.

	$("Checkbox").prop("checked",$("Checkbox").prop("checked"));

(2) Get the value of the attribute: when it is used to return the value of the attribute, it returns the value of the attribute of the first matching element.

	console.log($("Checkbox").prop("checked"));

2. Show and hide

2.1, hide method and show method

With jQuery, you can use hide() and show() methods to hide and show HTML elements:

The syntax of hide method: $(selector).hide(speed,callback);

The optional speed parameter specifies the hidden speed, which can take the following values: "slow", "fast" or milliseconds.
The optional callback parameter is the name of the function to be executed after the hiding is complete.

	$("#hide").click(function(){
    
    
	  $("p").hide();
	});

The syntax of the show method: $(selector).show(speed,callback);

The optional speed parameter specifies the displayed speed and can take the following values: "slow", "fast" or milliseconds.
The optional callback parameter is the name of the function to be executed after the display is complete.

	$("#show").click(function(){
    
    
	  $("p").show();
	});

2.2, toggle method

With jQuery, you can use the toggle() method to switch between hide() and show() methods. Call it once to show the hidden elements, and call it again to hide the displayed elements, and the cycle repeats.

	$("#btn").click(function(){
    
    
	  $("p").toggle();
	});

2.3, fadeToggle method

The jQuery fadeToggle() method can switch between fadeIn() and fadeOut() methods. If the element has faded out, fadeToggle() will add a fade-in effect to the element. If the element has faded in, fadeToggle() will add a fade out effect to the element.

语法：$(selector).fadeToggle(speed,callback);

The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast" or milliseconds.
The optional callback parameter is the name of the function to be executed after fading is completed.

	$("#btn").click(function(){
    
    
	  $("#div1").fadeToggle();
	  $("#div2").fadeToggle("slow");
	  $("#div3").fadeToggle(3000);
	});

2.4, slideToggle method

The jQuery slideToggle() method can switch between the slideDown() and slideUp() methods. If the elements slide down, slideToggle() can slide them up. If the elements slide up, slideToggle() can slide them down.

语法：$(selector).slideToggle(speed,callback);

The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast" or milliseconds.
The optional callback parameter is the name of the function to be executed after the sliding is completed.

	$("#flip").click(function(){
    
    
	  $("#panel").slideToggle();
	});

Link css method, slideUp method and slideDown method:

$("#p").css("color","red").slideUp(2000).slideDown(2000);

3. Add elements

(1) append(): Insert content (internal) at the end of the selected element.

	$("p").append("appended text");

(2) prepend(): Insert content (internal) at the beginning of the selected element.

	$("p").prepend("prepended text");

(3) after(): Insert content (external) after the selected element.

	$("img").after("after text");

(4) before(): Insert content (external) before the selected element.

	$("img").before("before text");

4. Delete elements

(1) remove(): Delete the selected element and its sub-elements.

	$("#div1").remove();

(2) empty(): delete child elements from the selected element.

	$("#div1").empty();

5. Event

Event syntax in JavaScript: document.getElementById(“xxx”).onclick=function(){ 代码 };

Event syntax in JQuery:$(“xxx”).click(function(){ 代码 });

5.1. Event method

The event method triggers an event of the matched element, or binds a function to an event of all matched elements.

(1) Ready method:, $(document).ready(function)activate the function after the document is loaded.

(2) Click method: $(selector).click(function)When the element is clicked, a click event will occur. When the mouse pointer rests over the element, and then presses and releases the left mouse button, a click occurs.

(3) dblclick method: $(selector).dblclick(function)dblclick event occurs when the element is double-clicked. When the mouse pointer rests over the element, and then presses and releases the left mouse button, a click occurs. Two clicks occur in a short period of time, which is a double click event. If you apply dblclick and click events to the same element, problems may arise.

(4) dblclick method: $(selector).focus(function)When the element gets the focus, the focus event occurs. When the element is selected by mouse click or the tab key is used to locate the element, the element will get the focus.

(5) dblclick method: $(selector).mousemove(function)When the mouse pointer moves in the specified element, the mousemove event will occur.

5.2, event binding

Click method: Only one event (normal DOM element) is bound. E.g$("#btn").click();

bind method: multiple events can be bound.

on method: used for binding of dynamic events.

5.2.1, click method

Click method: When an element is clicked, a click event will occur.

Syntax: $(selector).click(function)

parameter	description
function	Optional. Specifies the function to run when the click event occurs.

	$("#btn").click(function(){
    
    
	  console.log("按钮点击");
	});

5.2.2, bind method

The bind method adds one or more event handlers to the selected element and specifies the function to run when the event occurs. The bind method binds events and functions to elements.

grammar:$(selector).bind(event,data,function)

parameter	description
event	Required. Specifies one or more events to be added to the element. Multiple events are separated by spaces. Must be a valid event.
data	Optional. Specifies the additional data passed to the function.
function	Required. Specifies the function to run when the event occurs.

  $("#btn").bind("click",function(){
    
    
    console.log("按钮点击");
  });

5.2.3, on method

The original event binding method is invalid for elements dynamically generated by JavaScript. For example, in a button event, the original click method is invalid for dynamically spliced buttons. In this case, the dynamic button can only be triggered by the on method, and the others will be invalid.

grammar:$(document).on(事件,选择器,function(){ 代码 });

	$(document).on("click","#btn",function () {
    
    
		console.log("按钮点击");
	});

6. Get the parent level

(1) Parent method: returns the direct parent element of the selected element. This method will only traverse the DOM tree one level higher.

	$(document).ready(function(){
    
      
	  console.log($("li").parent());
	});

(2) Parents method: returns all ancestor elements of the selected element, and it goes all the way up to the root element of the document <html>.

	$(document).ready(function(){
    
      
	  console.log($("li").parents());
	});

7. Get sub-levels

children method: returns all direct child elements of the selected element. This method will only traverse the DOM tree to the next level.

	$(document).ready(function(){
    
    
	  $("div").children();
	});

二、Bootstrap

Bootstrap is an HTML, CSS, and JS framework for developing responsive layout, mobile device-first WEB projects.

Global CSS style: Basic HTML elements can be styled and enhanced by class, and there is an advanced grid system.

Components: countless reusable components, including font icons, drop-down menus, navigation, warning boxes, pop-up boxes and more.

JavaScript plug-in: The JQuery plug-in brings life to Bootstrap's components. You can simply introduce all the plugins at once, or introduce them into your page one by one.

Chinese version of Bootstrap official documentation: https://v3.bootcss.com/getting-started/

Java study notes-Day51 JQuery (two), Bootstrap