您的位置: 首页  >  文章  >  Javascript--07DOM对象和jQuery对象

Javascript--07DOM对象和jQuery对象

分类: 文章 • 2024-10-09 23:16:46

1. DOM对象和jQuery对象

(1) DOM对象
通过传统的JavaScript方法访问DOM的元素，可以生成DOM对象。例如：
var obj=document.getElementById(“content”);
(2) jQuery对象
使用jQuery选择器选择页面元素，是为了生成jQuery对象。代码如下：
var obj=$("#content");

注意：
往DOM对象里插入内容：obj.innerHTML=”内容”；
获取DOM对象里内容：obj.innerHTML；

往jQuery对象里插入内容：obj.html(“内容”);
获取jQuery对象里内容：obj.html();

2. jQuery对象和DOM对象的相互转换

(1)jQuery对象转换成DOM对象
使用get()方法，其语法结构为jQuery对象.get([index]);
例如： $(“li”).get(); ----拿到的是DOM数组

(2) DOM对象转换成jQuery对象
只需要用()将它包装起来，就可以获得对应的jQuery对象，其语法结构为()将它包装起来，就可以获得对应的jQuery对象，其语法结构为(DOM对象)。
例：var test=test=(document.getElementsByTagName(“li”));-----一般jQuery对象变量名前都加$
注意：从保存了多个jQuery对象的test变量中，提取出其中一个jQuery对象，可以使用eq(index)方法。index下标是从0开始，例如：test变量中，提取出其中一个jQuery对象，可以使用eq(index)方法。index下标是从0开始，例如：test.eq(0).html()；

3. css()方法的使用

例：点击h3标签并改变h3标签的字体颜色
$(function () {
$(“h3”).click(function () {
$(this).css(“color”, “red”); //jQuery对象
});
});
注意：this的使用！！在事件方法中，使用this表示当前事件源。

4.jQuery中的DOM操作

(1) 元素样式操作
常见方法：
Javascript--07DOM对象和jQuery对象

例：
css属性同一对象添加多个样式：对象元素.css({“color”,”red”,”fontSize”,”30px”});
toggleClass(class名)：这个方法让有这个class名移除掉，没有的加上

(2) 元素内容及value属性值操作
① 设置或获取元素的内容
常见方法：
Javascript--07DOM对象和jQuery对象
② 获取或设置元素值
语法：
jQuery对象.val([val])；
注意：其中，如果不带参数val，则是获取某元素（value）的值；
反之，则是将参数val赋给某元素，即设置元素的值。
该方法常用于表单中获取或者设置表单元素的值。

补充事件：
点击事件:
元素对象.click(
function(){
}
);

获取焦点事件:
元素对象.focus(
function(){
}
);

失去焦点事件：
元素对象.blur(
function(){
}
);

(3) 元素属性操作
Javascript--07DOM对象和jQuery对象

(4) 创建节点元素
函数$(html)完成元素的创建，然后再调用新元素的上级或者同辈的相关方法，把新元素添加到DOM树中。
例如：创建一个div标签，并设置其内容和属性
var div=div=(“

Write Less Do More
”);
注意：可以一次性创建多个标签！！
例如;var ulli=ul_li=(“
  • Write Less Do More
”);

(5) 插入、删除节点
① 插入节点
Javascript--07DOM对象和jQuery对象

② 删除节点
jQuery对象.remove([expr]);
参数expr为可选项，如果接受参数，则该参数为筛选元素的jQuery表达式，通过该表达式将获取指定的元素，并进行删除
例如：$(“ul li”).remove();//删除所有的列表项
$(“ul li”).remove(“ul li:eq(2)”);//删除第二个li
③ 替换节点

要被替换的节点.replaceWith(“新的节点”)
$(新的节点).replaceAll(要被替换的节点)这两种方法
例如：var li=li=(“

  • 也许明天——姚贝娜
    • ”);
    ("ulli:last").replaceWith(("ul li:last").replaceWith(li);

    (6)遍历元素
    使用each()方法实现元素的遍历
    语法：
    jQuery对象.each(callback);
    注意:其中，参数callback是一个匿名function函数，还可以给该函数传递一个index参数，此形参是遍历元素的序号（从0开始），注意：需要的时候就写，不需要可以不写。
    如果需要在函数体中访问当前遍历到的元素，则使用this关键字。
    例如： $(“img”).each(function(index){
    $(this).css(“border”,“1px solid #f00”);
    $(this).attr(“title”,“第”+(index+1)+“幅风景画”);
    });

    相关推荐