分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

web项目小总结

发布时间:2023-09-06 02:02责任编辑:熊小新关键词:暂无标签

 初步小结

1.之前的CSS有些遗忘,返回去重新看知识点,频繁会浪费项目时间。

比如说:

  position定位  

1 position: absolute;//绝对定位2 position:relative;//相对定位,一般给父div设置,让子div在里面定位   

2.样式属性写的有些乱

  每个选择器写相对应的属性样式,div设置宽高
3.JS和JQ的DOM操作不够熟练,比如获取元素上,思考的不够准确,
4.写代码时一定要先想清楚做什么,想要效果是什么,怎么做 ,用什么来实现,一步一步来,
5.this的使用,参数传值,不够熟练,
6.JQ操作里的eq()方法将匹配元素集缩减值指定 index 上的一个。

例子:

 1 <!DOCTYPE html> 2 <html> 3 <head> 4 ??<style> 5 ??div { width:60px; height:60px; margin:10px; float:left; 6 ????????border:2px solid blue; } 7 ??.blue { background:blue; } 8 ??</style> 9 ??<script type="text/javascript" src="/jquery/jquery.js"></script>10 </head>11 12 <body>13 <ul>14 ??<li>list item 1</li>15 ??<li>list item 2</li>16 ??<li>list item 3</li>17 ??<li>list item 4</li>18 ??<li>list item 5</li>19 </ul>20 21 <script>$(‘li‘).eq(2).css(‘background-color‘, ‘red‘);//取第三个li,修改背景</script>22 </body>23 </html>

结果:

如果提供负数,则指示从集合结尾开始的位置,而不是从开头开始
7.$(this).index(),在编写选项卡及轮播图等特效时经常用到

  从0开始

例子:

场景一: 同级元素标签相同
html代码:

1 <ul>2 ????????<li>one</li>3 ????????<li>two</li>4 ????????<li>three</li>5 ????????<li>four</li>6 ????</ul>

jq代码:

 1 ????// ?$(this).index() 测试代码一 2 ????$("li").on("click",function(){ 3 ????????var index = $(this).index(); 4 ????????console.log(index); // 依次点击li元素输出: 0,1,2,3 5 ????}) 6 ????// $(obj).index(this) 测试代码二 7 ????$("li").on("click",function(){ 8 ????????var index = $("li").index(this); 9 ????????console.log(index); // 依次点击li元素输出: 0,1,2,310   }) 

 执行两段脚本并依次点击li元素,都是输出: 0/1/2/3,在这个场景下,作用一样。

场景二:同级元素标签不相同

html代码:

1 <div>2 ????????<p>this is span</p>3 ????????<p>this is span</p>4 ????????<b>this is b</b>5 ????????<b>this is b</b>6 ????</div>

jq代码:

 1 ????// ?$(this).index() 测试代码一 2 ????$("b").on("click",function(){ 3 ????????var index = $(this).index(); 4 ????????console.log(index); // 依次点击b元素输出:2,3 5 ????}) 6 ????// $(obj).index(this) 测试代码二 7 ????$("b").on("click",function(){ 8 ????????var index = $("b").index(this); 9 ????????console.log(index); // 依次点击b元素输出:2,310 ????})

测试代码一中,index()是元素在当前同级元素中的位置下标,不区分标签;

测试代码二中,返回值是当前操作元素(this)在$("b")集合中的下标。$( "b" )是jQuery对象集合,所以非同级元素也可以使用

web项目小总结

原文地址:https://www.cnblogs.com/lzw123-/p/9256564.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved