JQuery——pink老师课程笔记

SisiaZhang

已于 2022-04-06 20:56:24 修改

阅读量1.2k

点赞数 2

文章标签： jquery

于 2022-04-06 20:53:45 首次发布

本文链接：https://blog.csdn.net/sissizZ/article/details/123999686

版权

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 ：$ (‘div’)[index] 或 $(‘div’).get(index)

jQuery基础选择器：$(“选择器”)
层级选择器：子代 $(" u l > l i "); 后代$ (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”)；淘宝服饰精品案例
链式编程：让代码变优雅；要注意是哪个对象

操作css方法：$(this).css(“color”,“red/数字不用加引号”); 对象形式 $(this).css({“color”:“red”,“font-size”:“20px”});
设置类样式方法：添加类 $(this).addClass(“current”)；移除类 $(this).removeClass(“current”)；切换类 $(this).toggleClass(“current”)
tab栏切换案例
类操作与clasName区别：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])
王者荣耀手风琴案例

设置或获取元素固有属性值：获取 prop(“属性”) 设置 prop(“属性”,“属性值”)
设置或获取元素自定义属性值：获取 attr(“属性”)

设置 attr(“属性”,“属性值”)
数据缓存：向被选元素附加数据 data(“name”,“value”) 获取数据 data(“name”) 可以读取H5自定义属性data-index,得到的是数字型
购物车案例：:checked 选择器，查找被选中的表单元素截取字符串substr(1) 返回指定的祖先元素 parents(“选择器”) 保留两位小数 toFixed(2)

遍历元素：$(“div”).each (function (index,DOMEle){***;})

or 主要用于遍历数据（数组/对象），处理数据 $.each ( (“div”), function (index,DOMEle){***;})
创建元素：$(“<li> </li>”);
添加元素：内部添加(父子关系) element.append(“内容”) / element.prepend(“内容”) ; 外部添加(兄弟关系) element.after(“内容”) / element.before(“内容”)
删除元素：删除匹配的元素 remove()；删除匹配元素集合中所有的子节点 empty()；清空匹配的元素内容 html(“”)

jQuery尺寸：width()/height() ; 包括padding：innerWidth(); 包括padding、border: outerWidth(); 包括padding、border、margin: outerWidth(true)
jQuery位置：距离文档的位置 offset().top；带有定位的父亲的坐标,只能获取不能设置 positon()；设置或获取被卷去的头部 scrollTop()/ 左侧 scrollLeft()
品优购电梯导航案例：节流阀flag；互斥锁

事件处理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”) 不会触发元素的默认行为，前两种会

语法：$.extend ([deep], target, object1, [objectN])； deep如果为true则为深拷贝，默认false为浅拷贝，把被拷贝对象的复杂数据类型地址拷贝给目标对象，修改目标对象会影响被拷贝对象

关注