总结了一个不规则图片不变形的解决方案： 注：先写一个长 300px 宽 200px 带边框的 div ，图片接近方形，实现图片正常显示不变形。...div class="box box1"> ... div> 1、背景图法 通过背景图的 background-position 属性，可以使图片居中显示。...2、object-fit object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框，不支持IE。...可用属性： fill 不保持纵横比缩放图片，使图片完全适应 contain 保持纵横比缩放图片，使图片的长边能完全显示出来 cover 保持纵横比缩放图片，只保证图片的短边能完全显示出来 none 保持图片宽高不变... = "100%"; } } 5、jQuery方法 也可以兼容多版本浏览器，需要 jQuery 加持。
而jQuery3修复了大量的bug，增加了新的方法，同时移除了一些接口，并修改了少量接口的行为，不1和2是不同的API。 更轻更快：2.0版本文件与1.9.1相比小了12%。...在jQuery中使用CSS匹配(CSS like)来进行元素指定，比其他JavaScript库都简单，这也正是jQuery在网页设计人员中大受欢迎的理由了。...我们使用术语jQuery包装器或者包装集(wrapped set)，来指能够在其上用jQuery定义的方法去操作的、匹配元素的集合。.../获取p节点的高度 $("p").width(); //获取p节点的宽度 $("p:first").innerHeight() //获取第一个匹配节点内部区域高度(包括补白、不包括边框) $("p:first...").innerWidth() //获取第一个匹配节点内部区域宽度(包括补白、不包括边框) $("p:first").outerHeight() //匹配节点外部高度(默认包括补白和边框) $("p:
，jquery提供了ready方法解决这个问题，它的速度比原生的 window.onload 更快。...(){ // 内部的this指的是原生对象 // 使用jquery对象用 $(this) }) 获取元素的索引值 有时候需要获得匹配元素相对于其同胞元素的索引位置，此时可以用index.../跳到div1元素平级的所有兄弟元素 .children('ul') //这些兄弟元素中的ul子元素 .slideUp('fast'); //高度实际高度变换到零来隐藏ul元素 jquery属性操作...与JavaScript对象写法不同的是，json对象的属性名称和字符串值需要用双引号引起来，用单引号或者不用引号会导致读取数据错误。...ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行，从而实现异步。
来包围该元素 $("元素").wrap(element); 用element来包围该元素 Traversing： add(expr)当前匹配元素集合增加新的匹配元素集合‘expr'，形成新的匹配元素集合...，形成新的元素集合 contains(str)匹配集合中包含str这个变量文本的元素集合，返回匹配元素集合 end()用于返回到调用find() 或 parents() 函数（或者其它遍历函数）之前的...JQuery Traversing 方法说明 eq( index ) 从匹配的元素集合中取得一个指定位置的元素，index从0开始 filter( expr ) 返回与指定表达式匹配的元素集合，可以使用...add( expr ) 把与表达式匹配的元素添加到jQuery对象中。 children( [expr] ) 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。...height( ) 取得当前第一匹配的元素的高度值， height( val ) 为每个匹配的元素设置指定的高度值。
DOM对象与jQuery对象是两类不同的对象,所以: DOM对象不能调用jQuery的方法; jQuery对象也不能调用DOM对象的方法; 但是DOM对象和jQuery对象之间可以相互转换...用jQuery选择器选择一个对象,会有多种不同的方法可供选择. 1.基本选择器(跟CSS选择器用法一模一样): 名称 用法(示例) 描述 ID选择器...not() 返回不匹配标准的所有元素.提示:not()方法与filter()相反.... (index: " + i + ")"; }); }); 1.3 width方法与height方法 设置或者获取高度 带参数表示设置高度:$(selector...$(document).height();获取页面高度 1.4 scrollTop与scrollLeft: 设置或者获取垂直滚动条的位置 获取页面被卷曲的高度: $(window
map(callback) 将jQuery对象中的一组元素利用callback方法转换其值，然后添加到一个jQuery数组中。 not(expr) 从匹配的元素集合中删除与指定的表达式匹配的元素。...slice(start, [end]) 从匹配元素集合中取得一个子集，和内建的数组的slice方法相同。 add(expr) 把与表达式匹配的元素添加到jQuery对象中。...height() 取得当前第一匹配的元素的高度值， height(val) 为每个匹配的元素设置指定的高度值。...有如下两种方法： $("div").eq(2).html(); //调用jquery对象的方法 $("div").get(2).innerHTML; //调用dom的方法属性 4、同一函数实现set和...这是jquery实现的继承方式。
（常见的滚动条） 可以用::-webkit-scrollbar来实现： /*设置滚动条的宽度*/ ::-webkit-scrollbar{ width: 10px; } /*将轨道改为蓝色...在构建响应式组件的时候，组件的高度与宽度的不协调经常会导致视频和图像会出现拉伸的情况，影响读者的观感，因此我们需要设置组件的纵横比属性： .example{ /* 设置纵横比 */ aspect-ratio...，我们将自动得到等于125像素的高度，以保持长宽比。 ...（显示效果） 4.页面平滑的滚动 通过代码实现平滑地从一个页面跳转到另一个页面： div class="image"\> div class="effect"> backdrop-filter: blur(5px); div> div> <style
对象，get返回的是所匹配的dom对象，所有取$("p").eq(1)对象的内容用jQuery方法html()，而取$("p").get(1)的内容用innerHTML index(obj) 说明：返回对象索引...匹配对象中其它兄弟级别的对象 one div> two div> jQuery jQuery...slideDown(speeds) 将匹配对象的高度由0以指定速率平滑的变化到正常！...slideDown(speeds,callback) 将匹配对象的高度由0变化到正常！...变化结束后执行函数callback slideUp("slow") slideUp(speed, callback) 匹配对象的高度由正常变化到0 slideToggle("slow") 如果匹配对象的高度正常则逐渐变化到
2.5 包裹节点wrap(html|element|fn)方法 概述： 把所有匹配的元素用其他元素的结构化标记包裹起来。...fn: 生成包裹结构的一个函数,返回包裹结构html 返回值:jQuery包装对象 实例 // 把所有的段落用一个新创建的div包裹起来 $("p").wrap("div class...这于 .wrap()是不同的，.wrap()为每一个匹配的元素都包裹一次。这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质。...selector),用匹配的元素替换掉所有 selector匹配到的元素。...([val|fn]) 概述 取得匹配元素当前计算的高度值（px）。
"的div元素的jQuery对象 var div = $("div.foo"); // 没有传入value参数，返回第一个匹配元素的value元素 var fontSize = div.css("font-size...$("div") // 返回一个匹配所有div元素的jQuery对象 .find("ul") // 返回匹配这些div元素中的所有后代ul元素的jQuery对象 .addClass("menu") /...与此不同的是，jQuery在匹配不到对应元素时将返回一个空的jQuery对象，我们仍然可以调用jQuery对象的方法，而且并不会报错。因为jQuery会智能地处理这种情况。...中Ajax的底层实现，其它Ajax请求方法都是基于该方法实现的。...]; var resultArray2 = $.grep( array2, function(value, i){ // 注意参数顺序与each()不同 // value 表示当前迭代的数组元素
1.1 jquery 选择器 还记到大明湖畔（CSS）的夏雨荷（选择器）吗？选择器可以快速定位到元素并为其应用样式效果。jquery 选择器的选择规则与 CSS 相同，只是目的是为其添加操作。...(){ // 内部的 this 指的是原生对象 ... // 使用 jquery 对象用 $(this) }; js 对象与 jquery 对象有些许不同，jquery 对象是对 js 对象的封装...如下： $('#div1') // id为div1的元素 .children('ul') //该元素下面的ul子元素 .slideDown('fast') //高度从零变到实际高度来显示ul元素 .parent...('fast'); //高度实际高度变换到零来隐藏ul元素 换行是为了加注释解释每一个方法，其实它为一行。...ajax 技术的原理是实例化 xmlhttp 对象，使用此对象与后台通信。jquery 将它封装成了一个函数 $.ajax()，我们可以直接用这个函数来执行ajax请求。 此部分超级重要！超级重要！
jQuery 学习了jQuery感觉是真的很好用，感谢那些参与代码编写的大佬们 1.1 初认识 1.1.1 入口函数 作用相当于onload事件,等dom结构渲染完毕即可执行 但又有所不同 onload...来代替，相当于原生js中的window 1.1.3 jQuery 对象和 DOM 对象 用原生 JS 获取来的对象是 DOM 对象 jQuery 方法获取的元素是 jQuery 对象。...取得匹配元素宽度和高度值 只包括width / height innerWidth() /innerHeight() 取得匹配元素宽度和高度值 包括 padding outerWidth() / outerHeight...() 取得匹配元素宽度和高度值 包括padding，border outerWidth(true) / outerHeight(true) 取得匹配元素宽度和高度值 包括 padding、border、...margin 返回值是数字型的 如果参数是数字，则修改样式 参数不写单位 4.4.2 jQuery 位置操作 offset()设置获取元素偏移 获取的位置是相对于文档的偏移坐标，与父级没有关系 传入的参数是一个对象
jquery是一个函数库，一个js文件，页面用script标签引入这个js文件就可以使用。...，jquery提供了ready方法解决这个问题，它的速度比原生的 window.onload 更快。...(function(){ // 内部的this指的是原生对象 // 使用jquery对象用 $(this) }) 获取元素的索引值 有时候需要获得匹配元素相对于其同胞元素的索引位置...对象不同的是，json数据格式的属性名称和字符串值需要用双引号引起来，用单引号或者不用引号会导致读取数据错误。...ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行，从而实现异步。
jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。 Ajax操作支持。...的click事件绑定）： 自定义模态框，使用jQuery实现弹出和隐藏功能。...$("div").find("p") 等价于$("div p") 筛选 筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。....last() // 获取匹配的最后一个元素 .not() // 从匹配元素的集合中删除与指定表达式匹配的元素 .has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。...，其实就是控制你的标签高度，如果你写$('#di').slideUp(5000)；意思就是5秒内把你的高度变为0//还有如果你直接操作的是img标签和操作img标签的父级标签，两个的效果是不同的 slideUp
1： jQuery $(document).ready()与window.onload的区别？...Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法，不过与window.onload方法还是有区别的。...6. jQuery 中 data 函数的作用 作用：在匹配元素上存储任意相关数据， 或 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。...Paste_Image.png 7：用jQuery方法实现一些功能 1.给元素 $node 添加 class active，给元素 $noed 删除 class active $node.addClass...9.在$ct里设置 htmldiv class="btn">div> $ct.html('div class="btn">div>') 10.获取、设置$node 的宽度、高度(分别不包括内边距
用插件和方法来扩展 jQuery 非常强大，把最聪明的功能封装到插件中可以为你及团队节省大量开发时间。...); -- var tallest = $('div').maxHeight(); // 返回最高 div 的高度 这个简单的插件利用 .height() 来返回页面中最高 div 的高度 保持 chainability...，所以 jQuery 集合可以被其它方法操作，例如 .css()。...); -- $('div').tooltip({ 'location' : 'left' }); 在本例中，用给定选项调用 tooltip 插件后， 默认的 location 设置被覆盖为...jQuery data 方法是针对每个元素跟踪变量的好办法。不过最好能用单一对象容纳所有变量并用单一名称空间访问此对象，而不是分别跟踪一堆不同名字的数据。
Aspect Ratio 在构建响应式组件时，经常检查高度和宽度可能会令人头疼，因为你必须保持纵横比。有时候视频和图片可能会显得拉伸。 这就是为什么我们可以使用纵横比属性。...一旦设置了纵横比值，然后再设置宽度，高度就会自动设置。或者反之亦然。.../* class为example的元素 / .example{ / 设置纵横比 / aspect-ratio: 1 / .25; / 设置宽度后，高度会自动设置 / width: 200px...; / 边框不是必需的，但这里只是为了看效果而添加的 */ border: solid black 1px; } 现在，我们设置了宽度，高度将自动设置为 50 像素，以保持纵横比。...我们可以用 gradient 。
跟jQuery的选择器和事件配合起来，可以实现很多很绚的效果，而且简单易用兼容性好。 1. 显示动画 jQuery的原型上的方法 show()方法可以实现让DOM元素进行显示动画。...下滑显示（slideDown) 语法：slideUp([speed,[easing],[fn]]) 通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。...这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。 参数跟show保持一致，不再赘述。...折叠隐藏效果（slideUp) 语法： slideUp([speed,[easing],[fn]]) 通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。...这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
从Google Code加载jQueryGoogle Code上已经托管了多种JavaScript类库，从Google Code上加载jQuery比直接从你的服务器加载更有优势。...尽可能使用ID而不是class jQuery利用classes进行DOM元素选择操作与通过ID进行选择一样容易，因此与之前相比更自由的使用classes进行元素选择操作很有吸引力。...了解事件代理与之前相比，jQuery能够更容易得向DOM元素无缝添加事件。这是很棒的特性，然而向元素添加太多的事件是效率很差的。在很多情况下事件代理允许你用少量的事件实现同样的目的。...jQuery提供了内置的data()方法，与DOM元素不同的是，它可以用来存储key/value类型的数据。...而这在jQuery中很容易实现。 所有你要做的就是在IMG上使用.load()方法，在其中添加一个回调函数。
云服务器
ICP备案
云直播
即时通信 IM
实时音视频
