导图社区 jquery学习
- 10
- 举报
jquery学习
BOM定义，Windows对象，DOM定义，Node类型，Elememt类型，URL的组成，常用方法等等内容点梳理。
编辑于2023-03-08 17:52:00 内蒙古自治区- jquery学习
- DOM定义
- 相似推荐
- 大纲
JavaScript
BOM
定义
Browser Object Model，浏览器对象模型，提供一系列与浏览器相关的信息
Windows对象
window对象是BOM顶层对象，是JS访问浏览器窗口的一个接口，是一个全局对象,声明的所有的全局变量，全局方法函数最终都是window对象的属性或者方法
方法
window.open()
打开一个新的浏览器窗口，接受四个参数（URL/打开方式/窗口参数/是否取代当前页面历史记录的布尔值）
window.close()
关闭新打开的窗口（仅限open（）打开的窗口）
window.moveTo()
移动当前窗口
window.resizeTo()
调整当前窗口的尺寸
属性
Screen
该属性包含显示设备的信息
属性
height
设备分辨率的高
width
设备分辨率的宽
location
和documnet的location一样
navigator
该属性用于检测浏览器
属性
userAgent
通过userAgent可以判断用户浏览器的类型
platform
通过platform可以判断浏览器所在的系统平台类型
online
判断是否联网
history
DOM
定义
DOM（文档对象模型）是针对HTML和XML文档的一个API，通过DOM可以去改变文档。
Node类型
Node是所有节点的基类型，所有节点都继承自它，所以所有节点都有一些共同的方法和属性
属性
nodeType
返回值是1~12的数字
nodeName
返回值是元素的标签名，比如div，input等
var a=$("#abc") alert(a[0].nodeName)
nodeValue
非元素节点（Text节点）返回字符串
<p id="dd"> 完整宽度 </p>
var a = $("#dd") alert(a[0].firstChild.nodeValue)
必须加firstChild才选的是非元素节点，这个节点是text节点
元素节点的返回值是null
childNodes
这是个十分重要的属性，它保存了这个节点所有直接子元素调用childNodes返回的是一个NodeList对象，它极其像数组，但是有一个最关键的地方，它是动态查询的，也就是说每次调用它都会对DOM结构查询，所以对它的使用需要慎重，注意性能。
var a = $("#abc") alert(a[0].nodeName) function fb() { var a = $("#dd") var nodeListA=a[0].childNodes for(var i=0;i<nodeListA.length;i++){ alert(nodeListA[i].nodeName) } }
这个输出会把所有的子节点的名字都输出，包括非元素节点
ownerDocument
返回文档节点的引用（在html里面也就是document对象）
parentNode
父节点
方法
hasChildNodes()
如果包含子节点就返回true，比查询childNodes的length来的简单
appendChild()
可以在节点的childNodes的末尾增加一个节点，值得注意的是如果这个节点是已经存在在文档中的，那么便会删除原节点，感觉上就像是移动节点一样
insertBefore()
接受两个参数，一个是插入的节点，另外一个是参照的节点。如果第二个参数为null，则insertBefore和appendChild效果一样。否则便会把节点插入到参照节点之前。这里要注意的是，如果第二个参数不为null，那么插入的节点不能是已经存在的节点
Document类型
属性
location属性
location对象
Location 对象包含有关当前 URL 的信息。
Location 对象是 window 对象的一部分，可通过window.location. xxx 格式的相关属性对其进行访问。
location对象方法
hash
返回一个URL的锚部分
file:///C:/Users/cagec/Desktop/abc.html
host
返回一个URL的主机名和端口
hostname
返回URL的主机名
href
返回完整的URL
pathname
返回的URL路径名
port
返回一个URL服务器使用的端口号
protocol
返回一个URL协议
search
返回一个URL的查询部分
location对象属性
assign()
载入一个新的文档
reload()
重新载入当前文档
location.reload(true)
从服务器刷新数据
location.reload(false)
从浏览器缓存刷新数据
replace()
用新的文档替换当前文档
forms
可以返回所有的form表单，类型也是HTMLCollection
方法
getElementById
传入id，得到元素节点。里面的参数区分大小写（IE8-不区分）。注意：如果有多个id相同的元素，则返回第一个。IE7-里面表单元素的name也会被当做id来使用。
getElementsByTagName
根据标签取得元素，得到的是HTMLCollection类型
getElementsByName
根据name返回元素，得到的是HTMLCollection类型
Element类型
属性
attributes
元素的全部属性
方法
getAttribute()
获取属性的值
比如getAttribute(“checked”)
setAttribute()
removeAttribute()
Text类型
文本节点（非元素节点）
Comment类型
注释节点（非元素节点）
URL
http://www.aspxfans.com:8080/news/index.asp?boardID=5&ID=24618&page=1#name
URL的组成
协议部分
该URL的协议部分为“http：”，这代表网页使用的是HTTP协议。在Internet中可以使用多种协议，如HTTP，FTP等等本例中使用的是HTTP协议。在"HTTP"后面的“//”为分隔符
域名部分
该URL的域名部分为“www.aspxfans.com”。一个URL中，也可以使用IP地址作为域名使用
端口部分
跟在域名后面的是端口，域名和端口之间使用“:”作为分隔符。端口不是一个URL必须的部分，如果省略端口部分，将采用默认端口
虚拟目录部分
从域名后的第一个“/”开始到最后一个“/”为止，是虚拟目录部分。虚拟目录也不是一个URL必须的部分。本例中的虚拟目录是“/news/”
文件名部分
从域名后的最后一个“/”开始到“？”为止，是文件名部分，如果没有“?”,则是从域名后的最后一个“/”开始到“#”为止，是文件部分，如果没有“？”和“#”，那么从域名后的最后一个“/”开始到结束，都是文件名部分。本例中的文件名是“index.asp”。文件名部分也不是一个URL必须的部分，如果省略该部分，则使用默认的文件名
锚部分
从“#”开始到最后，都是锚部分。本例中的锚部分是“name”。锚部分也不是一个URL必须的部分
参数部分
从“？”开始到“#”为止之间的部分为参数部分，又称搜索部分、查询部分。本例中的参数部分为“boardID=5&ID=24618&page=1”。参数可以允许有多个参数，参数与参数之间用“&”作为分隔符。
常用方法
indexOf()
比如strabc.indexOf("/")，就是用于找出“/”在字符strabc中首次出现的位置，如果找不到就返回-1
toLowerCase()
转换为小写
JQuery
常用方法
$(selector).index()
获取元素索引
<body> <img src="images/1.jpg" alt=""> <div class="btn-list"> <button>图一</button> <button>图二</button> <button>图三</button> <button>图四</button> <button>图五</button> </div> <script src="jquery/jquery-3.5.1.js"></script> <script> // attr()方法——获取和设置属性值，例如src let imgSrc = [ "images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg", "images/5.jpg", ] $('button').click(function () { // 获取索引 let index = $(this).index() // 设置属性 $('img').attr('src', imgSrc[index]) // 设置背景色(添加class名) 使用addClass() // $(this).addClass('active') // 删除背景色(删除class名) 使用removeClass() // $(this).removeClass('active') // 切换class 使用toggleClass() // $(this).toggleClass('active') // 排他 点击按钮变色 其他按钮变回默认 使用siblings() $(this).addClass('active') $(this).siblings().removeClass('active') }) </script> </body>
not()
返回指定元素之外的元素
console.log($('ul').children().not('li'))
属性设置与获取
$(selector).val()
获取和设置value属性
用法同attr()
$(selector).attr()
获取和设置属性值
获取属性值
$(selector).attr(attribute)
设置属性值
$(selector).attr(attribute,value)
$(selector).text()
获取和设置文本节点
$(selector).htm()
获取或设置HTML内容
父元素
$(selector).parent()
获取父元素
只有单个父元素
$(selector).parents()
获取所有祖先元素
$("span").parents("ul")
获取span的所有祖先元素里面的ul元素
$(selector).parentsUntil(selector)
返回介于两个给定元素之间的所有祖先元素
$("span").parentsUntil("div")
获取sapn与div之间的祖先元素
子元素
$(selector).children()
children() 方法返回被选元素的所有直接子元素。 该方法只会向下一级对 DOM 树进行遍历。
$(selector).find("选择器")
获取子元素
var a = $(".layui-container").find("div") for(var i=0;i<a.length;i++){ alert($(a[i]).attr("class")) }
查找class="layui-container"下所有的div，然后for循环遍历
兄弟元素
$(selector).siblings("选择器")
获取同级其他元素
var select = 'dd[lay-value=' + tr.sex + ']'; layero.find("iframe").contents().find("#L_sex").siblings("div.layui-form-select").find('dl').find(select).click();
$(selector).next()
方法返回被选元素的下一个兄弟元素
$(selector).nextAll()
方法返回被选元素的所有跟随的兄弟元素
$(selector).nextUntil(selector)
方法返回介于两个给定参数之间的所有跟随的兄弟元素
$("h2").nextUntil("h6")
后面的兄弟元素
$(selector).prev()
$(selector).prevAll()
$(selector).prevUntil()
与next相似，只不过是前面的兄弟元素
$(dom对象)
将dom对象转换成jQuery
jQuery获取的集合对象取出单个对象，这个单个对象依然是dom对象，需要将dom对象转换为jQuery对象
jquery(jQuery对象)
将Jquery对象转换为Dom对象
判断是否是dom还是jQuery对象
a[0] instanceof HTMLElement
返回true则是dom对象
a[0] instanceof jQuery
返回true则是jQuery对象
$(selector).contents()
返回值是这个jQuery对象的所有子节点，包括文本节点等
$(selector).filter(criteria,function(index))
filter() 方法返回符合一定条件的元素。该方法让您规定一个条件。不符合条件的元素将从选择中移除，符合条件的元素将被返回。该方法通常用于缩小在被选元素组合中搜索元素的范围。 提示：filter() 方法是与 not() 方法相对的。
criteria
可选。规定要从被选元素组合中返回的选择器表达式、jQuery 对象、一个或多个元素。（不能是元素本身，只能是属性等） 提示：如需规定多个条件，请使用逗号分隔。
function(index)
可选。为集合中的每个元素规定要运行的函数。如果返回 true，则保留元素，否则元素将被移除。 index - 集合中元素的 index 位置。 注意： this 是当前的 DOM 元素。
案例
$("li").filter(".item-1") //获取class属性值为item-1的li元素
$("li").filter(":even").css("background", "red"); //获取所有偶数号的li元素,并将它们的背景颜色设为红色
$("li").filter(".item-1,#abc").css("background-color", "yellow"); //获取class属性值为item-1的所有li标签 ，同时获取id属性值为abc的所有li标签，并将背景颜色设置为黄色
$("p").filter(".selected, :first");//获取class属性值为selected的所有P标签，同时获取第一个P标签
遍历
for循环
for....in
var a=["a","b","c"] for(var x in a){ alert(a[x]) }
x为索引
正常的for循环
for (var i=0;i<cars.length;i++) { ..... }
for....of
var a=["a","b","c"] for(var x of a){ alert(x) }
x为数组元素
each
遍历集合
json
var arr = {"a":"夏利","b":"桑塔拉", "c":"宝马"} $.each(arr,function(index,value){ alert(index+value) })
数组
var arr = ["夏利", "桑塔拉", "宝马"] $.each(arr,function(index,value){ alert(index+value) })
var arr = [ "one", "two", "three", "four"]; $.each(arr, function(){ alert(this); });
这个each输出的结果分别为：one,two,three,four，这里的this代替的是数组内的元素
遍历元素节点
$("div").each(function(index,element){ alert(index+$(element).attr("class")) })
查找所有的div标签的索引位置和类名
选择器
基本选择器
$("#test") //选择id值为test的元素，id值是唯一的所以返回单个元素。
$("div") //选择所有的div标签元素，返回div元素数组
$(".myclass") //选择使用myclass类的css的所有元素
$("*") //选取所有元素
$("#test,div,.myclass") //选取多个元素。
层次选择器
$("div span") //选取<div>里的所有<span>元素
$("div >span") //选取<div>元素下元素名是<span>的子元素
$("#one +div") //选取id为one的元素的下一个<div>同辈元素 等同于$("#one").next("div")
$("#one~div") //选取id为one的元素的元素后面的所有<div>同辈元素 等同于$("#one").nextAll("div")
$("#one").siblings("div") //获取id为one的元素的所有<div>同辈元素（不管前后）
$("#one").prev("div") //获取id为one的元素的前面紧邻的同辈<div>元素
所以获取元素范围大小顺序依次为：
$("#one").siblings("div")>$("#one~div")>$("#one +div")
$("#one").siblings("div")>$("#one").nextAll("div")>$("#one").next("div")
基本过滤选择器
$("div:first") //选取所有<div>元素中第1个<div>元素
$("div:last") //选取所有<div>元素中最后一个<div>元素
$("input:not(.myClass)") //选取class不是myClass的<input>元素
$("input:even") //选取索引是偶数的<input>元素(索引从0开始)
$("input:odd") //选取索引是基数的<input>元素(索引从0开始)
$("input:eq(2)") //选取索引等于2的<input>元素
$("input:gt(4)") //选取索引大于4的<input>元素
$("input:lt(4)") //选取索引小于4的<input>元素
$(":header") //过滤掉所有标题元素，例如：h1、h2、h3等
$("div:animated") //选取正在执行动画的<div>元素
$(":focus") //选取当前获取焦点的元素
内容过滤选择器
$("div:contains('Name')") //选取所有<div>中含有'Name'文本的元素
$("div:empty") //选取不包含子元素（包括文本元素）的<div>空元素
$("div:has(p)") //选取所有含有<p>元素的<div>元素
$("div:parent") //选取拥有子元素的（包括文本元素）<div>元素
可见性过滤选择器
$("div:contains('Name')") //选取所有<div>中含有'Name'文本的元素
$("div:empty") //选取不包含子元素（包括文本元素）的<div>空元素
$("div:has(p)") //选取所有含有<p>元素的<div>元素
$("div:parent") //选取拥有子元素的（包括文本元素）<div>元素
属性过滤选择器
$("div[id]") //选取所有拥有属性id的元素
$("input[name='test']") //选取所有的name属性等于'test'的<input>元素
$("input[name!='test']") //选取所有的name属性不等于'test'的<input>元素
$("input[name^='news']") //选取所有的name属性以'news'开头的<input>元素
$("input[name$='news']") //选取所有的name属性以'news'结尾的<input>元素
$("input[name*='news']") //选取所有的name属性包含'news'的<input>元素
$("div[title|='en']") //选取属性title等于'en'或以'en'为前缀(该字符串后跟一个连字符'-')的<div>元素
$("div[title~='en']") //选取属性title用空格分隔的值中包含字符en的<div>元素
$("div[id][title$='test']") //选取拥有属性id,并且属性title以'test'结束的<div>元素
子元素过滤选择器
$("div .one:nth-child(2)") //选取class为'one'的<div>父元素下的第2个子元素
$("div span:first-child") //选取每个<div>中的第1个<span>元素
$("div span:last-child") //选取每个<div>中的最后一个<span>元素
$("div button:only-child") //在<div>中选取是唯一子元素的<button>元素
表单选择器
$(":input") //选取所有<input>,<textarea>,<select> 和 <button>元素
$(":text") //选取所有的单行文本框
$(":password") //选取所有的密码框
$(":radio") //选取所有单的选框
$(":checkbox") //选取所有的多选框
$(":submit") //选取所有的提交按钮
$(":image") //选取所有的图像按钮
$(":reset") //选取所有的重置按钮
$(":button") //选取所有的按钮
$(":file") //选取所有的上传域
$(":hidden") //选取所有不可见元素
表单对象过滤选择器
$("div .one:nth-child(2)") //选取class为'one'的<div>父元素下的第2个子元素
$("div span:first-child") //选取每个<div>中的第1个<span>元素
$("div span:last-child") //选取每个<div>中的最后一个<span>元素
$("div button:only-child") //在<div>中选取是唯一子元素的<button>元素
Ajax请求
get
$.get("请求地址","请求参数",function(返回值){ //请求参数为json格式 });
其中请求参数、函数非必须参数
post
$.post("请求地址","请求参数",function(返回值){ //请求参数为json格式 });
基础Ajax请求
$.ajax({ url:"发送请求（提交或读取数据）的地址", dataType:"预期服务器返回数据的类型", type:"请求方式", async:"true/false", data:{发送到/读取后台（服务器）的数据}, success:function(data){请求成功时执行}, error:function(){请求失败时执行} });
无论是get还是post，都是在基础Ajax请求的基础上改进过来的
事件
ready预加载事件
当dom结构加载完毕后执行，类似于onload事件
window.onload 必须等到页面内包括图片的所有元素加载完毕后才能执行，如果网页上有大量的图片，效果可想而知，用户可能在没有看到图片的时候，就已经开始操作页面了 所以window.onload 很难满足我们的需求 而ready是DOM结构绘制完毕后就执行，不必等到加载完毕
形式
$(document).ready(function(){})
$(function(){})
bind事件
bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数
形式
$(selector).bind(event,data,function)
event 必须。添加到元素的一个或多个事件如：click,mouseover,mouseup，change，select
data 可不填。传递到函数的额外数据，如：$(selector).bind(“click”,”input”,function(){});
function(){} 必填。绑定事件触发的函数
范例
$("button").bind({ // 注意它的格式是 json click:function(){$("div").css("border","5px solid orange");}, mouseover:function(){$("div").css("background-color","red");}, mouseout:function(){$("div").css("background-color","#FFFFFF");} });