前端开发 - JQuery - 上
Posted Alice的小屋
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端开发 - JQuery - 上相关的知识，希望对你有一定的参考价值。
一、js的缺点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用js的一些痛处</title> <style type="text/css"> div{ width: 100%; height: 100px;margin: 10px 0 0 0 ;display: none; background-color: red;} </style> </head> <body> <button id="btn">展示</button> <div></div> <div></div> <div></div> </body> <!-- http://libs.baidu.com/jquery/2.0.0/jquery.min.js --> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $(‘#btn‘).click(function () { $(‘div‘).css(‘display‘,‘block‘); $(‘div‘).html(‘div展示了‘); }) }); // window.onload = function () { // var oBtn = document.getElementsByTagName(‘button‘)[0]; // var oDivs = document.getElementsByTagName(‘div‘); // // oBtn.onclick = function () { // for(var i=0;i<oDivs.length;i++){ // oDivs[i].style.display = ‘block‘; // oDivs[i].innerHTML = ‘div展示了‘; // } // } // } /* 总结： * 痛处：1.书写繁琐，代码量大 * 2.动画 开启定时器 小心定时器的清除 * 3.各种操作和处理事件 不好实现 浏览器的兼容； * * jquery 的出现就解决了上面出现的问题 * * jquery的官网 http://jquery.com/ * * jquery-3.2.1.js 用在开发环境 * jquery-3.2.1.min.js 用在生产环境 * */ </script> </html>
二、jquery文件的引入
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery文件的引入</title> <!--<script type="text/javascript">--> <!--// 如果不写 window.onload 代码的执行顺序是 从上到下--> <!--var oDiv = document.getElementById(‘box‘);--> <!--console.log(oDiv); //null --> <!--</script>--> </head> <body> <script type="text/javascript"> // window.onload = function () { // var oDiv = document.getElementById(‘box‘); // console.log(oDiv); //有 // }; // window.onload = function () { // alert(‘1111111111111‘) // } </script> <div id="box"></div> </body> <script src="./jquery-3.2.1.js"></script> <script type="text/javascript"> //如果没有引入jquery ; $ is not defined // console.log($); //jquery 是js的一个库文件，既然是库文件，就会抛出来 一个构造函数或者对象 // 书写jquery的方式 入口函数 $(document).ready(function () { alert(111); }); $(document).ready(function () { alert(222); }); // 等价 $(function () { alert(333); }) /*总结： * DOM文档加载的步骤 解析HTML结构。 加载外部脚本和样式表文件。 解析并执行脚本代码。 DOM树构建完成。 $(document).ready() 加载图片等外部文件。 页面加载完毕。 window.onload() 执行时间不同。 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 如果不写 window.onload 代码的执行顺序是 从上到下 $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。 编写个数不同 window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个 $(document).ready()可以同时编写多个，并且都可以得到执行 简化写法不同 window.onload没有简化写法 $(document).ready(function(){})可以简写成$(function(){}); * */ </script> </html>
三、jquery基础选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery基础选择器</title> <style type="text/css"> /*#brother{color: red;}*/ </style> </head> <body> <ul> <li id="brother">路飞学城1</li> <li><a href="https://www.luffycity.com">路飞学城2</a></li> <li class="li3">路飞学城3</li> <li>路飞学城4</li> <li>路飞学城5</li> </ul> </body> <script src="jquery-3.2.1.js"></script> <script type="text/javascript"> //使用jquery的时候 要有入口函数 回调函数 $(document).ready(function () { //基础选择器 //1.id选择器 console.log($(‘#brother‘)); $(‘#brother‘).css(‘color‘,‘red‘); //2.标签选择器 // $(‘a‘).css(‘color‘,‘yellow‘); // 设置一个值 $(‘a‘).css({‘color‘:‘green‘,‘font-size‘:‘24px‘}); // 设置多个值 使用对象 key:value console.log($(‘li‘)); //3.类选择器 $(‘.li3‘).css(‘background‘,‘yellow‘); //4.通配符选择器 使用不频繁 console.log($(‘*‘)); // $(‘*‘).html(‘‘); // 清空整个界面的dom元素 $(‘a‘).val(); console.log($(‘a‘).val()); //清空a的val值 }) </script> </html>
四、jquery层级选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery层级选择器</title> <style type="text/css"> /*#brother{color: red;}*/ </style> </head> <body> <ul> <li id="brother">路飞学城1</li> <li><a href="https://www.luffycity.com">路飞学城2</a></li> <li class="li3">路飞学城3</li> <li>路飞学城4</li> <li>路飞学城5</li> </ul> <div id="box"> <p id="father">天王盖地虎</p> <p>我是你老母</p> <p>宝塔镇河妖</p> <p>蘑菇放香蕉</p> <div id="box2"> <p>小鸡炖磨菇</p> </div> </div> </body> <script src="jquery-3.2.1.js"></script> <script type="text/javascript"> //使用jquery的时候 要有入口函数 回调函数 $(document).ready(function () { //层级选择器 //1.后代选择器 div p $(‘#box p‘).css(‘color‘,‘red‘); //2.子代选择器 div>p $(‘#box>p‘).css(‘color‘,‘green‘); //3.毗邻选择器 匹配所有的紧接着选中元素的兄弟 $(‘#father+p‘).css(‘font-size‘,‘30px‘); //4.兄弟选择器 $(‘#father~p‘).css(‘background‘,‘gray‘); console.log($(‘li‘)); //5.获取第一个元素 $(‘li:first‘).css(‘font-size‘,‘50px‘); //6.获取最后一个元素 $(‘li:last‘).css(‘font-size‘,‘80px‘); //7.取其他的元素 $(‘li:eq(2)‘).css(‘background‘,‘red‘); }) </script> </html>
五、jquery基本过滤选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery基本过滤选择器</title> </head> <body> <ul> <li>哈哈哈，基本过滤选择器</li> <li>嘿嘿嘿</li> <li>天王盖地虎</li> <li>小鸡炖蘑菇</li> </ul> </body> <script src="jquery-3.2.1.js"></script> <script type="text/javascript"> $(function () { //获取第一个 :first 获取最后一个 :last $(‘li:first‘).css(‘background‘,‘gray‘); $(‘li:last‘).css(‘background‘,‘yellow‘); // 获取奇数 $(‘li:odd‘).css(‘color‘,‘red‘); // 获取偶数 $(‘li:even‘).css(‘color‘,‘green‘); // 选中索引值为1的元素 用的比较多 $(‘li:eq(1)‘).css(‘font-size‘,‘32px‘); // > 1 大于索引值1 $(‘li:gt(1)‘).css(‘font-size‘,‘60px‘); // < 1 小于索引值1 $(‘li:lt(1)‘).css(‘font-size‘,‘10px‘); }) </script> </html>
六、jquery属性选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery属性选择器</title> </head> <body> <div id="box"> <h2 class="title">属性元素器</h2> <p class="p1">我是一个段落</p> <ul> <li id="li1">分手应该体面</li> <li class="what" id="li2">分手应该体面</li> <li class="what">分手应该体面</li> <li class="heihei">分手应该体面</li> </ul> <form action="" method="post"> <input name="username" type=‘text‘ value="1" checked="checked"></input> <input name="username1111" type=‘text‘ value="1"></input> <input name="username2222" type=‘text‘ value="1"></input> <input name="username3333" type=‘text‘ value="1"></input> <button class="btn-default">按钮1</button> <button class="btn-info">按钮1</button> <button class="btn-success">按钮1</button> <button class="btn-danger">按钮1</button> </form> </div> </body> <script src="jquery-3.2.1.js"></script> <script type="text/javascript"> $(function () { //标签名[属性名] 查找所有含有id属性的该标签名的元素 $(‘li[id]‘).css(‘color‘,‘red‘); //匹配给定的属性 是what值得 //[attr=value] 匹配给定的属性是某个特定值的元素 $(‘li[class=what]‘).css(‘font-size‘,‘30px‘); //没有class 也会发生变化 //[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素 $(‘li[class!=what]‘).css(‘font-size‘,‘50px‘); //匹配给定的属性是以某些值开始的元素 $(‘input[name^=username]‘).css(‘background‘,‘gray‘); //匹配给定的属性是以某些值结尾的元素 $(‘input[name$=222]‘).css(‘background‘,‘green‘); //匹配给定的属性是以包含某些值的元素 $(‘button[class*=danger]‘).css(‘background‘,‘orange‘); }) </script> </html>
七、jquery筛选选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery筛选选择器</title> </head> <body> <div id="box"> <p class="p1"> <span>我是第一个span标签</span> <span>我是第二个span标签</span> <span>我是第三个span标签</span> </p> <button>按钮</button> </div> <ul> <li class="list">2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </body> <script src="jquery-3.2.1.js"></script> <script type="text/javascript"> $(function () { //获取第n 个元素 数值从0 开始 // $(‘span:eq(0)‘) $(‘span‘).eq(1).css(‘color‘,‘red‘); //获取一个元素 .first .last . 语法 包含get set $(‘span‘).last().css(‘color‘,‘greenyellow‘); // set console.log($(‘span‘).last()); // get console.log($(‘span‘)); // 对象 对象才有方法 //.parent() 选择父亲元素 console.log($(‘span‘).parent()); $(‘span‘).parent(‘.p1‘).css({‘width‘:‘300px‘,height:‘400px‘,‘background‘:‘red‘}); //.siblings()选择所有的兄弟元素 $(‘.list‘).siblings(‘li‘).css(‘color‘,‘red‘); //.find() //查找所有的后代元素 $(‘div‘).find(‘button‘).css(‘background‘,‘gray‘); }) </script> </html>
八、jquery对象和Dom对象的转换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery对象和Dom对象得转换</title> <style type="text/css"> #box{ width: 200px; height: 200px;background-color: red;} </style> </head> <body> <div id="box"> 天王盖地虎 </div> <button>隐藏</button> </body> <script src="jquery-3.2.1.js"></script> <script type="text/javascript"> // Dom --》 jquery var oDiv = document.getElementById(‘box‘); console.log(oDiv); console.log($(oDiv)); $(oDiv).click(function () { // 回调函数 alert(111) }); // jquery --》 dom console.log($(‘button‘)); console.log($(‘button‘)[0]); console.log($(‘button‘).get(0)); var isShow = true; $(‘button‘)[0].onclick = function () { // alert(222) if(isShow){ $(oDiv).hide(); // this.innerText = ‘显示‘ // console.log($(this)) $(this).text(‘显示‘); isShow = false; } else{ $(oDiv).show(); $(this).text(‘隐藏‘); isShow = true; } } </script> <!-- 总结： DOM对象转换成jquery对象 var box = document.getElementById(‘box‘); console.log($(box)); .click jquery对象转化成DOM对象 第一种方式： $(‘button‘)[0] .onclick 第二种方式： $(‘button‘).get(0) .onclick --> </html>
九、jquery效果 show hide
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery效果显示隐藏</title> <style type="text/css"> #box{width: 100px;height: 100px;border: 1px solid red;display: none;} </style> </head> <body> <div id="box"> </div> <button id="btn">隐藏</button> </body> <script src="jquery-3.2.1.js"></script> <script type="text/javascript"> //.css 控制属性 $(‘#btn‘).click(function () { $(‘#box‘).css(‘display‘,‘block‘); }); //2.jquery 提供了一些方法 show() hide() var isShow = true; $(‘#btn‘).click(function () { if(isShow){ $(‘#box‘).show(‘slow‘,function () { // alert(1) $(this).text(‘盒子出来了‘); isShow = false; $(‘#btn‘).text(‘显示‘); }) }else{ $(‘#box‘).hide(2000,function () { $(this).text(‘‘); isShow = true; $(‘#btn‘).text(‘隐藏‘); }) } }) //3.toggle 开关 如果元素显示则隐藏 反之亦然 $(‘#btn‘).click(function () { $(‘#box‘).toggle(3000,function () { alert(111) }); }) </script> </html>
十、jquery效果 slide
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>slide</title> <style type="text/css"> #box{width: 100px;height: 100px;border: 1px solid red;display: none;} </style> </head> <body> <div id="box"> </div> <button id="btn">隐藏</button> </body> <script src="jquery-3.2.1.js"></script> <script type="text/javascript"> $(function () { $(‘#btn‘).hover(function () { $(‘#box‘).slideDown(2000); },function () { $(‘#box‘).slideUp(3000); }) $(‘#btn‘).click(function () { $(‘#box‘).slideToggle(‘slow‘); }) }) </script> </html>
十一、jquery效果 fade
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>fade</title> <style type="text/css"> #box{width: 100px;height: 100px;border: 1px solid red;background-color: yellow;} </style> </head> <body> <div id="box"> </div> <button id="btn">隐藏</button> </body> <script src="jquery-3.2.1.js"></script> <script type="text/javascript"> $(function () { $(‘#btn‘).click(function () { $(‘#box‘).fadeOut(2000); }); $(‘#box‘).mouseover(function () { $(‘#box‘).fadeOut(2000); }); $(‘#btn‘).mouseout(function () { // $(‘#box‘).fadeIn(3000); $(‘#box‘).fadeTo(2000,0.3) }); $(‘#btn‘).click(function () { $(‘#box‘).fadeToggle(3000); }) }) </script> </html>
十二、jquery效果 animate
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画效果 animate</title> <style type="text/css"> #box{width: 100px;height: 100px;border: 1px solid red;background-color: yellow;position: absolute;} </style> </head> <body> <button id="btn">动画吧</button> <button id="stop">停止吧</button> <div id="box"> hello luffy </div> </body> <script src="jquery-3.2.1.js"></script> <script type="text/javascript"> $(function () { $(‘#btn‘).click(function () { //同时执行 $(‘#box‘).animate({ width:‘200px‘, height:‘300px‘ }) $(‘#box‘).animate({left:‘100px‘,top:‘200px‘}); /* 执行完一个在执行一个 */ // jquery 链式调用 $(‘#box‘).animate({left:‘100px‘,top:‘200px‘}).delay(2000).animate({top:‘400px‘}); $(‘#box‘).animate({left:‘100px‘,top:‘200px‘},5000); }); $(‘#stop‘).click(function () { $(‘#box‘).stop(); }) }) </script> </html>
十三、右下角弹出小广告
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>弹出小广告</title> </head> <body> <div id="box" style="width: 330px;height: 480px; position: absolute;right: 10px;bottom: 0;display: none;"> <img src="广告.png" alt="" style="width: 100%;height: 100%;"> </div> </body> <script src="jquery-3.2.1.js"></script> <script type="text/javascript"> $(function () { //jquery 链式调用 $(‘#box‘).slideDown(‘normal‘).slideUp(‘fast‘).fadeIn(1000).click(function () { $(this).fadeOut(1000); }); }) </script> </html>
以上是关于前端开发 - JQuery - 上的主要内容，如果未能解决你的问题，请参考以下文章