基于hexo的主题记录
CSS
@规则
@media可以让你根据不同的屏幕大小而使用不同的样式，这可以使得不需要js代码就能实现响应式布局
选择器
- E > F 表示选择E元素的所有子F元素，与E F的区别在于，E F选择所有后代元素，>只选择一代。
- E + F 表示HTML中紧随E的F元素
- nth-child是个伪类的用法，如p:nth-child(2)就表示在p的父元素中选择位居第二位的p
jQuery
遍历
定义：parents()获得当前匹配元素集合中每个元素的祖先元素，使用选择器进行筛选是可选的。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
| $("b").parents()
<!DOCTYPE html>
<html>
<head>
<style>
b, span, p, html body {
padding: .5em;
border: 1px solid;
}
b { color:blue; }
strong { color:red; }
</style>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
<div>
<p>
<span>
<b>我的父元素是：</b>
</span>
</p>
</div>
<script>
var parentEls = $("b").parents()
.map(function () {
return this.tagName;
})
.get().join(", ");
$("b").append("<strong>" + parentEls + "</strong>");
</script>
</body>
</html>
返回：我的父元素是：SPAN, P, DIV, BODY, HTML
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
$('li.item-a').parents().css('background-color', 'red');
遍历li.item-a以上的所有元素，将其背景设为红色
|
window
定义：scrollTo() 方法可把内容滚动到指定的坐标。
语法：scrollTo(xpos,ypos)
indexOf()方法
定义：indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
语法：stringObject.indexOf(searchvalue,fromindex)
searchvalue：必需。规定需检索的字符串值。
fromindex：可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。
注释：
- indexOf() 方法对大小写敏感！
- 如果要检索的字符串值没有出现，则该方法返回 -1。
属性操作
attr()方法
attr() 方法设置或返回被选元素的属性值。
1
| $(selector).attr(attribute)
|
attribute 规定要获取其值的属性。
1
| $(selector).attr(attribute,value) //attribute：规定属性的名称。value：规定属性的值。
|
1
2
| $(selector).attr(attribute,function(index,oldvalue)) //attribute：规定属性的名称。
//function(index,oldvalue)：规定返回属性值的函数。该函数可接收并使用选择器的index 值和当前属性值。
|
1
| $(selector).attr({attribute:value, attribute:value ...}) //attribute:value：规定一个或多个属性/值对。
|
target属性
定义：显示哪个 DOM 元素触发了事件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p, button, h1, h2").click(function(event){
$("div").html("点击事件由一个 " + event.target.nodeName + " 元素触发");
});
});
</script>
</head>
<body>
<h1>这是一个标题</h1>
<h2>这是另一个标题</h2>
<p>这是一个段落</p>
<button>这是一个按钮</button>
<p>标题、段落和按钮元素定义了一个点击事件。如果您触发了事件，下面的 div 会显示出哪个元素触发了该事件。</p>
<div></div>
</body>
</html>
点击按钮
返回：点击事件由一个 BUTTON 元素触发
|