关联查找

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不在支持的方法范围内

jQuery快速入门（2）--操作 2021.11.20相关推荐

JQuery 基础 || 目前 jQuery 有三个大版本||JQuery快速入门
1. 概念: 一个JavaScript框架.简化JS开发 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScrip ...
jQuery快速入门
jquery快速入门 jQuery的作用:1.取得页面中的元素:2.修改页面的外观:3.改变页面的内容:4.响应用户的页面操作:5.为页面添加动态效果:6.无须刷新页面即可从服务器获取数据:7.简化常 ...
【不忘初心】Win10_LTSC2021_19044.1381_X64_可更新[纯净精简版][2.52G](2021.11.20）
此版可正常更新补丁,母版来自UUP WIN10_LTSC2021 19044.1288集成补丁到19044.1381为了保证稳定初心的系统全部都是离线精简和优化,非二次封装.系统纯净.流畅.进程少无任 ...
尚硅谷——谷粒商城项目开发记录——2021.11.20
尚硅谷--谷粒商城项目开发记录--2021.11.20 概念: 1.SpringCloud Alibaba: 简介: Spring Cloud Alibaba 致力于提供微服务开发的一站式解决方案.此 ...
Linux快速入门（操作基础）
Linux快速入门(操作基础) 一.Linux操作系统 Shell简介: shell的原意是外壳,用来形容物体外部的架构.Linux系统的shell作为操作系统的外壳,为用户提供了使用操作系统的接口. ...
jQuery 快速入门教程
内容目录 jQuery 入门什么是jQuery 如何使用jQuery jQuery的运行原理如何选择jQuery版本 ready() 准备就绪时执行代码 jQuery 核心:选取元素使用jQue ...
openEuler快速入门-openEuler操作系统介绍
openEuler快速入门第一章 openEuler操作系统介绍文章目录 openEuler快速入门前言一.openEuler操作系统介绍二.openEuler操作系统使用三.openEu ...
jquery 快速入门二
---恢复内容开始--- 操作标签样式操作样式类 addClass();//添加指定的CSS类名. removeClass();//移除指定的类名. hasClass();//判断样式不存在 to ...
jQuery快速入门专题
jQuery入门专题本人博客特点:最高重要等级为*****(五红星),依次减少代表重要性相对较低! 一.jQuery简介 jQuery 是一个 JavaScript的一个库,也就是说jQuery是基 ...

jQuery快速入门（2）--操作 2021.11.20