正文
web项目小总结
小程序:扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序
【扫一扫了解最新限行尾号】
复制小程序
初步小结
1.之前的CSS有些遗忘,返回去重新看知识点,频繁会浪费项目时间。
比如说:
position定位
1 position: absolute;//绝对定位
2 position:relative;//相对定位,一般给父div设置,让子div在里面定位
2.样式属性写的有些乱
每个选择器写相对应的属性样式,div设置宽高
3.JS和JQ的DOM操作不够熟练,比如获取元素上,思考的不够准确,
4.写代码时一定要先想清楚做什么,想要效果是什么,怎么做 ,用什么来实现,一步一步来,
5.this的使用,参数传值,不够熟练,
6.JQ操作里的eq()方法将匹配元素集缩减值指定 index 上的一个。
例子:
<!DOCTYPE html>
<html>
<head>
<style>
div { width:60px; height:60px; margin:10px; float:left;
border:2px solid blue; }
.blue { background:blue; }
</style>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head> <body>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul> <script>$('li').eq(2).css('background-color', 'red');//取第三个li,修改背景</script>
</body>
</html>
结果:
如果提供负数,则指示从集合结尾开始的位置,而不是从开头开始
7.$(this).index(),在编写选项卡及轮播图等特效时经常用到
从0开始
例子:
场景一: 同级元素标签相同
html代码:
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
jq代码:
// $(this).index() 测试代码一
$("li").on("click",function(){
var index = $(this).index();
console.log(index); // 依次点击li元素输出: 0,1,2,3
})
// $(obj).index(this) 测试代码二
$("li").on("click",function(){
var index = $("li").index(this);
console.log(index); // 依次点击li元素输出: 0,1,2,3
})
执行两段脚本并依次点击li元素,都是输出: 0/1/2/3,在这个场景下,作用一样。
场景二:同级元素标签不相同
html代码:
<div>
<p>this is span</p>
<p>this is span</p>
<b>this is b</b>
<b>this is b</b>
</div>
jq代码:
// $(this).index() 测试代码一
$("b").on("click",function(){
var index = $(this).index();
console.log(index); // 依次点击b元素输出:2,3
})
// $(obj).index(this) 测试代码二
$("b").on("click",function(){
var index = $("b").index(this);
console.log(index); // 依次点击b元素输出:2,3
})
测试代码一中,index()是元素在当前同级元素中的位置下标,不区分标签;
测试代码二中,返回值是当前操作元素(this)在$("b")集合中的下标。$( "b" )是jQuery对象集合,所以非同级元素也可以使用