个人笔记 ----JQuery 节点操作（二）

东灬大泽

一、内容节点操作

DOM的内容节点操作： innerText属性、innerHTML属性；设置或获取文本内容。

JQuery的内容节点操作：

html（[value]）、text([value]) 方法；设置或获取文本内容;

注： DOM和JQuery获取或者设置表单域或者表单按钮的文本分别用 value属性和 val（）方法

二、属性节点操作

DOM： 1.把元素当成 js对象来操作：以对象.属性或者对象【属性名】来操作；

2.用DOM提供的方法进行操作：

getAttribute("属性名");

setAttribute（“属性名”，“属性值”）；

hasAttribute（“属性名”）；

removeAttribute（“属性名”）；

3.以className来操作 class属性；

JQuery：1.获取和设置属性 attr（”属性名“） attr（“属性名”，“属性值”）

attr（{ ”属性名“：”属性值“，“属性名”：“属性值 ” .....} ）

用于固有属性和自定义属性

删除属性： removeAttr("属性名");

2.prop（）方法：主要用与操作表单属性：checked、selected、disable；

语法：prop("属性名")

prop("属性名", "属性值")

removeProp("属性名")

注意：使用DOM或jQuery提供的方法来操作表单属性，

操作完毕之后在标签上面不会有任何展示

3.专门为class属性提供的操作方

添加class属性： addClass("class属性值");

判断是否存在某个class属性值： hasClass("class属性值")

返回值：如果存在，则返回true，否则返回false

删除class属性： removeClass(["class属性值"]);

注意：如果没有参数，则代表删除所有的class属性值，

如果有参数，代表删除指定的class属性值

切换class属性： toggleClass("class属性值");

注意：如果标签中对应的“class属性值”存在，则删除

如果标签中对应的“class属性值”不存在，则添加

三、样式操作

DOM的样式操作：

对象名.style.样式名="样式值"；

对象名.style.cssText =“ 样式名1：样式值1；样式名2:样式值2 ”；

JQuery的样式操作：

jQuery对象.css("样式名", "样式值");

jQuery对象.css({
            "样式名1": "样式值1",
            "样式名2": "样式值2",
            "样式名3": "样式值3",

注：设置的样式，默认都是设置在行内样式中

四、节点操作

DOM节点操作：

创建节点： document.createElement(“标签名”); -- 空节点，没有属性内容；

插入节点： 父节点.appendChild(子节点)； 追加，排在最后！

父节点.insertBefore(子节点，参照节点) ；排在参照节点之前！

节点复制： 节点.cloneNode（BOOLEAN）;参数是true，复制子节点 ；默认为false 不复制；

删除节点： 父节点.removeChild(子节点)； 删除子节点；

jQuery的节点操作 创建节点： $("

我是一个标题标签

注意：创建元素节点的同时，还可以设置内容、属性和样式

在内部插入

父元素.append(被插入的元素) == 被插入的元素.appendTo(父元素);

在父元素内部开头插入

父元素.prepend(被插入的元素); == 被插入的元素.prependTo(父元素);

使用场合：当父元素内部没有子元素时，这是只能使用“内部插入”子元素，

不需要通过父元素 ，直接在参照位置插入一个元素。

在参照元素前面插入一个元素

参照元素.before(需要插入的子元素) ==需要插入的子元素.insetBefore(参照元素)

在参照元素后面插入一个元素

参照元素.after(需要插入的子元素)==需要插入的子元素.insertAfter(参照元素);

删除节点

删除当前元素，并且还删除了该元素内部的子元素： 被删除元素.remove(["选择器"])

注意：jQuery对象是一个集合，我们在删除元素的时候还可以指定删除某写指定的元素。

不删除当前元素，但是会删除当前元素的所有子元素：被清空节点.empty();

注意：显示开发中，清空节点一般不会使用，因为清空节点效率低。

建议：建议使用html("")方法来实现

jQuery的元素拷贝操作： 需要拷贝的元素.clone([boolean类型的参数]);

五、遍历节点

DOM的遍历节点

1.子节点父节点 子元素.parentNode

注意：儿子只能有一个亲父亲，所以返回的是元素节点，而不是集合。

2.通过父节点找子节点 父元素.children

注意：父亲可以有任意多个儿子，所以返回的是一个集合，集合中每个元素就是亲儿子元素节点

jQuery的遍历节点 1.遍历节点--祖先

1.1找父节点 子元素.parent()

1.2找父辈元素 子元素.parents(["选择器"])

参数：如果设置了参数(该参数是一个CSS选择器)，那么返回符合条件的父辈元素

如果没有设置参数，那么直接返回所有的父辈元素。

2.遍历节点--后代

2.1找子节点 父元素.children(["选择器"])

参数：如果设置了参数(该参数是一个CSS选择器)，那么返回符合条件的亲儿子元素

如果没有设置参数，那么直接返回所有的亲儿子元素。

2.2找子孙后代 父元素.find("选择器")

参数： 如果选择器设置的为“*”，代表返回所有的子孙后代元素。

遍历节点--同辈

找所有兄弟 兄弟元素.siblings(["CSS选择器"])

找上一个兄弟 兄弟元素.prev()

找前面所有的兄弟 兄弟元素.prevAll(["CSS选择器"])

找下一个兄弟 兄弟元素.next()

找后面所有的兄弟 兄弟元素.nextAll(["CSS选择器"])

注意：参数： 如果设置了参数(CSS选择器)，那么就从后面所有的兄弟元素中找指定的兄弟

如果没有设置参数(CSS选择器)，那 么找到的就是所有符合条件的元素

遍历节点--过滤 强调：从一个jQuery对象(是一个集合)中，找符合条件的元素。

找第一个元素 jQuery对象.first()

找最后一个元素 jQuery对象.last()

找指定索引位置的元素 jQuery对象.eq(索引)

找匹配CSS选择器条件的元素 jQuery对象.filter("CSS选择器")

找CSS选择器条件之外的元素 jQuery对象.not("CSS选择器")

找索引为偶数项的元素 $("选择器:even")

找索引为奇数项的元素 $("选择器:odd")

强调：“jQuery对象[索引]” 和 “jQuery对象.get(索引)” 返回的结果是DOM对象 “jQuery对象.eq(索引)” 返回的结果是jQuery对象

六、$.each();方法

作用：$.each()用于遍历数组、js对象和jQuery对象

$.each(对象, function(参数一, 参数二) {

// 在回调函数中需要执行的业务逻辑

});

参数一: 如果遍历的是 数组， 那么指的数组元素对应的索引

如果遍历的是 js对象 ，那么指的js对象的 属性名

如果遍历的是 jQuery对象 ，那么指的jQuery对象 集合的索引

参数二：如果遍历的是数组，那么指的就是索引对应的 数组元素

如果遍历的是 js对象 ，那么指的 js对象的属性值

如果遍历的是 jQuery对象 ，那么指的就是索引对应的 DOM对象

$.each()本质上就是做的循环遍历操作，如果想结束循环遍历，或则跳过某次循环遍历该如何实现？？ break:只能用于循环和switch语句 tinue: 只能用于循环

七、绑定事件

DOM取消事件 a)添加单击事件 element.onclick = function() {}

b)取消单击事件 element.onclick = null;

jQuery如何实现取消事件 a)使用 bind 来绑定事件 事件源.bind(types, data, fn)

