【JavaScript】DOM选择器和jQuery

时间 2019-11-10

标签 JavaScript dom 选择器 jquery 栏目 JavaScript 繁體版

原文原文链接

目录css

很难受，第二次的jQuery
- 核心语法
- 选择器

很难受，第二次的jQuery

调用：html

<head>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    ...
</head>

核心语法

$(selector).action()
$是重要的jQuery符号，实际上，jquery把全部的功能都封装在一个全局变量jQuery中，而$就是一个合法的变量名，是jQuery的别名（jQuery(selector).action()）：java

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选择器（基础！）

http://www.cnblogs.com/yuanchenqi/articles/6856399.htmlnode

基本选择器：

标签选择器：
p {color:gray};
id选择器：
#info {font-size:30px}
class选择器：
info {background:#ff0}
统配选择器：
* {margin:0;padding:0}

组合选择器：

DOM选择器

由于jq的选择器其实和DOM选择器几乎差很少，可是在选择语法上有很好的优化，因此我以为只要理解了DOM其实对正确运用jq选择器有很大的帮助，顺便补一波DOM没有写的笔记。python

选择DOM

始终记住DOM是一个树形结构。操做一个DOM节点实际上就是这么几个操做：jquery

更新：更新该DOM节点的内容，至关于更新了该DOM节点表示的HTML的内容；数组
遍历：遍历该DOM节点下的子节点，以便进行进一步操做；app
添加：在该DOM节点下新增一个子节点，至关于动态增长了一个HTML节点；dom
删除：将该节点从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节点内部的子树。这种方法要注意，对字符进行编码！
获取而且更新标签内容：innerText textContent
二者的区别在于读取属性时，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")