"$" in jQuery
" $ " is a wrapped method in jQuery.
Different parameters of " $() " have different functions.
Three uses of " $ ":
1. The parameter is a function(): it is an entry function
$(function () {
})
2. The parameter is a dom object: convert the dom object to a jQuery object
var li = document.getElementsByTagName ('li') [0];
var $ li = $ (li);
3. The parameter is a string: select one or a group of dom elements
var $ li = $ ('li');
Common Events in jQuery
mouseover() mouseover trigger event
mouseout() mouseover trigger event
mouseenter() mouseover trigger event
mouseleave() The mouse is opened to trigger the event
The difference between the two:mouseover() and mouseout() trigger bubbling events.
mouseenter() and mouseleave() do not fire bubbling events.
The following table lists the more commonly used jQuery methods for handling events.
grammar
$('element').method(event to be executed after the event is triggered})
e.g: $('li').blur(function (){})
| method | describe |
|---|---|
| blur() | Form element loses focus event |
| focus() | Form element gets focus event |
| change() | When the content of the form element changes, the event will be triggered |
| click() | Trigger an event when an element is clicked |
| dblclick() | Trigger an event when an element is double-clicked |
| delegate() | Trigger an event when a child element inside the parent element is clicked |
| event.pageX | Returns the mouse position relative to the left edge of the document |
| event.pageY | Returns the mouse position relative to the top edge of the document |
| event.preventDefault() | Default behavior for blocking events |
| event.stopImmediatePropagation() | Execute the first event handler and prevent the remaining event handlers from being executed. |
| event.stopPropagation() | Prevents events from bubbling up to the parent element, preventing any parent event handlers from being executed. |
| event.which | Returns which keyboard key or mouse button was pressed on the specified event |
| focusin() | Fires an event when the parent element or a child element within the parent element gains focus |
| focusout() | Fires an event when the parent element or a child element within the parent element gains focus |
| hover() | Executes an event when the mouse hovers over the element and leaves the element |
| keydown() | A key is pressed triggers an event |
| keypress() | The process of the key being pressed triggers an event |
| keyup() | The key is lifted to trigger an event |
| mousedown() | An event is fired when the left mouse button is pressed on the specified element |
| mousemove() | Fires an event when the mouse pointer moves within the specified element |
| mouseup() | An event is fired when the mouse releases the left button on the specified element |
| off() | Remove event handlers added via on() method |
| on() | Add event handlers to elements |
| one() | Adds one or more event handlers to the selected elements. This handler can only be triggered once per element |
| select() | Triggers an event when an input element of type text is selected |
| submit() | Trigger an event when the form is submitted |
| contextmenu() | Right click to trigger event |
jQuery common selectors
1. Basic selector
$("#id") //ID选择器
$("div") //元素选择器
$(".classname") //类选择器
$(".classname,.classname1,#id1") //组合选择器2. Hierarchy selector
$("#id>.classname ") //子元素选择器
$("#id .classname ") //后代元素选择器
3. Filter selector (emphasis)
$("li:first") //第一个li
$("li:last") //最后一个li
$("li:even") //挑选下标为偶数的li
$("li:odd") //挑选下标为奇数的li
$("li:eq(4)") //下标等于4的li
$("li:gt(2)") //下标大于2的li
$("li:lt(2)") //下标小于2的li
$("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li3.4 Attribute Filter Selector
$("div[id]") //所有含有 id 属性的 div 元素4. Form selector
$(":input") //匹配所有 input, textarea, select 和 button 元素
$(":text") //所有的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同
$(":password") //所有密码框
$(":radio") //所有单选按钮
$(":checkbox") //所有复选框
$(":submit") //所有提交按钮
$(":reset") //所有重置按钮
$(":button") //所有button按钮
$(":file") //所有文件域Extend some selectors:
| $("ul li:first") | Selects the first <li> element of the first <ul> element | Online instance |
|---|---|---|
| $("ul li:first-child") | 选取每个 <ul> 元素的第一个 <li> 元素 | 在线实例 |
| :eq(index) | $("ul li:eq(3)") | 列表中的第四个元素（index 值从 0 开始） |
|---|---|---|
| :gt(no) | $("ul li:gt(3)") | 列举 index 大于 3 的元素 |
| :lt(no) | $("ul li:lt(3)") | 列举 index 小于 3 的元素 |