jquery's DOM and events

This time I will bring you jquery's DOM and events. What are the precautions when using jquery's DOM and events? The following is a practical case, let's take a look.

Talk about the difference between libraries and frameworks?
The most important difference between a framework and a class library is the inversion of control. The frame is like a mold. It requires you to put the raw materials into the mold, and then the finished product comes out. Since the mold has been built, raw materials cannot be added indiscriminately. You can give them whatever they want. The control lies with the mold. But the class library is different. The control is in your hands. You can implement whatever functions you want. The class library just helps you encapsulate a large number of practical functions to help you achieve your goals. All you have to do is to implement them according to your own needs. It is necessary to call these functions appropriately.

What can jquery do?
Manipulate document objects, select DOM elements, create animation effects, Event handling, use Ajax and other functions. In addition, jQuery provides APIs for developers to write plug-ins. Its modular usage allows developers to easily develop powerful static or dynamic web pages.

What is the difference between jquery objects and DOM native objects? How to convert?
Difference:
1. The jquery object obtained by the jquery selector and the dom object obtained by document.getElementById() in the standard javascript are two different object types, and they are not equal. Price;
2. jQuery cannot use any method of the DOM object. Similarly, the DOM object cannot use the methods in jQuery. If used indiscriminately, an error will be reported.
How to convert:
jQuery object into DOM object---two conversion methods:
1. The jQuery object is a data object, through the [index] method
such as:

var $v = $("#v") ;    //jQuery对象　　
var v = $v[0]; //DOM对象　

2. jQuery itself provides it through the .get(index) method
For example:

var $v = $("#v"); //jQuery对象　　
var v = $v.get(0); //DOM对象　

Convert DOM object into jQuery object:
For DOM object , just wrap the DOM object with $() to get the jQuery object
Such as:

var v=document.getElementById("v"); //DOM对象　　
var $v=$(v); //jQuery对象

How to bind events in jquery? What are the functions of bind, unbind, delegate, live, on, and off? Which one is recommended? How to use on to bind events and use event proxy?
Event binding through the api provided by jquery.
bind: Bind an event handler to an element.
unbind: Remove a previously attached event handler from the element.
delegate: Attach one or more event handlers to the current or future child elements of the matched element.
live: Add one or more event handlers for current or future matching elements
on: Bind one or more event handlers to the selected element.
off: Remove an event handler.
It is recommended to use on, off.
Usage of on: .on( events [, selector ] [, data ], handler(eventObject) )

How does jquery show/hide elements?
Use show(), hide() to show and hide elements.

How to use jquery animation?
Usually use .animate() for custom animation.

How to set and get the HTML content inside an element? How to set and get the inner text of an element?
Use $('selector').html() to get the HTML content, $('selector').html(value) to set the HTML content, and use
$('selector').text() to get the internal text of the element. , $('selector').text(value) sets the text content

How to set and obtain the content input or selected by the form user? How to set and get element properties?

$(‘selector’).val()获取表单内容
$(‘selector’).val(val)设置表单内容
$(‘selector’).attr(attributeName)获取元素属性
$(‘selector’).attr(attributeName,value)设置元素属性
$(‘selector’).removeAttr(attributeName)移除属性

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to turn the browser into an editor

Simple bubble and two-way bubble sort case

The above is the detailed content of jquery's DOM and events. For more information, please follow other related articles on the PHP Chinese website!