- //jQuery绑定事件
- // 1 使用事件函数 .click() .dbclick()..........
- // 2 使用同一的on()函数去绑定事件 on(事件类型,事件函数)
- // on函数可以一次绑定多个事件类型,多个事件类型用空格隔开
- // 只支持JavaScript原装事件类型
- // 3 使用统一的on函数绑定事件,给未来元素(动态元素)绑定事件 on(事件类型,未来元素选择器,事件函数)
- // on函数可以一次绑定多个事件类型,多个事件类型用空格隔开
- // 只支持JavaScript原装事件类型
- // $里放未来元素的父级元素
-
- $(function() {
- $("input").click(function() {
- $("body").append("新生成的元素")
- })
-
- $("body").on("click", "div", function() {
- alert(1)
- })
- })
-
- // dom对象 通过dom找到的对象
- // jdom对象 通过$获取的元素
-
- // dom --> JavaScript
- // jdom --> JQuery
-
- // dom --> jdom $(dom)
- // jdom --> dom jdom[n]
简单的样例:
对应的html
- html>
- <html lang="en">
-
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Documenttitle>
-
- <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js">script>
- <script src="../js/jQuery.js">script>
- <style>
- div {
- background-color: pink;
- width: 200px;
- height: 200px;
- }
- style>
- head>
-
- <body>
- <div>
- de
- div>
- <input type="button" value="生成元素">
- body>
-
- html>
运行出来的结果:

