03-老马jQuery教程-DOM操作

jQuery DOM操作

在没有jQuery之前,DOM的操作相对来说有点麻烦,尤其是DOM节点的搜索。目前我们已经学习了jQuery的选择器,接下带大家一块学习jQuery的DOM操作,jQuery对DOM操作的封装让我们前端开发工作非常简便、简洁、兼容性好。比如:属性操作统一化:直接attr方法既可以设置属性也可以读取属性。

1.jQuery操作DOM的属性


1.1 读取属性值

在DOM时代,我们可以通过DOM.getAttribute('attNamn')获取DOM的属性节点。可以通过DOM.setAttribute('title','22');设置属性内容。

jQuery的包装对象(jQuery.fn原型对象)提供了attr�(name, value)方法可以读取和设置属性内容。

attr(attrName)方法接受一个字符串参数,就是属性的名称,返回值是属性值,如果dom元素没有此属性则返回undefined。

<p k="3">3</p>
<p k="4">4</p>
<input type="checkbox" checked name="ckb" id="ckb1">
<input type="checkbox" name="ckb" id="ckb2">
<script>
  $(function(){
    // 读取第一个p标签的属性k的值
    console.log($('p:first').attr('k'));     // 3
    // 读取第一个p标签的id属性值,不存在此属性返回undefined
    console.log($('p:first').attr('id'));    // undefined
    // 特殊的单独的属性:checked、selected、multiple、readOnly、autofocus 返回属性名字
    console.log($('#ckb1').attr('checked')); // chekced
    console.log($('#ckb2').attr('checked')); // undefined !!!不是false

    // 应对attr获取checked属性为undefined的问题,jQuery新增的prop方法
    // 仅仅用于checked、selected、multiple、readOnly、autofocus 等属性
    console.log($('#ckb2').prop('checked')); // false
  });
</script>

1.2 设置属性值



设置属性还是用attr()方法,此方法有多个重载,可以穿两个参数属性名和属性值,也可以传键值对对象,甚至可以传一个方法进行处理。

  • attr(name,value)简单设置属性的方法,接受两个字符串参数,第一个是属性名,第二个是属性值。
// 设置p1标签的类为box
$('#p1').attr('class','box');
// 为所有图像设置src属性。
$("img").attr("src", "test.jpg");// 默认隐式迭代
  • attr(Object)键值对形式的设置对象参数
// 为所有图像设置src和alt属性。
$("img").attr({ src: "test.jpg", alt: "Test Image" });// 默认隐式迭代
  • attr(key, func)函数方式处理设置参数

func回调函数:一个参数为当前元素的索引值,第二个参数为原先的属性值。函数的返回值作为新的属性值。

//把src属性的值设置为title属性的值
$("img").attr("title", function(index, oldAttr) {
  return this.src;
});

// 将p标签的k属性值加上  当前标签的索引和-
$('p').attr('k', function(index, attr){
  return index + '-'  + attr;
});
  • 特殊的单个属性的设置(checked、selected、disabled等)
<input type="checkbox" name="ckb" id="ckb2">
<script>
  $(function(){
    $('#ckb2').attr('checked', 'checked');
    console.log($('#ckb2').attr('checked')); // checked
    console.log($('#ckb2').prop('checked')); // true

    $('#ckb2').attr('disabled', 'disabled');
    console.log($('#ckb2').attr('disabled')); // disabled
    console.log($('#ckb2').prop('disabled')); // true

    // prop方法设置 和 读取的属性值都是boolean类型
    $('#ckb2').prop('disabled', false);
    $('#ckb2').prop('checked', true);
  });
</script>

1.3 关于prop方法和attr的区别

jQuery为映射DOM自身的固有属性添加了prop方法,用法跟attr方法用法一致。但是prop方法在处理单个属性的获取和设置时非常方便,比如:disabled、checked、selected、multiple、readOnly、autofocus等。

prop 和 attr区别:

  • attr可以用于任何的属性读写,包括自定义属性
  • prop用意就是应用于DOM对象固有的属性,也就是prop用于读取和设置DOM对象中已经定义的标准属性。
  • prop对于单个属性返回值是boolean类型,具体类型参考DOM对象的属性的类型。
  • attr返回的值都是string类型
// attr设置样式类
$('p').attr('class', 'box'); // 默认隐式迭代

// DOM中样式类是className不是 class关键字
$('p').prop('className', 'box');// 默认隐式迭代

以下是官方建议attr(),prop()的使用:【√推荐,○不推荐】

Attribute/Property .attr() .prop()
accesskey
align
async
autofocus
checked
class
contenteditable
draggable
href
id
label
location
multiple
readOnly
rel
selected
src
tabindex
title
type
width

1.4 移除属性removeAttr(attr)

移除属性非常简单直接用下面代码

$("img").removeAttr("src");

2. 内容操作html()和text()


2.1 设置标签内部的html内容html()

DOM时代设置标签内部的html内容是使用DOM对象的 innerHTML属性。
jQuery包装对象封装了html()方法用于读取和设置,而且实现了默认隐式迭代机制。

