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

一、查找元素

1、直接查找

xxxxElementsxxx(表示所有的,找到的元素会放到一个数组中)

document.getElementById           根据ID获取一个标签

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

2、间接查找

查找标签的同时把其下的文本内容也找出

parentNode          // 父节点

childNodes          // 所有子节点
firstChild          // 第一个子节点
lastChild           // 最后一个子节点
nextSibling         // 下一个兄弟节点
previousSibling     // 上一个兄弟节点<br>
我们可以通过xxx.childNodes(其他的同理).nodeType[x]判断我们得到的是文本还是标签
xxx.childNodes(其他的同理)[x].nodeType = 1 标签
xxx.childNodes(其他的同理)[x].nodeType = 3 文本
只是查找标签,不包括文本内容
parentElement           // 父节点标签元素

children                // 所有子标签
firstElementChild       // 第一个子标签元素
lastElementChild        // 最后一个子标签元素
nextElementtSibling     // 下一个兄弟标签元素
previousElementSibling  // 上一个兄弟标签元素

二、操作

1、内容

innerText   文本

outerText
innerHTML   HTML内容
innerHTML  
value       值
 (用于获取普通标签中间的内容)
<body>

    <div id="d1">老男孩<span>666</span></div>
<script>
    ret = document.getElementById("d1");
    console.log(ret.innerText);//--------->老男孩666
    console.log(ret.innerHTML);//--------->老男孩<span>666</span>
</script>
</body>
 (获取input标签和下拉标签中value值)
<body>

    <input id="d1" type="text">
    <select id="d2">
        <option value="1">上海</option>
        <option value="2">北京</option>
    </select>
<script>
    ret1 = document.getElementById("d1");
    ret2= document.getElementById("d2");
    console.log(ret1.value); //--------获取你输入的内容
    console.log(ret2.value); //--------获取你选择项的value值
</script>
2、属性
attributes                // 获取所有标签属性

setAttribute(key,value)   // 设置标签属性
getAttribute(key)         // 获取指定标签属性
3、class操作
className                // 获取所有类名

classList.remove(cls)    // 删除指定类
classList.add(cls)       // 添加类
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style>
  7. .hide{
  8. display: none;
  9. }
  10. .c1{
  11. position: fixed;
  12. top: 0;
  13. right: 0;
  14. bottom: 0;
  15. left: 0;
  16. background:rgba(0,0,0,.6) ;
  17. z-index: 2;
  18. }
  19. .c2{
  20. position: fixed;
  21. width: 400px;
  22. height: 300px;
  23. top: 50%;
  24. left: 50%;
  25. background-color: white;
  26. z-index: 3;
  27. margin-top: -150px;
  28. margin-left: -200px;
  29. }
  30. </style>
  31. </head>
  32. <body>
  33. <div>
  34. <table>
  35. <tr>
  36. <td>1</td>
  37. <td>1</td>
  38. <td><input type="button" value="点我" onclick="show()"></td>
  39. </tr>
  40. </table>
  41. </div>
  42. <div id="show" class="c1 hide" ></div>
  43. <div id="hide" class="c2 hide">
  44. 用户名:<input type="text">
  45. 密码:<input type="password">
  46. <input type="button" value="确定" onclick="a()">
  47. <input type="button" value="取消" onclick="a()">
  48. </div>
  49. <script>
  50.  
  51. function show() {
  52. document.getElementById("show").classList.remove("hide");
  53. document.getElementById("hide").classList.remove("hide");
  54. }
  55. function a() {
  56. document.getElementById("show").classList.add("hide");
  57. document.getElementById("hide").classList.add("hide");
  58. }
  59. </script>
  60. </body>
  61. </html>
  62.  
  63. 模态对话框实例

更多引用  https://www.cnblogs.com/luxiaojun/p/5651681.html

jQuery 学习

jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多)。

jQuery基础

1、代码风格

在jQuery程序中,都是以美元符号“$”来起始的,而“$”就是jQuery中最重要且独有的对象:jQuery对象

  1. $(function (){}); //执行一个匿名函数
  2. $("#box"); //对id="box"的标签选择
  3. $("#box").css("color","red"); //执行功能函数

2、代码位置

将写的jquery代码放到html中head标签里,必须把代码放到匿名函数中(DOM执行完后执行)

将写的jquery代码放到html中body标签最下面.

选择器

基本语法:$(selector).action()

1、基本选择器

  1. 1>elememt--------------->根据给定的元素标签名匹配所有元素---------------------->$("div")
  2.  
  3. 2>#id--------------------->根据给定的ID匹配一个元素-------------------------->$("#id")
  4.  
  5. 3>.class------------------>根据给定的css类名匹配元素------------------------->$(".class")
  6.  
  7. 4>*----------------------->匹配所有元素------------------------------------->$("*")

