学习笔记
主要内容包括html,css,html5,css3,JavaScript,正则表达式,函数,BOM,DOM,jQuery,AJAX,vue等等
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
HTML/CSS
**HTML:**HTML基本结构,标签属性,事件属性,文本标签,多媒体标签,列表 / 表格 / 表单标签,其他语义化标签,网页结构,模块划分
**CSS:**CSS代码语法,CSS 放置位置,CSS的继承,选择器的种类/优先级,背景样式,字体样式,文本属性,基本样式,样式重置,盒模型样式,浮动float,定位position,浏览器默认样式
HTML5 /CSS3
**HTML5:**HTML5 的优势,HTML5 废弃元素,HTML5 新增元素,HTML5 表单相关元素和属性
**CSS3:**CSS3 新增选择器,CSS3 新增属性,新增变形动画属性,3D变形属性,CSS3 的过渡属性,CSS3 的动画属性,CSS3 新增多列属性,CSS3新增单位,弹性盒模型
JavaScript
**JavaScript:**JavaScript基础,JavaScript数据类型,算术运算,强制转换,赋值运算,关系运算,逻辑运算,三元运算,分支循环,switch,while,do-while,for,break,continue,数组,数组方法,二维数组,字符串
必须传入参数,不仅可以传入css选择器,还可以传入jQuery对象,或者dom元素
console.log( $(‘span’).closest(‘li’) );//离span最近的li标签
效果:匹配到两个
如果自身就符合匹配条件,返回自身
- 1
- 2
- 3
- span
- 4
- 5
span2
效果:
1.4 offsetParent():寻找最近的有定位的父级
不能传参,如果父级都没有设置定位,就找html
给div.test设置定位
.test {
position: relative;
}
在div.test的子元素div.item,寻找最近的设置定位的父元素
console.log( $(‘.item’).offsetParent() );
如果我都不设置定位,找到的就是html标签:
总结:
2. children / find / end / add / addBack
html文件用的也是最开始那个
- 1
- 2
- 3
span
- 4
- 5
span2
2.1 children() 查找子元素(不是所有后代,只找直接的)
console.log( $(‘ul’).children() );//查找ul下的子元素
效果:
可以传css选择器:
console.log( $(‘ul’).children(‘.test’) );//查找ul子元素,且类名为test
效果:
2.2 find() 查找后代元素
console.log( $(‘ul’).find(‘span’) );
2.3 end() :回退,prevObject的封装
在前面调用find(),返回的jQuery对象中,有记录了父级的信息,存储在prevObject中
所以,我们可以通过调用prevObject属性,返回上一级,做一些操作
console.log($(‘ul’).find(‘li:eq(3)’));
$(‘ul’).find(‘li:eq(3)’).css(‘background’, ‘red’).prevObject.find(‘li:eq(2)’).css(‘background’, ‘pink’);
$('ul').find('li:eq(3)')
找到ul下索引为3的li,调用css()将背景颜色设置成红色,返回jQuery对象$('li:eq(3)')
;'$('li:eq(3)').prevObject'
回退一步,是$('ul')
;继续
find('li:eq(2)')
找到ul下索引为2的li,调用css()将背景颜色设置成粉色在jQuery中,end()封装了这一功能
$(‘ul’).find(‘li:eq(3)’).css(‘background’, ‘red’).end().find(‘li:eq(2)’).css(‘background’, ‘pink’);
效果一致
回退到上一级具体是哪一级,是跟find对应的,如果find查找的不是直接子元素,prevObject对应的也不是直接父元素
console.log( $(‘ul’).find(‘span’) );//span不是ul的直接子元素,prevObject回去的是ul
2.4 add() :把元素添加到已存在的元素组合中
参数可以是css选择器(selector)、原生dom、jQuery对象、html标签
如果我们想要给第一个和最后一个li加背景颜色,可能要写两行
$(‘li:first’).css(‘background’, ‘orange’);
$(‘li:last’).css(‘background’, ‘orange’);
都是给背景换橙色,分两行写不够简练,于是,用add():
$(‘li:first’).add(‘li:last’).css(‘background’, ‘orange’);
效果一致:
2.5 addBack():使用链式操作时调用,可以同时获取当前对象和前面获取的对象
结尾
学习html5、css、javascript这些基础知识,学习的渠道很多,就不多说了,例如,一些其他的优秀博客。但是本人觉得看书也很必要,可以节省很多时间,常见的javascript的书,例如:javascript的高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
象
结尾
学习html5、css、javascript这些基础知识,学习的渠道很多,就不多说了,例如,一些其他的优秀博客。但是本人觉得看书也很必要,可以节省很多时间,常见的javascript的书,例如:javascript的高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
[外链图片转存中…(img-yDFlK0fu-1715676214281)]