在jQuery中有一个hover()方法，它可以实现模拟css中：hover这个伪类的效果。...css伪类写法如下： a:hover{ color: #ccc; } jQuery中hover()方法如下...jQuery中的hover()方法中一共封装有两个function函数，第一个是在移入时执行， 第二个是在移出时执行的，而当我们像上面一样只写了一个function函数的时候， 它就会默认这个function...函数就是我们想让它在移入和移出时都被执行的函数， 也就相当于将这个函数执行了两遍。...}) 当然，像这些效果的话，其实也有很多别的方法可以完成的， 比如我们也可以使用jQuery中的一些其他鼠标事件（例如：onmouseover、onmouseout、onmouseenter
DIV+CSS clear both清除产生浮动 我们知道有时使用了css float浮动会产生css浮动，这个时候就需要清理清除浮动，我们就用clear样式属性即可实现。...both : 不允许有浮动对象 left : 不允许左边有浮动对象 right : 不允许右边有浮动对象 3、clear解释： 该属性的值指出了不允许有浮动对象的边情况，又对象左边不允许有浮动、...右边不允许有浮动、不允许有浮动对象 4、css结构 div{clear:left} div{clear:right} div{clear:both} 二、div clear常用地方 我们常常用于使用了float...css样式后产生浮动，最常用是使用clear:both清除浮动。...三、css+div案例 DIVCSS5案例说明：这里设置一个css宽度（css width）为500px;盒子，css边框（css border）为红色，css背景（css background）为黑色
WPJAM Basic 在后台使用 Thickbox 实现弹窗效果的，Thickbox 基于 jQuery，虽然很古老，最后一次更新已经是 2014 年了，但是一直非常好用，所以我在各种 WordPress...top: 50%; 将弹窗的左上角设置为屏幕的正中间，然后在要设置弹窗的 margin-left 和 margin-top 为宽度和高度的一半的负值，意思反向移动弹窗的一半，这样刚好居中。...这样每次弹窗的高度变化，都需要重新设置 height 和 margin-left 属性，这样就需要动态去计算，但是有时候弹窗里面还有图片，它的高度也是无法实时获取，这样计算的过程变得异常的麻烦，我为了实现效果...使用 CSS3 transform 实现绝对居中 哈哈，我写了几百行的 JS 代码实现了弹窗绝对居中，为了实现含有图片的弹窗也能撑开，我加了一秒的演示，还做了动画，总之自己觉得自己都棒棒哒，作为一个后端程序员...于是我拿去给前端的大神碟总演示，他看了一眼，说用 CSS 几行就能搞定，真的是猛汉流泪，CSS3 新增了 transform 2D/3D 转换的属性，我们无需知道弹窗的宽度和高度就能实现绝对居中，那么我们只需要定义一下弹窗的最大宽度和高度
选择器 什么是jQuery选择器 基本选择器 层级选择器 过滤选择器 筛选选择器(方法) 元素设置 样式设置 类名设置 属性设置 prop方法 动画 基本动画 滑入滑出 淡入淡出 自定义动画...使用javascript开发过程中，有许多的缺点： 查找元素的方法单一，麻烦。...遍历数组很麻烦，通常要嵌套一大堆的for循环。 有兼容性问题。 想要实现简单的动画效果，也很麻烦 代码冗余。 体验jquery的使用 /* * 1. 查找元素的方法多种多样，非常灵活 * 2..../*1.设置一个样式*/ //两个参数 设置的样式属性,具体样式 $('li').css('color','red'); //传入对象（设置的样式属性:具体样式）...//让id为image的img标签修改src属性为当前点击的a标签的href属性的值 //让id为des的这个p标签的文本设置为当前点击的这个a标签的title属性的值.
真正使用的时候，后台只需要传data到前端，加载到页面就ok了。 这里面依赖了JQuery、XBGMenuTree.css、XBGMenuTree.js。 JQuery文件没什么好说的。...开发扩展其方法时使用$.extend方法，即jQuery.extend(object); $.extend({ add:function(a,b){ return a+b;} ,...开发扩展其方法时使用$.fn.extend方法，即jQuery.fn.extend(object); $.fn.extend({ check:function(){...使用： $("#target").position().left; $("#target").position().top; offset方法： 获取匹配元素集中第一个元素的坐标，获取的是该元素相对于...使用： offset方法： 获取匹配元素集中第一个元素的坐标，获取的是该元素相对于document对象的偏移位置。 使用： （2）CSS 伪元素 ?
7.css3动画如何在动作结束时保持状态不变 使用animation-fill-mode，值为none，表示不改变默认行为；值为forwards，当动画完成后，保持最后一个属性值；backwards，在...中的attr和prop区别 对于html元素本身就带有的固定属性，在处理时，使用prop方法；对于html元素自定义的dom属性时，在处理时，使用attr方法。...42.jQuery中有哪几种常见的选择器 基本选择器；层次选择器；过滤选择器；属性选择器；子元素选择器；表单选择器；内容选择器；可见选择器 43.使用jQuery将页面上所有元素边框设置为2px宽的虚线...FOUC：加载时样式突然变化 原因：由于在渲染HTML时，遇到CSS样式表会重新渲染HTML 样式表没有放到head里面,使用了@import导入样式 解决：尽量把样式表放到body标签上面 104.css...出现间距时的解决方法： 可以使用float属性让img浮动布局 可以通过font-size属性将空白字符大小设置成0 可以将图片的display属性设置成block 146.怎么实现盒模型 Element
// 获取属性 console.log(p.name) 3、什么是属性节点 在编写HTML代码时，在HTML标签中添加的属性就是属性节点。...如果设置的节点不存在，那么会新增该属性。 <!...官方推荐在操作属性节点时，具有 true 和 false 两个属性的属性节点，如 checked, selected 或者 disabled 使用 prop(), 其他的使用 attr() Javascript...获取 例如获取距离左边的偏移位 $('div').offset().left 设置 参数内传入一个对象，对象内写需要设置的属性 Javascript btns[1].onclick = function...IE 浏览器不可使用，需要对 body 进行设置。
实现效果 昨天泽泽分享了一篇有意思的文章：纯CSS根据图片取色设置背景色，主要分享了一个就是div嵌套img的时候，如何实现div的颜色为img中一点的颜色。...使用background的简写属性时：如果写了background-size的值，则必须写background-position的值，否则是没有效果的！！！...实现效果 有了具体的思路了就是如何实现了，因为我这个页面是前后端渲染的动态页面，改PHP代码的话有点麻烦，所以我就考虑从前端入手，使用JQuery来实现： 获取每一个友链链接.board-item； 然后通过显示迭代获取每一个友链中的背景图...操作css()的方法 参考「jQuery」基础 - 01中“1.4.1....JQuery方法.each() 简单来说，显示迭代与隐式迭代最简单的区别就是看给每一个对象设置的值是否相同，不同值的时候（或不同处理） 使用显示迭代，为每个匹配的元素执行不同函数，例如： $('li')
>Red Theme Blue Theme }); 列高度相同 如果使用了两个CSS列，使用此种方式可以是两列的高度相同。...添加这个简单的代码可以节省很多麻烦： $('img').on('error', function () { $(this).prop('src', 'img/broken.png'); }); 即使你的网站没有破碎的图像链接...鼠标悬停(hover)切换 class 属性 假如当用户鼠标悬停在一个可点击的元素上时，你希望改变其效果，下面这段代码可以在其悬停在元素上时添加 class 属性，当用户鼠标离开时，则自动取消该 class...注：直接使用CSS实现该效果可能是更好的解决方案，但你仍然有必要知道该方法。...可以添加 disabled 属性，直到你想启用它时： $('input[type="submit"]').prop('disabled', true); 你要做的就是执行 removeAttr 方法，
jQuery 对DOM的原生方法进行了封装，jQuery 对象只能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 属性和方法。...所以，jQuery 只是对js常用属性和方法进行了封装。 DOM使用原生js方法和属性，jQuery 使用jQuery 属性和方法。...$(“选择器”) //里面选择器直接写 CSS 选择器即可，但是要加引号 获取方式与原生js无异： jQuery 层级选择器 jQuery设置样式的方法： $('div').css('属性', '值...可以使用 css 方法来修改简单元素样式。...该方法有2个属性 left、top 。offset().top 获取距离文档顶部的距离，offset().left 获取距离文档左侧的距离。
［3］ 它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器 ［4］ jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments...DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同样DOM对象也不能使用jQuery里的方法,卵用会报错 约定：如果获取的是jQuery对象,那么在变量前面加上$ var $...四 操作元素(属性，css，文档处理) 4.1 事件 页面载入 ready(fn) // 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。..." />是否可见 //对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。...//对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
append() 向匹配元素集合中的每个元素结尾插入由参数指定的内容 appendTo() 向目标结尾插入匹配元素集合中的每个元素 attr() 设置或返回匹配元素的属性和值 before() 在每个匹配的元素之前插入内容...addClass() 向被选元素添加一个或多个类 removeClass() 从被选元素删除一个或多个类 toggleClass() 对被选元素进行添加/删除类的切换操作 css() 设置或返回样式属性...(){ 加入的内容 }); 简写 jQuery(function($) { // 你可以在这里继续使用$作为别名... }); jQuery 对象中元素的个数，开发中通常要用来计算元素个数，然后做循环等超值...$("img").length;//返回图片标签的个数 设置或返回被选元素的属性值。...$("img").attr("src","test.jpg");//设置图片src属性为test.jpg $("img").attr("src");//返回图片的src属性 从每一个匹配的元素中删除一个属性
列高度相同 如果使用了两个CSS列，使用此种方式可以是两列的高度相同。....鼠标悬停(hover)切换 class 属性 假如当用户鼠标悬停在一个可点击的元素上时，你希望改变其效果，下面这段代码可以在其悬停在元素上时添加 class 属性，当用户鼠标离开时，则自动取消该 class...注：直接使用CSS实现该效果可能是更好的解决方案，但你仍然有必要知道该方法。...可以添加 disabled 属性，直到你想启用它时： $('input[type="submit"]').prop('disabled', true); 你要做的就是执行 removeAttr 方法，并把要移除的属性作为参数传入...() > height) { height = $(this).height(); } }); $columns.height(height); 这段代码会循环一组元素，并设置它们的高度为元素中的最大高
DOM操作的内容 jQuery的DOM DOM转jQuery对象 DOM样式添加 jQuery元素属性设置 toggle切换 编辑html()与text()区别 DOM添加图片 纯dom添加元素 克隆元素...其他标签，如设置图像的标签〈img〉，在文本提取时将忽略这类标签。...jQuery的DOM 使用 jQuery 选择器选择页面中的元素，是为了生成 jQuery 对象，jQuery 对象具有特有的方法和属性，完全能够实现传统 DOM 对象的所有功能 使用jQuery操作元素...css("float", "left"); $("ul li").css("marginLeft", "5%"); }); jQuery元素属性设置 设置单个属性...： jQuery 对象.css(name,value); //其中name为样式名称，value为样式的值 同时设置多个属性： jQuery 对象.css({name:value,name:value
jQuery冲突问题 使用jQuery时， $ 是访问jQuery的标志，但是如果有其他方法与jQuery中的 $冲突时，可以释放$的使用权 ，还可以自定义一个符号来代替 $使用。...对象 1.什么是jQuery对象 jQuery对象是一个伪数组 2.什么是伪数组 有0-length-1的属性，并且有length属性 jQuery的静态方法 each方法和 map方法 jQuery...操作属性节点的方法 1.attr(name|pro|key,val|fn) 作用:获取或者设置属性节点的值 可以传递一个参数，也可以传递两个参数...如果是获取：无论找到多少个元素都只会返回第一个元素指定的属性节点的值 如果是设置：找到多少个元素就会设置多少个元素 如果是设置：如果设置的节点不存在...可以传递一个参数，也可以传递两个参数 如果传递一个参数：代表获取属性节点的值 如果传递啷个参数，代表设置属性节点的值
使用大公司CDN好处： 许多用户在访问其它站点时，已经从百度、新浪、谷歌和微软加载过jQuery。当用户访问我的站点时，会从缓存中加载jQuery，这样可以有效减少加载时间！...ps:params支持多个属性，中间用","隔开，同时属性值（不加引号时）用驼峰标记法：如：margin-left改为marginLeft；属性值加引号按照css写法。 例如： <!...如： $('p').css('font-size':'10px').show().hide(); 第六部分：jQuery HTML 1.获取内容和属性 -- 获取内容： text()：设置或获取所选元素的文本内容...html()：设置或获取所选元素的内容(包括HTML标记) val()：设置或获取表单字段的值 -- 获取属性： attr()：设置或获取属性值 ps1：以上函数不传入参数时是获取；传入参数时是设置...（有参数设置值；无参数获取值）；css有参数：css("propertyname":"value")，建议属性名和属性值都加上引号；如果属性名不加引号，要使用驼峰标记法：如margin-left变为marginLeft
仿佛奇怪的问题总是喜欢找上那些初学者。当我在学习制作网页的时候，经常遇到一些很特别的问题。例如：刚刚添加的样式不起作用、jQuery 的代码老是不起作用等等，这些问题往往是不关注细节导致的。...顺序解决样式冲突问题 当你对一个元素赋予了 background-color 属性，你在其他地方，忘了之前的设置，又对这个元素赋予了一个属性值与之前不同的 background-color 属性。...如果有时候，你真的无法修改加载文件的顺序，那么面对这种情况，你可以使用 CSS 中的 ！important 语法，告诉浏览器要使用这个属性解决冲突。...left； 也可以写两个参数，分别代表上下和左右的外边距。...JavaScript 代码的顺序 JavaScript 文件加载顺序 jQuery 是一个比较常用的 JavaScript 库，通常我们还要配合它强大的插件使用。
一、offset() 作用： 返回被选元素相对于文档（document）的偏移坐标 二、三种情况使用： 1、$().offset() </...：$(selector).offset({top:value,left:value}) // 使用函数设置偏移坐标：$(selector).offset(function(index,currentoffset...top，left属性 else { //position:relative //top:xxx //left:xxx curElem.css...( props ); } } }; 解析： （1）先判断当前元素的 position 的值，没有设置 position 属性的话，默认为 relative，并获取元素的 top...、left 属性的值 （2）返回一个对象 obj，obj 的 top 是参数的 top - 默认偏移（offset）的 top + position 设置的 top（没有设置，默认为0），obj 的 left
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。...[attribute*=value] 匹配给定的属性是以包含某些值的元素 [selector1][selector2][selectorN] 复合属性选择器，需要同时满足多个条件时使用 表单选择器...CSS 1.CSS css（获取和设置匹配元素的样式属性） 111 $('span').css('color') -->获取...$('span').css('color','black') -->设置 $('span').css({'color':'#dddddd','background':'blue'}) --...>设置多个 2.位置 $('p').offset() //元素在当前视口的相对偏移,Object {top: 122, left: 260} $('p').offset().top $('p')
列高度相同 如果使用了两个CSS列，使用此种方式可以是两列的高度相同。...15.鼠标悬停(hover)切换 class 属性 假如当用户鼠标悬停在一个可点击的元素上时，你希望改变其效果，下面这段代码可以在其悬停在元素上时添加 class 属性，当用户鼠标离开时，则自动取消该...注：直接使用CSS实现该效果可能是更好的解决方案，但你仍然有必要知道该方法。...可以添加 disabled 属性，直到你想启用它时： $('input[type="submit"]').prop('disabled', true); 你要做的就是执行 removeAttr 方法...但是如果你希望元素显示时使用第一种效果，而消失时使用第二种效果，则可以这么做： // Fade $('.btn').click(function () { $('.element').fadeToggle
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
