jQuery
js类库：
对常用的方法和对象进行封装，方便我们使用。
jQuery和html的整合：
jquery是单独的js文件
通过script标签的src属性导入即可
获取一个jquery对象
$("选择器") 或者 jQuery("选择器")
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script src="../js/jquery-1.11.0.min.js"> </script> </head> <body> <input type="text" id="username" value="yisen"/> </body> <script> //1.通过原生js alert(document.getElementById("username").value);//输出value //2.通过jquery var $username = $("#username");//简写方式 //var $username = jQuery("#username"); alert($username.val());//输出value </script> </html>
dom和jquery对象之间的转换
dom对象 ===》jquery对象
$(dom对象)
jquery对象 ===》dom对象
方式1：
jquery对象[index]
方式2：
jquery对象.get(index)
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <script src="../js/jquery-1.11.0.min.js"></script> <body> <input type="text" id="username" value="yisen"/> </body> <script> //dom >>>jquery $(dom对象) //1.获取dom对象 var obj = document.getElementById("username"); //2.转化 var $username = $(obj); //dom对象与jquery对象不能混用 alert($username.val()); //alert($username.value);错误 //jquery >>>dom //1.获取jquery对象 var $username = $("#username"); //2.转化 //2.1方式1 var obj = $username.get(0); //2.2方式2 var obj1 = $username[0]; alert("方式1："+obj.value); alert("方式二："+obj1.value); </script> </html>
页面加载：
js:
window.onload = function（）{}//在一个页面中只能使用一次
jquery： 在一个页面中可以使用多次
方式1：
$(funciton(){...})
方式2：
$(document).ready(function(){...});
<html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-1.11.0.min.js"></script> <script type="text/javascript"> onload = function(){ alert(1); } //原生js中，页面加载只能使用一次 /*onload = function(){ alert(2); }*/ $(function(){ alert(2); }) $(function(){ alert(3); }) </script> </head> <body> </body> </html>
派发事件:
$("选择器").click(function(){...});
等价于 原生js中
dom对象.onclick = function（）{...};
<html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-1.11.0.min.js"></script> <script type="text/javascript"> $(function(){ //派发事件 $("#bId").click(function(){ alert(123) }) }) </script> </head> <body> <input type="button" id="bId" value="点击查看" /> </body> </html>
常用事件：
<html> <head> <meta charset="UTF-8"> <title>常见事件</title> <style type="text/css"> #e02{ border: 1px solid #000000; height: 200px; width: 200px; } </style> <script src="../js/jquery-1.11.0.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#e01").blur(function(){ $("#textMsg").html("文本框失去焦点：blur"); }).focus(function(){ $("#textMsg").html("文本框获得焦点：focus"); }).keydown(function(){ $("#textMsg").append("键盘按下：keydown"); }).keypress(function(event){ $("#textMsg").append("键盘按：keypress"); }).keyup(function(){ $("#textMsg").append("键盘弹起：keyup"); }); var i = 0; $("#e02").mouseover(function(){ $("#divMsg").html("鼠标移上：mouseover"); }).mousemove(function(){ //$("#divMsg").html("鼠标移动：mousemove , " + i++ ); }).mouseout(function(){ $("#divMsg").html("鼠标移出：mouseout"); }).mousedown(function(){ $("#divMsg").html("鼠标按下：mousedown"); }).mouseup(function(){ $("#divMsg").html("鼠标弹起：mouseup"); }); $("#e03").click(function(){ $("#buttonMsg").html("单击：click"); }).dblclick(function(){ $("#buttonMsg").html("双击：dblclick"); }); }); </script> </head> <body> <input id="e01" type="text" /><span id="textMsg"></span> <br/> <hr/> <div id="e02" ></div><span id="divMsg"></span> <br/> <hr/> <input id="e03" type="button" value="可以点击"/><span id="buttonMsg"></span> <br/> </body> </html>
效果：
隐藏或展示
show(毫秒数) hide(毫秒数)
滑入或滑出
slideDown(毫秒数):向下滑入
slideUp(毫秒数):向上滑出
淡入或淡出
fadeIn(毫秒数)：淡入
fadeOut(毫秒数)：淡出
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style type="text/css"> div{ border:1px solid #000; width:100px; height:100px; } </style> <!-- 导入js库 ，注意：使用src属性之后，标签体中不能写入内容--> <script src="../js/jquery-1.11.0.min.js"></script> <script type="text/javascript"> $(function(){ //藏b1div $("#b1").click(function(){ //切换 $("#b1Div").toggle(1000); }); //滑出/滑入b2div $("#b2").click(function(){ $("#b2Div").slideToggle(2000); }); $("#b3").click(function(){ $("#b3Div").fadeToggle(3000); }) }) </script> </head> <body> <input type="button" id="b1" value="显示/隐藏 b1Div" /> <div id="b1Div"></div> <br/> <input type="button" id="b2" value="滑出/滑入b2Div"/> <div id="b2Div"></div> <br/> <input type="button" id="b3" value="淡出/淡入b3Div" /> <div id="b3Div"></div> </body> </html>
