CSS
-
选择器：
-
通配选择器
<!-- 由*表示的为通配选择器，可以运用到任何HTML元素 --> * { color:orange; } -
类选择器
注意：类选择器不受标签的限制，只受class值的限制
<!-- 由.Xxx表示的为类选择器，当由class=“Xxx”时则会将该样式运用在该语句上 --> .speak { color:orange; } <p class="speak">Zzzzzzzz</p> -
元素选择器
<!-- 将所有<h1></h1>标签都运用上该样式 --> h1 { color:orange; } -
ID选择器
注意：不同标签的ID值不可以相同，并且不可以数字开头
<!-- 由#Xxx表示的为ID选择器，当由id=“Xxx”时则会将该样式运用在该语句上 --> #speak { color:orange; } <p id="speak">Zzzzzzzz</p> -
交集选择器
<!-- 由p.Xxx表示的为交集选择器，p.speak实际上可以翻译为：p元素且类名为speak的 --> .speak { color:green; } p.speak { color:orange; } <h1 class="speak">Zzzzzzzz</h1> <p class="speak">Zzzzzzzz</p> -
并集选择器
.speak { color:green; } .answer { color:orange; } <!-- 此时，若要为speak和answer指定的元素添加相同样式，则可以使用并集选择器 --> .speak, #zzr, .answer { font-size:18px; } <h1 class="speak">Zzzzzzzz</h1> <p class="answer">Zzzzzzzz</p> <p id="zzr">Zzzzzzzz</p> -
后代选择器
<!-- 字面意思就是：ul中的li，该样式的作用对象是<ul>的所有后代为<li>的元素 --> ul li { color:green; } <ul> <li>1</li> <li>2</li> <li>3</li> <div> <li>4</li> <!-- 此li也会运用到相应样式 --> </div> </ul> <!-- 同理也可以如下-------------------------------------------------- --> .subject li { color:green; } <div class="subject"> <li>1</li> <li>2</li> <li>3</li> <div> <li>4</li> <!-- 此li也会运用到相应样式 --> </div> </div> <!-- 同理也可以如下-------------------------------------------------- --> .subject #front-end { color:green; } <div class="subject"> <li>1</li> <li>2</li> <li>3</li> <div> <li id="front-end">4</li> </div> </div> -
子代选择器
与后代选择器的区别就是：后代选择器会选择其中所有的对应元素，包括但不限于子元素、孙元素；而自带选择器只会选择其子元素，并不会选择其他孙元素之类的元素。
<!-- 字面意思就是：ul中的li，该样式的作用对象是<ul>的子元素为<li>的元素 --> ul>li { color:green; } <ul> <li>1</li> <li>2</li> <li>3</li> <div> <li>4</li> <!-- 此li不会运用到相应样式 --> </div> </ul -
兄弟选择器
<!-- 该样式的作用对象是与div元素紧紧相邻的兄弟元素（不包括div本身） --> div+p { color:green; } <p>1</p> <div>2</div> <p>3</p> <!-- 此时只有这个会应用样式 --> <p>4</p> <!-- 若出现这种情况，则此时没有一个元素会应用到该样式 --> <p>1</p> <div>2</div> <h1>zzr</h2> <p>3</p> <p>4</p><!-- 该样式的作用对象是与div元素之后所有的兄弟元素（不包括div本身） --> div~p { color:green; } <p>1</p> <div>2</div> <p>3</p> <!-- 此时这个会应用样式 --> <p>4</p> <!-- 此时这个会应用样式 -- -
属性选择器
<!-- 此时选择的是所有具有title这个属性的元素 --> [title] { color:red; } <div title="qqq">1</div> <!-- 此时这个会应用样式 --> <div title="www">2</div> <!-- 此时这个会应用样式 --> <div>3</div> <div>4</div>[title=”qqq"] { color:red; } <div title="qqq">1</div> <!-- 此时这个会应用样式 --> <div title="www">2</div> <div>3</div> <div>4</div><!-- 以q开头的 --> [title^=”q"] { color:red; } <div title="qsc">1</div> <!-- 此时这个会应用样式 --> <div title="www">2</div> <div>3</div> <div>4</div><!-- 以w结尾的 --> [title$=”w"] { color:red; } <div title="qsc">1</div> <div title="szw">2</div> <!-- 此时这个会应用样式 --> <div>3</div> <div>4</div><!-- 以包含s的 --> [title*=”s"] { color:red; } <div title="qsc">1</div> <!-- 此时这个会应用样式 --> <div title="szw">2</div> <!-- 此时这个会应用样式 --> <div>3</div> <div>4</div> -
伪类选择器（动态伪类）
注意：link=>visited=>hover=>active的顺序不要变，不然会出现效果显现不出来的情况
<!-- 选择未选中链接赋予样式 --> a:link { color:red; } <!-- 选中已经访问过该链接的赋予样式 --> a:visited { color:green; } <!-- 鼠标悬浮时赋予样式 --> a:hover { color:blue; } <!-- 鼠标按下时赋予样式 --> a:active { color:black; } <a href="www.baidu.com">百度</a> <a href="www.jd.com">京东</a><!-- 当点击某个输入框或者选中框时赋予样式 --> input:focus { background-color:red; } select:focus { background-color:red; }<!-- 当鼠标放到<span>标签的文字上时赋予样式 --> span:active { color:red; } -
伪类选择器（结构伪类）
<!-- 选中的是div的第一个儿子元素 --> div>p:first-child { color:red; } <div> <p>1</p> <!-- 此时这个会应用样式 --> <p>2</p> <p>3</p> <p>4</p> </div> <!-- 注意：----------------------------------------------------- ---> div>p:first-child { color:red; } <div> <span>1</span> <!-- 此时这个不会应用样式,且没有元素会被赋予样式 --> <p>2</p> <p>3</p> <p>4</p> </div><!-- 选中的是div的最后一个儿子元素 --> div>p:last-child { color:red; } <div> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <!-- 此时这个会应用样式 --> </div><!-- 选中的是div的第3个儿子元素 --> div>p:nth-child(3) { color:red; } <div> <p>1</p> <p>2</p> <p>3</p> <!-- 此时这个会应用样式 --> <p>4</p> </div><!-- 选中的是div中所有p类型，再从其中选中第一个 --> div>p:first-of-type { color:red; } <!-- 选中的是div中所有p类型，再从其中选中最后一个 --> div>p:last-of-type { color:red; } <div> <span>zzz</span> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <span>zzz</span> </div> -
伪类选择器（否定伪类）
<head> <meta charset="UTF-8"> <title>default</title> <style> <!-- 排除类名为fail的元素 --> div>p:not(.fail) { color:red; } <!-- 排除title中包含test的元素 --> div>p:not([title^="test"]) { color:red; } <!-- 排除div中第一个儿子元素 --> div>p:not(:first-child) { color: red; } </style> </head> <body> <div> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p class="fail" title="test1">5</p> <p class="fail" title="test2">6</p> </div> </body> -
伪类选择器（UI伪类）
<!-- 可以实现当勾选复选框后应用该样式，而取消复选框后又自动取消该样式 --> input:checked { width: 30px; height: 30px; } <input type="checkbox"> <!-- 可以实现当勾选单选框后应用该样式，而点击另一个同组单选框后又自动取消该样式 --> input:checked { width: 30px; height: 30px; } <input type="radio" name="gender"> <input type="radio" name="gender"><!-- 选中的是被禁用的input元素 --> input:disabled { background-color: aliceblue; } <!-- 选中的是可用的input元素 --> input:enabled { background-color: aqua; } -
伪类选择器（目标伪类）
<!-- 为跳转的目标赋予样式 --> div:target { background-color: beige; } <!-- 通过id跳转 --> <a href="#one">点击跳转1</a> <a href="#two">点击跳转2</a> <a href="#three">点击跳转3</a> <a href="#four">点击跳转4</a> <a href="#five">点击跳转5</a> <a href="#six">点击跳转6</a> <div id="one">这是第1个</div><br> <div id="two">这是第2个</div><br> <div id="three">这是第3个</div><br> <div id="four">这是第4个</div><br> <div id="five">这是第5个</div><br> <div id="six">这是第6个</div> -
伪类选择器（语言伪类）
<!-- 根据lang属性赋予满足条件的div元素样式 --> div:lang(en) { color: red; } <!-- 此时不再指定元素，而是只要有使用lang="en"的元素都可以使用该样式 --> :lang(en) { color: red; } <div lang="en">zzzzzzzz</div> -
伪元素选择器**（作用：选中元素中的一些特殊位置）**
<!-- 使用两个冒号，表示伪元素。div::first-letter是指选中div中的第一个文字 --> div::first-letter { color: red; font-size: 40px; } <!-- 选中第一行文字赋予样式，这个第一行指的是浏览器中的第一行，随着浏览器的页面大小变化而变化 --> div::first-line { color: black; } <!-- 为鼠标选中的文字赋予样式 --> div::selection { background-color: green; color: yellow; } <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et, a!</div><!-- 选中的是p元素最开始的位置，随后创建一个content对应的子元素放在最开始的位置 --> p::before { content: "￥"; } <!-- 选中的是p元素最后面的位置，随后创建一个content对应的子元素放在最后面的位置 --> p::after { content: ".00"; } <p>199</p><br> <p>299</p><br> <p>399</p><br> <p>499</p>需要注意的是：无论是before或者after其创建的子元素都是不可选中的
-
选择器的优先级：(行内样式 > )ID选择器 > 类选择器 > 元素选择器 > 通配选择器
如果是复杂的选择器则需要进行判断：
<!-- 此时根据（a,b,c）判断优先级，其中a:ID选择器的个数；b:类、伪类、属性、选择器的个数；c:元素、伪元素选择器的个数。 --> <!-- .container span.slogan中.container和.slogan为类选择器、span为元素选择器。故其值为（0，2，1） --> .container span.slogan { color: red; } <!-- div>p>span:first-child中:first-child为伪类选择器，div>p>span均为元素选择器，故其值为（0，1，3），故（0，2，1）大，所以使用的是red颜色 --> div>p>span:first-child { color: yellow; } <div class="container"> <p> <span class="slogan">天下兴亡，匹夫有责</span> <span>辛烷</span> </p> </div><!-- 通过设置!important可以让该样式优先级最高 --> .slogan { color: purple !important; }
-
JS
-
每一条语句都需要以分号(;)结尾
-
在标签中的onclick下添加JS代码：
<button onclick="alert('Error');">按钮1</button> -
在标签中的href添加JS代码：
<a href="javascript:alert('Error');">链接1</a>需要注意：此时需要先声明是javascript语言，并且无论是button或者a下的js语句都需要在最后面加上分号。
-
可将JS代码编写到外部的.js文件中，使用时需要引入（常用）：
<script type="text/javascript" src="./js-code/Demo1.js"></script>js标签一但用于引入外部js文件后，其中间就不可以再编写js代码了（如上代码中就不可以再，并且让其在页面等属性都加载完之后获取id等属性的话，要使用：
// 要使用window.onload window.onload = function () { var btn = document.getElementById("button1"); btn.onclick = function () { alert('Error'); } } -
获取元素
// 用对象的id获取元素 var btn = document.getElementById("btn"); // 用标签名获取一组元素 var btn = document.getElementsByTagName("li"); // 用name属性获取一组元素 var btn = document.getElementsByName("username"); -
触发事件
// 点击事件 <button id="button1" onclick="alert('Error');">按钮1</button> // 效果等同于（一般用下面这个） btn.onclick = function () { alert('Error'); } -
读取内容
// 读取HTML里内部的HTML代码 btn.innerHTML // 读取Value属性 btn.value // 读取type属性 btn.type // 读取name属性 btn.name // 但是不能够直接读取class属性，如下： btn.class // 而是应该用.className btn.className -
获取元素节点的子节点
<ul id="list"> <li><span>这是第1个</span></li> <li><span>这是第2个</span></li> <li><span>这是第3个</span></li> <li><span>这是第4个</span></li> <li><span>这是第5个</span></li> <li><span>这是第6个</span></li> <li><span>这是第7个</span></li> <li><span>这是第8个</span></li> </ul> // chlidNodes 返回当前节点的指定标签名的后代节点。如上：会输出17个节点，包括ul本身 // firstChild 返回当前节点的第一个子节点。 //lastChild 返回当前表示节点的最后一个子节点。 -
获取元素节点的父节点和兄弟节点
<ul"> <li><span>这是第1个</span></li> <li><span>这是第2个</span></li> <li><span>这是第3个</span></li> <li id="list><span>这是第4个</span></li> <li><span>这是第5个</span></li> <li><span>这是第6个</span></li> <li><span>这是第7个</span></li> <li><span>这是第8个</span></li> </ul> // parentNode 获取当前节点的父节点 // previousSibling 获取当前节点的前一个兄弟节点 // nextSibling 获取当前节点的后一个兄弟节点 -
复选框的操作
// 使用checked可以选择选中复选框或者返回复选框的bool值 chs[i].checked = true; -
DOM的增删改
// DOM的增 // 第一种方式：使用createElement创建所需要的元素后再通过appendChild绑定父元素。 <ul id="practice"> <li><span>this is a practice</span></li> <li id="chsNode"><span>this is a practice</span></li> <li><span>this is a practice</span></li> <li><span>this is a practice</span></li> </ul> var addSpan = document.getElementById('add-span'); var practice = document.getElementById('practice'); addSpan.onclick = function () { // 选择创造一个span元素 var span = document.createElement('span'); // 写入要给与span元素的文本节点 var textNode = document.createTextNode('this is a new practice'); // 选择创造一个li元素 var li = document.createElement('li'); // 为span元素添加文本节点 span.appendChild(textNode); // 将span这个子元素添加到li这个父元素中去; li.appendChild(span); // 将li这个子元素添加到ul这个父元素中去; practice.appendChild(li); } // 第二种方式：使用createElement创建所需要的元素后再通过insertBefore将指定的子节点前面插入新的子节点 var span = document.createElement('span'); var textNode = document.createTextNode('this is a new practice'); var li = document.createElement('li'); // 为span元素添加文本节点 span.appendChild(textNode); // 将span这个子元素添加到li这个父元素中去; li.appendChild(span); // 将li这个子元素添加到ul这个父元素中的指定子元素的前面去; practice.insertBefore(li, chsNode); // 第一个参数li是新的节点，第二个参数chsNode是指定子元素的id，即表明其的位置// DOM的改 // 将li这个子元素替换ul这个父元素中的某个指定子元素; practice.replaceChild(li, chsNode); // 第一个参数li是新的节点，第二个参数chsNode是指定子元素的id，即表明其的位置// DOM的删除 // 将chsNode指定子元素从父元素practice中删除 practice.removeChild(chsNode);// 注意，使用innerHTML也可以完成一些删除修改的操作，而且更简单 practice.innerHTML += "<li><span>this is a new practice</span></li>"; // 一般使用两种方法结合的方式 // 选择创造一个li元素 var li = document.createElement('li'); // 为li中直接添加HTML代码，减少复杂程度 li.innerHTML += "<span>this is a new practice</span>"; // 将li这个子元素添加到ul这个父元素中去; practice.appendChild(li); -
鼠标的监听
使用event事件（event作为传参，但是不用实现定义，因为他是已经被定义好的）可以获得鼠标的移动点击等等操作的数据。
var boxMove = document.getElementById('box-move'); var boxShow = document.getElementById('box-show'); boxMove.onmousemove = function (event) { var x = event.clientX; var y = event.clientY; boxShow.innerText = 'x:' + x + 'y:' + y; } // 为了兼容性，应该使用下述方式：（使用windows.event） var boxMove = document.getElementById('box-move'); var boxShow = document.getElementById('box-show'); boxMove.onmousemove = function (event) { if (!event) { event = window.event; } var x = event.clientX; var y = event.clientY; boxShow.innerText = 'x:' + x + 'y:' + y; }// div跟着鼠标的移动而移动 var boxMove = document.getElementById('box-move'); var boxShow = document.getElementById('box-show'); document.onmousedown = function (event) { if (!event) { event = window.event; } var x = event.pageX; var y = event.pageY; boxMove.style.left = x + 'px'; boxMove.style.top = y + 'px'; }// 实现拖拽div属性 boxMove.onmousedown = function (event) { var ol = event.clientX - boxMove.offsetLeft; var or = event.clientY - boxMove.offsetTop; // console.log(ol); // div中的左偏移量 // console.log(or); // div中的上偏移量 // console.log(event.clientX); // 页面的左偏移量 // console.log(event.clientY); // 页面的上偏移量 // console.log(boxMove.offsetLeft); // div此时的左偏移量 // console.log(boxMove.offsetTop); // div此时的上偏移量 document.onmousemove = function (event) { if (!event) { event = window.event; } var x = event.clientX; var y = event.clientY; boxMove.style.left = (x - ol) + 'px'; boxMove.style.top = (y - or) + 'px'; } document.onmouseup = function () { document.onmousemove = null; } } -
BOM（浏览器对象模型）
- Windows：代表的是整个浏览器的窗口
- Navigator：代表的是当前浏览器的信息
- Location：代表的是浏览器的地址栏信息
- History：代表的是浏览器的历史记录（此处的历史记录指的是操作浏览器返回刚刚的页面等一系列操作）
-
定时器：
setInterval(function() {},1000) 为开启一个定时器，function中的是要定时启动的操作，1000指的是1000ms执行一次；
若要停止定时器则需要使用clearInterval()，并且clearInterval必须有传参。
var interval = setInterval(function () { i++; alert(i + 'Error'); if (i >= 5) clearInterval(interval); }, 1000); -
使用监听器来构造方法：
以下代码实现的是点击一个按钮图片开始循环播放，由于使用定时器实现的，因此会出现多次点击按钮不断触发这个定时器导致图片切换速度极快。因此用监听器来解决这一问题，使用的监听器可以在点击播放的时候将该按钮无效化，而在点击停止后再回复播放按钮的有效。
<script type="text/javascript"> var btn = document.getElementById('btn'); var stopBtn = document.getElementById('stop-btn'); var pic = document.getElementById('pic'); var picList = ['./images/b1.png', './images/b2.png', './images/b3.png'] // 为btn添加监听，'click'表示监听的是点击事件；btnClick表示监听的是btnClick方法。 btn.addEventListener('click', btnClick, false); var i = 0; function btnClick() { // 移除监听事件，让btn按钮失效。 btn.removeEventListener('click', btnClick, false); var startSco = setInterval(function () { pic.src = picList[i]; i = (i + 1) % picList.length; stopBtn.onclick = function () { clearInterval(startSco); // 当图片循环暂停后再次重启监听事件。 btn.addEventListener('click', btnClick, false); } }, 1000); } </script>
299
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
