jQuery -第3次课-DOM操作元素属性-样式等-附资料、作业

jQuery的选择器解决了如何选择元素,然后对其进行操作:增删改
接下来学习如何对选中元素进行样式、属性、内容的增删改。

学完这个后,再学习从某个元素出发,去找上下左右的元素,再对其进行增删改,比如插入新的元素、替换、复制等。

一、操作元素的属性

比如有如下元素:

<div id='b123' style="">123</div>

jquery大部分方法的特点:赋值和取值于一体。

  1. $('元素').attr()

    attr是 attribute的改写

    a. 取值(1个参数)

    //JS
    var b=document.getElementsByTagName("div")[0].getAttribute("id");
    var b=document.getElementsByTagName("div")[0].id;
    //JQ  使用了JQ选择器得到的对象叫JQ对象,就可以使用JQ的方法
    var b=$('元素').attr('属性名');//
    //比如
    $("div").attr('id');//'b123'

    b.赋值(两个参数)

    //JS
    document.getElementsByTagName("div")[0].setAttribute("id")='b456';//
    document.getElementsByTagName("div")[0].id='b456';
    //JQ
    $('元素').attr('属性名','属性值');// 写法类似于css()
    //比如:
    $('div').attr('id','b456');
    $('元素').attr('title','新增的title属性');
    
  2. $('元素').removeAttr('属性名')

    attr的逆向方法,用来删除特定的属性。

  3. $('元素').prop('属性名')

    prop 全称为 property

    prop和attr都是对元素的属性进行增删改。
    区别在于前者主要是给表单元素使用,后者主要是给普通元素使用
    使用方式一模一样,没有任何区别。
  4. $('元素').removeProp('属性名')

    删除特定的属性。

二、操作元素的内容

  1. $('元素').html()

    //相当于是JS的:
    元素.innerHTML='要加的内容';
    //JQ
    $('元素').html()//如果没有参数,则表示获取,保留元素的标签内容
    $('元素').html("

    123

    ");//表示新增或修改元素的内容 $('元素').html("");//清空
  2. $('元素').text()

    //jS
    元素.innerText='要加的内容';//纯文本,会过滤掉标签
    //JQ
    $('元素').text()//如果没有参数,则表示获取,只包含纯文本
    $('元素').text("123");//表示新增或修改元素的文本内容
    $('元素').text("");//清空内容
  3. $('元素').val()

    //该方法是用于表单控件的value属性值
    //JS
    元素.value="123"
    //JQ:
    $('控件元素').val()//如果没有参数,则表示获取该控件的value值
    $('控件元素').val("123");//表示新增或修改该控件的value值
    $('控件元素').val("");//清空该控件的value值

三、两个特殊的成员

  1. $.trim()

    该方法不是DOM的方法,不是去选择元素做什么事情,而是去字符串的首尾空格

    比如用在表单验证中

    是一个工具方法,
    $('控件元素').val();
    var a=$.trim(' aga   ');//'aga'
  2. .length

    在JQ中几乎都是方法,没有属性,而length是它的属性。主要是统计所选元素的个数的。

    $("div").length;//数字,选中了多少个div,数字就是多少
此资源下载链接已被无情的隐藏,请输入验证码解锁:
验证码

请关注本站公众号回复“验证码”,获取验证码。

在微信里搜索“WEB前端全栈圈”或者“imqdcn”或者微信扫描二维码都可以关注微信公众号

WEB前端全栈圈
除特别声明外, 本站所有内容皆为原创,未经许可,禁止转载。转载时请务必以超链接形式标明文章出处和作者信息
  • 801
(0)
打赏 微信扫一扫 微信扫一扫
                       

关于作者:

web前端老罗

贡献:已经在WEB前端圈发表90篇文章了

简介:前端老罗是一位拥有多年web前端开发经验、管理经验、教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。加我微信:imqdcnn可提供开发、技术咨询、答疑、直播讲座等服务

Ta的专栏 | Ta的站点 | 其他SNS

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关于WEB前端圈

我是前端人(imqd.cn)愿景是不管你是想学习前端还是一名专业的WEB前端工程师在这里都能找到你想要的物料。定位为前端人学习进步的一个平台。在这里你能找到前端学习笔记、教学视频资源、案例、前后端分离、前端框架、低代码平台、可视化数据、多端开发、全栈开发等跟前端有关的一切资源!

关于站长:WEB前端老罗(罗老师)是一位拥有多年web前端开发经验、管理经验、IT培训教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。右边加我微信可提供开发、技术咨询、答疑、直播讲座等服务

WEB前端圈二维码

右边添加老罗微信一对一免费私聊
拉你加入官方微信答疑群

To top