DOM jquery

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) // 添加类

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .hide{

            display: none;

        }

        .c1{

            position: fixed;

            top: 0;

            right: 0;

            bottom: 0;

            left: 0;

            background:rgba(0,0,0,.6) ;

            z-index: 2;

        }

        .c2{

            position: fixed;

            width: 400px;

            height: 300px;

            top: 50%;

            left: 50%;

            background-color: white;

            z-index: 3;

            margin-top: -150px;

            margin-left: -200px;

        }

    </style>

</head>

<body>

    <div>

        <table>

            <tr>

                <td>1</td>

                <td>1</td>

                <td><input type="button" value="点我" onclick="show()"></td>

            </tr>

        </table>

    </div>

    <div id="show" class="c1 hide" ></div>

    <div id="hide" class="c2 hide">

        用户名：<input type="text">

        密码：<input type="password">

        <input  type="button" value="确定" onclick="a()">

        <input   type="button" value="取消" onclick="a()">

    </div>

    <script>

        function show() {

            document.getElementById("show").classList.remove("hide");

            document.getElementById("hide").classList.remove("hide");

        }

        function a() {

            document.getElementById("show").classList.add("hide");

            document.getElementById("hide").classList.add("hide");

        }

    </script>

</body>

</html>

模态对话框实例

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

jQuery 学习

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

jQuery基础

1、代码风格

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

$(function (){});                 //执行一个匿名函数

$("#box");                       //对id="box"的标签选择

$("#box").css("color","red");   //执行功能函数

2、代码位置

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

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

选择器

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

1、基本选择器

1>elememt--------------->根据给定的元素标签名匹配所有元素---------------------->$("div")

2>#id--------------------->根据给定的ID匹配一个元素-------------------------->$("#id")

3>.class------------------>根据给定的css类名匹配元素------------------------->$(".class")

4>*----------------------->匹配所有元素------------------------------------->$("*")

2、层级选择器

1>selector1,selectorN------>匹配多个标签------------------------------>$("div，span")

2>ancestor descendant------>给定元素下所有的后代元素（儿子以及孙子）------->$("div  span")

3>parent > child----------->给定元素下所有的子代元素（只能是儿子）-------->$("div>span")

4>pren+next---------------->匹配所有跟在 选定标签后面的一个指定元素-------->$("div+span")（只能是他后面的一个）

5>prev ~ siblings---------->匹配 prev 元素之后的所有 siblings 元素------->$("div~span")（只能是之后的所有兄弟元素，他前面的匹配不到）

3、基本筛选器

1>:first--->获取配到所有元素的第一个元素------------->$("li:first")

2>:last---->获取配到所有元素的第后一个元素------------>$("li:last")

3>:not(selector)--->去除所有与给定选择器匹配的元素------>$("input:not(:checked)")

4>:even---->匹配所有索引值为偶数的元素,从0开始计数----------->$("li:even")

5>:odd---->匹配所有索引值为偶数的元素,从0开始计数----------->$("li:odd")

6>:eq(index)--->匹配一个给定索引值的元素------------------------>$("li:eq(3)")

7>:gt(index)----------->匹配所有大于给定索引值的元素--------------------->$("li:gt(3)")

8>:lt(index)----------->匹配所有小于给定索引值的元素--------------------->$("li:lt(3)")

9>:header-------------->匹配如 h1, h2, h3之类的标题元素----------------->$(":header")

10>:contains(text)----->匹配包含给定文本的元素-------------------------->$("div:contains('join')")（匹配一个文本内容为join的div标签）

11>:empty-------------->匹配所有不包含子元素或者文本的空元素--------------->$("li:empty")

12>:parent------------->匹配所有包含子元素或者文本的元素------------------>$("li:parent ")

13>:hidden------------->匹配所有不可见元素，或者type为hidden的元素-------->$("div:hidden")

14>:visible------------>匹配所有的可见元素------------------------------>$("div:visable")

4 、属性选择器

1>[attribute]----------->匹配包含给定属性的元素----------------------------->$("div[id]")

2>[attribute=value]----->匹配给定的属性是某个特定值的元素-------------------->$("div[id='l1']")（注意这里id = 'xx'要用单引号）

3>[attribute^=value]---->匹配给定的属性是以某些值开始的元素------------------->$("div[id^='l1']")（id相同，属性值必须以xxx开头）

4>[attribute$=value]---->匹配给定的属性是以某些值结尾的元素------------------->$("div[id$='l1']")

5>[attribute!=value]---->匹配所有不含有指定的属性,或者属性不等于特定值的元素----->$("div[id!='l1']")

6>[attribute*=value]---->匹配给定的属性中包含某些值的元素--------------------->$("div[id*='l1']")（表示属性值中包含li部分）

5、表单选择器

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

<form>

  <input type="text" />

  <input type="checkbox" />

  <input type="radio" />

  <input type="image" />

  <input type="file" />

  <input type="submit" />

  <input type="reset" />

  <input type="password" />

  <input type="button" />

  <select><option/></select>

  <textarea></textarea>

  <button></button>

</form>

筛选器

1> eq(index|-index)------------->获取当前链式操作中第N个jQuery对象----------------------------->$("li").eq(1)（当参数大于等于0时为正向选取，当参数为负数时为反向选取）

2> first()---------------------->获取第一个元素---------------------------------------------->$("li").first()

