面对市场占有率越来越少的jQuery,很多同学都很疑惑是否还有学习的意义,个人觉得还是有必要了解一下,目前的市场上仍然有10%-20%的公司再使用jQuery。下面是我整理的一些jq相对重要的内容:
1:什么是jq?
jq是一个快速的,小型的,功能丰富的JavaScript方法库
库:库是一个公共的js的代码集合,里面有很多方法供我们使用;
2:jq包含了那些东西?
jQuery:快速,小型丰富的方法库
jQuery ui :里面封装了一堆css样式等,但页面太丑了,使用的人是少
jQuery Mobil:移动端,个人认为太丑太卡
sizzle:选择器
qunit:测试工具
3,jQuery的历史:
web前端的发展可以分为3部分,第一部位1.0时代,以静态页面为主,第二部分为2.0时代,在这个时期,前后端开始分离,出现ajax框架等,用户和浏览器有了交互,第三部分则是以及到来的大数据时代;出现了抖音,网易的大数据精密算法,智能推荐;
4.jq为什么火又为什么不火了?
火的原因在于前后端未分离的时候,后端程序员写兼容太烦了,分离之后刚入门的人员学习jc也难,网上出现了大量的jq插件;方便快捷
不火的原因:前端内容越来越大,需要考虑兼容问题,而jq主要操作dom,优化性能也主要从dom下手,所以不适合这个时代了
目前时代火的是三大框架,因为他们都有虚拟dom,所有火了
5,jq特点:
兼具多功能和可扩展性,使用的人群多/兼容dom/便捷ei/大量的插件和生态系统
6,下载使用方式?
jQuery.3.5.1:code.jquery.com/
扩充;版本号的识别:
a.b.c:
a主版本号 大的改动、和可能源码都完全不一样 b次版本号 bug的修复、功能的添加、删除 c小版本号 基本没有变化、
jquery.min.js 压缩版 /jquery.js 未压缩版
主要内容:
1:选择器:jquery选取器和css类似,css怎么用jq就怎么用
2:属性:
获取attr/prop(‘属性名’)
设置attr/prop(‘属性名’,‘属性值’)
删除:removeattr/removeprop(‘属性名’)
attr和prop属性的不同点:prop只能获取系统或者自己设置的,attr都可以获取
3:jq里面的添加方法:
原生js:obj.className='xxxx'; obj.classList.add('active') obj.classList.remove('active')
jq用法: .addClass('class名') .addClass('class名') removeClass('class名') toggleClass(class)
4,jq获取设置文本:
获取:.html/text/val()
设置:.html/text/val(‘xxx’)
这三个的区别:HTML相对于text来讲会识别标签的名字,val主要针对表单元素
5.关于css的方法:
.css('color') //获取color的值
.css('color','red') //设置
.css({width:'100px',height:'100px',color:'red'}) //批量设置
6,jq常见的位置方法:
$(document.documentElement).scrollTop()
.offset().left //类似getPos().left
.position().left //类似 offsetLeft
7.jq常见的尺寸用法以及注意:
.height() =高度
.innerHeight() =高度+padding 的高度
.outerHeight() =高度+padding+border高度的
8,jq中常见的事件:
obj.onclick=function(){}
obj.click(function(){
xxxx
})
上面这种不能删除 事件委托以及可以删除的事件
关于jq中的事件委托/添加/删除事件:
on/off('不加on的事件名',函数名)
$('div').on('click','p',function () {
alert(1);
})
有一道面试题好像就是: live、delegate、bind和on有什么区别?
答: bind 添加事件 live delegate 事件委托 都不用了 先用on。并且以前,bind live delegate内部还是调用的on方法
9,文档的常见插入方法:
向元素内的后面添加:父级.append(子级)/子级.qppento(父级)
向元素内的前面面添加:父级.prepend(子级)/子级.prependto(父级)
向元素的外部的后面添加:after/insertafter
向元素的外部的前面添加:before/insertbefore
remove(元素) .clone()克隆
10:事件对像:
原生js怎么写 这里面就怎么写
11,查找筛选:
obj.eq(1) 操作某一个
obj.first() obj.last()
obj.children()
obj.find(e|o|e)
next nextAll
prev prevAll
parent() 直接父级 parents('选择器') 比一定是直接父级