css选择器

1 jQuery jQuery 是一个 JavaScript 库,即对js的封装 jQuery 极大地简化了 JavaScript 编程,如对节点增删改查及动画添加 jQuery 封装了异步post和 get请求 1.1 jQuery 可以做的 HTML 元素选取 HTML 事件函数 HTML 元素操作-增删改查 CSS 操作 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX 1.2 jQuery 导入 把jquery.js导入项目WebContent的js 目录下 在html的head标签中导入jQuery的js文件 在script 标签中写jQuery代码，如图，代码都写在function的括号内 1.3 文档就绪函数 < % @ page contentType = "text/html;charset=UTF-8" language = "java" % > < html > < head > < title > Title < / title > < script type = "text/javascript" src = "./js/jquery-3.4.1.js" > < / script > < script type = "text/javascript" > // 文档加载完毕后再调用这个函数,js /* window.onload =

CSS1 中定义的选择器 类型选择器 用于选择指定类型的元素（其实他就是 html 标签选择器），常见用法如下： body { /*对 body 元素定义样式*/ } body,div { /*同时选择多种标签元素*/ } ID 选择器 用于选择指定 ID 的 html 元素，常见使用方法如下： <div id="nav"> </div> <style> #nav { /*定义 ID 为 nav 的元素的样式*/ } </style> 因为 CSS 的渲染顺序是从右往左进行渲染的，而 ID 则是全唯一的，那么就可以省略掉前面的类型选择器。 类选择器 用于选择指定类名的 html 元素，常见使用方法如下： <div class="nav"> </div> <style> .nav { /*定义 class 为 nav 的元素的样式*/ } </style> 包含选择器 用于选择层级嵌套的元素，常见使用方法如下： <div class="nav"> <div class="nav-tools"> </div> </div> <div class="nav"> <div> <div class="nav-tools"> </div> </div> </div> <style> .nav .nav-tools { /*定义元素的父级元素 class 包含 nav，且子元素class 包含

html和css w3c 规范 结构化标准语言 样式标准语言 行为标准语言 1） 盒模型 常见的盒模型有w3c盒模型（又名标准盒模型）box-sizing:content-box和IE盒模型（又名怪异盒模型）box-sizing:border-box。 标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin 2）css3 新特性 常问： word-wrap 文字换行 text-overflow 超过指定容器的边界时如何显示 text-decoration 文字渲染 text-shadow文字阴影 gradient渐变效果 transition过渡效果 transition-duration：过渡的持续时间 transform拉伸，压缩，旋转，偏移等变换 animation动画 audio音频 vadio视频 RGBA和透明度 css3 边框 border-radius 圆角 box-shadow 盒子阴影 border-image 边框图片 css3 背景 background-image 背景图片 background-size 背景大小 background-origin 背景图像的位置区域 background-clip

选择器： 1. 标签选择器：根据标签名找 2.id选择器： 根据id的属性值来找元素 例：#id的属性值 3.class选择器：根据class的属性值来找元素 例：.class的属性值 4.并列 ： 关键符号， 形式：选择器1，选择器2 例子 div1，div2 5.后代 ： 关键符号 空格 形式： 父选择器 子选择器 6.全局选择器： 关键符号 * 形式： *{ } CSS CSS 层叠样式表 用来美化页面 1.css分类 （1） 内链（行内）： 写在标签里面 以属性的形式 属性名style 不推荐 优先级最高 （2） 内嵌： 写在head标签内 以标签的形式表现 标签名是style 写法：选择器{样式} （3） 外部： 写在head标签内 以标签的形式表现 标签名是link < link rel = “ stylesheet ” href = “ css/css.css”> 引入外部文件 *.css 样式表现形式： 样式： 样式值； 样式：样式值； 选择器：找元素（标签、标记） 将某些样式应用到指定的标签上 来源： https://www.cnblogs.com/baobaoa/p/8552905.html

块元素 ：div ，p ，ul , li ,pl,h1-h6… 行元素 ：span ,a ,strong ,em ,b ,s ,i ,font… –> 行内块元素 ： <img/>,<input/>,<td/> 显示模式的转换 –>块转行内：display-inline； –>行内转块：display：block； –>块，行内元素转换为行内块：display：inline-block a元素 可以包含任何元素，除了它本身。 p元素 不可以包含任何其他的块元素。 css选择器 ① id选择器 ： #id属性值{} ② 类选择器 ： .calss属性值{} 可以同时为一个元素设置多个calss属性值，多个值之间用空格隔开。 –> 选择器分组: 语法 选择器1，选择器2，选择器N{} //为id为p1的元素，class为p2的元素，还有h1，同时设置一个背景颜色为黄色 #p1 , . p2 , h1 { background - color : yellow } ---->可以同时选中多个选择器对应的元素。 ③ 通配选择器 ： *{} 用来选中页面中所有的元素。 ④ 复合选择器(交集选择器) ：可以选中同时满足多个选择器的元素。 选择器1选择器2选择器N{} //为拥有class为p3的span元素设置一个背景颜色为黄色 span . p3 { background - color :