3> last()----------------------->获取最后一个元素-------------------------------------------->$("li").last()

4> filter(expr|obj|ele|fn)------>筛选出与指定表达式匹配的元素集合------------------------------->$("div").filter(".c1")（保留带有c1属性值类的元素）

5> children([expr])------------->一个元素的所有子元素的元素集合-------------------------------->$("div").children()（匹配所有div的子元素）

6> find(expr|obj|ele)---------->在父标签下寻找子标签------------------------>$("div").find("span")（从所有的段落开始，进一步搜索下面的span元素。与$("p span")相同）

7> next([expr])---------------->匹配的元素后面紧邻的一个同辈元素------------------------------->$("div").next()

8> nextAll([expr])------------->查找当前元素之后所有的同辈元素--------------------------------->$("div").nextAll()（括号中是用来过滤的表达式）

9> nextUntil([exp|ele][,fil])-->查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止---------->$("div").nextUntil("xxx")(不算开头和结尾)

10>prev([expr])---------------->匹配的元素前面紧邻的一个同辈元素-------------------------------->$(".c3").prev()

11>prevAll([expr])--------->查找当前元素之前所有的同辈元素-------------------------------------->$(".c3").prevAll()

12>prevUntil([exp|ele][,fil])->查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止-->$("div").prevUntil("xxx")(不算开头和结尾)

13>parent([expr])-------->匹配元素的唯一父元素的元素集合------------------------------------------->$(".c1").parent()

14>parents([expr])---------->匹配元素的祖先元素的元素集合----------------------------------------->$(".c1").parent()（匹配元素的父级，爷级.....最后是body和HTML）

15>parentsUntil([expr|element][,filter])----查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止---->$(".c1").parentsUntil(".c4")

16>siblings([expr])--------->匹配所有同辈标签（不算自己）------------------------------------------->$("div").siblings()

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

DOM jquery的更多相关文章

python2.0_s12_day13_javascript&Dom&jQuery
今天主要内容:JavaScriptDomjQuery http://www.cnblogs.com/wupeiqi/articles/5369773.html 今天主要内容大致了解:javascrip ...
Python之Web前端Dom, jQuery
Python之Web前端: Dom jQuery ###Dom 一. 什么是Dom? 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它 ...
javaScript DOM JQuery AJAX
http://www.cnblogs.com/wupeiqi/articles/5369773.html 一 JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript ...
dom core,html dom,css dom,jquery 中的dom操作
前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...
Day16 DOM &jQuery
一.本节主要内容 JavaScript 正则表达式字符串操作的三个方法 DOM(知道就行,一般使用jQuery) 查找: 直接查找: document.getElementById 根据ID获取一个 ...
Python 一路走来 DOM & Jquery
DOM 查找: 直接查找间接查找 —getElementById ...
python运维开发(十六)----Dom&&jQuery
内容目录: Dom 查找操作事件 jQuery 查找筛选操作事件扩展 Dom 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它 ...
Python学习笔记整理总结【web基础】【web/HTML/CSS/JavaScript/DOM/jQuery】
一.HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以 ...
BOM DOM jQuery
. BOM . location相关 . location.href . location.href="http://www.sogo.com" . location.reload ...

随机推荐

vue proxyTable 跨域问题。
TVTK安装
首先感觉到的一点就是在https://www.lfd.uci.edu/~gohlke/pythonlibs/#chaco这个比较受欢迎的下载Python库的网站上下载大于20mb的whl文件时就很可能 ...
22-Python3 输入和输出
''' 输出格式美化 ''' s = 'Hello,Runoob' #repr():将输出读值转化成字符串,产生一个解释器易读读字符 print('repr():',repr(s)) #str():将 ...
iOS 正则表达式(一)
在iOS开发中,正则一直是最常用的,但也是一直记不住的,现在做一些简单的总结我们在网上找的正则,要有'\',这个在iOS是转义符,需要'\\'这样 int main(int argc, const ...
C# 深拷贝和浅拷贝
在编码中.经常会遇到赋值操作.值类型就不说了.如果是引用类型赋值.其实是引用传递,即赋值的是一个引用.比如: Person p1 = new Person("张三", " ...
那种多空计算方法更正确呢？——从此图看应该是TEST005
那种方法计算多空逆转更正确呢?——从此图1看应该是TEST005,但是实际上是ZCL_多空! TEST005具有滞后性!也就是说跌了一些在报警,可能已经跌了10%(如图2) ZCL_多空:当计算结果和 ...
DES加解密 cbc模式的简单讲解 && C++用openssl库来实现的注意事项
DES cbc是基于数据块加密的.数据块的长度为8字节64bit.以数据块为单位循环加密,再拼接.每个数据块加密的秘钥一样,IV向量不同.第一个数据快所需的IV向量,需要我们提供,从第二个数据块开始, ...
gitlab覆盖率
https://danny50610.blogspot.com/2017/09/gitlab-ci-phpunit-coverage.html
python--教你做个最简单的tcp通信。。
TCP协议:建立在IP协议之上的,TCP协议,传输控制协议(英语:Transmission Control Protocol,缩写为 TCP)是一种面向连接的.可靠的.基于字节流的传输层通信协议,由I ...
js控制元素隐藏和显示
原生: 方法一: document.getElementById("idname").style.visibility="hidden"; document.g ...

DOM jquery

DOM jquery的更多相关文章

随机推荐

热门专题