娱乐网站设计与实现,懒人手机网站,山东淄博网站建设,深圳施工勘察建设局网站一 jQuery 简介 官网#xff1a;www.jquery.com 口号#xff1a;写更少的代码#xff0c;做更多的事情 jQuery 是一个快速、小型的、特性很多的JS库#xff0c;它把很多事儿都变得简单。jQuery是免费的、开源的。 jQuery 是 DOM 编程领域的霸主#xff0c;极大的简化了原生…一 jQuery 简介 官网www.jquery.com 口号写更少的代码做更多的事情 jQuery 是一个快速、小型的、特性很多的JS库它把很多事儿都变得简单。jQuery是免费的、开源的。 jQuery 是 DOM 编程领域的霸主极大的简化了原生 JavaScript 的 DOM 编程 jQuery 中含有丰富的轮子完美解决了选择元素难、样式难、动画难、批量操作难等各种兼容问题 让工程师只需要思考业务而不必思考细枝末节的兼容问题 jQuery有两条版本线1.X、2.X jQuery 2.X 和 1.X 的功能完全一致API完全一致但是 2.X 不兼容 IE6、7、8 下载的时候有两个选择 二 jQuery 整体感知 2.1 选择器 $() 函数就是 jQuery 的核心函数query 就是选择的意思也就是说 jQuery的核心招牌功能就是选择元素 $(#box ul li.haha span).css(background-color,red); 语法 $(“选择器”) $ 可以用 jQuery来代替$ 和jQuery 是同一个函数 jQuery(#box ul li.haha span).css(background-color,red); 2.2 样式 得到样式得到计算后的样式$(.box).css(width); 设置样式 语法 $(“选择器”).css(JSON); 2.3 动画 jQuery 内部含有一个运动框架 animate 函数 2.4 批量添加监听、节点关系 三 jQuery 3.1 $() 函数 jQuery 对象不是原生 JS 对象 $(选择器) 选择出来的东西是一个类数组对象是 jQuery 自己的对象这个 jQuery 对象后面不能跟着原生 JS 的语法 $(#box).style.backgroundColor red; 因为 .style.backgroundColor 是原生JS语法$() 原则的对象是 jQuery 对象不能跟着原生 jQuery 对象转为原生 JS 对象 3.2 引号问题 $(选择器) 注意引号不能丢在jQuery世界中只有三个东西不能加引号其他必须加引号 3.3 支持的选择器 jQuery 支持所有的 css2.1 的选择器 也支持部分 css3 的选择器 3.4 筛选器 特别的eq 可以单独提炼为方法可以连续打点 提炼出来的好处是可以用变量 3.5 css 函数 css 函数可以读样式可以设样式所有的数值不需要单位 读样式可以读取计算后样式写一个参数是不是驼峰无所谓但是必须加引号 特别的还支持 写法 3.5 animate 函数 有没有缓冲呢有jQuery 需要插件来完成我们日后说。 jQuery 默认不是匀速是easeInOut jQuery默认有一个处理机制叫做动画排队。当一个元素接收到了两个 animate 命令之后后面的animate会排队 先1000毫秒横着跑然后1000毫秒竖着跑。动画总时长2000。 如果想让元素斜着跑就是同时变化 left 和 top就写在同一个 JSON 里面 不同的元素不排队是同时的 3.6 事件监听 jQuery颠覆了我们的行文习惯 事件名一律不写 on。特别的鼠标进入改成了 mouseenter鼠标离开改为了mouseleave。 四 序与迭代 4.1 eq() 方法 看结构 两个并列盒子 .box1 和 .box2 中都有 5 个小盒子 div 想让 .box2 中的第二个盒子背景变绿 $(.box2p:eq(1)).css(backgroundColor,green);$(p).eq(6).css(backgroundColor,green);$(.cur).eq(2).css(backgroundColor,green);$(.box2.cur).eq(0).css(backgroundColor,green); 注释不同选择器下对应的下标 $() 函数返回的是一组元素每个方法比如 css 方法内部都有 for 循环迭代 4.2 index() 方法 返回这个元素在亲兄弟中的排名无视选择器怎么选。 $(this).index() 是一个很常见的写法表示触发这个事件的元素在自己亲兄弟中的排名 点击上一排 div 中的 p, 下一排对应序号的 p 变色 强调一下是 index() 方法而不是属性 4.3 each() each() 表示遍历节点也叫作迭代符合条件的节点 $(p) 调用 each() 方法同样的设置对比 i 和 $(this).index() 效果 4.4 size() 方法 和 length 属性 表示 jQuery 对象中元素的个数 五 动画相关 5.1 内置 show() , hide(), toggle() 特别的如果show()、hide()、toggle()里面有数值将变为动画 也可以加回调函数 5.2 slideDown(), slideUp, slideToggle()方法 以上分别是下滑展开上滑收回滑动切换 slideDown() 的起点一定是 display:none 换句话说只有 display:none 的元素才能够调用 slideDown() 同样的slideDown、slideUp、slideToggle 里面可以写动画时间、回调函数。 动画机理 一个 display:none 的元素瞬间显示瞬间高度变为 0然后 jQuery 自己捕捉原有的 height 设置为动画的终点 下拉菜单: li a div mouseenter 事件应该添加在 li 上而不是 a 上添加在 a 上则不能选择到下拉框中的内容 div 的位置应该贴着 li 元素不能有缝隙因为缝隙不属于 li 的范围也会选择不到下拉框中的内容 如果想要有缝隙下拉框再套一个盒子用 padding 表示缝隙 $(this).find(div).slideDown(200); 5.3 fadeIn(), fadeOut, fadtTo(), fadeToggle() 方法 以上分别是淡入 淡出淡到一定值淡入淡出切换 动画机理 一个 display:none 的元素瞬间可见然后瞬间变为 opacity:0往自己的 opacity 上变。 如果没有设置 opacity就往1变。 fadeTo() 有三个参数第一个参数是动画的时间第二个参数是要变到的透明度第三个参数是回调函数 fadeTo的起点不一定是 display:none; IE6、7、8 兼容不用关心 filter 这个东西了jQuery已经帮你写了兼容 jQuery 呼吸轮播 图片部分遮盖案例有文字 遮盖元素设置 opacity: 0.5; 文字的透明度也会改变。处理 文字写到其他元素中 5.4 stop() 语法 stop( 是否清除队列, 是否瞬间完成当前动画 ) 如果没有写 true 或者 false默认是 false $(div).stop( true ).animate({left:100},1000); 5.5 finish() finish() 瞬间完成所有动画队列 $(div).finish(); 手风琴案例 ul li*5 直接用 width 的变化来设置动画时最右侧可能会出现空白区域 用定位来做每个元素鼠标 hover 时 left 到固定位置其它元素也移动到固定位置 5.6 delay() delay延迟可以使用连续打点必须放在运动语句之前 5.7 is(:animated) is() 方法表示身份探测返回 true, false 判断是否在运动中可以防止动画的积累 和之前的 stop()不一样动画正在进行立即停止手上的动画执行新的命令 六 节点关系 6.1 原生 JS 中的 nodeType 属性 任何的 HTML 元素都有nodeType属性值有1~11老师为大家精简到了5个 1 元素节点3文本节点8注释节点9document 节点10DTD 6.2 原生 JS 中的节点关系 childNodes 有兼容性问题chrome, ie9, ie10... 高级浏览器会把空格换行等看成文本节点 ie 6, 7, 8 不会 document.getElementById(“box”).childNodes.length; //高级浏览器 9低级浏览器 4 怎么解决这个差异呢 其它 firstChild / lastChild 元素.parentNode previousSibling / nextSibling 七 各种特效 转载于:https://www.cnblogs.com/Bijou/p/10207045.html
