Rumah hujung hadapan web tutorial js jquery dom是什么

jquery dom是什么

Dec 21, 2020 am 10:46 AM
dom jquery

jquery dom是指文档对象模型即Document Object Model,是W3C国际组织的一套Web标准,DOM可被JavaScript用来读取、改变HTML、XHTML以及XML文档。

jquery dom是什么

推荐:《jquery视频教程

什么是DOM?

要改变页面的某个东西,JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口,连同对 HTML 元素进行添加、移动、改变或移除的方法和属性,都是通过文档对象模型来获得的(DOM)。

在 1998 年,W3C 发布了第一版的 DOM 规范。这个规范允许访问和操作 HTML 页面中的每一个单独的元素。

所有的浏览器都执行了这个标准,因此,DOM 的兼容性问题也几乎难觅踪影了。 DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档

HTML-DOM

HTML-DOM 在使用JavaScript和DOM为HTML文件编写脚本,有许多专属于HTML-DOM的属性. HTML-DOM的出现甚至比DOM Core还要早,它提供一些更简明的符号来描述各种HTML元素的属性。

例如: 使用HTML-DOM来获取表单对象 的方法: document.forms

CSS-DOM

CSS-DOM是针对CSS的操作。在JavaScript中,CSS-DOM技术的主要作用是获取和设置style对象的各种属性。通过改变style对象的各种属性,可以使网页呈现出各种不同的效果

设置某个元素style对象字体颜色的方法: elements.style.color = “red”;

JQuery中的DOM操作

查找节点

元素可以通过text()方法读取其中的html内容,相当于DOM的innerHTML属性

$(function(){ 
var $para = $("p");         // 获取<p>节点 
var $li = $("ul li:eq(1)");         // 获取第二个<li>元素节点 
var p_txt = $para.attr("title");     // 输出<p>元素节点属性title 
var ul_txt = $li.attr("title");         // 获取<ul>里的第二个<li>元素节点的属性title 
var li_txt = $li.text();         // 输出第二个<li>元素节点的text 
});
Salin selepas log masuk

插入节点

7a83587582694f5e9a0f570086bec34.png

删除节点:

需要注意的是,在删除元素时,如果当前元素包括子元素,会一同删除,并且在删除元素时会返回一个当前被删除元素的引用,可以在以后再使用这些元素。

$(function(){
var $li = $("ul li:eq(1)").remove(); // 获取第二个<li>元素节点后,将它从网页中删除。
$li.appendTo(“ul”); // 把刚才删除的又重新添加到<ul>元素里
});
//或
$(function(){
$("ul li").remove("li[title!=菠萝]"); //把<li>元素中属性title删除不等于"菠萝"的<li>元素删除
});
Salin selepas log masuk

清空元素:

清空了ul 中的第二个li中的所有后代节点。注意:empty和remove的区别,empty清空元素内的后代节点,元素本身保留。

$(function(){
     $("ul li:eq(1)").empty(); // 找到第二个<li>元素节点后,清空此元素里的内容
  });
Salin selepas log masuk

复制节点:

这个复制出来的新元素不具有任何的行为,也就是当点击克隆出来的新元素的时没有前面设置的点击事件,如果需要可以在clone方法中传递一个参数clone(true),表示复制元素时同时复制元素中的所绑定的事件。

$(function(){ 
    $("ul li").click(function(){ 
        $(this).clone().appendTo("ul"); // 复制当前点击的节点,并将它追加到<ul>元素 
    }) 
});
Salin selepas log masuk

替换节点:

$(function(){ 
    $("p").replaceWith("<strong>你最不喜欢的水果是?</strong>"); 
    // 同样的实现: $("<strong>你最不喜欢的水果是?</strong>").replaceAll("p"); 
});
Salin selepas log masuk

包裹节点 :wrap ,wrapAll ,wrapInner

$(function(){
    $(“span”).wrap(“<strong></strong>”);
})
Salin selepas log masuk

运行结果代码:

<strong><span>选择你最喜欢的水果</span></strong>
$("span").wrapAll("<strong></strong>");//以第一个为开始往后面紧贴   这个会破坏页面结构
Salin selepas log masuk

执行后结果

<strong>
    <span>选择你最喜欢的水果</span>
    <span>选择你最喜欢的水果</span>
</strong>
<span>选择你最喜欢的水果</span>
$("span").wrapInner ("<strong></strong>");
Salin selepas log masuk

执行后结果

<span><strong>选择你最喜欢的水果</strong></span>
Salin selepas log masuk

属性操作

