jQuery基础教程
jQuery是一个快速、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互等操作,本教程将介绍jQuery的基本概念和使用方法,帮助初学者快速上手。
1、引入jQuery库
在使用jQuery之前,需要先引入jQuery库,可以通过以下两种方式之一引入:
- 下载jQuery库文件,将其放在项目的某个目录下,然后在HTML文件中通过<script>
标签引入。
<script src="jquery.min.js"></script>
- 使用CDN(内容分发网络)引入,在HTML文件中添加以下代码:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
2、选择器
jQuery使用选择器来选取HTML元素,选择器可以是元素的ID、类名、属性等,常用的选择器有:
- #id
:选取ID为指定值的元素。$("#myId")
。
- .class
:选取类名为指定值的元素。$(".myClass")
。
- element
:选取指定类型的元素。$("p")
。
- element,element
:选取多个相同类型的元素。$("div,span")
。
- element element
:选取多个不同类型的元素。$("div span")
。
- element1,element2,...
:选取多个不同类型的元素。$("div,span,p")
。
- element1 element2,...
:选取多个相同类型的元素。$("div div")
。
- element1.class
:选取具有指定类名的元素。$("div.myClass")
。
- element[attribute]
:选取具有指定属性的元素。$("a[href]")
。
- element[attribute=value]
:选取具有指定属性值的元素。$("a[href='http://example.com']")
。
- element[attribute!=value]
:选取具有指定属性值以外的元素。$("a[href!='http://example.com']")
。
- element:first
:选取第一个匹配的元素。$("p:first")
。
- element:last
:选取最后一个匹配的元素。$("p:last")
。
- element:not(selector)
:选取不匹配指定选择器的元素。$("div:not('.myClass')")
。
- element:even
:选取索引为偶数的元素。$("tr:even")
。
- element:odd
:选取索引为奇数的元素。$("tr:odd")
。
- element:eq(index)
:选取索引为指定值的元素。$("tr:eq(1)")
。
- element:gt(index)
:选取索引大于指定值的元素。$("tr:gt(2)")
。
- element:lt(index)
:选取索引小于指定值的元素。$("tr:lt(3)")
。
- element:header
, element:footer
, element:section
, element:article
, element:nav
, element:aside
, element:figure
, element:figcaption
, element:hgroup
, element:address
, element:main
, element:canvas
, element:video
, element:audio
, element:details
, element:summary
, element:mark
, element:time
, element:progress
, element:meter
, element:output
, element:abbr
, element:datalist
, element:ul
, element:ol
, element:li
, element:dl
, element:dt
, element:dd
, element:del
, element:ins
, element:kbd
, element:samp
, element:var
, element:cite
, element:q
, element:blockquote
, element:pre
, element:form
, element:fieldset
, element:label
, element:legend
, element:button
, element:input
, element:textarea
, element:select
, element:optgroup
, element:option
, element:datagrid
, element:menuitem
, element:table
, element:caption
, element:thead
, element:tbody
, element:tfoot
, element:colgroup
, element:col
, element:th
, element:td
, element:tr
, element::before
, element::after
, *::before
, *::after
等,用于处理特定的HTML5元素和伪元素。
3、事件处理
jQuery提供了丰富的事件处理方法,如点击、鼠标移动、键盘按键等,常用的事件处理方法有:
- click():触发点击事件。$("#myButton").click()
。
- dblclick():触发双击事件。$("#myButton").dblclick()
。
- mousedown():触发鼠标按下事件。$("#myButton").mousedown()
。
- mouseup():触发鼠标抬起事件。$("#myButton").mouseup()
。
- mousemove():触发鼠标移动事件。$("#myButton").mousemove()
。
- mouseover():触发鼠标移动到元素上事件。$("#myButton").mouseover()
。
- mouseout():触发鼠标移动出元素上事件。$("#myButton").mouseout()
。
- keydown():触发键盘按下事件。$("#myInput").keydown()
。
- keyup():触发键盘抬起事件。$("#myInput").keyup()
。
- keypress():触发键盘按键事件(包括特殊字符)。$("#myInput").keypress()
。
还没有评论,来说两句吧...