一：jQuery简介
jQuery是一个JavaScript库，$就是jQuery的一个简写形式。
eg:$(“#foo”)和jQuery(“#foo”)是等价的；$.ajax和jQuery.ajax是等价的。
二：DOM对象与jQuery对象
DOM对象与jQuery对象： 通过JavaScript中的getElementsByName、getElementById等方法获取元素节点，得到的就是DOM对象。
jQuery对象就是通过jQuery包装DOM对象后产生的对象。
DOM对象与jQuery对象的相互转换：
一个约定：如果获取的对象是jQuery对象，那么在变量前面加上$，例如： var $variable = jQuery对象。 如果获取的是DOM对象，则定义如下： var variable=DOM对象1.DOM对象转换成jQuery对象
对于一个DOM对象，只要用$( )把DOM对象包装起来，就可以获得一个jQuery对象了。即：$(DOM对象)。
2. jQuery对象转换成DOM对象 方式一： 由于jQuery对象是一个类似数组的对象，可以通 过[index]的方法得到相应的DOM对象。eg: var $a = $(“#a”); var a=$a[0]; 方式二： 通过jQuery对象本身提供的get(index)方法。eg: var $a=$(“#a”);
var a=$a.get(0);
三：$(document).ready(function(){})
在jQuery中，通过使用： $(document).ready(function(){ // DOM结构绘制完毕后执行此处代码 }); 可以编写DOM结构绘制完毕后执行的代码 该结构也可简写成： $(function(){ // DOM结构绘制完毕后执行此处代码
});
eg:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的第一个jQuery网页</title> <!--引入jQuery库--> <script type="text/javascript" src="jquery-3.1.1.js"></script> <script type="text/javascript"> $(function(){ alert("hello,欢迎学习jQuery!"); }); </script> </head> <body> </body> </html>运行结果图：
四：jQuery选择器
(1)id选择器 $(#ID名称) eg: $( "#myDiv").css( "border", "3px solid red" );
此代码对应JavaScript的： document.getElementById(" myDiv ").style.border='3px solid red';
(2)通用选择器 $("*" )
(3)类选择器 $(".class")
(4).复选框选择器 $(":checkbox" )
(5)后代选择器 $( "ancestor descendant" )
(6)子选择器 $("parent > child" )
(7)多元素选择器 $( "selector1, selector2, selectorN" )
eg:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery选择器</title> <style type="text/css"> .divclass{ width:200px; height:200px; background-color: yellow; } </style> <script type="text/javascript" src="jquery-3.1.1.js"></script> <script type="text/javascript"> $(function(){ /** $("#btn").click(function(){ $("#mydiv").css("background-color","red"); }); **/ $("*").css("background-color","#FAEBD7"); $("#btn").bind("click",function(){ $("#mydiv").css("background-color","#aabbcc"); }); $("#btn2").click(function(){ $(".divclass").css("background-color","red"); }); }); </script> </head> <body> <div id="mydiv" class="divclass"></div> <input type="button" value="ID点击变色" id="btn"/> <br/><br/> <input type="button" value="class点击变色" id="btn2"> <div class="divclass"></div> </body> </html>运行结果图：
五：事件冒泡
当在有包含关系的DOM层级上绑定事件时，事件会按照DOM层级结构顺序从内到外依次触发,这就是“事件冒泡”。停止事件冒泡的方法： 在事件处理函数中加上event事件对象，调用event事件对象的stopPropagation()方法。补充：阻止默认行为也是用event事件对象： event.preventDefault();
eg1:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件冒泡</title> <style type="text/css"> #parentDiv{ width:400px; height:400px; background-color:#7FFF00; } #childDiv{ width:200px; height:200px; background-color:yellow; margin:50px auto; } </style> <script type="text/javascript" src="jquery-3.1.1.js"></script> <script type="text/javascript"> $(function(){ $("#parentDiv").bind("click",function(){ alert("parentDiv被点击了"); }); $("#childDiv").bind("click",function(event){ alert("childDiv被点击了"); event.stopPropagation(); // 停止事件冒泡 }); $("body").bind("click",function(){ alert("body被点击了"); }); }); </script> </head> <body> <div id="parentDiv"> 这是parentDiv里的内容 <div id="childDiv"> 这是childDiv里的内容 </div> 这是parentDiv里的内容 </div> </body> </html>运行结果图：
eg2：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>阻止默认行为</title> <script type="text/javascript" src="jquery-3.1.1.js"></script> <script type="text/javascript"> $(function(){ $("#registerForm").bind("submit",function(event){ var username=$("#uname").val(); var password=$("#upwd").val(); if(username==""){ alert("用户名不能为空！"); event.preventDefault(); // 阻止提交表单的默认行为 } if(password.length<6){ alert("密码不能小于6位！"); event.preventDefault(); // 阻止提交表单的默认行为 } }); }); </script> </head> <body> <form action="serverURL" method="post" id="registerForm"> 注册用户名：<input type="text" name="uname" placeholder="请输入用户名" id="uname"/> <br/> <br/> 注册密码：<input type="password" name="pwd" placeholder="请输入密码" id="upwd"> <br/> <br/> <input type="submit" value="注册"/> <input type="reset" value="重置"/> </form> </body> </html>运行结果图：