# 大致内容： 1. HTML标签：表单标签 2. CSS： ## HTML标签：表单标签 * 表单： * 概念：用于采集用户输入的数据的。用于和服务器进行交互。 * form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围 * 属性： * action：指定提交数据的URL * method:指定提交方式 * 分类：一共7种，2种比较常用 * get： 1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。 2. 请求参数大小是有限制的。 3. 不太安全。 * post： 2. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解) 2. 请求参数的大小没有限制。 3. 较为安全。 * 表单项中的数据要想被提交：必须指定其name属性 * 表单项标签： * input：可以通过type属性值，改变元素展示的样式 * type属性： * text：文本输入框，默认值 * placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息 * password：密码输入框 * radio:单选框 * 注意： 1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。 2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值 3. checked属性，可以指定默认值 * checkbox

jQuery和AJAX基础 jQuery 基础： 1.jQuery 选择器： 元素选择器：$("p")； #id 选择器：$("#test")； .class 选择器：$(".test")； 举例子：选取所有元素$("*")；选取当前 HTML 元素 $(this)；选取所有 type="button" 的 <input> 元素 和 <button> 元素$(":button")； 2.jQuery 事件选择器： 1）$(document).ready()：$(document).ready()方法允许我们在文档完全加载完后执行函数。 2）dblclick()：当双击元素时，会发生dblclick 事件。 3）mouseenter()：当鼠标指针穿过元素时，会发生 mouseenter 事件。 4）focus()：当元素获得焦点时，发生focus 事件。 5）blur()：当元素失去焦点时，发生blur 事件。 3.jQuery 效果 1）隐藏和显示：$("#icon").toggle();将id=icon的元素在隐藏和显示之间切换； 2）淡入淡出：$(selector).fadeIn(speed,callback);//jQueryfadeIn() 用于淡入已隐藏的元素。 $(selector).fadeOut(speed,callback);//jQuery fadeOut()

querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。 querySelectorAll() 方法返回文档中所有匹配指定 CSS 选择器的元素，语法跟jQuery类似，返回值是一个NodeList列表。 我们先来回顾一下获取页面中元素的几种方法： 获取 body 元素 获取 html 元素 通过 id 名 通过 标签名 通过 class 名 通过 name 的值 匹配指定 CSS 选择器 对应的方法为： document.body ，获取 body 元素。 //获取body var body = document . body ; document.documentElement ，获取 html 元素。 //获取html var html = document . documentElement ; document.getElementById("") ，根据id获取元素，只能获取唯一一个，只能使用document获取。 document . getElementById ( "" ) ; //根据id获取元素，只能获取唯一一个 //只能使用document获取 document.getElementsByTagName("") ，根据标签名获取元素列表，是一个列表，这个列表类型是HTMLCollection HTML标签列表

壹 ❀ 引 早在大半年前，我在负责整理定义了前端组JavaScript开发规范与less、css样式开发规范。一直想将两个规范整理成文章，但在整理了JavaScript规范后，我花了较多的时间在学习JavaScript基础知识，所以对于样式规范一直处于放置状态。直到上周我收到了一条关于JavaScript规范的评论，提醒了我样式规范不能再拖了，那么在放假前花点时间整理一遍作为复习也算不错。 说在前面，本文虽然作为规范但对于less与css写法也给出了部分建议，所以在阅读本规范前建议读者先掌握less基本用法，而对于规范这里也只是给出建议，毕竟适合自己的才是最好的，本文开始。 贰 ❀ 命名规范 贰 ❀ 壹 class、id命名 JavaScript变量我们推荐使用小驼峰，但样式命名得做点改变，这里我们推荐使用 - 分隔符拼接。 /* good */ #foo-bar;.foo-bar /* bad */ #fooBar;.fooBar 贰 ❀ 贰 less变量命名 我们知道less提供了样式变量可供复用，对于多单词变量命名推荐采用 @ 开头并以 - 分隔符拼接的命名方式。 /* good */ @border-color:#fff; /* bad */ @borderColor: #fff; 贰 ❀ 叁 less函数命名 除了变量，less还提供了函数用于复用多属性class样式类

Css01 一、CSS简介 a) Cascading Style Sheets 层叠样式表(级联样式表) b) 是一个文本文件，不需要编译 由浏览器直接执行 c) 作用是 定义网页外观 如 字体,背景，等。。。 d) 可以配合JavaScript做出绚丽的效果 二、CSS 特点 a) 精确的定位 准确的控制页面的任何元素 b) 精细的控制 可以做到像素级别的调整 c) 样式与内容分离 便于维护，便于重用 三、使用方法 内联 写在标签内的style属性中的叫做内联 例如: <p style="color:yellow">祖传牛皮癣,专治老中医</p> 内嵌 写在head标签的style标签中的属性叫做内嵌 例如: <style> p{color:red;} </style> 外联 通过外部引入的方式使用 例如:<link rel=”stylesheet” type=”text/css” href=”./css.css”/> 四、基础语法 1.CSS 格式 选择器 负责圈定范围，要修改的元素集合 声明 由属性名和属性值组成，中间用冒号连接(属性名:属性值)，用于设定具体样式 CSS组成 由选择器和一个或多个声明组成，多个声明之间用分号 选择器{属性名:属性值;属性名:属性值;} 2.CSS 注释 Html 注释 <!-- --> 样式表里面的注释就一种 /* 这里面是注释内容 */