Detailed explanation of jQuery element selector use cases

This time I will bring you jQueryElement SelectorDetailed explanation of use cases, what are the precautions for using jQuery element selector, the following is a practical case, let's take a look.

The examples in this article describe the simple usage of element selector (element) in jQuery. Share it with everyone for your reference, the details are as follows:

1. Introduction

The element selector matches the corresponding element based on the element name.

In layman terms, the element selector points to the tag name of the DOM element, which means that the element selector selects based on the tag name of the element.

The tag name of the element can be understood as the name of the student. There may be multiple students named "Liu Wei" in a school, but there may be only one student named "Wu Yu", so through the element The selector may match multiple elements or one element.

In most cases, the element selector matches a group of elements.

The method of using the element selector is as follows:

$("element");

Among them, element is the tag name of the element to be queried.

For example, to query all p elements, you can use the following jQuery code:

$("p");

2. Apply

in Add two

tags and a button to the page. Click the button to get the two

and modify their content.

3. Code

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<p>这里种植了一棵草莓</p>
<p>这里养殖了一条鱼</p>
<input type="button" value="若干年后" />
<script type="text/javascript">
$(document).ready(
function()
{
 $("input[type='button']").click(
  function()
  {                //为按钮绑定单击事件
   $("p").eq(0).html("这里长出了一片草莓"); //获取第一个p元素
   $("p").get(1).innerHTML="这里的鱼没有了"; //获取第二个p元素
  });
});
</script>

4. Running effect(use http:/ here /tools.jb51.net/code/HtmlJsRun (online running test):

5. Running instructions

In the above code, the element selector is used to obtain a set of jQuery packaging sets of p elements. It is a set of Object objects and is stored in [Object Object]. However, this method cannot display the text of individual elements. Information, you need to use an indexer to determine which p element to select. Two different indexers eq() and get() are used here.

The indexer here is similar to the house number of the room. The difference is that the house number starts counting from 1, while the indexer starts counting from 0.

In this example, two methods are used to set the text content of the element. The html() method is the jQuery method, and the innerHTML method is the DOM object method.

The $(document).ready() method is also used here. When the page element is loaded, the program will be automatically executed and the click event will be automatically bound to the button. The

eq() method returns a jQuery wrapper set, so it can only call jQuery methods, while the get() method returns a DOM object , so it can only use DOM object methods. The

eq() method and the get() method start counting from 0 by default.

$("#test").get(0) is equivalent to $("#test")[0].

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!

Recommended reading:

Summary of commonly used built-in functions in JS

Detailed explanation of the steps of using v-model in custom components with vue

The above is the detailed content of Detailed explanation of jQuery element selector use cases. For more information, please follow other related articles on the PHP Chinese website!