语法:html([val|fn])

  • 读取标签html内容:html()
<div class="box">
  <a href="https://chuanke.baidu.com/s5508922.html">老马学校</a>
</div>
<script>
  $(function(){
    $('.box').html(); // 获取box样式类里面的html文本
    //返回: <a href="https://chuanke.baidu.com/s5508922.html">老马学校</a>
  });
</script>
  • 设置标签html的内容: html(str)
$('#box').html('<p>你好</p>');
// 等价于DOM的innerHTML属性设置值
$('#box')[0].innerHTML = '<p>你好</p>';
  • 回调函数设置标签html内容: html(func)

func(index,html)接收两个参数,index为元素在集合中的索引位置,html为原先的HTML值.返回值作为新的innerHTML的内容。

$("p").html(function (n, oldHTML) {
  return oldHTML + n;
});

2.2 设置和读取文本text()

DOM时代获取和读取标签的文本有兼容问题,ie需要用innerText而ff等浏览器需要用textContext属性.jQuery做好了兼容的处理,直接调用text()方法就行了。

  • 读取标签的text文本方法:text()
$('p').text();
  • 设置标签的text文本text(str)
$("p").text("Hello world!");
  • 设置标签的文本 text(func)

func(index, text)此函数返回一个字符串。接受两个参数,index为元素在集合中的索引位置,text为原先的text值.

$("p").text(function(n){
  return "这个 p 元素的 index 是:" + n;
});

2.3 设置和读取表单元素的value属性val()

在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选,将返回一个数组,其包含所选的值。此方法对象

  • 读取表单元素的value属性: $("input").val();
  • 设置表单元素的值: $("input").val("hello world!");
  • 回调函数设置值
$('input:text.items').val(function() {
  return this.value + ' ' + this.className;
});

3. 样式类操作

3.1 样式类型属性操作

前面讲的attr()prop()方法都可以直接设置样式类属性。

$('p').attr('class', 'box');
$('p').prop('className', 'box');

3.2 添加样式类方法addClass

语法: addClass(class|fn)
为每个匹配的元素添加指定的类名, 返回值是jQuery包装对象。

  • 添加样式类,参数为字符串情况
$("p").addClass("selected");
// 添加多个样式类
$("p").addClass("selected1 selected2");
  • 参数是回调函数
<!-- 给li加上不同的class -->
<ul>
  <li>Hello</li>
  <li>Hello</li>
  <li>Hello</li>
</ul>
<script>
  // jQuery 代码:
  $('ul li').addClass(function() {
    return 'item-' + $(this).index();
  });
</script>
<!-- 结果 -->
<!--
<ul>
  <li class="item-0">Hello</li>
  <li class="item-1">Hello</li>
  <li class="item-2">Hello</li>
</ul>
-->

3.3 移除样式类remvoeClass

语法:removeClass([class|fn])
从所有匹配的元素中删除全部或者指定的类。 返回值是jQuery包装对象。

  • 参数是字符串样式类 removeClass(str)
// 从匹配的元素中删除 'selected' 类
$("p").removeClass("selected");
// 删除匹配元素的所有类
$("p").removeClass();
  • 回调函数的调用removeClass(func)

func(index, oldClass)此函数必须返回一个或多个空格分隔的class名。接受两个参数,index参数为对象在这个集合中的索引值,class参数为这个对象原先的class属性值。

// 删除最后一个元素上与前面重复的class
$('li:last').removeClass(function(index, oldClass) {
    return $(this).prev().attr('class');
});

3.4 切换样式类 toggleClass

语法 toggleClass(class|fn[,sw])
如果存在(不存在)就删除(添加)一个类。

参数:

  • 一个参数:class:CSS类名 String类型
// 如果p标签有selected样式就移除掉,如果没有就添加上。
$("p").toggleClass("selected");
  • 两个参数class,switch

1:要切换的CSS类名.
2:用于决定元素是否包含class的布尔值。

var i = 9;
$(this).toggleClass("highlight", i > 3);
  • 回调函数

参数:function(index, class)
用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数。

