logo资料库

全套javaWeb总结.docx

发布时间：2022-06-15 发布人：admin 分类：说明书 资料大小：0.83M 资料格式：docx 举报 版权申诉
第1页 / 共85页
第2页 / 共85页
第3页 / 共85页
第4页 / 共85页
第5页 / 共85页
第6页 / 共85页
第7页 / 共85页
第8页 / 共85页
资料共85页，剩余部分请下载后查看
    一、是什么用 CSS？ 答：CSS 将网页内容和显示样式进行分离，提高了显示动能（降低了代码的耦合性）。 Css 二、CSS 和 HTML 结合的方式 1、每一个 HTML 标签中都有一个 style 样式属性，该属性的值就是 css 代码。 2、使用 style 标签的形式，一般都定义在 head 标签中。 3、加载外部的 css 文件中的样式，定义一个 css 文件，用标签形式添加样式，然后用 @import url(xxx.css); 如 创建一个 div.css 文件，里面写 div{color:"red"} ，然后在用到的 html 文件中 引入即可 @import url(div.css); 一般把一类的 css 样式放到一个 css 文件中，便于修改，增强了代码的通用性。 因为一个网站需要多个 css 样式，也就会有多个 css 文件与之对应。这样在 html 页面导入的代码 会增加， 故在新建一个 css 文件，在这个 css 文件中导入用到的样式表，故再在 html 页面中 只导入 此 css 文件即可。 此方法 是 用 css 导入的，不是用的 html 导入，虽然在 html 页面用@import 导入，但是基于 css 的。 4、使用 html 方式导入 在 head 标签中写 < link rel="stylesheet" href="xxx.css" type="text/css" > 三、CSS 代码格式 选择器名称｛属性名：“属性值”；属性名：“属性值”；……｝ 1、属性与属性之间用 分号 隔开。 2、属性与属性值之间用 冒号 链接。 3、如果一个属性有多个值的话，那么多个值用空格隔开。 四、选择器 就是指定 CSS 作用的标签，那个标签的名称就是选择器，意为哪个容器。 选择器共有三种： 1、html 标签名选择器，使用的就是 html 的标签名。 2、class 选择器，其实使用的是标签中的 class 属性。 定义方式： .class 属性值{} 3、id 选择器，其实使用的是标签中的 id 属性。 定义方式： #id 属性值{} 每一个标签都定义了 class 和 id 属性，用于对标签就行标识，方便对标签进行操作。 在定义时，多个标签中的 class 属性可以相同，而 id 值要唯一，因为 JavaScript 中经常用。 定义方式 ① 标签.class 属性值 这样就指定了 具体的 标签的样式 扩展选择器 1、关联选择器（选择器中的选择器） 如
    定义方式：div a{} ------外层的标签名 + 空格 + 内层的标签名 2、组合选择器（对多种选择器进行样式设定） 如：有标签指定 class 属性，还有别的标签 定义方式： .class 属性值，其余标签名 ------ 多种选择器之间用逗号分隔开，多个选择 器组合使用。 3、伪元素选择器 其实就是在 html 中预先定义好的一些选择器，称为伪元素，是因为 css 的术语。 格式：标签名：伪元素.类名 a:link 超链接未点击状态 a:visited 被访问后的状态 a:hover 光标移到超链接上的状态（未点击） a:active 点击超链接时的状态 或 标签名.类名：伪元素 伪元素需要在 style 标签内 定义 不仅仅超链接可以用，别的标签也可以用。 链接的 悬停 点击 点击后 的 css 样式 顺序： L V H A p:first-line p:first-letter 段落的第一行文本 段落中的第一个字母 :focus 具有焦点的元素。 伪元素 IE6 不支持，FireFox 中可以看到效果。 五、优先级 标签选择器 < 类选择器 < id 选择器 < style 属性 同级别的 下面的优先于上面的，因为浏览器从上往下解析。 六、盒子模型 border 边框 内边距 padding 设置四个值 顺序：上 右 下 左 外边距 margin 三者都有 上下左右 四个设置点 body 标签和浏览器窗口显示也有外边距，设置成 0 就会顶齐（左上角）显示 七、定位 css+div（查看 css 手册）
    利用盒子模型思想，将要布局的成员封装进对象里，可以任意设置位置。（漂浮，div，边框......） CSS 样式操作元素 1、操作无序列表 设置前面的 图标（可以指定图片） ul{ list-style-image:url(图片路径) } 2、设置带有边框 的 元素 可以分别设置 上下左右 四个边， 设置成不同的形态。如：下划线填空 等等。 1.JavaScript [1]简介 JavaScript JavaScript 简称 JS 是运行在浏览器端的一门脚本语言，一开始主要用来做浏览器端验证，但现在 功能已经不止于此。 所谓脚本语言就是指，代码不需要编译，直接运行，并且读入一行运行一行。 JavaScript 目前应用非常广泛，例如：浏览器端的验证，Ajax，富客户端等，甚至也有服务器端 的 JavaScript —— node.js [2]编写位置 ①网页内部 编写到 ②外部.js 文件 [3]基本语法 ①注释 单行注释：//
    多行注释: /**/ ②变量 - JS 是一个弱类型的语言，声明一个变量时不需要指定类型，只需要使用 var 关键。 - 变量的声明： var a; - JS 是一个动态类型的语言，为一个变量赋值时可以赋值成任意类型,同时在使用过程中可 以任意修改变量的类型。 a = "hello"; a = true; - 声明和赋值同时进行 var b = 123; ③函数 - 在 JS 中，函数也是一个对象。 - 在 JS 中声明一个函数只需要使用 function 关键字。 - 由于 JS 是一个弱类型语言，所以声明函数时不需要指定参数的类型。 - JS 函数在调用时也不会检查实参的类型和数量。 - 所以在 JS 中没有重载这回事。 - 声明函数的两种方式： var sum = function(a,b){ return a+b; }; function sum2(a,b,c){ return a+b+c; } - 调用函数： 调用函数的本质：函数的引用 + ( ) sum(123,456); ④对象 - 创建对象： 第一种： var obj = new Object(); 第二种： var obj2 = {}; - 动态的向对象中添加属性 对象.属性名 = 属性值 obj.name = "sunwukong";
    obj.age = 18; obj.fun = function(){}; - 在创建对象时直接添加属性 var obj3 = {name:"猪八戒",age:30,fun:function(){}}; [4]事件 ①用户操作网页或者浏览器所发生的交互行为称为事件。比如：点击按钮，最小化窗口，修改 文本框内容等。 ②JS 为我们定义许多浏览器中的事件。比如：单击、双击、移动 等。 ③我们可以通过为事件设置一个响应函数来对事件进行响应。可以通过两种方式为元素绑定响 应函数： 1) 直接通过标签的属性来设置,这种方式是结构与行为耦合，不推荐使用 2) 在 [5]加载方式 ①浏览器加载网页代码时是由上到下依次加载的。 ②如果我们在浏览器还尚未加载网页中的元素，那么将无法确定，控制台将会报错，解决该问 题有两种方式： 1) 将 script 标签写到 body 标签的下边 2) 将代码写到 window.onload = function(){}; [6]DOM 编程 DOM 就是让我们可以以面向对象的方式去操作网页的。 DOM:Document Object Model 文档对象模型。 Document：文档指的就是整个的 HTML 文档。 Object：对象指将网页中每一个部分都转换为了一个对象 Model：模型用来表示对象与对象之间的关系 DOM 编程是 JavaScript 中非常重要的一部分内容，对于我们后台工程师来说非常重要。 DOM 主要是通过 JavaScript 来控制网页中的各种元素，从而达到使网页可以和用户进行动态交互 的作用。 DOM 的操作主要分四部分增、删、改、查。
    浏览器中为我们提供了一个 document 用于 dom 的查询，document 代表的整个网页，它是 window 对象的属性，所以我们可以在页面中直接使用。 ①DOM 查询 1) 通过 document 对象查询 根据 id 查询一个元素节点对象： document.getElementById("id"); 根据标签名查询一组元素节点对象： document.getElementsByTagName(标签名); 根据元素的 name 属性查询一组元素节点对象： document.getElementsByName(name 属性); 根据 id 值查询 document.getElementById(“id 值”) 一个具体的元素节点 根据标签名查询 根据 name 属性值查询 document.getElementsByName(“name 值”) 元素节点数组 document.getElementsByTagName(“标签名”) 元素节点数组 ●在具体元素节点范围内查找子节点 element.childNodes【W3C 考虑换行，IE≤9 不考虑】 节点数组 查找全部子节点 查找第一个子节点 element.firstChild【W3C 考虑换行，IE≤9 不考虑】 节点对象 查找最后一个子节点 element.lastChild【W3C 考虑换行，IE≤9 不考虑】 节点对象 查找指定标签名的子节点 element.getElementsByTagName(“标签名”) 元素节点数组 ●查找指定元素节点的父节点：element.parentNode ●查找指定元素节点的兄弟节点 查找前一个兄弟节点 node.previousSibling【W3C 考虑换行，IE≤9 不考虑】 节点对象 查找后一个兄弟节点 node.nextSibling【W3C 考虑换行，IE≤9 不考虑】 节点对象 属性操作 [1]读取属性值 元素对象.属性名 [2]修改属性值 元素对象.属性名=新的属性值 文本操作 [1]读取文本值：element.firstChild.nodeValue [2]修改文本值：element.firstChild.nodeValue=新文本值 类型转换 ① parseInt() parseFloat()
    ②强制类型转换 Number("123") 转换成整型 jQuery $(字符串) $里面都是字符串 1.jQuery [1] 简介 > jQuery 是目前最受欢迎的 JavaScript 的库。 > 所谓 JavaScript 库，就将 JavaScript 中的一些常用函数，对象封装成一个 js 文件，方便重复调 > JavaScript 库也可以叫做 JavaScript 框架。 > jQuery 的功能主要是，简化了 JavaScript 的开发工作，并且基本解决了在不同浏览器中的兼容 用。 性问题。 [2] HelloWorld [3] 核心函数 > $是 jQuery 中的核心函数 > 核心函数是 jQuery 中非常重要的内容，jQuery 的大部分功能都需要使用核心函数实现。 > 核心函数根据实参的不同，有四种不同的用法。 ①传一个函数作为参数 例子：$(function(){}); 作用：参数中的函数会在整个文档加载完成之后执行，作用和 window.onload = function(){}类似。 ②传一段 HTML 代码 例子：$("
  • 广州
    • "); 作用：可以 HTML 代码去创建对象。
    ③传一个选择器字符串 例子：$("#id") 作用：可以根据选择器的字符串去网页中查找对象。 ④传一个 DOM 对象 例子: $(DOM 对象) 作用：可以将一个 DOM 对象转换为 jQuery 对象。 [4] jQuery 对象 ①DOM 对象 - 通过原生的 JS 获取到的对象我们称为 DOM 对象。 ②jQuery 对象 - 通过 jQuery 核心函数包装过的对象我们称为 jQuery 对象。 ③比较 - 两个对象不能调用彼此的方法。 - 命名的习惯： DOM 对象命名没有特殊要求 jQuery 对象命名时我们习惯加上一个$，加以区分 ④转换 DOM --> jQuery - 直接使用核心函数去包装 DOM 对象即可 - $(DOM 对象) jQuery --> DOM - jQuery 对象的本质就是 DOM 对象的数组 - 转换：jQuery 对象[索引] - $ele[0] [5] jQuery 的选择器 > jQuery 的最厉害的地方就是它拥有众多的选择器。 > jQuery 的选择器主要是集合 CSS 和 xPath 部分语法。 > 选择器可以很方便的获取到页面中元素。 > 语法： $(选择器字符串); ①基本选择器 id 选择器: $("#id") 类选择器: $(".class") 元素选择器：$("标签名") 全部选择器: $("*") 选择器分组: $("选择器 1,选择器 2,选择 N") ②层次选择器 后代元素选择器: $("祖先 后代") 子元素选择器: $("父元素 > 子元素")
    分享到：
    赞 收藏

    相关推荐

    资料库

    后端

    共收录2142份资料，累计10个分类，关注成员有19位，主要包括：Perl,Docker,Delphi,VB,PHP,Java,C,C#,Python,C++

    热门标签

    Perl Docker Delphi VB PHP Java C C# Python C++

    最新资料