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

关联查找

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