// 根据父元素来设置class属性
$('div.foo').toggleClass(function(index, class) {
  if ($(this).parent().is('.bar') {
    return 'happy';
  } else {
    return 'sad';
  }
});

3.5 判断样式类是否存在hasClass

语法格式:hasClass(str),返回值Boolean类型,返回是否拥有某个样式类。

$('#md').hasClass('box'); // true or false

4. 样式属性操作css

4.1 读取CSS的属性值css(str)

在DOM中我们可以使用DOM对象的style属性来设置或者读取样式的值。jQuery中封装了css()方法来帮助我们读取或者设置样式值。

<p id="md">hi jQuery</p>
<script>
  $('#md').css('color'); // 获取md标签的 color样式值。
</script>

4.2 设置CSS的样式属性值

  • 接受两个字符串参数css(key,val)
将所有段落字体设为红色
$("p").css("color","red");
  • 接受键值对的对象作为参数css(obj)
$("p").css({ "color": "#ff0011", "background": "blue" });
  • 接受两个参数,第一个属性名,第二个回调函数。css(prop, func)

    • prop:属性名.
    • func(index,oldValue) 此函数返回要设置的属性值。接受两个参数,index为元素在对象集合中的索引位置,oldValue是原先的属性值。
  // div 点击后逐渐增加div的大小
  $("div").click(function() {
    $(this).css({
      width: function(index, value) {
        return parseFloat(value) * 1.2;
      },
      height: function(index, value) {
        return parseFloat(value) * 1.2;
      }
    });
  });


下一节预告:

  • DOM的节点操作:节点创建、移除、添加、复制、替换等
  • DOM的位置属性和大小属性


对应视频地址:https://chuanke.baidu.com/s5508922.html
老马qq: 515154084
老马微信:请扫码

 

微信:Flydragon_malun 或者18911865673

时间: 2024-09-17 11:33:14

03-老马jQuery教程-DOM操作的相关文章

04-老马jQuery教程-DOM节点操作及位置和大小

1. jQuery创建DOM标签 1.1 DOM动态创建标签的方法 DOM时代我们通过document的createElement方法动态创建标签.创建标签后,动态的给他添加属性.例如代码: // 动态创建标签 var domDiv = document.createElment('div'); // 动态创建属性 domDiv.setAttribute('id', 'box'); // 动态设置内部html标签 domDiv.innerHTML = '<span>动态span</spa

jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果_jquery

但感觉这样写很没意思. jquery的优势就是简单的代码就能带来更好的用户体验. 所以就找几个我感觉实用的例子,拿出来介绍下.顺带把其中用到的操作和事件介绍下. html代码: <input type="text" id="address" value="请输入邮箱地址"/> jquery代码: 复制代码 代码如下: $(document).ready(function(){ $('#address').focus(function(

jQuery中DOM操作实例分析_jquery

本文实例讲述了jQuery中DOM操作的方法.分享给大家供大家参考.具体分析如下: 这里主要设计的dom操作包括:dom对象的创建(JS方式和jquery方式).属性的修改.样式的修改.动态绑定事件 代码如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="jquery-1.3.

02-老马jQuery教程-jQuery事件处理

1. 绑定简单事件 在DOM中DOM0级绑定事件的方式是直接给事件属性赋值,但是这样有个缺点就是每次指定的事件处理程序会把之前的覆盖掉. jQuery简单绑定事件的方式,可以让我绑定多个事件处理程序跟DOM2级绑定事件的方式一样. 如果需要了解DOM的教程参考地址:https://chuanke.baidu.com/v5508922-239160-1771112.html 1.1 简单绑定click事件 语法格式:click([[data],fn]) 参数: data 可以省略,给可传入到函数f

01-老马jQuery教程-jQuery入口函数及选择器

前言 这套jQuery教程是老马专门为寒门子弟而录制,希望大家看到后能转发给更多的寒门子弟.视频都是免费,请参考课程地址:https://chuanke.baidu.com/s5508922.html 1.什么是jQuery? 1.1 jQuery介绍 jQuery是一个轻型.快速的.小巧的功能丰富的JavaScript类库.本质就是一堆js的函数的组合.对原生DOM操作做了一些非常有用的封装,可以让开发人员更简单.更方便.更统一的对DOM进行操作,比如:封装了事件相关统一操作api.DOM操作

06-老马jQuery教程-jQuery高级

1.jQuery原型对象解密 jQuery里面的大部分API都是在jQuery的原型对象上定义的.jQuery源码中对原型对象做了简写的处理.也就是说:jQuery.fn === jQuery.prototype,参考jQuery源码: ... jQuery.fn = jQuery.prototype = { // The current version of jQuery being used jquery: version, constructor: jQuery, // The defau

jQuery 中DOM 操作详解_jquery

jQuery 中的 DOM 操作 DOM(Document Object Model-文档对象模型):一种与浏览器,平台, 语言无关的接口,使用该接口可以轻松地访问页面中所有的标准组件 DOM 操作的分类: DOM Core: DOM Core 并不专属于 JavaScript, 任何一种支持 DOM的程序设计语言都可以使用它. 它的用途并非仅限于处理网页,也可以用来处理任何一种是用标记语言编写出来的文档, 例如: XML HTML DOM: 使用 JavaScript和 DOM 为 HTML文

jQuery中用dom操作替代正则表达式_jquery

在B/S结构客户端越来越"胖"的今天,作为一名全端程序员,您很可能会在前端操作html字符串,注意,是操作html字符串,不是操作当前页面的html.          举个例子,百度推出的在线HTML富文本编辑器Ueditor,可以在线制作富文本文档,功能堪比精简版的Microsoft Word.虽然Ueditor身披百度的光环,但实际效果不太让人满意,我们需要二次处理一下它生成的html字符串,比如把所有图片的宽度设成90%.          通过某个方法,我们可以拿到文本编辑器

jquery中dom操作和事件的实例学习-表单验证_jquery

很显然,这样做能提升更好的用户体验. html代码: 复制代码 代码如下: <form method="post" action=""> <div class="int"> <label for="username">用户名:</label> <input type="text" id="username" class="r