python运维开发(十六)----Dom&&jQuery-白红宇

python运维开发(十六)----Dom&&jQuery

阅读量：5141 次

发布时间：2019-06-13

本文共 13610 字，大约阅读时间需要 45 分钟。

内容目录：

Dom
- 查找
- 操作
- 事件

jQuery
- 查找
- 筛选
- 操作
- 事件
- 扩展

Dom

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

Dom查找元素

直接查找

document.getElementById             根据ID获取一个标签document.getElementsByName          根据name属性获取标签集合document.getElementsByClassName     根据class属性获取标签集合document.getElementsByTagName       根据标签名获取标签集合

间接查找

parentNode          // 父节点childNodes          // 所有子节点firstChild          // 第一个子节点lastChild           // 最后一个子节点nextSibling         // 下一个兄弟节点previousSibling     // 上一个兄弟节点 parentElement           // 父节点标签元素children                // 所有子标签firstElementChild       // 第一个子标签元素lastElementChild        // 最后一个子标签元素nextElementtSibling     // 下一个兄弟标签元素previousElementSibling  // 上一个兄弟标签元素

其中上半部分主要是Node包含元素和内容，下半部分Element只包含元素

通过一个例子我们可以查看到

HTML 代码

通过chrome调试可以查看到如下结果

操作

内容

innerText   文本outerTextinnerHTML   HTML内容outerHTML  value       值

input标签中默认取内容为value

关键字文本框demo

属性

attributes                // 获取所有标签属性setAttribute(key,value)   // 设置标签属性getAttribute(key)         // 获取指定标签属性removeAttribute(key,value)        //删除标签属性

操作练习

属性操作应用在checkbox的全选和取消操作

    
              全选
          
                                                序号                      用户名                      密码                 
           
                                                                                     1                          12                     
                                                                          1                          12                     
                                                                          1                          12

序号	用户名	密码
	1	12
	1	12
	1	12

属性应用全选操作demo

上面的demo中主要是演示属性的操作应用，实际上是存在一些的bug的，勾选了反选然后在选择全选和取消不灵了。。。，出现上面的情况原因为，上面代码既使用了setAttribute设置方式又使用了 inp.checked = false或true方式

    
                              
          
                                      
                                                                                                     111                              222                         
                                                                                  111                              222                         
                                                                                  111                              222                         
                                                                                  111                              222

	111	222
	111	222
	111	222
	111	222

无bug的全选操作demo

遮罩隐藏对话框-demo

class操作

className                // 获取所有类名classList.remove(cls)    // 删除指定类classList.add(cls)       // 添加类

标签操作

创建标签

// 方式一对象方式var tag = document.createElement('a')tag.innerText = "hello world"tag.className = "c1"tag.href = "http://www.baidu.com/" // 方式二字符串方式var tag = "hello world"

操作标签

// 方式一var obj = "";xxx.insertAdjacentHTML("beforeEnd",obj);xxx.insertAdjacentElement('afterBegin',document.createElement('p')) //注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd' // 方式二var tag = document.createElement('a')xxx.appendChild(tag)xxx.insertBefore(tag,xxx[1])

赞+1demo

样式操作

var obj = document.getElementById('i1') obj.style.fontSize = "32px";obj.style.backgroundColor = "red";

上面搜索输入关键字的文本框也可以直接修改样式来操作

    
              Title

关键字搜索--样式操作demo

位置操作

总文档高度document.documentElement.offsetHeight  当前文档占屏幕高度document.documentElement.clientHeight  自身高度tag.offsetHeight  距离上级定位高度tag.offsetTop  父定位标签tag.offsetParent  滚动高度tag.scrollTop /*    clientHeight -> 可见区域：height + padding    clientTop    -> border高度    offsetHeight -> 可见区域：height + padding + border    offsetTop    -> 上级定位标签的高度    scrollHeight -> 全文高：height + padding    scrollTop    -> 滚动高度    特别的：        document.documentElement代指文档根节点*/

操作练习

返回顶部demo

高度练习demo

Demo-滚动固定

demo-滚动菜单

Demo-滚动高度

提交表单

```
document.geElementById('form').submit()
```

表单提交demo

其他

console.log                 输出框alert                       弹出框confirm                     确认框  // URL和刷新location.href               获取URLlocation.href = "url"       重定向location.reload()           重新加载  // 定时器setInterval                 多次定时器clearInterval               清除多次定时器setTimeout                  单次定时器clearTimeout                清除单次定时器三、事件

    
              清除

setTimeout 删除demo

    
              是否删除

confirm 删除确认demo

事件

对于事件需要注意的要点：

this

event

事件链以及跳出

this标签当前正在操作的标签，event封装了当前事件的内容。

很多标签带有自己默认的事件属性，一般执行顺序为自定义的事件优先，然后再执行自己默认事件

    
          事件优先级    百度

事件优先级-demo

有时候我们提交这个事件时候，输入错误不想执行自定义事件了，而且也不会执行自己默认的事件，这时候我们需要使用return属性，return返回false就不会再往下执行，如果为true会继续向下执行

    
          默认事件提交

