关联查找
1)$dom.parent()
:找$dom的父节点,相当于dom.parentNode
属性
2)$dom.first()
:$dom集合中的第一个,平行关系 而不是父子关系 与parentNode.firstChild
不一样
3)$dom.last()
:$dom集合中的最后一个 平行关系 而不是父子关系 与parentNode.lastChild
不一样
4)$dom.contents()
:找$dom的所有子节点 相当于dom.childNodes
5)$dom.children()
:找$dom的所有元素节点 相当于dom.children
6)$dom.siblings()
:找$dom的所有兄弟元素 只要是平行关系就是兄弟
7)$dom.next()
:找$dom的下一个兄弟,相当于dom.nextSibling
8)$dom.nextAll()
:找$dom的接下来所有兄弟节点
表单域过滤
查找单选框 console.log($("input:radio"))
查找多选框 console.log($("input:checkbox"))
查找选中项 console.log($("input:radio:checked").val())
返回第一个的值 console.log($("input:checkbox:checked").val())
Select 选中项要通过option获取 console.log($("select option:checked").val())
遍历操作
each()方法
jQuery
封装的each
方法用来遍历$dom
集合或者一个常规数据的集合,它是对for
和for...in
的再封装。
作为数组或者一个伪数组对象(拥有length),该方法会返回编号部分的数据值;如果遍历的是对象,则提取属性值。
1) $.each(arr/obj, callback)
$.each()
方法中,除了指定源数组或对象外,还需要传入一个回调函数作为循环执行动作,类似于数组的forEach()
方法,回调函数调用时会将每次遍历出的元素下标(或对象属性key)以及元素值(或对象属性值val)作为参数传递。
属性操作
由于jQuery
选择器获取的是jQuery dom($dom)
,因此需要专门的方法获取相应的dom属性值:
attr()方法
通用的attr()
方法用来操作$dom设置的标准属性或者自定义属性,既可以读取也可以设置,相当于原生js中的getAtribute()
若要检索和更改DOM的状态属性,比如元素的checked, selected, 或disabled等,请使用==prop()==方法: $("input:checkbox").prop("checked", true)
val()方法
对于表单控件常用的value属性,可以通过val()
方法单独访问,可以理解为$dom.attr("value")
1) $dom.val()
读取$dom
中的value属性,如果$dom是含有多个dom的集合,则返回第一个dom的value值
2) $dom.val("属性值")
给$dom
设置value属性值,如果$dom是含有多个dom的集合,那么会统一设置它们的属性
3) $dom.val(["值1", "值2"])
给多选框(checkbox)、下拉框(select)同时设置多个选中项 这里的值1和值2 指代的是选框的value值,也就是给多个选项设置为checked
4) $dom.val(function (idx, val) {})
使用匿名函数设置value属性值
html()和text()
使用html()方法获取节点的内容相当于innerHTML
属性,text()方法获取文本 相当于innerText
1) $dom.html()
获取元素节点的内容(包含html内容)
2) $dom.text()
获取元素节点的文本信息(去除了html标签),是==$dom集合中所有的内容==
3) $dom.html("值")
重置节点的内容
4) $dom.html(function (idx, html) {})
prop()
使用prop方法给$dom设置属性 首先==存放于内存中== 其中的标准属性会作用于DOM上 而非标准属性则不显示。
在jQuery中 它有一个重要的使用 就是用来设置表单控件的selected
disabled
checked
。
$dom.prop("属性");
读取$dom的prop属性
$dom.prop("属性","值")
设置$dom的prop属性
$dom.removeProp("属性")
删除使用prop定义的非标准属性
样式设置
css方法
jQuery提供了css方法用来实现jQuery dom
样式化,本质上是对window.getComputedStyle()
和dom.style
的封装,这样保证它的样式操作更具兼容性。
1)$dom.css("样式")
读取$dom的css样式,返回带单位的结果
2)$dom.css("样式", "值")
设置一个样式 样式的写法 既可以是驼峰 也可以是css-样式,需要带单位, jQuery的使用是比较灵活的:
$dom.css("backgroundColor")
$dom.css("background-color")
1)$dom.css({样式1:"值1", 样式2:"值2"})
同时设置多个样式 $dom.css("样式", function (idx, css) {})
快速样式
1)$dom.height()
读取匹配元素集合中的第一个元素的当前计算高度值:$dom.height();
给DOM集合中所有元素设置一个高度值:$dom.height(100)
2)$dom.width()
获取匹配元素集合中的第一个元素的当前计算宽度值。
设置每个匹配的元素的宽度
3)$dom.position() => {left : , top : }
获取匹配元素中第一个元素的当前坐标,相对于offset parent的坐标。==它是DOM设置的坐标值==,和实际坐标值一般不等。
4)$dom.offset() => {left : , top : }
在匹配的元素集合中,获取的第一个元素的当前坐标,坐标相对于文档。即元素在页面中的==真实坐标位置==:定位坐标 + margin。
它和原生JS中的offsetLeft和offsetTop返回结果相等。
绑定类
原生js中添加样式:
cont.className = "highlight";
base被覆盖了
后来h5 扩展classList属性 操作样式,事实上 classList就是从jquery中偷师过去的
$dom.addClass()
给元素绑定样式,它是追加一个样式到元素中
$dom.removeClass()
给元素移除样式,它移出指定的样式
$dom.toggleClass()
切换类开关,如果没有则绑定该类,如果有则清除类
DOM 节点操作
添加节点
$parent.append($child)
在$parent父节点的最后位置追加一个子节点 相当于JS中parent.appendChild(child)
$child.appendTo($parent)
将$node
节点追加到$parent
中,和append()
颠倒父子关系
$parent.prepend($child)
在$parent父节点最前面插入一个子节点,相当于JS中parent.insertBefore(parent.firstChild, node);
$child.prependTo($parent)
将$node
插入$parent
的最前面,和prepend()颠倒父子关系。
$node.after()
$node.parentNode.insertBefore($node.nextSibling, 要插入的节点)
示例:$("ul li").last().after("<li></li>") 在ul最后一个li的后面插入一个节点
$node.before()
示例:$("ul li").first().before("<li></li>") 在ul第一个li的前面插入一个节点
节点替换
$node1.replaceAll($node2)
用$node1
替换$node2
集合中的所有节点,主动替换
$node1.replaceWith($node2)
$node1
集合中的所有节点被$node2替换,被动替换
删除节点
$parent.empty()
父节点清空子节点,相当于parent.innerHTML = ""
;
$node.remove()
删除当前选中的所有节点
parentNode.removeChild()
$node.parentNode.removeChild($node)
克隆节点
在JS中 使用dom.cloneNode([true]) 用来复制一个DOM节点;不同于原生dom节点的复制,jQuery dom复制时还包括其绑定的事件。
$node.clone(true)
节点和其身上的事件都给复制(jQuery事件)
$node.clone(false)
只给复制节点本身(包括节点内部信息)
事件绑定
jQuery事件机制
jQuery对常见类型事件封装了相应的方法,如click()
、mouseover()
、focus()
等。
jQuery会==自动遍历==$dom集合中的元素 依次为它们绑定相应的事件。且绑定的事件 使用了事件监听 也就是说可以为一个dom绑定多个事件处理程序。
// 1、如果给集合绑定事件,jquery会自动遍历 统一设置
$('ul li').click(function (event) {
// alert(1);
console.log(event);
// 事件函数中 this表示当前dom - 原生
console.log(this);
console.log($(this));
// 2、可以通过index()方法获取编号
let index = $(this).index();
alert(index)
})
// 3、jquery 事件内部是使用addEventListener()来绑定的
// 因此可以绑定多个事件函数
jquery中绑定事件有3中方式:
* 1、事件方法,多数事件有它相应的方法:
* "blur focus focusin focusout resize scroll click dblclick " +
"mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
"change select submit keydown keypress keyup contextmenu"
2、on方法绑定事件:$dom.on('类型', [代理的子元素], [data], function (event) {})
3、bind方法绑定事件,on的简化版:$dom.on('类型', [data], function (event) {})
$('#uname')
.focus(function () {
$(this).css('background-color', 'pink')
})
.blur(function () {
$(this).css('background', 'none')
})
.change(function () {
console.log($(this).val());
})
// .input(); // input不在支持的方法范围内