前端- jquery- 总结

发布时间：2023-09-06 02:01责任编辑：苏小强关键词：前端

1、jquery与js的区别

　　（1）javascript的缺点

　　书写繁琐，代码量大　　代码复杂　　动画效果，很难实现。使用定时器 各种操作和处理

　　(2) JavaScript和jquery的定义

Javascript是一门编程语言，我们用它来编写客户端浏览器脚本。
jQuery是javascript的一个库，包含多个可重用的函数，用来辅助我们简化javascript开发
jQuery能做的javascipt都能做到，而javascript能做的事情，jQuery不一定能做到

　　注意：一般情况下，是库的文件，该库中都会抛出来构造函数或者对象，如果是构造函数，那么使用new关键字创建对象，如果是对象直接调用属性和方法

　　（3）区别

 # 1 DOM文档加载的步骤 ???????1.解析HTML结构。 ???????2.加载外部脚本和样式表文件。 ???????3.解析并执行脚本代码。 ???????4.DOM树构建完成。 ???????????$(document).ready(function(){}) / $(function(){}) ???????5.加载图片等外部文件。 ???????6.页面加载完毕。 ???????????window.onload()#2 执行时间不同window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。#3 编写个数不同window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个$(document).ready()可以同时编写多个，并且都可以得到执行#4 简化写法不同window.onload没有简化写法$(document).ready(function(){})可以简写成$(function(){});

　　（4）juqery的引入与使用

 ???<script src="jquery-3.2.1.js"></script> ???<script type="text/javascript"> ???????$(document).ready(function () { ???????}); ???????$(function () { ???????}) ???</script>

2、jquery选择器

　　1.基本选择器

 ???????//1.标签选择器 ???????$($(‘h1‘)[0]).click(function () { ???????????$(this).css(‘background-color‘,‘red‘); ???????????$(this).css(‘font-size‘,‘22px‘); ???????????$(this).css(‘line-height‘,‘22px‘); ???????}); ???????//2.id选择器 ???????$(‘#old‘).click(function () { ???????????$(this).css(‘color‘,‘green‘); ???????}); ???????//3.class选择器 ???????$(‘.box1‘).click(function () { ???????????$(this).css(‘font-size‘,‘30px‘); ???????}); ???????//4.通配符选择器 * 使用不是很频繁 ???????//$(‘*‘).html(‘‘); ?清空整个页面的dom元素

　　 2.层级选择器

 ?????//1.后代选择器 ???????$(‘ul p‘).click(function () { ???????????$(this).css(‘color‘,‘red‘) ???????}); ???????//2.子代选择器 ???????$(‘ul>li‘).click(function () { ???????????$(this).css(‘font-size‘,‘22px‘) ???????}); ???????//3.毗邻选择器 匹配该元素紧邻的下一个兄弟元素 ???????$(‘ul+h2‘).click(function () { ???????????$(this).css(‘background-color‘,‘red‘) ???????}); ???????//4.兄弟选择器， ?匹配的元素后面的所有兄弟元素 ???????$(‘ul~h3‘).click(function () { ???????????$(this).css(‘color‘,‘blue‘); ???????});

　　3.基本过滤选择器

 ???????//1.获取first last元素 ???????$(‘li:first‘).css(‘font-size‘,‘43px‘); ???????$(‘li:last‘).css(‘font-size‘,‘43px‘); ???????//2.eq gt lt ??选中索引值为1的元素 * ?，大于，小于 ???????$(‘li:eq(1)‘).css(‘font-size‘,‘43px‘); ???????$(‘li:gt(1)‘).css(‘font-size‘,‘13px‘); ???????$(‘li:lt(1)‘).css(‘font-size‘,‘23px‘); ???????//3.奇数偶数 ???????$(‘li:odd‘).css(‘background-color‘,‘pink‘); ???????$(‘li:even‘).css(‘background-color‘,‘orange‘);