return 使用

jQuery

jQuery是对Javascript和Dom的一个封装，类似于python的模块，我们使用时直接调用它的类库就可以了。

我们通常使用版本为1.12.x版本，这个版本并不是最新的版本，我们使用这个版本主要是由于这个版本的兼容性很强，比如jQuery2.x版本中只支持到IE8以上才能兼容，而1.x的版本对于ie6都能支持兼容。

jQuery的选择器

基本操作

id选择器，根据给定的ID匹配一个元素，jQuery表示代码，$('#id')常用方式或者jQuery('#id')

元素选择器，element根据给定的元素标签名匹配所有元素例如$("div")

class类选择器，根据给定的css类名匹配元素，例如$(".myClass");

组合选择器，将每一个选择器匹配到的元素合并后一起返回，你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。例如$("div,span,p.myClass")

层级

ancestor descendant:在给定的祖先元素下匹配所有的后代元素


         
        Name:  
          
              
         Newsletter:      
          
        
       
#console调试$("form input")[, ]

parent > child:在给定的父元素下匹配所有的子元素
```
$("form > input")[]
```

prev + next:匹配所有紧接在 prev 元素后的 next 元素
```
$("label + input")[, ]
```

prev ~ siblings:匹配 prev 元素之后的所有 siblings 元素
```
$("form ~ input")[]
```

基本筛选器

属性

attribute=value:匹配给定的属性是某个特定值的元素

Hot FuzzCold FusionEvil Plans$("input[name='accept']").attr("checked",true);[]

属性操作

属性

attr(name|pro|key,val|fn):设置或返回被选元素的属性值。

//返回文档中所有图像的src属性值$("img").attr("src");//为所有图像设置src和alt属性$("img").attr({ src: "test.jpg", alt: "Test Image" });//为所有图像设置src属性$("img").attr("src","test.jpg");//把src属性的值设置为title属性的值。$("img").attr("title", function() { return this.src });

removeAttr(name)：从每一个匹配的元素中删除一个属性

//HTML代码//将文档中图像的src属性删除$("img").removeAttr("src");

prop(n|p|k,v|f)：获取在匹配的元素集中的第一个元素的属性值

//选中复选框为true，没选中为false$("input[type='checkbox']").prop("checked");//禁用页面上的所有复选框$("input[type='checkbox']").prop({  disabled: true});//禁用和选中所有页面上的复选框$("input[type='checkbox']").prop("disabled", false);$("input[type='checkbox']").prop("checked", true);//通过函数来设置所有页面上的复选框被选中$("input[type='checkbox']").prop("checked", function( i, val ) {  return !val;});

removeProp(name):用来删除由.prop()方法设置的属性集，随着一些内置属性的DOM元素或window对象，如果试图将删除该属性，浏览器可能会产生错误。jQuery第一次分配undefined值的属性，而忽略了浏览器生成的任何错误

//HTML代码 
//设置一个段落数字属性，然后将其删除var $para = $("p");$para.prop("luggageCode", 1234);$para.append("The secret luggage code is: ", String($para.prop("luggageCode")), ". ");$para.removeProp("luggageCode");$para.append("Now the secret luggage code is: ", String($para.prop("luggageCode")), ". ");//结果The secret luggage code is: 1234. Now the secret luggage code is: undefined.

CSS 类

addClass(class|fn):为每个匹配的元素添加指定的类名

//为匹配的元素加上 'selected' 类$("p").addClass("selected");$("p").addClass("selected1 selected2");//HTML代码
             
        Hello
      
        Hello
      
        Hello
       
//给li加上不同的class$('ul li:last').addClass(function() {  return 'item-' + $(this).index();});

removeClass([class|fn])：从所有匹配的元素中删除全部或者指定的类

//从匹配的元素中删除 'selected' 类$("p").removeClass("selected");//删除匹配元素的所有类$("p").removeClass();

左侧菜单demo

toggleClass(class|fn[,sw]):如果存在（不存在）就删除（添加）一个类

//为匹配的元素切换 'selected' 类$("p").toggleClass("selected");//HTML代码jQuery 代码://每点击三下加上一次 'highlight' 类var count = 0;  $("p").click(function(){      $(this).toggleClass("highlight", count++ % 3 == 0);  });//根据父元素来设置class属性$('div.foo').toggleClass(function() {  if ($(this).parent().is('.bar') {    return 'happy';  } else {    return 'sad';  }});

HTML代码/文本/值

html([val|fn]):取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档;在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容;如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。
```
//返回p元素的内容$('p').html();//设置所有 p 元素的内容$("p").html("Hello world!");//使用函数来设置所有匹配元素的内容$("p").html(function(n){    return "这个 p 元素的 index 是：" + n;    });
```

text([val|fn]):取得所有匹配元素的内容,结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。

//返回p元素的文本内容$('p').text();//设置所有p元素文本内容为Hello world$("p").text("Hello world!");//使用函数来设置所有匹配元素的文本内容。$("p").text(function(n){    return "这个 p 元素的 index 是：" + n;    });

