老师，用jquery兼容性问题就解决了，那在获取动态数据时，用jquery函数事件来写，就不用考虑浏览器的兼容问题了，能保证在不同浏览器下显示一样的。这样理解对吗？可是如果还出现布局不同，是不是就是css样式问题了？那用jquery来写css的样式，是不是也不用考虑css样式的兼容问题 。这样理解，对吗？麻烦老师解惑了
老师，我这里的点击小圆点的下标字母获取呢
3_淡入淡出轮播图（二）.zip
老师，我这里的小圆点的下标怎么获取呢
那为什么不更新一下新的视频用新的版本的jQuery
<html> <head lang="en"> <meta charset="UTF-8"> <title>品牌案例</title> <script src="js/jquery-1.12.3.min.js"></script> <style> *{margin: 0 ;padding: 0} .container{ width: 600px;border: 1px solid; margin: 100px auto;padding: 20px; } .container ul{list-style: none;text-align: center;} .container ul li{display: inline-block;width: 100px} .btn{width: 40%;height: 25px;line-height: 25px;text-align: center;border: 1px solid pink; background-color: skyblue;margin: 5px auto; cursor: pointer;color: white; } </style> </head> <body> <div class="container"> <ul> <li class="jianeng"><a href="#">佳能</a><span>30440</span></li> <li><a href="#">三星</a><span>30440</span></li> <li><a href="#">oppo</a><span>30440</span></li> <li><a href="#">索尼</a><span>30440</span></li> <li class="jianeng"><a href="#">佳能</a><span>30440</span></li> <li><a href="#">苹果</a><span>30440</span></li> <li class="jianeng"><a href="#">佳能</a><span>30440</span></li> <li class="jianeng"><a href="#">佳能</a><span>30440</span></li> <li><a href="#">华为</a><span>30440</span></li> <li class="jianeng"><a href="#">佳能</a><span>30440</span></li> <li><a href="#">是的</a><span>30440</span></li> <li><a href="#">佳能</a><span>30440</span></li> <li class="jianeng"><a href="#">撒旦</a><span>30440</span></li> <li class="jianeng"><a href="#">佳能</a><span>30440</span></li> <li><a href="#">佳能</a><span>30440</span></li> </ul> <div class="btn">显示精简品牌</div> </div> <script> $('.btn').bind({ click:function () { $('.jianeng').hide(); $(this).html('显示全部品牌'); }, click:function () { $('.jianeng').show(); $(this).html('显示精简品牌'); } }) $('.btn').click(function () { $('.jianeng').hide(); $(this).html('显示全部品牌'); }); $('.btn').click(function () { $('.jianeng').show(); $(this).html('显示精简品牌'); }); </script> </body> </html> 为什么点击没有反应的,script两种方式我都试过了...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.9.1.min%5B1%5D.js"></script> <style> div{ width: 200px; height: 150px; border: 2px solid green; /*background-color: aqua;*/ } </style> </head> <body> <div class="div1"></div> <br/> <div class="div2"></div> <br/> <div class="div3"></div> <script> /* * 1.jquery监听事件的特点： * jq中规定 事件绑定不存在覆盖问题，事件的实际执行顺序会按照事件绑定的顺序逐个执行 * 2.其他添加事件监听的方法： * 描述：通过on方法来为jq对象添加事件监听，通过off方法取消事件监听。 * 语法:jq对象.on('事件名',回调函数)/jq对象.off('事件名',回调函数)*/ var $div1= $('.div1'); $div1.click(function () { $(this).animate({'width':'500px','background-color':'orange'},1000) }) $div1.dblclick(function () { $(this).animate({'width':'800px','background-color':'pink'},1000) }) </script> </body> </html>
这个点击之后为什么背景颜色不变呢
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.9.1.min%5B1%5D.js"></script> <style> div{ width: 100px; height: 100px; border: 1px solid red; } </style> </head> <body> <div class="div1"></div> <br/> <div class="div2"></div> <br/> <div class="div3"></div> <script> /* * css()方法 * 描述：本方法是jq对象读写css样式的方法，相当于js中的style属性 * 语法：jq对象.css("key","value"); * 注意： * 1.第一个参数是必要的，第二个参数是可选的 * 2.如果只有一个参数则代表读取属性的值，*/ $('.div1').click(function () { $(this).css({ "width": "200px", "height": "150px", "border": "2px solid green", "background-color": "aqua" }) }) $('.div2').click(function () { $(this).css({"width":"+=50px"}) }) var arrColor=['red','orange','blue','green','purple','gray','pink','black']; for (var i = 0;i<arrColor.length;i++){ $('.div3').click(function () { $(this).css({"background-color":"arrColor[i]"}) }) } </script> </body> </html>
怎么实现点一下背景颜色就换一次呢，试了好几次都不对。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQ对象的常用方法show()和hide()</title> <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script> <style type="text/css"> *{ margin: 0;padding: 0; } .d1{ width: 600px; border: 1px solid;margin:50px auto;padding: 20px; } .d1 ul{ list-style: none;text-align: center; } .d1 ul li{ display: inline-block;width: 200px; } .d2{ width: 40%;height: 25px;line-height: 25px;text-align: center;border: 1px solid;background-color: aqua;margin: 10px auto;cursor: pointer; } /*div{ width: 100px;height: 100px;border: 1px solid black;margin: 5px auto; } button{margin:0 auto;width: 100px;height: 30px;}*/ </style> </head> <body> <div class="d1"> <ul> <li><a href="#">佳能</a>1234</li> <li class="jinxuan"><a href="#">华为</a>2345</li> <li><a href="#">小米</a>3456</li> <li class="jinxuan"><a href="#">苹果</a>4567</li> <li><a href="#">索尼</a>5678</li> <li class="jinxuan"><a href="#">OPPO</a>6789</li> <li><a href="#">vivo</a>7890</li> <li><a href="#">金立</a>8901</li> <li><a href="#">一加</a>9012</li> <li class="jinxuan"><a href="#">三星</a>0123</li> </ul> <div class="d2"> 显示精简品牌 </div> </div> <!--<div class="d1"></div> <div class="d2"></div> <div class="d3"></div> <button>show()</button> <button>hide()</button> <button>show(2000)</button> <button>hide(2000)</button>--> <script> var $vi=$('.jinxuan'); var $btn=$('.d2'); $btn.click(function(){ if($vi.hasClass('.jinxuan')){ $vi.hide().removeClass(".jinxuan"); $btn.html('显示全部品牌'); }else{ $vi.show().addClass(".jinxuan"); $btn.html('显示精简品牌'); } }) /*var $d1=$('.d1'); $d1.css("background-color","red"); $('button:eq(0)').click(function () { $d1.show(); }); $('button:eq(1)').click(function () { $d1.hide(); }); $('button:eq(2)').click(function () { $d1.show(2000); }); $('button:eq(3)').click(function () { $d1.hide(2000); })*/ </script> </body> </html>
把练习和操作都试了下应该是这样的吧
老师，我按照视频老师里面添加的jquery，操作不出来，有没有新的呀
老师我的Jquery的操作方法怎么没有效果啊
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="jquery-1.12.3.min.js"></script> <style> .div1{ width: 200px; height: 200px; background-color: red; } .div2{ width: 200px; height: 200px; background-color: gold; } </style> </head> <body> <div class="div1"></div> <br> <div class="div2"></div> <script> //$(".div1").css("background-color","green"); //$('div').css('background-color','red'); // $('div').click(function(){ // // $("div").css("background-color","green"); // $('div').css('background-color','red'); // }) $('div').click(function(){ $('div').css('background-color','red'); }) </script> </body> </html>
下面是图：
老师建议下次录视频的时候把鼠标光标显示出来，不然看不到你点的哪里
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="jquery-1.8.3.js"></script> <style> *{padding: 0;margin: 0;} div{ width: 400px;border: 3px solid skyblue;margin: 100px auto;padding: 20px;} li{ width: 100px;display: inline; } ul{text-align: center;list-style: none;} button{width: 40%; background-color: aquamarine;height: 40px;line-height: 40px;text-align: center;margin: 5px auto;} </style> </head> <body> <div class="con"> <ul> <li class="hide">1</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li class="hide">1</li> <li>2</li> <li class="hide">1</li> <li class="hide">1</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li><li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> <li>2</li> </ul> <button>显示2</button> </div> <script> $('button').toggle(function(){ $('.hide').hide(200); $('button').html('显示1和2'); },function(){ $('.hide').show(200); $('button').html('显示2'); }) </script> </body> </html>
老师为什么隐藏后再显示的跟隐藏前显示的布局不一样
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>$()函数</title> <script src="jquery-3.5.1.js"></script> <style> div{ width: 100px;height: 100px;margin-top: 10px; border: 1px solid black; } </style> </head> <body> <div class="div1"></div> <div class="div1"></div> <div id="div2"></div> <script> var $divs=$('.div'); $divs.css('background-color','skyblue'); console.log($divs); console.log($divs[0]);//获取jq中第一个js对象，通过中括号 console.log($divs.get(1));//获取jq中第二个js对象，通过get(n) $divs[0].style.backgroundColor='red'; console.log($divs.length); console.log($divs.length); </script> </body> </html>
老师帮我看一下，怎么还在爆错哦
老师，加入这里的菜单触发频率很高，那这里是加一个节流操作还是防抖操作啊
<!--<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>--> <script src="./js/libs/jquery.min.1.12.4.js"></script> </head> <body> <p id="test">hello</p> <button id="btn">按钮</button> <script> var btn=document.getElementById("btn"); var text=document.getElementById("text"); btn.onclick=function(){ text.innerHTML="新的内容" } </script> </body> </html>
老师，这个哪里不对吗？
非常抱歉给您带来不好的体验！为了更深入的了解您的学习情况以及遇到的问题，您可以直接拨打投诉热线：
我们将在第一时间处理好您的问题！
关于
课程分类
百战程序员微信公众号
百战程序员微信小程序
©2014-2025百战汇智（北京）科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园网站维护：百战汇智（北京）科技有限公司 京公网安备 11011402011233号 京ICP备18060230号-3 营业执照 经营许可证：京B2-20212637
京公网安备 11011402011233号