一、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; ???????????width: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; ???????????width: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{ ???????????width: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{ ???????????width: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>前端学习——jquery操作例子
原文地址：https://www.cnblogs.com/di2wu/p/10035777.html