2、层级选择器

  1. 1>selector1,selectorN------>匹配多个标签------------------------------>$("div,span")
  2.  
  3. 2>ancestor descendant------>给定元素下所有的后代元素(儿子以及孙子)------->$("div span")
  4.  
  5. 3>parent > child----------->给定元素下所有的子代元素(只能是儿子)-------->$("div>span")
  6.  
  7. 4>pren+next---------------->匹配所有跟在 选定标签后面的一个指定元素-------->$("div+span")(只能是他后面的一个)
  8.  
  9. 5>prev ~ siblings---------->匹配 prev 元素之后的所有 siblings 元素------->$("div~span")(只能是之后的所有兄弟元素,他前面的匹配不到)

3、基本筛选器

  1. 1>:first--->获取配到所有元素的第一个元素------------->$("li:first")
  2.  
  3. 2>:last---->获取配到所有元素的第后一个元素------------>$("li:last")
  4.  
  5. 3>:not(selector)--->去除所有与给定选择器匹配的元素------>$("input:not(:checked)")
  6.  
  7. 4>:even---->匹配所有索引值为偶数的元素,从0开始计数----------->$("li:even")
  8.  
  9. 5>:odd---->匹配所有索引值为偶数的元素,从0开始计数----------->$("li:odd")
  10.  
  11. 6>:eq(index)--->匹配一个给定索引值的元素------------------------>$("li:eq(3)")
  12.  
  13. 7>:gt(index)----------->匹配所有大于给定索引值的元素--------------------->$("li:gt(3)")
  14.  
  15. 8>:lt(index)----------->匹配所有小于给定索引值的元素--------------------->$("li:lt(3)")
  16.  
  17. 9>:header-------------->匹配如 h1, h2, h3之类的标题元素----------------->$(":header")
  18.  
  19. 10>:contains(text)----->匹配包含给定文本的元素-------------------------->$("div:contains('join')")(匹配一个文本内容为joindiv标签)
  20.  
  21. 11>:empty-------------->匹配所有不包含子元素或者文本的空元素--------------->$("li:empty")
  22.  
  23. 12>:parent------------->匹配所有包含子元素或者文本的元素------------------>$("li:parent ")
  24.  
  25. 13>:hidden------------->匹配所有不可见元素,或者typehidden的元素-------->$("div:hidden")
  26.  
  27. 14>:visible------------>匹配所有的可见元素------------------------------>$("div:visable")

4 、属性选择器

  1. 1>[attribute]----------->匹配包含给定属性的元素----------------------------->$("div[id]")
  2.  
  3. 2>[attribute=value]----->匹配给定的属性是某个特定值的元素-------------------->$("div[id='l1']")(注意这里id = 'xx'要用单引号)
  4.  
  5. 3>[attribute^=value]---->匹配给定的属性是以某些值开始的元素------------------->$("div[id^='l1']")(id相同,属性值必须以xxx开头)
  6.  
  7. 4>[attribute$=value]---->匹配给定的属性是以某些值结尾的元素------------------->$("div[id$='l1']")
  8.  
  9. 5>[attribute!=value]---->匹配所有不含有指定的属性,或者属性不等于特定值的元素----->$("div[id!='l1']")
  10.  
  11. 6>[attribute*=value]---->匹配给定的属性中包含某些值的元素--------------------->$("div[id*='l1']")(表示属性值中包含li部分)

5、 表单选择器

