【JavaScript】DOM选择器和jQuery
很难受，第二次的jQuery
调用：
<head>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
...
</head>
核心语法
$(selector).action()
$是重要的jQuery符号，实际上，jquery把所有的功能都封装在一个全局变量jQuery中，而$就是一个合法的变量名，是jQuery的别名（jQuery(selector).action()）：
window.jQuery; // jQuery(selector, context)
//注意这里的对象是window，在某些场合，jQuery的操作对象不一定是一个你可以筛到的标签，也可能是整个窗体，这种概念在js中应该有。
window.$; // jQuery(selector, context)
$ === jQuery; // true
typeof($); // 'function'
$; // jQuery(selector, context)
jQuery.noConflict();
//解除别名$
$; // undefined
jQuery; // jQuery(selector, context)
选择器
CSS选择器（基础！）
基本选择器：
- 标签选择器：
p {color:gray}; - id选择器：
#info {font-size:30px} - class选择器：
info {background:#ff0} - 统配选择器：
* {margin:0;padding:0}
组合选择器：
DOM选择器
因为jq的选择器其实和DOM选择器几乎差不多，但是在选择语法上有很好的优化，所以我觉得只要理解了DOM其实对正确运用jq选择器有很大的帮助，顺便补一波DOM没有写的笔记。
选择DOM
始终记住DOM是一个树形结构。操作一个DOM节点实际上就是这么几个操作：
-
更新：更新该DOM节点的内容，相当于更新了该DOM节点表示的HTML的内容；
-
遍历：遍历该DOM节点下的子节点，以便进行进一步操作；
-
添加：在该DOM节点下新增一个子节点，相当于动态增加了一个HTML节点；
-
删除：将该节点从HTML中删除，相当于删掉了该DOM节点的内容以及它包含的所有子节点。
既然要进行操作，那么一定要先拿到一个节点对象，我们可能不一定能直接拿到我们想要操作的节点，所以可以先找到父节点然后缩小范围，再进行选择。
比较基础的几种方式：
document.getElementById()document.getElementsByTagName()- CSS选择器
document.getElementsByClassName()
范例练习：
<body>
<div id="test-div">
<div class="c-red">
<p id="test-p">JavaScript</p>
<p>Java</p>
</div>
<div class="c-red c-green">
<p>Python</p>
<p>Ruby</p>
<p>Swift</p>
</div>
<div class="c-green">
<p>Scheme</p>
<p>Haskell</p>
</div>
</div>
</body>
//----------------------------------
//----------脚本部分-----------------
<script>
var js=document.getElementById('test-p');//通过ID直接获取
var arr=document.getElementsByClassName('c-red c-green')[0].getElementsByTagName('p');
// console.log(arr);
//前一部分通过class获得的是一个<div>标签，但是因为是通过elements获得的，所以他是被包裹在一个数组里面的。所以要通过[0]把他取出来，这时候他就是一个单纯的<div class="c-red c-green">。但是我们需要的是这里面的三个<p>标签的集合。这里比较容易出现误区，让我们觉得这个<div>就已经是正确答案了，其实还是不对的，我们需要的是一个数组，而不是一个标签。所以需要再次通过tag筛选出需要的<p>标签。
//综上，整句话的意思就是，在整个document里面找到class为“c-red c-green”的元素数组，并且取出里面的第一个（其实也是唯一一个）元素，再从这个元素中，筛出标签为<p>的元素集合。
var haskell=document.getElementsByClassName('c-green')[1].lastElementChild;
console.log(haskell);
//这题我用的方法比较蠢，是在观察整个文档结构之后自己用索引位置获取出来的。用到了children方法，并且按照索引获取了最后一个children。
//翻译过来 就是：在整个document中通过类名为“c-green”获取想要的父级元素集合，其中第二个是我们想要的目标父级元素，再从父级元素标签中获取他的最后一个子级标签。
//其实可以想一个更加准确的策略去获取这个标签：。。。。暂时想不到，这个文档结构本身有点松散。这也说明，在创建文档标签结构的时候，要准确有条理地对标签进行归类（.class）和定位（#id）
if (!js || js.innerText !== 'JavaScript') {
alert('选择JavaScript失败!');
} else if (!arr || arr.length !== 3 || !arr[0] || !arr[1] || !arr[2] || arr[0].innerText !== 'Python' || arr[1].innerText !== 'Ruby' || arr[2].innerText !== 'Swift') {
alert('选择Python,Ruby,Swift失败!');
} else if (!haskell || haskell.innerText !== 'Haskell') {
alert('选择Haskell失败!');
} else {
alert('测试通过!');
}
</script>
更新DOM
-
获取并且更新标签：
innerHTML
这个方式非常强大，不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树。这种方法要注意，对字符进行编码！ -
获取并且更新标签内容：
innerTexttextContent
两者的区别在于读取属性时，innerText不返回隐藏元素的文本，而textContent返回所有文本。另外注意IE<9不支持textContent。 -
更新修改标签的css style
DOM节点的style属性对应所有的CSS，可以直接获取或设置。注意这里使用的格式：tagobj.style.css="value"的value是通过等号和引号传入的
范例：
var js=document.getElementById("test-js");
//获取对象
js.innerText="JavaScript";
//修改内部文本
js.style.color="#ff0000";
//修改css样式
js.style.fontWeight="bold";
插入DOM
我们获取了某个DOM节点，想在这个节点（可能是个空节点）中添加新的DOM。
如果他本身真的是个空节点，我们可以直接使用上面提过的innerHTML=<span></span>添加内容。
但是如果这个节点不是空节点呢？
- 添加的节点本来就存在原文档树中
范例：
<p id="js">JavaScript</p>
<div id="list">
<p id="java">Java</p>
<p id="python">Python</p>
<p id="scheme">Scheme</p>
</div>
把<p id="js">JavaScript</p>添加到<div id="list">的最后一项：
var
js = document.getElementById('js'),
list = document.getElementById('list');
//这个声明变量的方式有点小帅，mark一下
list.appendChild(js);
运行js之后的结果：
<!-- HTML结构 -->
<div id="list">
<p id="java">Java</p>
<p id="python">Python</p>
<p id="scheme">Scheme</p>
<p id="js">JavaScript</p>
//可以发现之前在div外部的js标签进入了div内部，因为在原html文档树中已经有了这个标签。他就会从原先的位置删除，在添加到新的位置。
</div>
- 创建一个新节点添加到文档树中：
var
list = document.getElementById('list'),
haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.appendChild(haskell);
这样我们就动态添加了一个新的节点：
var
list = document.getElementById('list'),
haskell = document.createElement('p');
//创建一个元素对象，标签为<p>
haskell.id = 'haskell';
//给这个创建的对象添加一个id属性
haskell.innerText = 'Haskell';
//给这个创建的对象添加一个内部文本
list.appendChild(haskell);
//把这个对象作为子节点添加到list对象中
这样我们就动态添加了一个新的节点：
<!-- HTML结构 -->
<div id="list">
<p id="java">Java</p>
<p id="python">Python</p>
<p id="scheme">Scheme</p>
<p id="haskell">Haskell</p>
</div>
- 指定位置地添加节点：
使用parentElement.insertBefore(newElement, referenceElement);，子节点会插入到referenceElement之前。
使用insertBefore重点是要拿到一个“参考子节点”的引用。很多时候，需要循环一个父节点的所有子节点，可以通过迭代children属性实现：
var
i, c,
list = document.getElementById('list');
for (i = 0; i < list.children.length; i++) {
c = list.children[i]; // 拿到第i个子节点
}
删除DOM
removeChild()：获得要删除的元素，通过父元素调用删除
替换节点
somenode.replaceChild(newnode, 某个节点);
DOM 属性和事件
属性
上面我们已经提到了innerHTML，innerText等常用获取文本节点的方法。
其他节点属性：
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
注意，原生js中没有办法找到所有的兄弟标签！
但在jq中有一个jQuery.siblings() 可以用来查找兄弟节点，不分前后。
- attitude操作
elementNode.setAttribute(name,value)
elementNode.getAttribute(属性名) <-------------->elementNode.属性名(DHTML)
elementNode.removeAttribute(“属性名”);
- 适用通过value获取标签值的节点：
- input
- select（selectdIndex）
- textarea
注意这里的这个input比较常用，另外两个暂时没有用到所以没有查。但是在使用input标签中的radio类型（单选）的时候，并没有找到有内置的获取radio的value的方法。传翔给的方法如下：
//获取radio选中值
function getRadioValue(radioName){
var obj = document.getElementsByName(radioName);
for(i=0; i<obj.length;i++){
if(obj[i].checked){
return obj[i].value;
}
}
return "undefined";
}
- class的相关操作
elementNode.className //获取目标的类名？
elementNode.classList.add //在目标的类列表中添加
elementNode.classList.remove //在目标的类列表中删除
jQuery选择器
回顾了DOM的选择器，再来看jQuery的选择器，可以说jQuery的核心就是选择器，它的基本语法：
$("#dom-id")
