What to use when loading jquery page using selection event

jQuery is a very popular JavaScript library in front-end development, which can quickly and easily manipulate HTML documents and CSS styles. In jQuery, selectors are a very important and commonly used function, through which you can select elements on the page and then operate on them.

jQuery provides a variety of selectors that can select elements based on their tag names, class names, ID values, attribute values, etc. When the page loads, we usually perform special processing on certain elements, such as showing or hiding certain elements, or binding events.

In this case, you can use jQuery's selector and event binding to achieve this. Here are some commonly used events and selectors.

1. Page loading completion event

In jQuery, the page loading completion event can be bound using the ready() method, which will be executed immediately after the DOM is loaded. The sample code is as follows:

$(document).ready(function() {
  // 页面加载完成后执行的代码
});

In addition, since ready() is commonly used, jQuery also provides a shorthand form:

$(function() {
  // 页面加载完成后执行的代码
});

These two forms are completely equivalent and can be loaded on the page. Do something when finished.

2. Selector

1. Basic selector

The basic selector is the simplest form of selector, which can be based on the tag name, class name, and ID value of the element. to select elements.

Select elements based on tag names:

$('p') // 选择所有<p>元素

Select elements based on class names:

$('.my-class') // 选择所有class属性值为my-class的元素

Select elements based on ID values:

$('#my-id') // 选择ID值为my-id的元素

2. Attribute selector

Attribute selector can select elements based on their attribute values, the most commonly used ones are [class^="xxx"] and [class$="xxx"].

Select elements based on the attribute name and attribute value:

$('input[type="text"]') // 选择所有type属性值为text的input元素

Select elements based on the beginning of the attribute value:

$('div[class^="my-"]') // 选择class属性值以my-开头的所有div元素

Select elements based on the end of the attribute value:

$('a[href$=".pdf"]') // 选择href属性值以.pdf结尾的所有a元素

3. Hierarchical selector

The hierarchical selector can select the child elements, parent elements, sibling elements, etc. of an element.

Select the child elements of an element:

$('ul li') // 选择所有ul元素下的li元素

Select the parent element of an element:

$('li').parent() // 选择所有li元素的父元素

Select the sibling elements of an element:

$('li').siblings() // 选择所有li元素的兄弟元素（不包括自己）

4. Form selector

The form selector can select form elements, including text boxes, check boxes, radio buttons, drop-down boxes, etc.

Select all text box elements:

$('input[type="text"]') // 选择所有type属性值为text的input元素

Select all check box elements:

$('input[type="checkbox"]') // 选择所有type属性值为checkbox的input元素

Select all radio button elements:

$('input[type="radio"]') // 选择所有type属性值为radio的input元素

Select all drop-downs Box element:

$('select') // 选择所有select元素

3. Event binding

1. Click event

The click event is one of the most commonly used events and can be bound through the click() method Certainly. The sample code is as follows:

$('button').click(function() {
  // 单击了button按钮后执行的代码
});

2. Double-click event

The double-click event refers to the event of clicking twice quickly on an element, which can be bound through the dblclick() method. The sample code is as follows:

$('button').dblclick(function() {
  // 双击了button按钮后执行的代码
});

3. Keyboard events

Keyboard events refer to the events of pressing or releasing keyboard keys on the page, which can be done through keypress(), keydown(), keyup( ) three methods to bind.

4. Mouse events

Mouse events refer to events in which the mouse moves, clicks, double-clicks, presses, releases, etc. on the page. It can be passed through mousemove(), mousedown() , mouseup(), mouseenter(), mouseleave(), hover() and other methods to bind.

5. Page scroll event

Scroll event refers to an event triggered when the user scrolls the page, and can be bound through the scroll() method.

The above are some commonly used events and selectors, which can help us quickly locate elements on the page and perform event binding. Of course, jQuery also provides many other functions and methods, and interested readers can learn and explore on their own.

The above is the detailed content of What to use when loading jquery page using selection event. For more information, please follow other related articles on the PHP Chinese website!