$("[type='text']")-------->$(":text")           注意只适用于input标签

  1. <form>
  2. <input type="text" />
  3. <input type="checkbox" />
  4. <input type="radio" />
  5. <input type="image" />
  6. <input type="file" />
  7. <input type="submit" />
  8. <input type="reset" />
  9. <input type="password" />
  10. <input type="button" />
  11. <select><option/></select>
  12. <textarea></textarea>
  13. <button></button>
  14. </form>

 筛选器

  1. 1> eq(index|-index)------------->获取当前链式操作中第NjQuery对象----------------------------->$("li").eq(1)(当参数大于等于0时为正向选取,当参数为负数时为反向选取)
  2.  
  3. 2> first()---------------------->获取第一个元素---------------------------------------------->$("li").first()
  4.  
  5. 3> last()----------------------->获取最后一个元素-------------------------------------------->$("li").last()
  6.  
  7. 4> filter(expr|obj|ele|fn)------>筛选出与指定表达式匹配的元素集合------------------------------->$("div").filter(".c1")(保留带有c1属性值类的元素)
  8.  
  9. 5> children([expr])------------->一个元素的所有子元素的元素集合-------------------------------->$("div").children()(匹配所有div的子元素)
  10.  
  11. 6> find(expr|obj|ele)---------->在父标签下寻找子标签------------------------>$("div").find("span")(从所有的段落开始,进一步搜索下面的span元素。与$("p span")相同)
  12.  
  13. 7> next([expr])---------------->匹配的元素后面紧邻的一个同辈元素------------------------------->$("div").next()
  14.  
  15. 8> nextAll([expr])------------->查找当前元素之后所有的同辈元素--------------------------------->$("div").nextAll()(括号中是用来过滤的表达式)
  16.  
  17. 9> nextUntil([exp|ele][,fil])-->查找当前元素之后所有的同辈元素,直到遇到匹配的那个元素为止---------->$("div").nextUntil("xxx")(不算开头和结尾)
  18.  
  19. 10>prev([expr])---------------->匹配的元素前面紧邻的一个同辈元素-------------------------------->$(".c3").prev()
  20.  
  21. 11>prevAll([expr])--------->查找当前元素之前所有的同辈元素-------------------------------------->$(".c3").prevAll()
  22.  
  23. 12>prevUntil([exp|ele][,fil])->查找当前元素之后所有的同辈元素,直到遇到匹配的那个元素为止-->$("div").prevUntil("xxx")(不算开头和结尾)
  24.  
  25. 13>parent([expr])-------->匹配元素的唯一父元素的元素集合------------------------------------------->$(".c1").parent()
  26.  
  27. 14>parents([expr])---------->匹配元素的祖先元素的元素集合----------------------------------------->$(".c1").parent()(匹配元素的父级,爷级.....最后是bodyHTML
  28.  
  29. 15>parentsUntil([expr|element][,filter])----查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止---->$(".c1").parentsUntil(".c4")
  30.  
  31. 16>siblings([expr])--------->匹配所有同辈标签(不算自己)------------------------------------------->$("div").siblings()

更多引用 https://www.cnblogs.com/luxiaojun/p/5668210.html

  

DOM jquery的更多相关文章

  1. python2.0_s12_day13_javascript&Dom&jQuery

    今天主要内容:JavaScriptDomjQuery http://www.cnblogs.com/wupeiqi/articles/5369773.html 今天主要内容大致了解:javascrip ...

  2. Python之Web前端Dom, jQuery

    Python之Web前端: Dom   jQuery ###Dom 一. 什么是Dom? 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它 ...

  3. javaScript DOM JQuery AJAX

    http://www.cnblogs.com/wupeiqi/articles/5369773.html 一 JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript ...

  4. dom core,html dom,css dom,jquery 中的dom操作

    前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...

  5. Day16 DOM &jQuery

    一.本节主要内容 JavaScript 正则表达式 字符串操作的三个方法 DOM(知道就行,一般使用jQuery) 查找: 直接查找: document.getElementById 根据ID获取一个 ...

  6. Python 一路走来 DOM & Jquery

    DOM           查找:                直接查找                间接查找                —getElementById             ...

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

    内容目录: Dom 查找 操作 事件 jQuery 查找 筛选 操作 事件 扩展 Dom 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它 ...

  8. Python学习笔记整理总结【web基础】【web/HTML/CSS/JavaScript/DOM/jQuery】

    一.HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以 ...

  9. BOM DOM jQuery

    . BOM . location相关 . location.href . location.href="http://www.sogo.com" . location.reload ...

随机推荐

  1. 20180328 Redis和MSMQ

    以前接触的页面记录多为session或者传递的方式短暂记忆.今天接触了一个Redis作为缓存的想法,在之前我也是用过Redis ,但是只是作为异步任务系统记录是否执行成功使用,目前看来用Redis也可 ...

  2. max_allowed_packet引起同步报错处理

    一台MySQL的Cat数据库,每天早上1点定期删除,有4个表,删除完后,这4个表都有blob字段,很大量,部署删除job就同步报错. Got fatal error 1236 from master ...

  3. 浅谈JS的变量提升

    JS的解析机制,是JS的又一大重点知识点,在面试题中更经常出现,今天就来唠唠他们的原理.首先呢,我们在我们伟大的浏览器中,有个叫做JS解析器的东西,它专门用来读取JS,执行JS.一般情况是存在作用域就 ...

  4. PE破解win2008登录密码

    1.使用PE系统启动计算机. 2.使用cmd命令行程序. 3.备份一下magnify.exe(windows 放大镜程序). copy C:\WINDOWS\system32\magnify.exe ...

  5. C#编程基础

    1..NET与C# A..NET 是 Microsoft XML Web services 平台.XML Web services 允许应用程序通过 Internet 进行通讯和共享数据,而不管所采用 ...

  6. List与Array互相转换

    List转换为Array可以这样处理: ArrayList<String> list=new ArrayList<String>(); String[] strings = n ...

  7. double类型相减有小数误差

    如 :19.9-9.9=9.9999999999999,而不是10double相减会转换成二进制,因double有效位数为 16位这就会出现存储小数位数不够的情况,这种情况下就会出现误差 //两个Do ...

  8. mysql 解锁

    show OPEN TABLES where In_use > 0;show processlist;show status like 'Table%';show status like '%l ...

  9. (转)Springboot邮件服务

    springboot仍然在狂速发展,才五个多月没有关注,现在看官网已经到1.5.3.RELEASE版本了.准备慢慢在写写springboot相关的文章,本篇文章使用springboot最新版本1.5. ...

  10. github pages搭建网站(三)

    一.个人站点 访问 https://用户名.github.io 搭建步骤 (1)创建个人站点 ->新建仓库(注:仓库名必须是[用户名.github.io]) (2)在仓库下新建index.htm ...