一、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 - 上
原文地址：https://www.cnblogs.com/alice-bj/p/9031554.html