[JavaScript知识库] 3.jqueryDOM操作

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 3.jqueryDOM操作 -> 正文阅读

[JavaScript知识库]3.jqueryDOM操作

attr()

概念：获取匹配的元素集合中的第一个元素的属性的值或设置每一个匹配元素的一个或多个属性。
取值：

.attr( attributeName ) 获取第一个元素的某个属性值

// 获取第一个元素的background-color样式属性值
$('div').css("background-color");

.attr()方法只获取第一个匹配元素的属性值。要获取每个单独的元素的属性值，我们需要依靠jQuery的 .each()或者.map()方法循环。

赋值：

.attr( attributeName, value )设置每个被选中元素的一个指定属性

$('#greatphoto').attr('alt', 'Beijing Brush Seller');

.attr( attributes ) 使用属性 - 值集合对象设置每个被选中元素的一个或多个指定属性。

$('#greatphoto').attr({
  alt: 'Beijing Brush Seller',
  title: 'photo by Kelly Clark'
});

.attr( attributeName, function(index, attr) ) 使用回调函数的返回值分别设置被选中元素的属性值，函数接受两个参数：
1. index 当前元素的下标
2. attr 当前元素当前属性值

$('#greatphoto').attr('title', function(i, val) {
  return val + ' - photo by Kelly Clark'
});

注意：attr() 与 .prop() 区别

若要检索和更改DOM属性,比如元素的checked, selected,focus,readonly 或 disabled状态，请使用.prop()方法。
prop方法通常用来影响DOM元素的动态状态，而不是改变的HTML属性。
细节参考：http://api.jquery.com/prop/

jQuery的DOM 操作

jQuery对象创建

概念：根据提供的原始 HTML 标记字符串，动态创建由 jQuery 对象包装的 DOM 元素。
语法：

jQuery(html)接受一个HTML标记字符串用于动态创建jQuery DOM元素

 $('<div/>')
 $('<div>生成一个div</div>')

注意：

当你创建单个元素时，请使用闭合标签或 XHTML 格式。例如，创建一个 span ，可以用$("<span/>") 或 $("<span></span>")，但不推荐 $("<span>")。在jQuery 中，这个语法等同于$(document.createElement("span")) 。
创建一个 <input> 元素必须同时设定 type 属性。因为微软规定 <input> 元素的 type 只能写一次。

// 在 IE 中无效:
$("<input>").attr("type", "checkbox");
// 在 IE 中有效:
$("<input type='checkbox'>");

jQuery(html,props)可以通过传人props用于给新创建元素上附加属性、事件和方法

// 动态创建一个 div 元素（以及其中的所有内容）
$("<div>", {
  "class": "test",
  text: "Click me!",
  click: function(){
    $(this).toggleClass("test");
  }
})

// 创建一个 <input> 元素，同时设定 type 属性、属性值，以及一些事件。
$("<input>", {
  type: "text",
  val: "Test",
  focusin: function() {
    $(this).addClass("active");
  },
  focusout: function() {
    $(this).removeClass("active");
  }
})

元素添加

.append(content|fn)

概念：向每个匹配的元素内部追加内容。这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。
语法：

.append(content)：将要追加到目标中的内容，可以接受HTML字符串，DOM元素或 jQuery 对象

// HTML字符串
$("p").append("<b>Hello</b>");

// DOM元素
var h2 = document.createElement('h2');
h2.innerHTML = '标题';
$("div").append(h2)

// jQuery 对象
var $img=$('<img src="images/g3.jpg"/>')
 $('#box1').append($img)
 
// 如果一个被选中的元素被插入到另外一个地方，这是移动而不是复制
// 如果有多个目标元素，内容将被复制然后插入到每个目标里面。
$('.container').append($('h2'));

.append(function(index, html))：返回一个HTML字符串，DOM元素，jQuery对象的函数，用于追加到每一个匹配元素的里边。接受两个参数，index参数为对象在这个集合中的索引值，html参数为这个对象原先内部的html值。


$('h2').append(function (index,html) {
    console.log(html)
    return '<span> 测试'+index+'</span>'

})

.appendTo(target)

概念：把所有匹配的元素追加到另一个指定的元素元素集合中。
语法：

.appendTo( target )：元素们会被插入到由参数指定的目标内部的末尾。target可以是一个选择符，元素，HTML字符串，DOM元素数组，或者jQuery对象。

$('<p>Test</p>').appendTo('.inner');

