JQuery
jQuery入门
1.JQuery概述
- 是一个JavaScript库,封装了很多函数,学习怎么去调用这些函数
2.JQuery的使用
- 下载Download jQuery | jQuery;production版本/development版本
- 引入;页面DOM加载完毕执行代码$(function(){…})
- $=JQuery,也是顶级对象(相当于window)
- 用原生js获取的对象就是DOM对象,用jQuery方式获取的就是jQuery对象(用$对原生DOM进行了包装)
- DOM——jQuery: ( ′ D O M 对 象 ′ ) ; j Q u e r y — — D O M : ('DOM对象');jQuery——DOM: (′DOM对象′);jQuery——DOM:(‘div’)[index] 或 $(‘div’).get(index)
jQuery常用API
1.jQuery选择器
-
jQuery基础选择器:$(“选择器”)
-
层级选择器:子代 ( " u l > l i " ) ; 后 代 ("ul>li");后代 ("ul>li");后代(ul li)
-
隐式迭代:把匹配的所有元素进行遍历循环,不用for循环了
-
jQuery筛选选择器:$(“ul li:first”) $(“ul li:eq(2)”) $(“ul li:odd/even”)
-
jQuery筛选方法:$(“ul li:first”) .parent() $(“ul”) .children(“li”) $(“ul”) .find(“li”) 后代选择器 $(“ol .item”) .siblings(“li”)除了自身元素的所有亲兄弟 $(“ul”) .nextALL/preALL() $(“ul li”) .eq(2) $(“div:first”).hasClass(“www”)是否有这个类名
-
新浪下拉菜单案例:$(this)当前元素
-
jQuery的排他思想:利用隐式迭代+ $(“this”) .siblings(“button”);淘宝服饰精品案例
-
链式编程:让代码变优雅;要注意是哪个对象
2.jQuery样式操作
- 操作css方法:$(this).css(“color”,“red/数字不用加引号”); 对象形式 $(this).css({“color”:“red”,“font-size”:“20px”});
- 设置类样式方法:添加类 $(this).addClass(“current”); 移除类 $(this).removeClass(“current”); 切换类 $(this).toggleClass(“current”)
- tab栏切换案例
- 类操作与clasName区别:jQuery类操作不影响原先类
3.jQuery效果
- 显示隐藏效果:show/hide/toggle([speed,[easing],[fn]])
- 滑动效果:slideDown/slideUp/slideToggle([speed,[easing],[fn]])
- 事件切换:hover([over,]out)
- 动画队列及其停止排队方法:stop() 必须写在动画的前面,相当于停止上一次的动画
- 淡入淡出效果:fadeIn/fadeOut/fadeToggle([speed,[easing],[fn]]) 渐进效果修改透明度 fadeTo([speed,opacity,[easing],[fn]])
- 自定义动画animate:animate(params,[speed],[easing],[fn])
- 王者荣耀手风琴案例
4.jQuery属性操作
-
设置或获取元素固有属性值:获取 prop(“属性”) 设置 prop(“属性”,“属性值”)
-
设置或获取元素自定义属性值:获取 attr(“属性”)
设置 attr(“属性”,“属性值”)
-
数据缓存:向被选元素附加数据 data(“name”,“value”) 获取数据 data(“name”) 可以读取H5自定义属性data-index,得到的是数字型
-
购物车案例::checked 选择器,查找被选中的表单元素 截取字符串substr(1) 返回指定的祖先元素 parents(“选择器”) 保留两位小数 toFixed(2)
5.jQuery内容文本值
- 普通元素内容:获取 html() 设置 html(“内容”)
- 普通元素文本内容:获取 text() 设置 text(“内容”)
- 表单的值:val()
6.jQuery元素操作
-
遍历元素:$(“div”).each (function (index,DOMEle){***;})
or 主要用于遍历数据(数组/对象),处理数据 $.each ( (“div”), function (index,DOMEle){***;})
-
创建元素:$(“
<li> </li>
”); -
添加元素:内部添加(父子关系) element.append(“内容”) / element.prepend(“内容”) ; 外部添加(兄弟关系) element.after(“内容”) / element.before(“内容”)
-
删除元素:删除匹配的元素 remove(); 删除匹配元素集合中所有的子节点 empty(); 清空匹配的元素内容 html(“”)
7.jQuery尺寸、位置操作
- jQuery尺寸:width()/height() ; 包括padding:innerWidth(); 包括padding、border: outerWidth(); 包括padding、border、margin: outerWidth(true)
- jQuery位置:距离文档的位置 offset().top; 带有定位的父亲的坐标,只能获取不能设置 positon(); 设置或获取被卷去的头部 scrollTop()/ 左侧 scrollLeft()
- 品优购电梯导航案例:节流阀flag; 互斥锁
jQuery事件
1.jQuery事件注册
- 单个事件注册:$(‘div’).click(function(){事件处理程序})
2.jQuery事件处理
- 事件处理on()绑定事件:element.on(events, [selector], fn))
- 可以绑定多个事件,当事件处理程序相同时可以“mouseover mouseout”
- 可以实现事件委托(委派),$(“ul”).on(‘click’,‘li’,func{})
- on可以给动态创建的元素绑定事件
- 发布微博案例
- 事件处理off()解绑事件:off()接触所有事件; off(“click”,‘li’)接触此事件委托
- 只触发一次的事件,可以用one()
- 自动触发事件:element.click(); element.trigger(“click”); element.triggerHandle(“click”) 不会触发元素的默认行为,前两种会
3.jQuery事件对象
- 事件对象的产生:element.on(events, [selector], function(event) {})
- 阻止默认行为:event.preventDefault() 或 return false
- 阻止冒泡:event.stopPropagation()
jQuery其他方法
1.jQuery对象拷贝
- 语法:$.extend ([deep], target, object1, [objectN]); deep如果为true则为深拷贝,默认false为浅拷贝,把被拷贝对象的复杂数据类型地址拷贝给目标对象,修改目标对象会影响被拷贝对象
2.多库共存
- 和其他库冲突:使用jQuery;让jQuery释放对$的控制权