初步小结

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对象集合，所以非同级元素也可以使用

web项目小总结的更多相关文章

  1. 百度开放云java+tomcat部署web项目-小皇帝詹姆斯

    加入部署 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/diss ...

  2. 转载：eclipse中web项目小地球没了

    转载自:{FROM:http://www.cnblogs.com/zhouyalei/archive/2013/01/30/2882651.html} MyEclipse下创建的项目 导入eclips ...

  3. IDEA web项目小坑

    1.明明依赖包都加进来了,为什么运行起来报java.lang.ClassNotFoundException? 依赖包的路径只能为{project}web/WEB-INF/lib,如果将lib改为lib ...

  4. tomcat部署java web项目遇到的一些小问题

    背景:本人不是Java开发人员,经过四年多的历练,可以说是一枚BI攻城师了吧,最近粗糙的写了一个Portal来集成cognos报表,下面就入正题说一下发布过程中遇到的小问题吧. a:前提:Java w ...

  5. Java Web项目，Android和微信小程序的初始页面配置

    Java Web项目 我们在Eclipse里开了Java Web项目之后,Run As Tomcat或者Apache服务器,本地运行,如果直接用http://localhost:8080访问项目,会发 ...

  6. 空 Maven项目转成 Web项目 & SpringMVC调用其他 Module中的方法可能会遇到的小问题

    SpringMVC调用其他 模块内的方法的 坑 下次别在阴沟里翻船啦.. 一共花费 4个小时,解决项目中的这个问题 OMG 1. 首先是 Maven新建工程 一般使用 Maven都是先创建 空工程 当 ...

  7. 主要介绍JavaEE中Maven Web 项目的结构及其它几个小问题

    先说下本篇随笔的目录. 1.介绍windows中环境变量Path与ClassPath的区别. 2.可能导致命令行运行javac编译成功,但 java命令 + 所要执行的类的类名 无效的原因. 3.介绍 ...

  8. 在基于MVC的Web项目中使用Web API和直接连接两种方式混合式接入

    在我之前介绍的混合式开发框架中,其界面是基于Winform的实现方式,后台使用Web API.WCF服务以及直接连接数据库的几种方式混合式接入,在Web项目中我们也可以采用这种方式实现混合式的接入方式 ...

  9. 使用EXtjs6.2构建web项目

    一.项目简介 众所周知ext是一款非常强大的表格控件,尤其是里边的grid为用户提供了非常多的功能,现在主流的还是用extjs4.0-4.2,但是更高一点的版本更加符合人的审美要求.因此,在今天咱们构 ...

随机推荐

  1. 《算法竞赛进阶指南》1.4Hash

    137. 雪花雪花雪花 有N片雪花,每片雪花由六个角组成,每个角都有长度. 第i片雪花六个角的长度从某个角开始顺时针依次记为ai,1,ai,2,-,ai,6. 因为雪花的形状是封闭的环形,所以从任何一 ...

  2. thinkphp5控制器访问转换问题

    假设定义了HelloWorld控制器 url访问地址就是:http://localhost/index.php/index/hello_world,与此同时view目录下的模板文件夹要命名为hello ...

  3. 牛客假日团队赛1B.便便传送门(一)

    链接:https://ac.nowcoder.com/acm/contest/918/B 题意: Farmer John最讨厌的农活是运输牛粪.为了精简这个过程,他制造了一个伟大的发明:便便传送门!与 ...

  4. Python Unittest - Test Fixtures 测试夹具

    一.什么是测试夹具 定义单个或者多个测试所需的环境准备(setUp),以及环境清理(tearDown). 例:连接数据库,或者创建Selenium WebDriver driver实例 二.测试夹具有 ...

  5. docker镜像的分层结构三

    docker的镜像分层 docker里的镜像绝大部分都是在别的镜像的基础上去进行创建的,也就是使用镜像的分层结构. 实验 比如说使用dockerfile去创建一个最简单的hello镜像.创建好对应的d ...

  6. Linux Shell命令系列(4)

    16. cat命令 “cat”代表了连结(Concatenation),连接两个或者更多文本文件或者以标准输出形式打印文件的内容. 17. cp 命令 “copy”就是复制.它会从一个地方复制一个文件 ...

  7. 【Java】Tomcat 5默认的管理员用户和密码

    <?xml version='1.0' encoding='utf-8'?> <tomcat-users> <role rolename="tomcat&quo ...

  8. DevOps的工程化

    孙敬云 --Worktile高级系统架构师,WTC成员 1.研发的困境 互联网的环境 互联网这个环境比较特别,包括现在不只是互联网,就算是被互联网赋能的这些“互联网+”的企业也在改变,用户在发生变化, ...

  9. SpringBoot | 第一章：第一个SpringBoot应用

    springboot简单介绍 概述 SpringBoot的核心功能 优缺点 优点 缺点 工程搭建 创建项目 项目结构 pom依赖 主入口 编写controller 启动应用 总结 老生常谈 sprin ...

  10. 初识MAC（由window到mac的转变适应）

    * Windows上的软件可以拿到Mac上面安装吗? Windows上面的软件不能拿到Mac的操作系统上安装,除此之外,Windows里的 exe文件,在Mac下面也是无法运行的,要特別注意.如果你要 ...