注意：如果使用下面的方式选择的元素被插入到一个DOM中，单一的位置的地方，它将被移动到目标中（不是克隆），并返回一组新的插入后的元素集合，如果有多个目标元素，内容将被复制然后按顺序插入到每个目标里面。新的集合（原始元素加克隆元素）被返回。

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
  <h2>Greetings</h2>
</div>
<script>
  $('h2').appendTo($('.container'));
</script>

「课堂练习」

根据所学jQuery知识根据数据生成表单页面

要求：
1.给定的数组数据中包含创建的表单元素需要的label，name，type，value信息
2根据数据创建出对应的DOM表单元素渲染到页面上

数据：

 var data = [{
        label: '用户名',
        name: 'username',
        type: 'text'
    }, {
        label: '密码',
        name: 'psw',
        type: 'password'
    }, {
        label: '年龄',
        name: 'age',
        type: 'text'
    }, {
        label: '学历',
        name: 'gender',
        type: 'select',
        value: ['高中', '大学','本科','硕士']
    }, {
        label: '爱好',
        name: 'hobby',
        type: 'checkbox',
        value:['抽烟','喝酒','烫头','玩摇滚','说相声','拍戏','养马']
    }, {
        label: '婚姻状况',
        name: 'married',
        type: 'radio',
        value:['已婚','未婚','离异','保密']
    }, {
        label: '备注',
        type:'textarea',
        name: 'resume'
    }];

.prepend(content|fn)

概念：将参数内容插入到每个匹配元素内部的最前面。
语法：

.prepend( content )：将被插入到匹配元素内部最前面的内容，可以接受HTML字符串，DOM元素或 jQuery 对象

$('.inner').prepend('<p>Test</p>');

// 如果一个被选中的元素被插入到另外一个地方，这是移动而不是复制
// 如果有多个目标元素，内容将被复制然后插入到每个目标里面。
$('.container').prepend($('h2'));

.prepend( function(index, html) )：返回一个HTML字符串，DOM元素，jQuery对象的函数，用来插入到匹配元素的开始处。接受两个参数，index参数为对象在这个集合中的索引值，html参数为这个对象原先内部的html值。

$('h2').append(function (index,html) {
    console.log(html)
    return '<span> 测试'+index+'</span>'

})

.prependTo( target )

概念：将所有元素插入到目标元素内最前面。
语法：

.prependTo( target ) 元素们将被插入到由参数指定的目标内部的起点。target可以是一个选择符，元素，HTML字符串，DOM元素数组，或者jQuery对象。

$('<p>Test</p>').prependTo('.inner');

.after(content｜fn)

概念：在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点。
语法：

.after( content ) 接受一个DOM元素，HTML字符串，或者jQuery对象，作为兄弟节点用来插在每个匹配元素的后面。

$('.inner').after('<p>Test</p>');

.after( function(index) ) 接受一个返回HTML字符串，DOM 元素，或者 jQuery 对象的函数，作为兄弟节点插在每个匹配元素的后面。接收元素在集合中的索引位置作为参数。

$('.inner').after(function(index){
    return '<p>Test-'+index+'</p>'
});

.insertAfter(target)

概念：在目标元素后面作为兄弟节点插入集合中每个匹配的元素。
语法：

.insertAfter( target ) 接受一个选择器，元素，HTML字符串或者jQuery对象作为目标对象，匹配的元素将会被插入在由参数指定的目标后面。

$('<p>Test</p>').insertAfter('.inner');

.before(content｜fn)

概念：根据参数设定，在匹配元素的前面插入内容。
语法：

.before( content ) 接受一个DOM元素，HTML字符串，或者jQuery对象，作为兄弟节点用来插在每个匹配元素的前面。

$('.inner').before('<p>Test</p>');

.before( function(index) ) 接受一个返回HTML字符串，DOM 元素，或者 jQuery 对象的函数，作为兄弟节点插在每个匹配元素的前面。接收元素在集合中的索引位置作为参数。

$('.inner').before(function(index){
    return '<p>Test-'+index+'</p>'
});

.insertBefore( target )

概念：在目标元素前面插入集合中每个匹配的元素。
语法：

.insertAfter( target ) 接受一个选择器，元素，HTML字符串或者jQuery对象作为目标对象，匹配的元素将会被插入在由参数指定的目标前面。

$('<p>Test</p>').insertBefore('.inner');

注意：在jQuery中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，返回值是所有被追加的内容，而不仅仅是先前所选中的元素（破坏了jQuery的链式操作性）。所以，要选择先前选中的元素，需要使用end()方法

 $("<p/>")
   .appendTo("div")
   .addClass("test")
   .end()
   .addClass("test2");

