JQuery usage and explanation of jQuery writing method of ajax

jQuery is a JavaScript library across mainstream browsers, which encapsulates JavaScript related method calls and simplifies
JavaScript operation on HTML DOM

dom object and jquery object

dom object
Objects created using javascript syntax are called dom objects, or js objects.

var obj=document.getElementById("txt1");

Obj is a dom object, also called js object obj value ;

jquery object
The objects represented by jquery syntax are called jquery objects. Note: the objects represented by jquery are arrays

var obj = $("txt1 ")

obj is an object represented by jquery syntax. That is, the jquery object. It is an array. Now there is only one value in the array

Conversion between dom object and jquery object.

Convert dom object to jquery

Syntax: $(dom object)

<script type="text/javascript">
	function btnClick(){
		//Get dom object
		var obj = document.getElementById("btn");
		//Use the value attribute of dom to get the value
		alert(obj.value)
		//Transfer the dom object to jquery and use the functions in the jquery library
		var obj1 = $(obj);
		//Call the function in jquery to get the value of value
		alert( obj1.val())
	}
</script>

Convert jquery object to dom object

Syntax: get the first object from the array. The first object is the dom object. Use = = [0] or get(0) = =

<script type="text/javascript">
	function btnClick(){
		//Use the syntax of jquery to get the dom object in the page
		var obj =$(""#txt")[0];
		//Gets the dom object with subscript 0 from the array
		var obj=$("#txt").get(0);
		//Get the dom object with subscript 0 from the array l 
		var num = obj.value;
	}
</ script>

The purpose of dom and jquery conversion:
Is the method to use the object, or method.
When you are a dom object, you can use the properties or methods of the dom object. If you want to use the functions provided by jquery, you must be a jcuery object

selector

Basic selector

Used to locate dom objects. After locating the dom object, you can operate the common selector of dom through the function of jquery

id selector

Syntax: $("#dom object id value")
Locate the dom object by its id. Object cannot be found through id. id is the only value in the current page.

<script type="text/javascript">
	function fun1(){
		var obj = $("#one" ); T
	}
</ script>

class selector

Syntax: $(". class style name)"
class represents the style in css, and uses the name of the style to locate the name of the domn object.

<script type="text/javascript">
	function fun1(){
		var obj = $(".one" ); T
	}
</ script>

tag chooser

Syntax: $("tag name")

<script type="text/javascript">
	function fun1(){
		var obj = $("div"); T
	}
</ script>

All selectors

Syntax: $(*)
Select all DOM objects in the page.

Combination selector

A combination selector is a selector formed by separating multiple selected objects with commas. It can combine id, class, tag name, etc.
Syntax: $("#id,. Class, tag name")

<script type="text/javascript">
	function fun1(){
		var obj = $("#one,.two,div"); T
	}
</ script>

Form selector

This method can make corresponding choices whether there is a form or not. Form selectors are designed to make it easier to manipulate forms. Form selectors are defined according to element types
Syntax: $(": type attribute value")

<input type="text">
<input type="password">
<input type="radio">
<input type="checkbox">
<input type="button">
<input type="file">
<input type="submit">
<input type="reset">

$(":text")Select all single line text boxes
$(":password")Check all password boxes
$(":radio")Select all radio boxes
$(":checkbox")Select all multiple boxes
$(":button")Select all buttons
$(":submit")Select all submit buttons
$(":file")Select all
$(":reset")Select all

filter

Universal filter

Filter: after locating the dom object, filter the dom object according to some conditions. Filters cannot be used alone and must be used with selectors-

1. Select the first and keep the first DOM object in the array

$("selector:first")

2. Select the last last last and keep the last DOM object in the array

$("selector:last")

3. Select the specified object in the array

$("selector:eq(Array index)")

4. Select all DOM objects in the array that are smaller than the specified index

$("selector:lt(Array index)")

5. Select all DOM objects larger than the specified index in the array

$("selector:gt(Array index)")

Form property filter

1. Select the available text boxes

$(":text:enabled")

2. Select the unavailable text box

$(":text:disabled"")

$(function(){
	$("#btn1").click(function(){
		var obj= $(" :text:enabled");
		var obj1= $(" :text:disabled");
		//Set the jquery array value and the value value of all dom objects
		obj.val("hello");
	})
}

3. Elements selected in the check box

$(":checkbox:checked")

$(function(){
	
	$("#btn2").click(function(){
		//Get the selected checkbox
		var obj = $(":checkbox: checked" );
		for(var i=0;i<obj.length;i++){
		//Output the selected value
			alert($(obj[i]).val())
	})
}

4. Select the selected element in the specified drop-down list

selector>option:selected

function

val

Operate on the value attribute of the DOM object in the array

$(selector) val(): in the form of parameterless call, read the value attribute value of the first DOM object in the array
$(selector) Val (value): called in the form of a parameter to uniformly assign the value attribute values of all DOM objects in the array

text

Manipulate the text display content properties of all DOM objects in the array

$(selector) text(): no parameter call, read the text display content of all DOM objects in the array, and splice the obtained content into a string
$(selector) Text (value): there is a parameter method to uniformly assign the text display contents of all DOM objects in the array

attr

Operate on attributes other than Val and text

$(selector) attr("attribute name"): get the attribute value of the first object in the DOM array
$(selector) attr("attribute name", "value"): set the attributes of all DOM objects in the array to new values

remove

$(selector) remove(): delete all DOM objects and their children in the array

empty

$(selector) empty(): delete the child objects of all DOM objects in the array

append

$(selector) append("") adds child objects to all DOM objects in the array

html

Sets or returns the content of the selected element (innerHTML).

$(selector) html(): the dreamless number calls the method to get the content of the first matching element of the DOM array.
$(selector) HTML (value): a parameter call is used to set the contents of all elements in the DOM array.

<html>
	<span>
		<b>Hellow</b> word
	</span>
</html>

$("#btn4").click(function(){
	alert($("span").text());//Hellow word
	alert($("span").html());//<b>Hellow</b> word
})

each

Each is a traversal of arrays, json and dom arrays, and calls the function once for each element.

$. Each (object to traverse, function (index, element) {handler})
jQuery object Each (function (index, element) {handler})

Index: index of the array
element: the object of the array

$("#btn6").click(function(){
	var arr =[ 11，12，13];
	$.each(arr,function(index, element){
		alert(index + "Array member:"+element);
	}
})

each loop json

var json={ "name":"Zhang San","age" :18};
$.each(json,function(i,n){
	alert(i+"=="+n);
})
result:
1==Zhang San
2==18

event

The on() method adds an event handler to the selected element.

grammar:$(selector).on(event,function)

event: one or more events, separated by spaces
Function: optional. Specifies the function to run when an event occurs.

$("#newBtn" ).on("click",function(){
	alert("hello");
})

ajax

$. ajax() is the core method of AJAX request in jQuery, and all other methods use this method internally.
Syntax:
$.ajax( { name:value, name:value, ... })

async: Boolean value indicating whether the request is processed asynchronously. The default is true
contentType: the content type used when sending data to the server. It can be left blank
Data: Specifies the data to be sent to the server, which can be: string, array, mostly json
dataType: the data type expected to respond from the server. jQuery tests the most likely types from XML, JSON, text, and HTML

"XML" - an XML document
"HTML" - HTML as plain text
"Text" - plain text string
"JSON" - run the response in JSON and return it as an object

error(): the function to run if the request fails
success(resp): a function that runs when the request is successful, where resp is a custom formal parameter name
Type: Specifies the type of request * (GET or post, etc.). The default is GET, GET and post. It is not case sensitive
url: Specifies the url to send the request

$.ajax({
	url : "queryjson",
	data:{
		"Parameter name" : parameter
	},
	dataType: "json",
	success:function (resp){
		Response event
	}
})

Keywords: Java JQuery Ajax

Added by jpschwartz on Sat, 05 Mar 2022 04:46:47 +0200

Programming VIP