val([val|fn|arr]):获得匹配元素的当前值,在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选，将返回一个数组，其包含所选的值。

//获取文本框中的值$("input").val();//设定文本框的值$("input").val("hello world!");//回调函数设定文本框的值$('input:text.items').val(function() {  return this.value + ' ' + this.className;});//HTML代码        
     check1     check2     radio1     radio2//设定一个select和一个多选的select的值$("#single").val("Single2");$("#multiple").val(["Multiple2", "Multiple3"]);$("input").val(["check2", "radio1"]);

css样式操作

CSS

css(name|pro|[,val|fn]):访问匹配元素的样式属性

//获取h3标题的颜色$("h3").css("color")//设置h3标题的颜色和背景$("h3").css({"color":"red","background":"yellow"})//将所有段落字体设为红色$("p").css("color","red");//回调函数逐渐增加div的大小$("div").click(function() {    $(this).css({      width: function(index, value) {        return parseFloat(value) * 1.2;      },       height: function(index, value) {        return parseFloat(value) * 1.2;      }    });  });

位置

offset([coordinates]):获取匹配元素在当前视口的相对偏移,返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。

position():获取匹配元素相对父元素的偏移,返回的对象包含两个整型属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。

scrollTop([val]):获取匹配元素相对滚动条顶部的偏移。此方法对可见和隐藏元素均有效。

scrollLeft([val])：获取匹配元素相对滚动条左侧的偏移,此方法对可见和隐藏元素均有效。

尺寸

height([val|fn]):取得匹配元素当前计算的高度值（px）,在 jQuery 1.2 以后可以用来获取 window 和 document 的高

width([val|fn]):取得第一个匹配元素当前计算的宽度值（px）,在 jQuery 1.2 以后可以用来获取 window 和 document 的宽

innerHeight():获取第一个匹配元素内部区域高度（包括补白、不包括边框）,此方法对可见和隐藏元素均有效

innerWidth():获取第一个匹配元素内部区域宽度（包括补白、不包括边框),此方法对可见和隐藏元素均有效

outerHeight([soptions]):获取第一个匹配元素外部高度（默认包括补白和边框）,此方法对可见和隐藏元素均有效

outerWidth([options]):获取第一个匹配元素外部宽度（默认包括补白和边框）,此方法对可见和隐藏元素均有效

文档处理操作

内部插入

append(content|fn):向每个匹配的元素内部追加内容,这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。
```
//HTML代码I would like to say: 
//jQuery实现$("p").append("Hello");
```

appendTo(content):把所有匹配的元素追加到另一个指定的元素元素集合中,实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中,在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，返回值是所有被追加的内容，而不仅仅是先前所选中的元素。所以，要选择先前选中的元素，需要使用end()方法

prepend(content|fn):向每个匹配的元素内部前置内容,这是向所有匹配元素内部的开始处插入内容的最佳方式。

prependTo(content):把所有匹配的元素前置到另一个、指定的元素元素集合中,实际上，使用这个方法是颠倒了常规的$(A).prepend(B)的操作，即不是把B前置到A中，而是把A前置到B中。

外部插入

after(content|fn):在每个匹配的元素之后插入内容。

before(content|fn):在每个匹配的元素之前插入内容。

insertAfter(content):把所有匹配的元素插入到另一个、指定的元素元素集合的后面。

insertBefore(content):把所有匹配的元素插入到另一个、指定的元素元素集合的前面。

替换

replaceWith(content|fn)：将所有匹配的元素替换成指定的HTML或DOM元素。

//把所有的段落标记替换成加粗的标记//HTML代码Hello
cruel
World
//jQUERY代码$("p").replaceWith("Paragraph. ");

replaceAll(selector):用匹配的元素替换掉所有 selector匹配到的元素。

//把所有的段落标记替换成加粗标记//HTML代码Hello
cruel
World
//jQuery代码$("Paragraph. ").replaceAll("p");

删除

empty():删除匹配的元素集合中所有的子节点。

//把所有段落的子元素（包括文本节点）删除Hello, Person and person
//jQuery代码$("p").empty();

remove([expr]):从DOM中删除所有匹配的元素，这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。
```
//从DOM中把所有段落删除Hello
 how are you?
//jQuery代码$("p").remove();
```

detach([expr]):从DOM中删除所有匹配的元素,这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
```
//从DOM中把所有段落删除Hello
 how are you?
//jQuery代码$("p").detach();//结果how are
```

复制

clone([Even[,deepEven]]):克隆匹配的DOM元素并且选中这些克隆的副本,在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。

//HTML代码Hello, how are you?
//克隆所有b元素（并选中这些克隆的副本），然后将它们前置到所有段落中$("b").clone().prependTo("p");//prependTo() 方法在被选元素的开头（仍位于内部）插入指定内容。//prepend() 和 prependTo() 方法作用相同,差异在于语法：内容和选择器的位置，以及 prepend() 能够使用函数来插入内容。//创建一个按钮，他可以复制自己，并且他的副本也有同样功能//jQuery代码$("button").click(function(){  $(this).clone(true).insertAfter(this);});