元素删除

.remove()

概念：将匹配元素集合从DOM中删除。该方法会同时移除元素上的事件及 jQuery 数据。
语法：

.remove() 元素自身移出DOM。同时也会移除元素内部的一切。

$('.hello').remove();

.remove( [selector ] ) 接受一个选择器表达式用来过滤将被移除的匹配元素集合。

$('div').remove('.hello');

.empty()

概念：从DOM中移除集合中匹配元素的所有子节点。这个方法不仅移除子元素（和其他后代元素），同样移除元素里的文本。
语法：

.empty() 这个方法不接受任何参数。从DOM中移除集合中匹配元素的所有子节点。

$('.hello').empty();

元素复制

.clone()

概念：创建一个匹配的元素集合的深度拷贝副本。复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。

出于性能方面的考虑，表单元素动态的状态（例如，用户将数据输入到input和 textarea，或者用户在select中已经选中某一项）不会被复制到克隆元素。克隆操作将设置这些字段为HTML中指定的默认值。

语法：

.clone( )

$('.hello').clone().appendTo('.goodbye');

.clone( [Events] ) 接受一个表示是否会复制元素上的事件处理函数的布尔值，默认值是 false

$('.hello').clone(true).appendTo('.goodbye');

.clone([Even[,deepEven]]) 接受两个参数，参数一与上面一致，参数二 deepEven: 是否复制子元素的行为，默认值是 false

$('.hello').clone(true，true).appendTo('.goodbye');

注意: 使用.clone()可能产生id属性重复的元素的副作用，id应该是唯一的。在可能的情况下，建议，应避免克隆有此属性或标识符的元素，使用类（class）属性代替。

元素替换

.replaceWith(content|fn)

概念：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。
语法：

.replaceWith( content ) 接受一个用来插入的内容，可能是HTML字符串，DOM元素，或者jQuery对象。

$('div.second').replaceWith('<h2>New heading</h2>');

.replaceWith( function ) 一个函数，返回的内容会替换匹配的元素集合。接收两个参数，参数一：对应元素索引值，参数二：对应元素的innerHtml

$('div.container').replaceWith(function(i,innnerHTML) {
  return $(this).contents();
});

.replaceAll( target )

概念：用集合的匹配元素替换每个目标元素。.replaceAll()和.replaceWith()功能一样，但是目标和源相反。
语法：

.replaceAll( target ) 接受一个选择器字符串，jQuery对象，DOM元素，或者元素数组，指定哪个元素被替换。

$('<h2>New heading</h2>').replaceAll('.inner');

「课堂练习」

根据所学jQuery知识实现元素的克隆与替换

要求：
1.点击元素克隆，使用jQuery克隆API将页面上第一张图片元素克隆并添加到页面上
2.点击元素替换将页面上所有图片元素使用jQuery替换API将图片替换成jQuery图片元素

部分代码：

<style>
.logo{
  display:inline-block;
  margin:5px;
  border:1px solid #ccc;
  padding:10px;
  width:200px;
}
.logo img {
  width: 100%;
}
</style>

<p><button id="btnCopy">克隆元素</button><button id="btnReplace">替换jQuery</button></p>
<div class="logo"><img src="images/javascript.png"></div>

jQuery事件方法

鼠标事件

.click()

描述: 为 JavaScript 的"click" 事件绑定一个处理器，或者触发元素上的 “click” 事件。
语法：

.click( handler(eventObject) ) 接受一个每次事件触发时会执行的函数。函数接受event事件对象作为参数。

$("#target").click(function() {
  alert("Handler for .click() called.");
});

.click( [eventData ], handler(eventObject) ) 可以接受两个参数：
1. 参数一：一个包含键值对映射对象将被传递给事件处理程序。
2. 参数二：每次事件触发时会执行的函数。函数接受event事件对象作为参数。

$(".txt").click({msg:message},function(event){
  alert(event.data.msg);
});

注意：click事件触发需要以下几点：

鼠标指针在元素里面时点击。
鼠标指针在元素里面时释放。
这通常要求的顺序,然后才采取行动。如果这些不被满足，mousedown 或 mouseup事件可能更加合适。

.click() 这个方法不接受任何参数出发元素的"click"事件

$(".txt").click();

dblclick([[data],fn])

描述: 为 JavaScript 的"dblclick" 事件绑定一个处理器，或者触发元素上的 “dblclick” 事件。
语法：

.dblclick( handler(eventObject) )

