jQuery object and DOM object

1.1 differences between jQuery objects and DOM objects

DOM object

With native JavaScript Acquired DOM object
	adopt document.getElementById()  The feedback is the element(DOM object)
adopt document.getElementsByTagName()What did you get?
	Pseudo array(aggregate)，Each object in the collection is DOM object

jQuery object

jQuery Object use $()Object obtained by
jQuery Objects can also be called wrapper sets(Packaged DOM Collection of objects)

difference

JQuery objects cannot use members of DOM objects, and DOM objects cannot use members of jQuery objects

<div id="box"></div>
<script>
    // DOM object
    var box = document.getElementById('box');
    // error
    box.text('hello');
    // correct
    box.innerText = 'hello';

    // jQuery object. jQuery object is prefixed with $, which is used to distinguish DOM objects
    var $box = $('#box');
    // error
    $box.innerText = 'hello';
    // correct
    $box.text('hello');
</script>

1.2 conversion between jQuery object and DOM object

jQuery Object to DOM Object:   
	jQuery object.get(Index value); 
	jQuery object[Index value] 
    	jQuery The object is a wrapper set(aggregate)，Data from a collection can be indexed
DOM Object to jQuery Object:   
	$(DOM object) There is only one way;

jQuery operation properties

2.1 attr operation

• Set individual properties

// First parameter: the attribute name to be set
// The second parameter: the corresponding attribute value
// $obj.attr(name, value);
// Usage examples
$('img').attr('title','Oh, good');
$('img').attr('alt','Oh, good');

• Set multiple properties

// Parameter is an object that contains the property name and property value to be set
// $obj.attr(obj)
// Usage examples
$('img').attr({
    title:'Oh, good',
    alt:'Oh, good',
    style:'opacity:.5'
});

• get attribute

// Pass the name of the property to be obtained and return the corresponding property value
// $obj.attr(name)
// Usage examples
var oTitle = $('img').attr('title');
alert(oTitle);

• Remove Attribute

// Parameter: the attribute name to be removed,
// $obj.removeAttr(name);
// Usage examples
$('img').removeAttr('title');

2.2 prop operation

• In jquery1 After 6, for boolean attributes such as checked, selected and disabled, the attr method cannot be used, but the prop method can only be used.

// set a property
$(':checked').prop('checked',true);
// get attribute
$(':checked').prop('checked');// Return true or false

2.3 val()/text()/html() value operation

$obj.val()		Gets or sets the of the form element value The value of the property
$obj.html() 	corresponding innerHTML
$obj.text()		corresponding innerText
 The above three methods: do not pass parameters to obtain values; Pass a parameter value indicating the setting

2.4 class operation

• Add style class

// Name: the name of the style class to be added. Note that the parameter should not be dotted
// $obj.addClass(name);
// For example, add the style of one to all div s.
$('div').addClass('one');

• Remove style class

// Name: name of the style class to be removed
// $obj.removeClass('name');
// Example, remove the style class name of one in div
$('div').removeClass('one');

• Determine whether there is a style class

// Name: the name of the style class used to judge. The return value is true or false
// $obj.hasClass(name)
// For example, judge whether the first div has a style class of one
$('div').hasClass('one');

• Switch style classes

// Name: name of the style class to be switched. If yes, remove the style. If not, add the style.
// $obj.toggleClass(name);
// example
$('div').toggleClass('one');

2.5 implicit iteration

1. When setting operation, if there are multiple elements, set the same value for all elements

2. During the acquisition operation, if there are multiple elements, only the value of the first element will be returned.

jQuery operation style

3.1 CSS operation

• Function: set or modify the style. The operation is the style attribute.

• Operate on a single style

// Name: the style name to be set
// Value: the corresponding style value
// $obj.css(name, value);
// Use case
$('#one').css('background','gray');//  Change the background color to gray

• Set multiple styles

// Parameter is an object that contains the style name and style value to be set
// $obj.css(obj);
// Use case
$('#one').css({
    'background':'gray',
    'width':'400px',
    'height':'200px'
});

• Get style

// Name: the style name to get
// $obj.css(name);
// case
$('div').css('background-color');

Note: the get style operation will only return the style value corresponding to the first element.

3.2 jQuery size and position operation (understand)

3.2.1 width method and height method

• Sets or gets the height, excluding the inner margin, border, and outer margin

  width() height() does not pass parameters to indicate acquisition, while passing parameters indicates setting. (the unit px can be omitted when passing parameters)

// With parameters indicates the set height
$('img').height(200);
// Get height without parameters
$('img').height();

Gets the width and height of the visual area of the web page

// Gets the width of the viewable area
$(window).width();
// Gets the height of the viewable area
$(window).height();

3.2.2 innerWidth/innerHeight/outerWidth/outerHeight

innerWidth()/innerHeight()	Method returns the width of the element/Height (including inner margin).
outerWidth()/outerHeight()  Method returns the width of the element/Height (including inner margin and border).
outerWidth(true)/outerHeight(true)  Method returns the width of the element/Height (including inner margin, border and outer margin).

3.2. 3. Scrolltop and scrollLeft

• Sets or gets the position of the vertical scroll bar

// Gets the height at which the page is curled
$(window).scrollTop();
// Gets the width at which the page is curled
$(window).scrollLeft();

3.2. 4. Offset method and position method

• The offset method obtains the position of the element from the document, and the position method obtains the position of the element from the positioned parent element (offsetParent).

// Get the position of the element from the document, and the return value is the object: {left:100, top:100}
$(selector).offset();
// Gets the position of the nearest positioned parent element relative to it.
$(selector).position();

each method traversal

• The implicit iteration of jQuery will set the same value for all DOM objects, but if we need to set different values for each object, we need to iterate on our own.

Function: traverse the jQuery object collection and execute a function for each matching element

// Parameters in function
// Parameter 1 represents the index number of the current element in all matching elements
// Parameter 2 represents the current element (DOM object)
$(selector).each(function(index,element){});

$.each(Array or object, function(index, value){});