JS Objects vs. jQuery Objects

JS objects can be roughly divided into three types, as shown below:

JS commonly used built-in objects (objects held by JS itself do not need to be created, but are directly available):

String: API is roughly the same as java's string API

Two ways to create objects: String s1 = "hello world"; 

                                  String s2 = new String("hello world");

String has length property, but String has length method in java; its meaning is different.

Number: is a numeric object

Create object: var myNum = 123456;

Boolean: Similar to Java's Boolean

Array: has a length attribute, and the length of the array is variable;

Create an object: var a1 = new Array();

                 var a2 = new Array(7);

                 var a3 = new Array(100,"a",true);

                 var a4 = [100,200,300];

Access array elements: a1[0] = 1;//The length of a1 changes from 0 to 1

                        console.log(a3[1]);

Math: The object is used to perform mathematical tasks and has a corresponding API

Date: It is an object for manipulating dates in JS. It has a corresponding API with java NVC.

RegExp: Regular expression object

Creation method: var regExp = /^\d{3,6}$/ g ; //Generally starts with ^ and ends with $

                 var regExp1 = new RegExp("/^\d{3,6}$/");

Note: The regular expression object can be followed by two parameters, the first parameter is a regular expression, and the second parameter can be g or i; where g means to set the current match as the global pattern; i means to ignore the matching Case detection.

Function: The function in JS is the Function object, and the function name is the reference to the Function

                 Use function name to access the object; function name() is to call the function

JS external objects (provided by the browser, you can directly access and operate the browser; it is the API provided by the browser, and it is also a set of objects):

BOM: Browser Object Model, used to access and operate the browser window; as shown below:

DOM: Document Object Model, used to manipulate documents; as shown below:

The relationship between BOM and DOM:

The details are not explained in detail, because it is only an introduction to objects, not BOM and DOM operations.

custom object:

Create an object directly: var stu = {"name":"Zhang San","age":"18","job":function(){}};//equivalent to a JSON object

The constructor creates the object:

	function f2(){
		var teacher = new Object();
		teacher.name = "Teacher";
		teacher.age = 18;
		teacher.sex = "woman";
		teacher.work = function(){alert("I teach")};
		alert(teacher.name);
		alert(teacher.age);
		teacher.work()
	}
	//custom constructor,
	//1. The first letter of the function to make the constructor should be capitalized
	//2. Declare the parameters to be passed in
	//3. Store the parameters inside the object
	function Coder(name,age,work){
		//this is the currently created object
		//this.name is to add a property to the object
		//=name is to assign the parameter to this property
		this.name = name;
		this.age = age;
		this.work = work;
	}
	function f3(){
		var coder = new Coder("Li Si",30,function(){alert("I am Xiaobai")});
		alert(coder.name);
		alert(coder.age);
		coder.work();
	}

	<input type="button" value="Built-in constructor"
		onclick="f2();"/>
	<input type="button" value="custom constructor"
		onclick="f3();"/>

With jQuery there are 3 possible objects:

1. jQuery object:

    Usually the target selected by the jQuery selector must be the jQuery object;

    If the general jQuery method returns a node, it is a jQuery object;

    The general jQuery assignment method returns a jQuery object;  

2. DOM object:

    Get a DOM object from jQuery: $obj[i]/$obj.get(i) (jQuery method); 

    The method of converting jQuery to a DOM object: jQuery adds a subscript conversion;

3. Built-in objects (especially strings)

    Generally, jQuery returns a specific value as String

    Note: Universal Method: Output Object Observation 

Example:

The mutual conversion between jQuery object and DOM object, the following code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery对象</title>
<script src="../js/jquery-1.11.1.js"></script>
<script>
	//The method of jQuery to DOM: jQuery adds a subscript conversion
	function print(){
		//Get all p, the jquery object obtained by the selector
		var $ps = $("p");
		console.log($ps.typeof);
		for(var i=0;i<$ps.length;i++){
			console.log($ps[i]);
			alert($ps[i].innerHTML);
		}
	}
	//DOM to jQuery method
	//The incoming this is the image being clicked, where this (img) is a DOM object
	function chg(img){
		//If you don't write a parameter, you will get the value. If you write it, you will set the value.
		if($(img).width()=="1000"){
			$(img).width("250px").height("250px");
		}else{
			$(img).width("1000px").height("701px");
		}
	}
</script>
</head>
<body>
	<input type="button" value="打印" onclick="print()"/>
	<p>1.jQuery objects are essentially DOM arrays</p>
	<p>2.jQuery objects and DOM objects can be converted to each other</p>
	<p>3.jQuery objects can only call jQuery methods</p>
	<p>4.DOM objects can only call DOM methods</p>
	<div>
		<img src="../image/4.jpg" onclick="chg(this);"/>
		<img src="../image/5.jpg" onclick="chg(this);"/>
		<img src="../image/6.jpg" onclick="chg(this);"/>
	</div>
</body>
</html>