types：需要绑定的事件类型， 并且可以一次绑定多个事件。

注意：需要响应多个事件，事件之间用空格分割。例如： "click mouseenter"

data：需要传递的参数 ，该参数一般为JSON格式的对象【可选】

fn：响应事件的回调函数

$(function () {
            // 需求：把外部参数传递给响应事件的函数
  $("#btn").bind("click", {"name" : "admin", "age" : 18}, function (event) {
                // event对象的data属性，获取外界传入的参数。
                console.log(event.data.name + " " + event.data.age);

b)使用 unbind 来取消事件 绑定事件源.unbind(types)

types：需要解绑的事件类型

$("#btn2").click(function () {
                console.log("aaa");
                // 要求：解绑 #btn1 绑定的事件
                // $("#btn1").unbind("click mouseenter");
                // 如果省略参数，那么默认解绑 #btn1 绑定的所有事件
                $("#btn1").unbind();
            // 需求：要求按钮只能响应单击事件一次。一次性事件
     $("#btn3").bind("click", function () {
                console.log("我是一次性事件");
                $(this).unbind();

使用 on 来绑定事件 element.on(types, selector, data, fn)

types:需要绑定的事件类型，并且可以一次绑定多个事件。

selector: 执行触发 绑定事件的子元素 【可选】

如果省略CSS选择器，那么就只能绑定事件的元素的自己来触发

data：需要传递的参数， 该参数一般为JSON格式的对象【可选】

fn:响应事件的回调函数 ，该回调函数中this指的就是响应该事件的事件源

$("#child1").on("click", function () {
                    console.log(this);

off 事件解绑 element.off(types, selector)

types:需要解绑的事件类型，可以一次解绑多个

selector：CSS选择器，设置需要解绑的子元素

$(function () {
            $("body").on("click mouseenter", "#btn1", function () {
                console.log("#btn1响应单击事件");
            $("#btn2").bind("click", function () {
                // 解除body添加的on事件，该事件是由 #btn1 来响应
                // $("body").off("click", "#btn1");
                // 如果省略两个参数，那么解绑所有类型的事件，解绑所有绑定的子元素
                $("body").off();

八、链式语法

链式语法的 核心： a)调用时， 方法用完毕之后继续使用点语法调用别的方法

b) 每一个方法内部返回thi s jQuery几乎所有方法都支持链式语法。

var wjx_kx = "☆", wjx_sx = "★";
            $(".list > li").mouseenter(function () {
                $(this).html(wjx_sx).prevAll().html(wjx_sx).end().nextAll().html(wjx_kx);