一、jquery和DOM函数的转换
1、1 jquery转换成dom $('#i1') --------------> $('#i1')[0] 2、1 dom转换成jquery var i1=documen.getElementById('#i1')---------> $(i1)
二、写左侧菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .header{ cursor: pointer; background-color: #2459a2; 300px; color: white; } .hide{ display: none; } </style> </head> <body> <div> <div class="header">菜单一</div> <div class="content"> <div>内容一</div> <div>内容一</div> </div> <div class="header">菜单二</div> <div class="content hide"> <div>内容二</div> <div>内容二</div> </div> <div class="header">菜单三</div> <div class="content hide"> <div>内容三</div> <div>内容三</div> </div> </div> <script src="jquery.js"></script> <script> $('.header').click(function(){ // jQuery链式编程 $(this).siblings('.content').toggleClass('hide'); // $(this).next().removeClass('hide'); }); </script> </body> </html>
addClass(“className”)方法是用来给指定元素增加类名，也就是说给指定的元素追加样式；
.removeClass(“className”)方法是用来给指定的元素移除类名，也就是说给指定元素移除样式；
.toggleClass(“className”)方法是用来给脂定的元素增加或移除类名（如果元素的类名存在就移除，如果不存在就增加），也就是说用来给指定的元素进行样式切换（如果元素存在样式则去掉，如果不存在则加上样式）
三、jquery实现模态框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .fluid{ position: absolute; top:0; left:0; right:0; bottom:0; background-color: black; opacity: 0.5; } .modal{ position: absolute; top:20%; left:35%; background-color: white; 300px; height:200px; } .hide{ display: none; } </style> </head> <body> <input type="button" value="添加" /> <table border="1px"> <tr> <th>IP</th> <th>端口</th> <th>操作</th> </tr> <tr> <td>1.1.1.1</td> <td>80</td> <td> <input type="button" value="编辑" class="edit"> </td> </tr> <tr> <td>2.2.2.2</td> <td>81</td> <td><input type="button" value="编辑" class="edit"></td> </tr> <tr> <td>3.3.3.3</td> <td>82</td> <td><input type="button" value="编辑" class="edit"></td> </tr> </table> <!--遮罩层--> <div class="fluid hide"> </div> <div class="modal hide"> <p> IP: <input type="text" name="ip" id="ip"> </p> <p> 端口: <input type="text" name="port" id="port"> </p> <p><input type="button" value="ok"><input type="button" value="cancel" id="cancel"></p> </div> <script src="jquery.js"></script> <script> $('.edit').click(function(){ $(".fluid").removeClass('hide'); $(".modal").removeClass('hide'); var tds = $(this).parent().prevAll(); // console.log(tds[0].innerText); $("#port").val(tds[0].innerText); $("#ip").val(tds[1].innerText); }); $("#cancel").click(function(){ $(".fluid").addClass('hide'); $(".modal").addClass('hide'); }); </script> </body> </html>
四、互相选择框，单选及多选到目的框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> div{ float: left; margin-left: 20px; } select{ 200px; } </style> </head> <body> <div> <select name="fruit" id="fruit" multiple> <option value="">香蕉</option> <option value="">苹果</option> <option value="">橘子</option> <option value="">菠萝</option> </select> </div> <div> <input type="button" value="=>" id="toRight"><br> <input type="button" value="==>" id="toAllRight"> </div> <div> <select name="shuiguo" id="shuiguo" multiple> </select> </div> <script src="jquery.js"></script> <script> $("#toRight").click(function () { $("#fruit option:checked").clone().appendTo("#shuiguo"); // $("#shuiguo").append($("#fruit option:checked")); }); $("#toAllRight").click(function () { $("#fruit option").clone().appendTo("#shuiguo"); }) </script> </body> </html>
五、酒仙网动画实例-采用animate
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .wine{ 180px; overflow: hidden; } </style> <script src="jquery.js"></script> </head> <body> <div class="wine"> <img src="wine.jpg" alt=""> </div> <div class="wine"> <img src="wine.jpg" alt=""> </div> <div class="wine"> <img src="wine.jpg" alt=""> </div><div class="wine"> <img src="wine.jpg" alt=""> </div><div class="wine"> <img src="wine.jpg" alt=""> </div> <script> $(function(){ $("img").hover( function () { $(this).animate({"margin-left":"-100px"},500); }, function (){ $(this).animate({"margin-left":"0"},500) } ); }); </script> </body> </html>