标签:log eset end form first 直接 匿名 innertext 适用于
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>
<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>
attributes
// 获取所有标签属性
setAttribute(key,value)
// 设置标签属性
getAttribute(key)
// 获取指定标签属性
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是一个兼容多浏览器的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
标签:log eset end form first 直接 匿名 innertext 适用于
原文地址:https://www.cnblogs.com/zhangchen-sx/p/10261306.html