web前段选择器

CSS选择器

派生选择器

1.依据元素的上下文关系定义样式
p span {
  font-size: 16px;
}

2.p标签下的span标签添加样式，无需在span标签里面增加id或者class，方便，这种样式比起自身添加样式的级别更高，覆盖自身样式

id选择器

1.HTML 添加 id,id是唯一的，css中的选择器以‘#’进行定义：

#check { color: red; }

2.注意，id选择器通常用于构建派生选择器：

#check span { color: blue; }

3.只有id为check的元素下的span标签有该样式。
4.id只有一个，但是样式可以使用多次
5.兼容老版本Windows/IE问题
该版本下，可能会忽略 padding： 10px

div#check {
  border: 1px dotted #000;
  padding: 10px;
}

类选择器

1.样式中频繁使用到，以’.’来显示

.red{ color: red; }

2.相同元素可设定相同的类，并遵守相同的样式规则

<span class="red"></span>
<span class="red"></span>
<!-- 两个span标签会颜色为红色 -->

3.与id选择器一样，也经常使用到派生选择器

p .red { color: red; }

属性选择器

1.对指定元素的HTML元素设定样式，用**[属性名]**来表示

[src] { color: blue; }
<!-- 带有属性src的元素颜色为蓝色 -->

2.属性和值选择器，[属性=值]

[src="./img/title.png"] { color: red: }

3.属性和多值选择器, [属性~=值]

[src="./img"] { color: red; }

4.参考表

• | 选择器 | 描述 |
• | [attribute] | 用于选取带有指定属性的元素。 |
• | [attribute=value] | 用于选取带有指定属性和值的元素。 |
• | [[attribute~=value]](http://www.w3school.com.cn/cssref/selector_attribute_value_contain.asp "CSS
• [attribute~=value] 选择器") | 用于选取属性值中包含指定词汇的元素。 |
• | [[attribute|=value]](http://www.w3school.com.cn/cssref/selector_attribute_value_start.asp "CSS
• [attribute|=value] 选择器") | 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。 |
• | [attribute^=value] | 匹配属性值以指定值开头的每个元素。 |
• | [[attribute[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n4NlLFGg-1571823503491)(http://www.w3school.com.cn/cssref/selector_attr_end.asp “CSS [attribute](https://math.jianshu.com/math?formula=%3Dvalue%5D%5D(http%3A%2F%2Fwww.w3school.com.cn%2Fcssref%2Fselector_attr_end.asp%20%22CSS%20%5Battribute)]=value] 选择器”) | 匹配属性值以指定值结尾的每个元素。 |
• | [attribute*=value] | 匹配属性值中包含指定值的每个元素。 |

后代选择器

1.选择作为某原色后代的元素

h1 em { color: red; }

2.选择的是所有后代

子元素选择器

与后代选择器不同，只能选择作为某元素子元素的元素

h1 > strong { color: red; }

相邻兄弟选择器

可选择紧接在另一个元素后的元素，且二者有共同父元素

h1 + p { margin-top: 50px; }

伪类选择器

1.向某些选择器添加特殊的效果

selector: pseudo-class { property: value }

2.锚伪类

a:link { color: green }  /* 未访问的链接 */
a:visited { color: green } /* 已访问的链接 */
a:hover { color: green } /* 鼠标移到链接上， 位于link，visited后才有效 */
a:active { color: green } /* 选定的链接，位于link后有效 */

3.伪类表

CSS 伪类.png

4.伪元素

# jQuery获取标签元素值

text()

获取文本

$(function () {
            $("#but1").click(function () {
                alert($("#but").text());
            });
        });

html()

获取标签+文本

带标签

$(function () {
            $("#but1").click(function () {
                alert($("#p1").html());
            });
        });

val()

获取value值

$(function () {
            $("#but3").click(function () {
                alert($("#in").val());
            });
        });

attr()

获取标签中某一个属性如 id、href…

 $(function () {
            $("#but2").dblclick(function () {
                alert($("#p2").attr("value"));
            });
        });

jQuery元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
$("#intro") id="intro" 的元素
$("body div")选取body中所有的div
$("body>div")选取body中的子元素
$("#one+div")id 为one的下一个div元素
$("#one").siblings("div")id为one的兄弟元素（同级的上一个和下一个）
$("body：first")选取body中的第一个元素
$("body：last")选取body中的最后一个元素
$("body：odd")选取body中的奇数元素
$("body：even")选取body中的偶数元素

jQuery属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元

$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
$("div[xx]")选择有xx属性的div
$("div[xx=yy]")选择有xx=yy属性的div

jQuery CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
下面的例子把所有 p 元素的背景颜色更改为红色：

$("p").css("background-color","red");

jQuery 表单选择器

$("input") 所有input元素
$("form :input")form下的input元素
$(":text")type=text的表单

添加类class

$("div,p,h2").addClass("d")向div,p,h2添加了class="d"的字段
$("div,p,h2").removeClass("d")向div,p,h2删除了class="d"的字段
$("div,p,h2").toggleClass("d")向div,p,h2有就删除了class="d"的字段没有就添加