前言
最近开始尝试着自己写轮播图，知道轮播图的原理，通过js顶死器不断的重复的给要轮播的图片添加和删除样式，在css样式中通过display中的 none 和block 来切换显示的图片，再加上过渡效果即可实现好看的轮播图，我准备用递归函数写，但是却不知道在哪出现了问题，能够实现第一轮的正常轮播，但是后面的轮播却会出现问题，不断的检查问题，还是没有找出问题，最后放弃用递归的写法，再参考别人的代码，成功实现了轮播图功能。
关于float与inlie-block的使用
发表于
|
字数统计:
892
|
阅读时长 ≈
3
前言
虽然之前有使用过float来把元素进行布局，但是发现这种方法存在缺点，后面发现还有display:inlie-block也能用来布局，但是在实际使用过后同样也发现一些问题，这次来讲一下这两种方式存在的问题以及解决办法。
关于css选择器的一个小小的问题
前言
昨天在写一个页面的时候，写到css样式的时候，出现了一个问题,让我有一开始有点想不明白，后面明白了，记录一下。
问题情况：
这是html代码
1
2
3
4
5<div class="father">
<ul>
<li class="son"></li>
</ul>
</div>这是css代码
1
2
3
4
5
6
7
8
9
10
11
12.father ul li{
display:none;
/* 此时这个div块中的所有内容都将不显示 */
}
.son{
display:block;
/* 起初我认为此时这个li中放的所有内容都应该显示，但是我在li中放的图片并没有显示，我就去查看控制台的样式，发现在这个li中的样式是有block这个属性但是并没有生效。 */
}
.father ul .son{
display:block;
/* 后面我尝试着这样写，却发现这下图片就显示出来了 ，随后并猜测是选择器优先级的问题，随即查阅资料，发现组合选择器的优先级为成员选择器的权重相加，只写一个类选择器干不过上面的多个选择器权重相加，所以多组合一些就好了，或者用!important 来拉满。*/
}
总结
选择器的权重问题。
虽然以前看到过选择器优先级相关的知识，但是还没有接触过很多这种情况，以后要注意！
jQuery学习（介绍与使用）
前言
对于前端来说，学习掌握jQuery是基础，则将会是我学习jQuery的记录。jQuery中文文档：http://hemin.cn/jq/。
jQuery是什么？
- jQuery是一款优秀的JavaScript库，从命名可以看出jQuery最主要的用途是用来做查询（jQuery=js+Query）.
- 在jQuery官方Logo下方还有一个副标题（write less, do more）, 体现了jQuery除了查询以外,还能让我们对HTML文档遍历和操作、事件处理、动画以及Ajax变得更加简单
为什么要使用jQuery？
- 强大选择器: 方便快速查找DOM元素
如上面实例所展示一样，通过jQuery查找DOM元素要比原生js快捷很多
jQuery允许开发者使用CSS1-CSS3几乎所有的选择器,以及jQuery独创的选择器
以下是一段jQuery代码：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<body>
<div class="test1">这是1</div>
<div>这是0</div>
<div id="test2">这是2</div>
<script>
$(document).ready(function(){
$(".test1").css('width','100px').css('height','200px');
$("#test2").css('background','blue');
// 读取数据
var $tx = $("div").eq(0).text();
alert($tx);
// 写入数据
$("div").eq(0).text("新的数据");
});
</script>
</body>
通过以上代码可以看出，jQuery查找元素要快的多，方便的多，并且jQuery可以不断的调用jQuery对象的方法，并且可以一次操作。读取数据也是一个函数，使用比较方便
- 事件处理
- DOM操作(C增U改D删)
- 样式操作
- 动画
- 丰富的插件支持
- 浏览器兼容(前端开发者痛点)
如何使用jQuery？
下载过后这样调用就可以了：1
<script src="../jquery-1.12.4.js"></script>
关于classList的使用
发表于
|
字数统计:
574
|
阅读时长 ≈
2
html中的块级元素与行级元素
发表于
|
字数统计:
1k
|
阅读时长 ≈
3