jQuery: Detailed explanation of the definition and usage of click event-JS Tutorial-php.cn

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

黄舟

Release： 2017-06-27 09:50:56

Original

2287 people have browsed it

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();

Copy after login

Description:

Hide all paragraphs in the page by clicking on them.

jQuery Code:

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

Copy after login

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()

Copy after login

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

$(selector).click(data,function)

Copy after login

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>

Copy after login

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!