　　4.属性选择器

 ???????//1. 标签名[属性名] ?查找所有含有id属性的该标签签名的元素 ???????$(‘li[id]‘).css(‘color‘,‘red‘); ???????//2. 匹配给定的属性值是active的元素 ???????$(‘li[class=active]‘).css(‘color‘,‘red‘); ???????//3. ???????$(‘li[class^=a]‘).css(‘color‘,‘red‘); ???????//4. ???????$(‘li[class$=e]‘).css(); ???????//5. 匹配给定的属性是以包含某些值的元素 ???????$(‘li[class*=btn]‘).css()

 ???解释：
 ???????标签名[属性名]，查找所有含有id属性的该标签名的元素
 ???????匹配给定的属性 是what值 [attr=value] 匹配给定的属性是某个特定值的元素
 ???????没有class 也会发生变化，[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
 ???????匹配给定的属性是以某些值开始的元素 ^
 ???????匹配给定的属性是以某些值结尾的元素 $
 ???????匹配给定的属性是以包含某些值的元素 *

　5.筛选选择器/筛选方法

　　（1）each遍历方法

1.each 遍历 ???$(‘ul‘).children().each(function (index,ele) { ???????// console.log(index,ele); ???????var isDanger = $(this).hasClass(‘danger‘); ???????if(isDanger){ ???????????$(this).css(‘color‘,‘red‘); ???????}else{ ???????????$(this).css(‘font-size‘,‘28px‘); ???????} ???});

　　（2）父兄子

 ???$($(‘h1‘)[2]).click(function () { ???????//1.获取父级节点 ???????$(this).parent(); ??//一个父亲节点 ???????$(this).parents(); ?//所有父辈节点 ???????//2.获取兄弟节点 ???????$(this).siblings(); ?//所有的兄弟节点 ???????$(this).prev(); ?????//前一个兄弟节点 ???????$(this).prevAll(); ??//all 前一个兄弟节点 ???????$(this).next(); ?????//下一个兄弟节点 ???????$(this).nextAll(); ??//all 下一个兄弟节点 ???????//3.获取儿子，后代节点 ???????$(this).parent().children(‘h1‘).css(‘font-size‘,‘22px‘); ??//所有的儿子节点 ???????$(this).parent().find(‘h1‘).css(‘color‘,‘red‘); ??????????//后代节点 ???????//4.指定eq ?last ?first ???????$(this).parent().children().eq(2); ???????$(this).parent().children().first(); ???????$(this).parent().children().last(); ???????//5.指定标签 h1 ???????$(this).parent().children(‘h1‘); ???????$(this).parents(‘body‘).children(‘h1‘); ???})

 ??解释：
 ???????获取第n个元素 数值从0开始 .eq()
 ???????获取第一个元素 .first()
 ???????获取最后一个元素 .last()
 ???????获取父亲元素 .parent()
 ???????选择所有的兄弟元素 .siblings()
 ???????查找所有的后代元素 .find()

3、jquery对象和Dom对象转换

#Dom对象--> jquery对象 ???var box = document.getElementById(‘box‘); ???console.log($(box));#jquery对象--> DOM对象 ???$(‘button‘)[0] ???$(‘button‘).get(0)#注： ???Dom对象 ????box.onclick = function(){} ???jquery对象 ?$(box).click(function(){})

4、效果

　1. 隐藏显示 hide show toggle

<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style type="text/css"> ???????#box1 { ???????????border: 1px solid red; ???????????width: 70px; ???????????height: 70px; ???????} ???</style></head><body><div id="box1"></div><input type="button" id="btn" value="隐藏"><script src="jquery-3.2.1.min.js"></script></body><script type="text/javascript"> ???//隐藏显示 hide ??show ?toggle ???$(function () { ???$(‘#btn‘).click(function () {// ???????$(this).prev().toggle(); ???}); ???????var flag = 1 ???????$(‘#btn‘).click(function () { ???????????if (flag) { ???????????????$(this).prev().hide(3000) ???????????????$(this).val(‘显示‘); ???????????????flag = 0 ???????????}else{ ???????????????$(this).prev().show(2000) ???????????????$(this).val(‘隐藏‘) ???????????????flag = 1 ???????????} ???????}) ???})</script></html>

　　2. 盒子变高变低 slideUp slideDown slideToggle

<script type="text/javascript"> ???// 盒子变高 slideUp ?slideDown ?slideToggle ???$(function () { ???????var flag = 1 ???????$(‘#btn‘).click(function () { ???????????if (flag) { ???????????????$(this).prev().slideUp(1000) ???????????????$(this).val(‘变高‘) ???????????????flag = 0 ???????????} else { ???????????????$(this).prev().slideDown(1000) ???????????????$(this).val(‘变低‘) ???????????????flag = 1 ???????????} ???????????// $(this).prev().slideToggle(3000) ???????}) ???})</script>

　　3.淡入淡出 fadeIn fadeOut fadeTo fadeToggle

<script type="text/javascript"> ???//淡入淡出 fadeIn fadeOut fadeTo fadeToggle ???$(function () { ???????var flag = 1 ???????$(‘#btn‘).click(function () { ???????????if (flag) { ???????????????$(this).prev().fadeOut(3000) ???????????????$(this).val(‘淡入‘) ???????????????flag = 0 ???????????} else { ???????????????$(this).prev().fadeIn(2000) ???????????????$(this).val(‘淡出‘) ???????????????flag = 1 ???????????} ???????????//$(this).prev().fadeToggle() ???????????//$(this).prev().fadeTo(3000,0.3) ???????}) ???})</script>

　　4、动画 animate delay stop

<script type="text/javascript"> ???$(function () { ???????//动画 animate ?delay stop ???????$(‘#btn‘).click(function () { ???????????$(this).prev().animate({‘width‘:‘200px‘,‘height‘:‘200px‘},3000) ???????????$(this).prev().animate({‘margin-left‘:‘20px‘}).delay(200).animate({‘margin-top‘:‘30px‘}) ???????}); ???????$(‘#btn1‘).click(function () { ???????????$(this).prevAll(‘div‘).stop() ???????}) ???})</script>

5、jquery的属性操作

jquery的属性操作模块分为四个部分：html属性操作，dom属性操作，类样式操作和值操作。
 ???html属性操作：是对html文档中的属性进行读取，设置和移除操作。比如attr()、removeAttr()
 ???DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。比如prop()、removeProp()
 ???类样式操作：是指对DOM属性className进行添加，移除操作。比如addClass()、removeClass()、toggleClass()
 ???值操作：是对DOM属性value进行读取和设置操作。比如html()、text()、val():用于表单控件中获取值，比如input textarea select等等

<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>单个标签 修改css属性</title> ???<style type="text/css"> ???????.active { ???????????background-color: pink; ???????} ???????.box1 { ???????????color: orange; ???????} ???????.font1 { ???????????font-size: 22px; ???????} ???</style></head><body><h1 id="Luffycity" class="box1">路飞学城</h1><input type="button" id="btn" value="点击"><h2 id="oldBoy">老男孩</h2><script src="jquery-3.2.1.min.js"></script></body><script type="text/javascript"> ???$(function () { ???????$("#Luffycity").click(function () {//1. html属性操作 ?attr() ???????????//1.1 获取标签的 各种属性值 ： ??????????attr() 如果有1个参数，表示获取值 ???????????$(this).attr(‘id‘); ???????????$(this).attr(‘class‘); ???????????$(this).attr(‘title‘); ???????????//1.2 ?设置标签的属性值class id name： ??attr() 如果有2个参数，表示设置值 ???????????$(this).attr(‘class‘, ‘active‘); ???????????$(this).attr({‘id‘: ‘box2‘, ‘name‘: ‘name11‘}); ?//如果设置多个类名，不能使用attr ???????????//1.3 ?删除1个或多个属性 ???????????$(this).removeAttr(‘id‘); ???????????$(this).removeAttr(‘name title‘);// 2、DOM属性操作 ????prop ?可以设置没有的属性 ????????????????//attr 只能操作标签自带的属性， ???????????//2.1 获取该元素的class值 ???????????$(this).prop(‘class‘); ???????????//2.2 设置值 ???????????$(this).prop({‘title‘: ‘img1‘, ‘title22‘: ‘active‘}); ???????????//2.3 删除dom对象的title属性 ???????????$(this).removeProp(‘title‘, ‘title2‘);// 3、类样式操作 ?addClass() removeClass() ?toggleClass（）添加类，删除类 ???????????//3.1 添加一个或多个 class ???????????$(this).addClass(‘box1‘); ???????????$(this).addClass(‘box1 font1‘); ?//添加多个 ???????????//3.2 删除一个或多个class ???????????$(this).removeClass(‘font1‘); ???????????$(this).removeClass(); ?//移除所有的 ???????????//3.3.反复添加删除class属性值 ???????????$(this).toggleClass(‘active‘);///4、值操作 ???????????// 4.1 获取值 ???????????$(this).text(); ?//获取标签的text ?路飞学城 ???????????$(this).html(); ?//获取标签的里面的html 路飞学城 ???????????$("#btn").val(); ?//获取input标签的 val 点击 ???????????//4.2 设置值 ???????????$(this).html(‘路飞学城2‘); ???????????$(this).text(‘路飞学城22‘); ???????????$(this).html("<span>我是一个span</span>"); ???????????$("#btn").val(‘设置了value‘); ??//表单控件使用的一个方法 ???????}); ???}) ?</script></html>

6、from表单中的操作

<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style type="text/css"> ???????div { ???????????margin: 20px; ???????} ???</style></head><body><div> ???<input type="radio" value="1" name="sex">男 ???<input type="radio" value="2" name="sex" checked>女 ???<input type="radio" value="3" name="sex">other</div><div> ???<input type="checkbox" name="hobby" value="11" checked>game ???<input type="checkbox" name="hobby" value="12" checked>sing ???<input type="checkbox" name="hobby" value="13">book</div><div> ???username:<input type="text" name="username" placeholder="请输入用户名"><br> ???password:<input type="password" name="password" placeholder="请输入密码"></div><div> ???<button type="reset">重置</button> ???<button type="submit">提交</button> ???<button type="button">登录</button></div><div> ???<select name="city" id="city" multiple> ???????<option value="21">shanghai</option> ???????<option value="22" selected>guangzhou</option> ???????<option value="23" selected>beijing</option> ???????<option value="24">xian</option> ???</select></div><div> ???<textarea name="desc" id="desc" cols="30" rows="10"></textarea> ???<textarea name="desc" id="desc1" cols="30" rows="10"></textarea> ???<textarea name="desc" id="desc2" cols="30" rows="10"></textarea></div><script src="./jquery-3.2.1.min.js"></script></body><script type="text/javascript"> ???$(function () { ???????//1.单选框 type=radio ????设置,获取 ??value ???????$("input[type=radio]").val([‘0‘]); ???????console.log($(‘input[type=radio]:checked‘).val()); ???????$(‘input[type=radio]‘).get(1).checked = true ???//radio第二个框设定为checked ???????//2.复选框 type=checkbox ??仅仅获取第一个checked ???????$(‘input[type=checkbox]‘).val([‘12‘, ‘13‘]); ???????console.log($("input[type=checkbox]:checked").val()); ???????$.each($(‘input[type="checkbox"]:checked‘), function () { ??// $.each循环下 ???????????console.log($(this).val()) ???????}) ???????$(‘input[type=checkbox]‘).get(1).checked = true ???????//3.下拉列表select option ???????$(‘select‘).val([‘23‘]); ??????????????????????//设置 ?必须用select ???????$(‘select‘).val([‘21‘, ‘22‘, ‘23‘, ‘24‘]) ???????$(‘select[name=city]‘).val([‘21‘]) ???????console.log($(‘#city option:selected‘).val()); ?//获取值 ???????console.log($(‘select[id=city]:selected‘).text()) ???????console.log($(‘:selected‘).text()) ???????console.log($(‘select>option:selected‘).eq(1).text()) ???????//4. 文本type=text ???????$(‘input[type=text]‘).val(‘试试就是说‘) ???????console.log($(‘input[type=text]‘).val()) ???????//5.button按钮 ???????$(‘button[type=reset]‘).html(‘我要重置了‘) ???????//6.文本框，禁用输入字段 ???????$("textarea[id=‘desc‘]").attr(‘disabled‘, true) ???????$("textarea[id=‘desc1‘]").attr(‘readonly‘, true) ???})</script></html>

7、jquery的文档操作

　　插入操作

<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>节点的增删改查</title></head><body><h1>路飞学城0</h1><script src="jquery-3.2.1.min.js"></script></body><script type="text/javascript">$(function () { ???$($(‘h1‘)[0]).click(function () { ???????//1.创建新的标签 ???????var oH2 = document.createElement(‘h2‘); ???????var btn = document.createElement(‘input‘); ???????//2.给新标签inner 新的html text值 ???????$(oH2).html(‘路飞学城2‘); ???????$(oH2).text(‘路飞学城22‘); ???????$(oH2).html("<span>我是一个span</span>"); ???????$(btn).val(‘设置了value‘); ???????//3.给新标签添加属性值 id title class name ???????$(oH2).attr(‘id‘,‘Luffycity2‘); ???????$(oH2).attr({‘title‘:‘luff‘,‘class‘:‘active‘,‘name‘:‘luff‘}); ???????$(oH2).addClass(‘active2‘); ???????//插入操作 ???????//4.父子add的各种方式 append prepend ???????$(this).parent().append(oH2); ?//追加到子元素的后面 ???????$(oH2).appendTo($(this).parent()); ???????$(this).parent().prepend(oH2); ?//添加到子元素的最前面 ???????$(oH2).prependTo($(this).parent()); ???????//5.同级兄弟 add元素 before after ???????$(this).after(oH2); ???????$(oH2).insertAfter($(this)); ???????$(this).before(oH2); ???????$(oH2).insertBefore($(this)); ???})})</script></html>

　　复制clone(true),替换，删除

<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title></head><body><h1 id="Luffycity1">路飞学城1</h1><input type="button" id="btn" value="复制"><br><input type="button" id="btn2" value="替换"><input type="text" id="username" value="文本框"><br><input type="button" id="btn3" value="empty"><input type="button" id="btn4" value="remove"><input type="button" id="btn5" value="detach"><ul> ???<li>1</li> ???<li>2</li> ???<li>3</li></ul><script src="jquery-3.2.1.min.js"></script></body><script type="text/javascript"> ???$(function () {// 复制操作： ???????$(‘#btn‘).click(function () { ???????????$(‘#Luffycity1‘).after($(‘#Luffycity1‘).clone(true)); ?// 2.clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力) ???????????$(‘#Luffycity1‘).after($(‘#Luffycity1‘).clone()); ??// 1.clone()：克隆匹配的DOM元素并且选中这些克隆的副本。 ???????});// 替换操作 ???????$(‘#btn2‘).click(function () { ??????????????$(‘#username‘).replaceWith(‘<span>我是新的文本</span>‘) ?// 替换成指定的HTML或DOM元素。 ???????????$(‘<br/><hr/><button>按钮</button>‘).replaceAll(‘h4‘) ?// 替换掉所有 selector匹配到的元素 ???????});//删除操作 ???????//1. empty() 只是清空了被选的内容 ???????$(‘#btn3‘).click(function () { ???????????$(‘ul‘).empty(); ???????}); ???????//2.remove() ?被选元素也被删掉了，事件就没有了，什么都没有了 ???????$(‘#btn4‘).click(function () { ???????????$(‘ul‘).remove(); ???????}); ???????//3.detach() 移除匹配的节点元素 ?删除节点后，事件会保留 ???????$(‘#btn5‘).click(function () { ???????????var btn5 = $(this).detach(); ???????????console.log($(btn5)); ???????????$(‘ul‘).append($(btn5)); ???????}); ????????})</script></html>

8、jquery的位置属性

<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style type="text/css"> ???????* { ???????????margin: 0; ???????????padding: 0; ???????} ???????#box1 { ???????????position: relative; ???????????width: 200px; ???????????height: 200px; ???????????border: 5px solid red; ???????????padding: 10px 5px; ???????} ???????p { ???????????position: absolute; ???????????top: 30px; ???????????left: 30px; ???????} ???????#box2 { ???????????width: 200px; ???????????height: 200px; ???????????margin: 0 auto; ???????????border: 1px solid deepskyblue; ???????} ???</style></head><body><div id="box1"> ???<p>我是一个段落标签</p></div><button id="btn">动画吧</button><div id="box2"></div><script src="jquery-3.2.1.min.js"></script></body><script type="text/javascript"> ???$(function () {//1.相对于父级的偏移量 ?position() ?position().left ?position().top ???????console.log($(‘p‘).position()); ???????console.log($(‘p‘).position().left); ???????console.log($(‘p‘).position().top); ???????var offSetTop = $(‘p‘).position().top + 50 + ‘px‘ ???????$(‘#btn‘).click(function () { ???????????$(this).prev().children(‘p‘).animate({‘top‘: offSetTop,}, 2000) ???????})//2.相对滚动条的位置信息 ?scroll ?scrollTop ?scrollLeft ???????console.log($(document).scroll()) ???????console.log($(document).scrollTop()) ?//滚动条距离顶部100px ???????console.log($(document).scrollLeft()) ???????//监听文档滚动条滚动 ???????$(document).scroll(function () { ???????????$(document).scrollTop() > 100 ? $(‘#gotop‘).show() : $(‘#gotop‘).hide() ???????}) ???????$(‘#gotop‘).click(function () { ???????????$(‘html,body‘).animate({scrollTop: ‘0‘}, 2000) ???????})//3.在当前视口的相对偏移 ?相对于浏览器 ?offset offset().top ?offset().left ???????console.log($(‘p‘).offset()) ???????console.log($(‘#box1‘).offset()) ???????console.log($(‘p‘).offset().top) ?// 30px+1px ???????console.log($("p").offset().left)//4.获取元素的内容区域content 的宽高 width ?height ???????console.log($(‘#box1‘).width()) ???????console.log($(‘#box1‘).height()) ???????//设置 ???????$(‘#box1‘).width(400)//5.该元素 的内部宽高 innerHeight= content+padding ???????console.log($(‘#box1‘).innerHeight()) ?// 200px + padding*2 ???????console.log($(‘#box1‘).innerWidth())

//6.外部高度 outerWidth ?outerHeight ???????console.log($(‘#box1‘).outerHeight()) ?// 200px + padding*2 + border*2 ???????console.log($(‘#box1‘).outerWidth()) ???})</script></html>