$('#target').dblclick(function() {
  alert('Handler for .dblclick() called.');
});

.dblclick( [eventData ], handler(eventObject) ) 可以接受两个参数：
1. 参数一：一个包含键值对映射对象将被传递给事件处理程序。
2. 参数二：每次事件触发时会执行的函数。函数接受event事件对象作为参数。

$(".txt").dblclick({msg:message},function(event){
  alert(event.data.msg);
});

.dblclick() 这个方法不接受任何参数出发元素的"dblclick"事件

$(".txt").dblclick();

mousedown([[data],fn])

描述: 为 JavaScript 的"mousedown" 事件绑定一个处理器，或者触发元素上的该事件。
语法：

.mousedown( handler(eventObject) )

$('#target').mousedown(function() {
  alert('Handler for .mousedown() called.');
});

.mousedown( [eventData ], handler(eventObject) ) 可以接受两个参数：
1. 参数一：一个包含键值对映射对象将被传递给事件处理程序。
2. 参数二：每次事件触发时会执行的函数。函数接受event事件对象作为参数。

$(".txt").mousedown({msg:message},function(event){
  alert(event.data.msg);
});

.mousedown() 这个方法不接受任何参数出发元素的"mousedown"事件

$('#other').click(function() {
  $('#target').mousedown();
});

mouseup([[data],fn])

描述: 为 JavaScript 的"mouseup" 事件绑定一个处理器，或者触发元素上的该事件。
语法：

.mouseup( handler(eventObject) )

$('#target').mouseup(function() {
  alert('Handler for .mouseup() called.');
});

.mouseup( [eventData ], handler(eventObject) ) 可以接受两个参数：
1. 参数一：一个包含键值对映射对象将被传递给事件处理程序。
2. 参数二：每次事件触发时会执行的函数。函数接受event事件对象作为参数。

$(".txt").mouseup({msg:message},function(event){
  alert(event.data.msg);
});

.mouseup() 这个方法不接受任何参数出发元素的"mouseup"事件

$('#other').click(function() {
  $('#target').mouseup();
});

mousemove([[data],fn])

描述: 为 JavaScript 的"mousemove" 事件绑定一个处理器，或者触发元素上的该事件。
语法：

.mousemove( handler(eventObject) )

$("#target").mousemove(function(event) {
  var msg = "Handler for .mousemove() called at ";
  msg += event.pageX + ", " + event.pageY;
  $("#log").append("<div>" + msg + "</div>");
});

.mousemove( [eventData ], handler(eventObject) ) 可以接受两个参数：
1. 参数一：一个包含键值对映射对象将被传递给事件处理程序。
2. 参数二：每次事件触发时会执行的函数。函数接受event事件对象作为参数。

$("#target").mousemove({msg: 'hello'},function(event) {
  var msg = "Handler for .mousemove() called at ";
  msg += event.pageX + ", " + event.pageY + event.data.msg;
  $("#log").append("<div>" + msg + "</div>");
});

.mousemove() 这个方法不接受任何参数出发元素的"mousemove"事件

$('#other').click(function() {
  $('#target').mousemove();
});

mouseout([[data],fn])

描述: 为 JavaScript 的"mouseout" 事件绑定一个处理器，或者触发元素上的该事件。
语法：

.mouseout( handler(eventObject) )

$('#outer').mouseout(function() {
  $('#log').append('Handler for .mouseout() called.');
});

.mouseout( [eventData ], handler(eventObject) ) 可以接受两个参数：
1. 参数一：一个包含键值对映射对象将被传递给事件处理程序。
2. 参数二：每次事件触发时会执行的函数。函数接受event事件对象作为参数。

$(".txt").mouseout({msg:message},function(event){
  alert(event.data.msg);
});

.mouseout() 这个方法不接受任何参数出发元素的"mouseout"事件

$('#other').click(function() {
  $('#outer').mouseout();
});

mouseover([[data],fn])

描述: 为 JavaScript 的"mouseover" 事件绑定一个处理器，或者触发元素上的该事件。
语法：

.mouseover( handler(eventObject) )

$('#outer').mouseover(function() {
  $('#log').append('<div>Handler for .mouseover() called.</div>');
});

.mouseover( [eventData ], handler(eventObject) ) 可以接受两个参数：
1. 参数一：一个包含键值对映射对象将被传递给事件处理程序。
2. 参数二：每次事件触发时会执行的函数。函数接受event事件对象作为参数。

$(".txt").mouseover({msg:message},function(event){
  $('#log').append('<div>Handler for .mouseover() called.' + event.data.msg + '</div>');
});

