css选择器

在前面一章我们已经点到过，很多的情况我们都是通过JQuery来对标签进行操作的，在这一章我们就来好好讲一讲这个JQuery。 JQuery初识 先看看JQuery的使用 JQuery的特点： 可以用及其简练的语言来做JS做的事情(write less,do more) JQuery就是一个JS文件,相当于一个Python的第三方模块，直接拿过来用就可以了（但是需要按照要求的规则）。但是原生的JS DOM是基础，其实还是通过这些基础来实现所有的操作。 我们要学习的，JQuery最常用的方向，也就是改变标签的属性、样式和事件相关的一系列操作。 JQuery的基础语法 JQuery的语法还是比较简单的，只有一句必须要掌握的 $(selector).action() 前面的selector就相当于一个标签选择器，后面的action就是相对应的操作 标签选择器 id选择器 $("#id") 标签选择器 $("tagName") class选择器 $(".className") 所有元素选择器 $("*") 选择器的配合使用 $("tagName.className") //两个条件一定不能加空格，要紧挨着，加了空格就有层级的效果，下面会讲到 组合选择器 同时符合多个条件 $("condition1,condition2...") 练习题 结合上面的各种基本组合器看看下面的方法应该怎么实现

标题中的 Cascading 亦可以理解为级联。 进入正文，这是一个很有意思的现象。可以直接跳到 总结一下 部分，看完再回过头来阅读本文。 引子 假设我们有如下结构： <p class="txt" style="color:red">123456789</p> 上面的 p 标签只有一个内联 CSS，很明显，在没有其他样式的干预下，文本 .txt 的颜色肯定就是红色的。 如果此时，我们希望改变 .txt p 标签元素的内容文字的颜色，但是不能去修改内联 CSS，只能通过样式文件去实现，像是这样： .txt { color: green; } 嗯。稍微对 CSS 有点了解的同学都会知道，上面的 CSS 文件设置的样式不会生效，因为内联样式比上述 CSS 中的样式优先级要更高。 上述这种说法不是很严谨，下文会细说。 OK，有同学就会说了，这简单，在 CSS 样式文件中添加 !important 后缀即可 。像是这样： .txt { color: green!important; } 如此操作之后，文本的颜色确实变成了绿色，因为在 CSS 文件中带 !important 后缀的规则优先级大于内联样式中同个但不带 !important 的样式。 内联样式的 !important 与样式表中的 !important 问题来了。 如果在内联样式中，我们也给加上 !important 会怎么样呢？

CSS-cascading stle sheets 1. CSS 什么是CSS？CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一个 简单来说，做了两件事，声明对象样式，声明匹配对象，以供调用。 2. 语法 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明: 选择器通常是HTML元素。 每条声明由一个属性和一个值组成。 属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。 p {color:red;text-align:center;} 当然，为了提高可读性，一般情况下是这样写的： p { color:red; text-align:center; } CSS 注释 注释以 "/*" 开始, 以 "*/" 结束: /*这是个注释*/ p { text-align:center; /*这是另一个注释*/ color:black; font-family:arial; } 2.1. id 和 class 选择器 如果要在HTML元素中设置CSS样式，需要在元素中设置"id

上节说道 ： 前端的整体构成：由html 、css、javascript 构成。 css ：层叠样式表 使用css选择器基本流程： 1. 制作所需的选择器，并在其中写入样式 2.将选择器绑定到 指定的html标签上 标签选择器： 用标签名来定义的 作用： 当前页面中，所有叫这个名字的标签，全部都绑定上样式 代码示例： div { width : 200 px ; height : 200 px ; background - color : yellow ; } class选择器： 用.来标示自身 自定义名称(名字符合见名知意即可) 命名时： 可以包含字母数字下划线，但是不能以数字开头 具有重用性，可以给多个标签使用 使用时； 使用给对应的标签进行绑定 例如 class 的优先级 高于 标签选择器 代码示例： . box { width : 500 px ; color : red ; } id选择器 用#来标示 自定义名称(名字符合见名知意即可) 命名时： 可以包含字母数字下划线，但是不能以数字开头 id选择器不具有重用性， 具有唯一性 如果多个标签同时使用，会造成不可预知的错误 id选择器要比class选择器的高 代码示例： #div1 { width : 100 px ; height : 100 px ; background - color : pink ; font -

