css选择器

CSS3高级选择器

限于喜欢 提交于 2020-01-24 05:48:44
CSS3中添加了一些新的选择器 与之前的不同 这些选择器有些类似于jquery的选择器 能够让我们更高的操作DOM 废话不多说 为了更直观的了解 我们以这段为实例 来进行操作 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <ul> 9 <li>第一个测试标题</li> 10 <li>第二个测试标题</li> 11 <li>第三个测试标题</li> 12 <li>第四个测试标题</li> 13 <li>第五个测试标题</li> 14 </ul> 15 </body> 16 </html> :nth-of-type(n) 选择属于其父元素第n个元素的每个元素。 和这个类似的是 :first-of-type和:last-of-type 分别是选择第一个元素和最后一个元素 DEMO: <style> li:nth-of-type(3){ /*选择第3个li元素*/ background-color: #00b3ee; } li:first-of-type{ /*选择第一个li元素*/ background-color: #ee1200; } li:last-of-type{ /*选择最后一个li元素*/

何时选用CSS何时选用DOM?

限于喜欢 提交于 2020-01-23 18:47:47
用DOM方法设置样式十分灵活,可以动态创建标记,设置内嵌.style样式(驼峰命名)或者说直接改变一个class属性。而CSS样式丰富多彩,引入许多选择器first-child, last-child,nth-child(),nth-of-type()等等,也有伪类选择器属性 描述a:link a:visited a:hover a:active等等。那么什么时候用CSS设置样式,什么时候用DOM修改样式呢?在这个问题上没有放之四海皆准的答案。 毫无疑问,CSS用来设置网页样式,大多时候我们都用CSS设置去创建重要样式,而用DOM去对文档做一些增强。 那么什么时候去选用DOM方法修改而不是CSS呢?下面我们将从一些适应范围来分析这个问题: 1.根据元素在节点树中的位置来设置样式 我们来看这样一组标记: < h1 > What is the Document Subject Model? </ h1 > < p > The < abbr title = " World Wide Web Consortium " > W3C </ abbr > defines the < abbr title = " Document Object Model " > DOM </ abbr > as: </ p > < p > A platfrom- and language-neutral

#UI+前端#(二)HTML标记语言基础

我的未来我决定 提交于 2020-01-23 09:02:55
文章目录 浏览器工作原理 了解html语言和Dreamweaver界面; 初识标签 通过div的书写熟悉html语法; 浏览器工作原理 客户端:Client 例如:浏览器 APP 服务器:sever CS开发: Client/Server或客户端/服务器模式,,开发难度大,不利于后期维护 BS开发: Brower/Server或浏览器/服务器,,快速便捷,是未来的趋势 .com .cn .edu .gov .org http协议: http超文本传输协议(HTTP,HyperText Transfer Protocol) HTTP是一个客户端和服务器端请求和应答的标准,是互联网上应用最为广泛的一种网络协议。所有的WWW文件都必须遵守这个标准。 FTP File Transfer Protocol(文件传输协议)的英文简称,而中文简称为“文传协议”。用于Internet上的控制文件的双向传输。 了解html语言和Dreamweaver界面; HTML(hyper text markup language)超文本标记语言 1993年提出了html的草案 1995年html2.0成型 目前html5已基本成熟并开始应用到互联网开发中 html编辑器: hbuilder、Dreamweaver、editorPlus、sublime、webstorm等等 视图 代码 设计 拆分 预览

Js选择器总结

醉酒当歌 提交于 2020-01-23 04:47:18
一、原生JS选择器 JS选择器常用的有getElementById()、getElementsByName()、getElementsByTagName()、getElementsByClassName()、querySelector()、querySelectorAll() A: getElementById(ID): 返回对指定ID的第一个对象的引用,如果在文档中查找一个特定的元素,最有效的方法是getElementById() B: getElementsByName(name): 返回文档中name属性为name值的元素,因为name属性值不是唯一的,所以查询到的结果有可能返回的是一个数组,而不是一个元素。 C: getElementsByTagName(tagname): 返回文档中指定标签的元素 D: getElementsByClassName():返回文档中所有指定类名的元素 E: querySelector():返回文档中匹配指定css选择器的第一个元素 F: querySelectorAll():返回文档中匹配指定css选择器的第一个元素 二、jQuery选择器 内容 基本选择器有ID选择器、类选择器、标签选择器、通用选择器,事件的添加方法如下: $(...).事件名(function() { }); 属性样式有: $(...).css("border",

Js选择器总结

╄→гoц情女王★ 提交于 2020-01-23 04:46:46
一、原生JS选择器 # JS选择器常用的有getElementById()、getElementsByName()、getElementsByTagName()、getElementsByClassName()、querySelector()、querySelectorAll() A: getElementById(ID): 返回对指定ID的第一个对象的引用,如果在文档中查找一个特定的元素,最有效的方法是getElementById() B: getElementsByName(name): 返回文档中name属性为name值的元素,因为name属性值不是唯一的,所以查询到的结果有可能返回的是一个数组,而不是一个元素。 C: getElementsByTagName(tagname): 返回文档中指定标签的元素 D: getElementsByClassName():返回文档中所有指定类名的元素 E: querySelector():返回文档中匹配指定css选择器的第一个元素 F: querySelectorAll():返回文档中匹配指定css选择器的第一个元素 二、jQuery选择器 # 内容 基本选择器有ID选择器、类选择器、标签选择器、通用选择器,事件的添加方法如下: $(...).事件名(function() { }); 属性样式有: $(...).css("border"

jquery选择器

邮差的信 提交于 2020-01-23 04:45:46
基本选择器: $(”#myELement”) —— 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $(”div”) —— 选择所有的div标签元素,返回div元素数组 $(”.myClass”) —— 选择使用myClass类的css的所有元素 $(”*”) —— 选择文档中的所有的元素,以运用多种的选择方式进行联合选择:例如$(”#myELement,div,.myclass”) jQuery 使用 CSS 选择器来选取 HTML 元素。 $("p") 选取 <p> 元素。 $("p.intro") 选取所有 class="intro" 的 <p> 元素。 $("p#demo") 选取 id="demo" 的第一个 <p> 元素。 层叠选择器: $(”form input”) —— 选择所有的form元素中的input元素 $(”#main > *”) —— 选择id值为main的所有的子元素 $(”label + input”) —— 选择器返回的是label标签后面直接跟一个input标签的所有input标签元素 $(”#prev ~ div”) —— 该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签 组选择器: 下面还是现做一个约定:把”标签名或#id名或.class名

jquery选择器大全

给你一囗甜甜゛ 提交于 2020-01-23 04:44:28
没有什么新意,全是从网上摘抄的,如果哪天忘了,就来查查吧。 选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写jQuery代码的效率。本文配合截图、代码和简单的概括对所有jQuery选择器进行了介绍,也列举出了一些需要注意和区分的地方。 一、基本选择器 1. id选择器(指定id元素) 将 id="one" 的元素背景色设置为黑色。(id选择器返单个元素) $(document).ready(function () { $('#one').css('background', '#000'); }); 2. class选择器(遍历css类元素) 将 class="cube" 的元素背景色设为 黑色 $(document).ready(function () { $('.cube').css('background', '#000'); }); 3. element选择器(遍历html元素) 将 p 元素的文字大小设置为12px $(document).ready(function () { $('p').css('font-size', '12px'); }); 4. * 选择器(遍历所有元素) $(document).ready

Hybrid App开发之jQuery选择器

不羁的心 提交于 2020-01-23 04:38:46
前言: 前面学习了JQuery的简单使用,今天进一步学习一下JQuery的选择器。 什么是选择器? JQuery选择器通过标签名、属性名或者内容对DOM元素进行快速准确的选择,而不必担心浏览器的兼容性,通过JQuery选择器对页面元素精确定位,进而方便完成处理元素属性和行为事件。 选择器的优势 与传统的JavaScript获取页面元素和事务处理相比,JQuery具备以下几个优势: 代码比较简单 完善的检测机制 1、)代码更简单 在JQuery库中封装了大量可以通过选择器直接调用的函数,使编程更加简单轻松,使用简单的代码就可以使用相对复杂的功能。 2、)完善的检测机制 传统js设置页面元素的事务的时候,先要找到页面上的元素,然后在赋予相应的属性或事件,如果页面元素不存在,则页面会报错。所以要先判断页面元素是否存在。再进行属性或者事件操作。这样会造成代码繁琐。在JQuery定义页面元素的时候,无须考虑页面中是否存在,即使页面中不存在该元素也不会报错,极大的方便了代码的执行效率。 选择器分类 大致分为下面四大类 基本选择器 层次选择器 过滤选择器 表单选择器 过滤选择器又分为以下几个小分类 简单过滤选择器 内容过滤选择器 可见性过滤选择器 属性过滤选择器 子元素过滤选择器 表单对象属性过滤选择器 接下来挨个学习一下。 基础选择器 #id  根据Id匹配一个元素 返回的单个元素

系统学习javaweb4----CSS层叠样式表(结束)

淺唱寂寞╮ 提交于 2020-01-22 18:52:58
摘要 :这几天临近过年,事情有点多,学习总是段段续续的,今天总算完成了CSS的基本知识学习。 学习笔记 : 西瓜学习javaweb 1.css简述。 1.1 css是什么?有什么作用? HTML-------》 页面的结构 ------》人的面部(素颜) CSS--------》 美化页面 ------》给人化妆 CSS (Cascading Style Sheets):层叠样式表 层叠:一层一层叠加 样式表:存储样式的地方,多个样式 就好像:给一个人的面部化妆, 画口红, 画眼影, 打粉底。 HTML标签, 样式1, 样式2, 样式3。 CSS通常称为CSS样表或层叠样式表,主要用于设置HTML页面的文本内容(字体、大小、对其方式等)、图片的外形(高度、宽度、边框样式、边距等)以及版面的布局等外观显示样式。 CSS可以使HTML页面更加好看,CSS色系的搭配可以让用户更舒服,CSS+DIV布局更加灵活,更容易绘制出用户需要的结构。 CSS作用: 修饰HTML页面,更加丰富多彩地展示超文本信息。 1.2 CSS入门案例 <font size= "7" >今天天气好晴朗</font><br/> <font style="font-size: 120px ;">今天天气好晴朗</font> 1.3为什么实用CSS代替HTML属性设置样式 因为HTML属性在单独使用时有一定的局限性

HTML和CSS的一点入门

≡放荡痞女 提交于 2020-01-22 03:04:02
HTML学习笔记 第一天 1.HTML中不区分大小写 2.注释不能嵌套 3.标签必须结构完整 4.XML 更加严谨 5.浏览器尽最大努力正确加些页面,自动修正,但有些情况会错误修正 6.HTML标签可以嵌套,但是不能交叉嵌套 7.使用内联框架***iframe***可以引入一个外部的页面 使用iftrame来创建一个内联框架 现实开发中不推荐使用内联框架,内联框架中的内容不会被搜索引擎所检索 8.超链接:从一个页面跳转到另一个见面 用标签 来创建一个超链接 属性: href:指向链接跳转的目标地址, 相对路径or完整地址 a标签中的target属性可以用来指定打开链接的位置 _self:默认值 在当前窗口打开 _blank:在一个新的窗口中打开链接 可以设置一个内联框架的name属性值,链接将会在指定的内联框架中打开 用#代表空链接 默认为页面的顶部 HTML中有一个属性作为标签的唯一标识:id 9.center标签中的内容会默认在页面中居显示 10.发送电子邮件的超链接,自动打开计算机中默认的邮件客户端 联系我们 <!-- SRC属性: 相对路径: 返回路径:../ 返回上一级目录 --> <!-- 图片格式 JPEG:多颜色,可以压缩,但是不支持透明 一般用来保存照片 GIF: 支持的颜色较少,只支持简单透明,支持动态图 PNG:支持的颜色多,支持复杂透明 图片使用原则: --