.mouseover() 这个方法不接受任何参数出发元素的"mouseover"事件

$('#other').click(function() {
  $('#outer').mouseout();
});

mouseenter([[data],fn]) //事件不会冒泡

描述: 为 JavaScript 的"mouseenter" 事件绑定一个处理器，或者触发元素上的该事件。

mouseenter JavaScript事件是Internet Explorer专有的。由于该事件在平时很有用，jQuery的模拟这一事件，以便它可用于所有浏览器。该事件在鼠标移入到元素上时被触发。任何HTML元素都可以接受此事件。

语法：

.mouseenter( handler(eventObject) )

$('#outer').mouseenter(function() {
  $('#log').append('<div>Handler for .mouseenter() called.</div>');
});

.mouseenter( [eventData ], handler(eventObject) ) 可以接受两个参数：
1. 参数一：一个包含键值对映射对象将被传递给事件处理程序。
2. 参数二：每次事件触发时会执行的函数。函数接受event事件对象作为参数。

$(".txt").mouseenter({msg:message},function(event){
  $('#log').append('<div>Handler for .mouseenter() called.' + event.data.msg + '</div>');
});

.mouseenter() 这个方法不接受任何参数出发元素的"mouseover"事件

$('#other').click(function() {
      $('#outer').mouseenter();
});

注意：mouseenter事件和mouseover的不同之处是事件的冒泡的方式。mouseenter 事件只会在绑定它的元素上被调用，而不会在后代节点上被触发，而mouseover会冒泡。

mouseleave([[data],fn]) ) //事件不会冒泡

描述: 为 JavaScript 的"mouseleave" 事件绑定一个处理器，或者触发元素上的该事件。
语法：

.mouseleave( handler(eventObject) )

$('#outer').mouseenter({msg:message},function() {
  $('#log').append('<div>Handler for .mouseleave() called.</div>');
});

.mouseleave( [eventData ], handler(eventObject) ) 可以接受两个参数：
1. 参数一：一个包含键值对映射对象将被传递给事件处理程序。
2. 参数二：每次事件触发时会执行的函数。函数接受event事件对象作为参数。

$('#outer').mouseleave(function() {
  $('#log').append('<div>Handler for .mouseleave() called.' + event.data.msg + '</div>');
});

.mouseleave() 这个方法不接受任何参数出发元素的"mouseleave"事件

$('#other').click(function() {
  $('#outer').mouseleave();
});

.hover()

描述: 将二个事件函数绑定到匹配元素上，分别当鼠标指针进入和离开元素时被执行。
语法：

.hover( handlerInOut(eventObject) ) 将一个单独事件函数绑定到匹配元素上，分别当鼠标指针进入和离开元素时被执行。

$(s e l e c t o r) . h o v e r (h a n d l e r I n O u t) 是以下写法的简写： ‘$ (selector).bind(“mouseenter mouseleave”, handlerInOut);`

$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);

.hover( handlerIn(eventObject), handlerOut(eventObject) )
1. handlerIn(eventObject) 当鼠标指针进入元素时触发执行的事件函数
2. handlerOut(eventObject) 当鼠标指针离开元素时触发执行的事件函数

调用 $(s e l e c t o r) . h o v e r (h a n d l e r I n, h a n d l e r O u t) 是以下写法的简写： ‘$ (selector).mouseenter(handlerIn).mouseleave(handlerOut);`

$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);

注意：若想解绑上面所学各种的事件方法请使用.unbind()方法

解除绑定元素的mouseenter mouseleave事件

$("td").unbind('mouseenter mouseleave');

on () {
$(this).removeClass(“hover”);
}
);

- .hover( handlerIn(eventObject), handlerOut(eventObject) )
   1. handlerIn(eventObject) 当鼠标指针进入元素时触发执行的事件函数
   2. handlerOut(eventObject)  当鼠标指针离开元素时触发执行的事件函数
> 调用$(selector).hover(handlerIn, handlerOut)是以下写法的简写：
`$(selector).mouseenter(handlerIn).mouseleave(handlerOut);`

```javascript
$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);

注意：若想解绑上面所学各种的事件方法请使用.unbind()方法

解除绑定元素的mouseenter mouseleave事件

$("td").unbind('mouseenter mouseleave');

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

TypeScript

初识vuex

vue项目安装包指令收集

加:2021-08-18 12:36:40 更:2021-08-18 12:38:44

360图书馆购物三丰科技阅读网日历万年历 2024年11日历

-2024/11/23 9:37:06-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码