什么是JQuery？ JQuery是一个JavaScript库，是一个轻量级的“写的少，做的多”的库。 JQuery语法：$(selector).action() selector ：可以是this，或者通过CSS选择器方式选择的HTML元素; action()：执行对元素的操作 书写格式注意： $(document).ready( Function(){ //此处为JQuery主体 } ); 为什么要放到document ready 函数中？为了防止文档在完全加载之前运行JQuery代码。 （个人拙见：使用javascript调用函数的时候，例如某按钮点击事件调用某方法，这个是在按钮初始化后点击事件触发时才执行的函数，而JQuery使用CSS选择器的选择方式获取事件元素，那么事件元素的加载还有JQuery代码的执行先后顺序就需要注意了） 选择HTML元素? 通过CSS选择器的方式选择，语法为$(“CSS选择器的选择方式”)，注意双引号 来源： CSDN 作者： 云朵儿的媛码 链接： https://blog.csdn.net/qq_38889321/article/details/103993626

1、层级选择器 选择器是jQuery的核心。一个选择器写出来类似 $('#dom-id') 。 公式 ： $(选择器).事件(事件函数) 回顾DOM操作中我们经常使用的代码： // 按ID查找： var a = document.getElementById('dom-id'); // 按tag查找： var divs = document.getElementsByTagName('div'); // 查找<p class="red">： var ps = document.getElementsByTagName('p'); // 过滤出class="red": // TODO: // 查找<table class="green">里面的所有<tr>： var table = ... for (var i=0; i<table.children; i++) { // TODO: 过滤出<tr> } 这些代码实在太繁琐了，并且，在层级关系中，例如，查找 <table class="green"> 里面的所有 <tr> ，一层循环实际上是错的，因为 <table> 的标准写法是： <table> <tbody> <tr>...</tr> <tr>...</tr> </tbody> </table> 很多时候，需要递归查找所有子节点。

CSS 语法 选择器通常是您需要改变样式的 HTML 元素。 每条声明由一个属性和一个值组成。 属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。 CSS声明总是以分号(;)结束，声明总以大括号({})括起来: p {color:red;text-align:center;} CSS 注释 注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。 CSS注释以 "/*" 开始, 以 "*/" 结束, 实例如下: /*这是个注释*/ p { text-align:center; /*这是另一个注释*/ color:black; font-family:arial; } id 和 class 选择器 如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。 id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。 以下的样式规则应用于元素属性 id="para1": #para1 { text-align:center; color:red; } 注意:ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。 class 选择器

CSS的简述 1.什么是CSS Cascading Style Sheet 层叠级联样式表 CSS :层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。多个样式可以层层覆盖叠加，如果不同的css样式对同一html标签进行修饰，样式有冲突的,应用优先级高的，不冲突的样式规则共同作用。 2.CSS的优势 内容和表现分离 网页结构表现统一，可以实现复用 外 样式十分的丰富 建议使用独立于html的css文件 利用SEO，容易被搜索引擎收录！ 3.CSS的发展史 CSS1.0 CSS2.0 DIV（块） + CSS，HTML 与 CSS 结构分离的思想，网页变得简单，SEO CSS2.1 浮动，定位 CSS3.0 圆角，阴影，动画…. 浏览器兼容性~ CSS的使用方式 1.内联样式：把CSS样式嵌入到html标签当中，类似属性的用法 <h1 style= "color:red;" >我是标题</h1> 好处:可以单独什么某个元素样式，缺点：不利于样式重用 2.内部样式：在head标签中使用style标签引入css <style> h1 { color : green ; } <

CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets)，样式定义了如何显示 HTML文件中的标签元素，CSS是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS语法 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。 selector1{ property: value; property: value; property: value; } selector2{ property: value; property: value; property: value; } 示例： h1{　　color:red;　　font-size:14px;} CSS引入方法 行内式 行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。 <div style="color: red; line-height: 1.5 !important;">>DIV</div> 嵌入式 嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。 <head> <style> div{ color: red; font-size:

元素选择器 用户点击按钮后，所有 <p> 元素都隐藏： $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); #id 选择器 当用户点击按钮后，有 id="test" 属性的元素将被隐藏： $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); }); .class 选择器 用户点击按钮后所有带有 class="test" 属性的元素都隐藏： $(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); }); 更多例子 1、当前元素 <script> $(document).ready(function(){ $("button").click(function(){ $(this).hide();//表示当前元素button }); }); </script> 2、所有元素 <script> $(document).ready(function(){ $("button").click(function(){ $("*").hide();/