jQuery+Bootstrap阶段总结
这个阶段总耗时四天,达成自己的五天之内做完它的目标,给自己一朵小花奖励一下❀
基本页面如下:
整体思路
从网页布局上,或者从页面整体样式上,自然脱离不了手动css改变,但我一直想尝试的是使用bootstrap组件和css全局属性(对与自己来说新奇东西的使用更加具有吸引力),确实,bootstrap类的功能比较完善,动态改变起来只需要在jQuery里面添加,删除类即可,节省不少代码,自然省去了很多麻烦.然后利用好jquery和localstorage用法, 实现在本地内存和页面的同步的增删改查功能.这个阶段基本就大功告成啦,当然为了提高用户体验感,还是要用点心的,保证每一个阶段让大多数人看着好看,人性化,更加灵活.
jQuery重要知识点
以下都是以操作img为例: <img src="img/xxx.png" alt="xxx" id="imgID" class="imgClass">
1. 元素的选取和操作
$(".imgClass") , $("#imgID") , $("img")
如果需要改一下src,则: $("#imgID").attr("src","新的地址");
(注意:都是字符串格式!)
如果是很多相同的类需要执行相同的操作,用jQuery该怎么办呢? 同样以操作图片(此时有很多一样的类的图片)为案例如下:id不用这么做.因为他只有一个,用了也没错,只执行一次!
方法1:
$(".imgClass").each(function(){
$(this).attr("src","新的地址");//通过each遍历,批量修改地址
//其他操作
});
方法2:
var imgClass = $(".imgClass");
for(let i= 1;i<imgClass.length;i++){
$(imgClass[i]).attr("src","新的地址");//通过each遍历,批量修改地址
//其他操作
}
2. 常见事件函数和ajax
以点击事件为例:
$("#imgID").click(function(){
//想点击之后图片或者其他元素执行的操作
});
其他还有很多,如图:
Ajax简要:
AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
就是在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。
这里引用菜鸟教程里的一个小案例:(从文件名为demo_test.txt获取数据)
$(document).ready(function(){
$("button").click(function(){
$.ajax({url:"demo_test.txt",success:function(result){
$("#div1").html(result);
}});
});
});
这个知识逻辑比较简洁,理解起来也比较简单,深入了解可以看菜鸟教程和一些精彩博客
3. JS特效和动画
有封装好的动画,最常见的就是渐隐fadeIn()渐现fadeOut(),显示(show())和消失(hide()),还有包含这两个功能的toggle(),fadeToggle(),还有滑动: 向下slideDown(),向上slideUp(),自然也有slideToggle();
以下为点击该图片,该图片会发生的效果.语法也是如下,执行多个属性变化效果(left,opacity)
$("#imgID").click(function(){
$(this).animate({
left:'250px',
opacity:'0.5'
});
});
当在一个事件中想调用多个animate方法时: (如下),排队执行
$("button").click(function(){ var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
});
4. DOM遍历
向祖先遍历
1. parent()
parent() 方法返回被选元素的直接父元素。
2. parents()
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
3. parentsUntil()
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
$("span").parentsUntil("div");//span一直向祖代延伸,一直到div为止(不包括div)
向子代遍历
1. children()
children() 方法返回被选元素的所有直接子元素。//只延伸一代
2. find()
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
$("div").find("span");//返回属于 <div> 后代的所有 <span> 元素
向同胞遍历
1. siblings()
siblings() 方法返回被选元素的所有同胞元素。
2. next()
next() 方法返回被选元素的下一个同胞元素。
3. nextAll()
nextAll() 方法返回被选元素的所有跟随的同胞元素。
4. nextUntil()
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。//不包括参数
5. prev()
6. prevAll()
7. prevUntil()
5,6,7方法和2,3,4方法一一对应,只不过一个向下,一个向上
(本阶段要求其他相关知识如下:)
5. H5本地存储Local Storage
1. localStorage.setItem(key,value);
将键值为key,值为value保存在h5本地localstorage
2. localStorage.getItem(key);
获取键值为key的值内容
3. localStorage.removeItem(key);
删除键值为key的数据
6. 了解JSON
最常用的就是对象和字符串之间的转换
JSON.parse()用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify()用于将 JavaScript 值转换为 JSON 字符串。
注(转化下来的值可以和localstorage一起使用哦)
Bootstrap重要知识点
1. 全局 CSS 样式增强效果
自我理解:当调用了相应的文件之后,bootstrap里面有很多可以直接使用的类,方便了对css的操作,栅格系统就是收益者,官方文档里面的会套用就行,对组件不满意的话,当然可以自己在写一个类加进去啦.
2. JavaScript插件
也是可以直接添加类就能完成动态效果,会在官方文档里面套用即可
4. 栅格系统
是以添加不同的类为基础,实现一类最多12列,并列有不同的排列方式,以及占宽比.
哈哈哈,比较简略,我对他的了解就是会用就行,学习的话官方文档为主哦❥(^_-).
下一阶段计划(Vue)
特点:
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。
自我目标时间,从2021.2.24开始,到2021.03.05,但中间会有一些事情会占用大块时间,具体时间按实际情况出发吧,但是绝不能超过学长规划的时间范围之外!自己更不能得过且过,要学通,了解更多!
学习目录:
加油加油加油❥(^_-)!!!