//取值
var p_txt = $("p").attr(“title”);
//设置属性
//找到a元素且有其中含有字符串“link”,修改属性href为“index.html"
$(function(){
    $("a:contains(&#39;link&#39;)").attr("href",“index.html");        
})
//如果想同时设置多个属性可以使用一下代码
$("a:contains(&#39;link&#39;)").attr({"href":“index.html","title":"test"});    //键值对    
attr({"属性1":"值1","属性2":"值2","属性3":"值3"})
  //删除属性 
  $(“a”).removeAttr(“title”);
Salin selepas log masuk

注意:jQuery中有很多函数同时实现取值get,和设置set,包括html(),text(),height(),width(), val(),css()等.

样式操作

//读取和设置样式    使用属性方式 读取样式    
var p_class = $(“p”).attr(“class”);
 //设置样式
$(“p”).attr(“class”,”high”);
Salin selepas log masuk

注意:使用属性方式设置样式会替换掉原有的样式,如果想实现追加效果可以使用addClass

追加样式:

样式:

<style type="text/css">
    .high    {font-weight:bold;    color:red; }
    .another{font-style:italic; color:blue;}
</style>
Salin selepas log masuk

html:

<p title="选择你最喜欢的水果" class="high">选择你最喜欢的水果</p>      
//class="height another"  样式也可以这样写,中间用空格隔开
jQuery:
$(“p”).addClass(“another”);
Salin selepas log masuk

注意:样式设置遵循两条规则 如果个一个元素添加了多个class值时,就相当于合并它们的样式。 如果不同的class设置了同一样式属性,则后者覆盖前者。

移除样式

 //移除样式
    $(“p”).removeClass(“high”);
 //同时移除多个样式
    $(“p”).removeClass(“high”).removeClass(“another”);
//样式全部移除
    $(“p”).removeClass();
Toggle
Salin selepas log masuk

toggle事件控制样式设置和取消,第一次点击时执行toggle事件定义中的第一个函数块,当第二次点击时运行toggle事件定义中的第二个函数块,以此类推。

$(function(){
    $(“p”).toggle(function(){        //内置方法一 添加样式
        $(this).addClass(“another”);            
    },function(){                //内置方法二 删除样式            
     $(this).removeClass(“another”);        
    })        
})   //会一直循环
Salin selepas log masuk

toggleClass 方法有类似的功能

当超链接点击时执行代码设置样式,这时设置样式时会自动判断,如果当前样式不在对应元素上则添加样式,如果在当前元素上则删除样式。

$(function(){
    $(“#link”).click(function(){
        $(“p”).toggleClass(“another”);            
        return false;
    })        
})
Salin selepas log masuk

设置和获取 括号里面没有就是取,有就是设置

--HTML文本值 
//取值
    var p_html = $(“p”).html();
  //设置
    $(“p”).html(“<strong>选择你最喜欢的水果</strong>”);
--text()方法  文本
//取值
  var p_text = $(“p”).text();
//设置值
   $(“p”).text(“选择你最喜欢的水果”);
--val()方法  value
//取值
  var txt_value = $(this).val();
//设置值
  $(this).val("");
Salin selepas log masuk

遍历节点
ec4440630a79fcbd2c06ad818cdec76.png

CSS-DOM

  //取值
    $(“p”).css(color);
  //设置值
    $(“p”).css(“color”,”red”);
  //和attr一样可以一次设置多个样式
    $(“p”).css({“color”:”red”,”background”:”#003333”});
  //透明度设置
    $(“p”).css(“opacity”,”0.5”);
Salin selepas log masuk

Atas ialah kandungan terperinci jquery dom是什么. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Penjelasan terperinci kaedah rujukan jQuery: Panduan permulaan cepat Penjelasan terperinci kaedah rujukan jQuery: Panduan permulaan cepat Feb 27, 2024 pm 06:45 PM

Penjelasan terperinci kaedah rujukan jQuery: Panduan Mula Pantas jQuery ialah perpustakaan JavaScript yang popular yang digunakan secara meluas dalam pembangunan tapak web Ia memudahkan pengaturcaraan JavaScript dan menyediakan pemaju dengan fungsi dan ciri yang kaya. Artikel ini akan memperkenalkan kaedah rujukan jQuery secara terperinci dan menyediakan contoh kod khusus untuk membantu pembaca bermula dengan cepat. Memperkenalkan jQuery Pertama, kita perlu memperkenalkan perpustakaan jQuery ke dalam fail HTML. Ia boleh diperkenalkan melalui pautan CDN atau dimuat turun

Bagaimana untuk menggunakan kaedah permintaan PUT dalam jQuery? Bagaimana untuk menggunakan kaedah permintaan PUT dalam jQuery? Feb 28, 2024 pm 03:12 PM

Bagaimana untuk menggunakan kaedah permintaan PUT dalam jQuery? Dalam jQuery, kaedah menghantar permintaan PUT adalah serupa dengan menghantar jenis permintaan lain, tetapi anda perlu memberi perhatian kepada beberapa butiran dan tetapan parameter. Permintaan PUT biasanya digunakan untuk mengemas kini sumber, seperti mengemas kini data dalam pangkalan data atau mengemas kini fail pada pelayan. Berikut ialah contoh kod khusus menggunakan kaedah permintaan PUT dalam jQuery. Mula-mula, pastikan anda memasukkan fail perpustakaan jQuery, kemudian anda boleh menghantar permintaan PUT melalui: $.ajax({u

Bagaimana untuk mengalih keluar atribut ketinggian elemen dengan jQuery? Bagaimana untuk mengalih keluar atribut ketinggian elemen dengan jQuery? Feb 28, 2024 am 08:39 AM

Bagaimana untuk mengalih keluar atribut ketinggian elemen dengan jQuery? Dalam pembangunan bahagian hadapan, kita sering menghadapi keperluan untuk memanipulasi atribut ketinggian elemen. Kadangkala, kita mungkin perlu menukar ketinggian unsur secara dinamik, dan kadangkala kita perlu mengalih keluar atribut ketinggian unsur. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk mengalih keluar atribut ketinggian elemen dan memberikan contoh kod khusus. Sebelum menggunakan jQuery untuk mengendalikan atribut ketinggian, kita perlu terlebih dahulu memahami atribut ketinggian dalam CSS. Atribut ketinggian digunakan untuk menetapkan ketinggian elemen

Petua jQuery: Cepat ubah suai teks semua teg pada halaman Petua jQuery: Cepat ubah suai teks semua teg pada halaman Feb 28, 2024 pm 09:06 PM

Tajuk: Petua jQuery: Cepat ubah suai teks semua teg pada halaman Dalam pembangunan web, kita selalunya perlu mengubah suai dan mengendalikan elemen pada halaman. Apabila menggunakan jQuery, kadangkala anda perlu mengubah suai kandungan teks semua teg dalam halaman sekaligus, yang boleh menjimatkan masa dan tenaga. Berikut akan memperkenalkan cara menggunakan jQuery untuk mengubah suai teks semua teg pada halaman dengan cepat, dan memberikan contoh kod khusus. Pertama, kita perlu memperkenalkan fail perpustakaan jQuery dan memastikan bahawa kod berikut dimasukkan ke dalam halaman: &lt

Gunakan jQuery untuk mengubah suai kandungan teks semua teg Gunakan jQuery untuk mengubah suai kandungan teks semua teg Feb 28, 2024 pm 05:42 PM

Tajuk: Gunakan jQuery untuk mengubah suai kandungan teks semua teg jQuery ialah perpustakaan JavaScript yang popular yang digunakan secara meluas untuk mengendalikan operasi DOM. Dalam pembangunan web, kita sering menghadapi keperluan untuk mengubah suai kandungan teks tag pautan (tag) pada halaman. Artikel ini akan menerangkan cara menggunakan jQuery untuk mencapai matlamat ini dan memberikan contoh kod khusus. Pertama, kita perlu memperkenalkan perpustakaan jQuery ke dalam halaman. Tambahkan kod berikut dalam fail HTML:

Fahami peranan dan senario aplikasi eq dalam jQuery Fahami peranan dan senario aplikasi eq dalam jQuery Feb 28, 2024 pm 01:15 PM

jQuery ialah perpustakaan JavaScript popular yang digunakan secara meluas untuk mengendalikan manipulasi DOM dan pengendalian acara dalam halaman web. Dalam jQuery, kaedah eq() digunakan untuk memilih elemen pada kedudukan indeks tertentu Senario penggunaan dan aplikasi khusus adalah seperti berikut. Dalam jQuery, kaedah eq() memilih elemen pada kedudukan indeks yang ditentukan. Kedudukan indeks mula dikira dari 0, iaitu indeks elemen pertama ialah 0, indeks elemen kedua ialah 1, dan seterusnya. Sintaks kaedah eq() adalah seperti berikut: $("s

Bagaimana untuk mengetahui sama ada elemen jQuery mempunyai atribut tertentu? Bagaimana untuk mengetahui sama ada elemen jQuery mempunyai atribut tertentu? Feb 29, 2024 am 09:03 AM

Bagaimana untuk mengetahui sama ada elemen jQuery mempunyai atribut tertentu? Apabila menggunakan jQuery untuk mengendalikan elemen DOM, anda sering menghadapi situasi di mana anda perlu menentukan sama ada sesuatu elemen mempunyai atribut tertentu. Dalam kes ini, kita boleh melaksanakan fungsi ini dengan mudah dengan bantuan kaedah yang disediakan oleh jQuery. Berikut akan memperkenalkan dua kaedah yang biasa digunakan untuk menentukan sama ada elemen jQuery mempunyai atribut khusus, dan melampirkan contoh kod tertentu. Kaedah 1: Gunakan kaedah attr() dan operator jenis // untuk menentukan sama ada elemen mempunyai atribut tertentu

Ringkasan fungsi operasi fail yang biasa digunakan dalam PHP Ringkasan fungsi operasi fail yang biasa digunakan dalam PHP Apr 03, 2024 pm 02:52 PM

目录1:nama asas()2:salinan()3:nama nama()4:ruang_bebas_cakera()5:ruang_jumlah_cakera()6:wujud_fail()7:fail_dapatkan_kandungan()8:isi_letak_fail()9:saiz fail()10:jenis fail( )11:glob()12:is_dir()13:boleh_tulis()14:mkdir()15:move_uploaded_file()16:parse_ini_file()17:

See all articles