Home >Web Front-end >JS Tutorial >jQuery: Detailed explanation of the definition and usage of click event

jQuery: Detailed explanation of the definition and usage of click event

黄舟Original: 2017-06-27 09:50:562305browse

This article mainly introduces the definition and usage of click event in jQuery, and analyzes in detail the specific definition method, parameters and usage examples of click event in jQuery in the form of examples. It has certain reference value. Friends who need it can refer to

The examples in this article describe the definition and usage of click events in jQuery. Share it with everyone for your reference. The specific analysis is as follows:

Overview

Trigger the click event of each matching element.

This function will call and execute all functions bound to the click event.

Parameters

fnFunctionV1.0

The handler function bound in the click event of each matching element.

[data],fnString,FunctionV1.4.3

data:click([Data], fn) can pass in data for function fn to process.

fn: The handler function bound in the click event of each matching element.

Example

Description:

Trigger click events for all paragraphs in the page

jQuery code:

$("p").click();

Description:

Hide all paragraphs in the page by clicking on them.

jQuery Code:

$("p").click( function () { $(this).hide(); });

When the mouse pointer is over the matching element, then pressing and releasing the left mouse button or calling the click() method will trigger the click event. The

click() method can also be bound to the event handling method.

Syntax structure 1:
Trigger click event.

$(selector).click()

Grammar structure 2:
Bind event processing method for click event.

$(selector).click(data,function)

Parameter list:

##ParameterDescriptiondataOptional. Defines the data passed in for the function to process. functionDefine the function that runs when the click event is triggered.

Example code:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>click事件-脚本之家</title>
<style type="text/css">
p{
  width:200px;
  height:200px;
  border:5px solid green;
}
</style>
<script type="text/
javascript
" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(
document
).ready(function(){
  $("button").click(function(){
    $("p").text("这是后来添加的内容");
  })
  $("p").dblclick(function(){
    $("button").click();
  })
})
</script>
</head>
<body>
<p></p>
<p>双击我触发click事件</p>
<button>点击触发事件</button>
</body>
</html>

The above code will be displayed when you double-click the p element or click the

button p sets new text.

The above is the detailed content of jQuery: Detailed explanation of the definition and usage of click event. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Solution to the problem that jquery triggers the change event of select to failNext article：Solution to the problem that jquery triggers the change event of select to fail

See more

jQuery: Detailed explanation of the definition and usage of click event

Related articles