jQuery访问dom节点
什么是jQuery对象
jQuery对象是框架对javascript进行封装后的对象。让其获取方式更加直观，简单。jQuery对象和dom对象并不相同
<!DOCTYPE html> <html> <head> <title>jquery对象</title> <meta charset="utf-8"> <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script> </head> <body> <div id="ab">学习一门技能</div> <script type="text/javascript"> // jquery对象和dom对象不是一回事 $(function(){ // 获取jQuery对象 var jquery = $('#ab'); // 打印结果 alert(jquery); // 获取dom对象 var javascriptobj = document.getElementById('ab'); // 打印结果 alert(javascriptobj); }) </script> </body> </html>
jQuery对象转化为dom对象
<!DOCTYPE html> <html> <head> <title>jQuery对象转化为dom对象</title> <meta charset="utf-8"> <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script> </head> <body> <div id="ab"></div> </body> <script type="text/javascript"> var jqobj = $('#ab'); // jquery对象 alert(jqobj); var DomObj = jqobj.get(0); alert(DomObj); var DomObJ= jqobj[0]; alert(DomObJ); </script> </html>
dom对象转化为jQuery对象
<!DOCTYPE html> <html> <head> <title>dom对象转化为jQuery对象</title> <meta charset="utf-8"> <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script> </head> <body> <h1 id="ab"></h1> <script type="text/javascript"> var domobj = document.getElementById('ab'); alert(domobj); var jqobj = $(domobj); alert(jqobj); </script> </body> </html>
jQuery对象的事件处理
<!DOCTYPE html> <html> <head> <title>jquery对象对页面的事件处理</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/2.css"> <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script> </head> <body> <div> <h1>点击对应的文字，即停止滚动</h1> <ul> <li class="one"></li> <li class="two"></li> <li class="three"></li> </ul> <button>开始</button> </div> </body> <script type="text/javascript"> $(function(){ var s = ["师傅","二师兄","小弟弟"]; var v = ["在冰箱里","对着梦中女孩","在梦中"]; var o = ["洗澡","唱歌","瞎bb"]; var snum = 0;vnum = 0,onum = 0; var stime = 0;vtime = 0;otime = 0; $("button").click(function(){ stime = setInterval(function(){ snum = ++snum%(s.length); $('li:eq(0)').html(s[snum]); },100); vtime = setInterval(function(){ vnum = ++vnum%(v.length); $("li:eq(1)").html(v[vnum]); },100); otime = setInterval(function(){ onum = ++onum%(o.length); $("li:eq(2)").html(o[onum]); },100); }); $('li').click(function(){ var name = $(this).attr('class'); if(name == "one"){ clearInterval(stime); }else if(name == "two"){ clearInterval(vtime); }else if(name == "three"){ clearInterval(otime); } }); }); </script> </html>
// 2.css * { margin:0; padding:0; } ul{ list-style:none; } div{ margin:50px auto; /* background:red; */ } h1{ text-align:center; padding:30px; } ul{ /* background:blue; */ text-align:center; margin:0 auto; float:left; width:100%; padding-left:28%; padding-bottom: 20px; } li{ /* background:green; */ float:left; height:30px; line-height:30px; font-size:20px; border:1px solid #ccc; margin:0px 20px; } button{ display:block; font-size:20px; clear:both; margin:0px auto; width:150px; height:40px; background:red; border:2px solid #ccc; }
jquery动态控制css
<!DOCTYPE html> <html> <head> <title>jquery控制页面样式</title> <meta charset="utf-8"> <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script> </head> <body> <div>知识与力量</div> </body> <script type="text/javascript"> $(function(){ $('div').css('color','red') .css("fontSize","30px") .css("fontweight","blod") .css('textAlign',"center") .css('padding',"50px"); }) </script> </html>
jQuery操作class来控制页面的层叠样式
<!DOCTYPE html> <html> <head> <title>jQuery控制class来控制页面层叠样式</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/3.css"> <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script> </head> <body> <div class="nav"> <ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> <li>E</li> <li>F</li> </ul> </div> </body> <script type="text/javascript"> $(function(){ $(".nav li").mouseover(function(){ $(this).addClass("current"); }).mouseout(function(){ $(this).removeClass("current"); }) }); </script> </html>
* { margin:0; padding:0; } ul{ list-style:none; } .nav{ /* background:red; */ margin:0 auto; padding:100px; } .nav ul{ /* background:blue; */ float:left; } .nav li{ background:#00BCD4; float:left; padding:0 20px; font-size:20px; line-height:40px; font-weight:bold; /* color:#999; */ border:2px solid #D5EEEF; border-right:0px; } .nav li:last-child{ border-right:2px solid #D5EEEF; } .nav li.current{ background:#FFE0B2; /* color:#666; */ font-size:24px; position:relative; top:4px; box-shadow:2px 2px 1px #009688; }
jQuery处理动画效果
jQuery封装好的动画效果方法有：基本动画show()和hide()，滑动动画sildeDown()和slideUp(),淡入淡出fadeIn()和fadeOut(),以及自定义动画
实现隐藏，显示和隐藏显示的切换
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jquery处理动画效果</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script> </head> <body> <center> <img src="images/9.jpg"> <button>隐藏</button> <button>显示</button> <button>切换</button> </center> </body> <script type="text/javascript"> $(function(){ $('button').click(function(){ switch($(this).html()){ case '隐藏': $('img').hide(); break; case '显示': $('img').show(); break; case "切换": $('img').toggle(); break; } }); }); </script> </html>
jQuery的ajax应用
//服务器端 // textajax app.get('/textajax',function(req,res){ res.send('你已经学会jQuery了ajax文本'); }) app.get('/jqueryajax',function(req,res){ res.render('jqueryajax'); }) // 客户端 <!DOCTYPE html> <html> <head> <title>jquery的ajax技术运用</title> <meta charset="utf-8"> <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script> </head> <body> <script type="text/javascript"> $(function(){ $.ajax({ url:'http://localhost:3000/textajax', type:'get', dataType:'text', success:function(msg){ alert(msg); }, error:function(){ alert('ajax请求错误'); } }); }); </script> </body> </html>
