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

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

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

一、操作元素的属性

比如有如下元素:

<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'
  1. 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属性');
  1. $('元素').removeAttr('属性名')
    attr的逆向方法,用来删除特定的属性。
  2. $('元素').prop('属性名')
    prop 全称为 property
prop和attr都是对元素的属性进行增删改。
区别在于前者主要是给表单元素使用,后者主要是给普通元素使用
使用方式一模一样,没有任何区别。
  1. $('元素').removeProp('属性名')
    删除特定的属性。
二、操作元素的内容
  1. $('元素').html()
//相当于是JS的:
元素.innerHTML='要加的内容';
//JQ
$('元素').html()//如果没有参数,则表示获取,保留元素的标签内容
$('元素').html("<p>123</p>");//表示新增或修改元素的内容
$('元素').html("");//清空
  1. $('元素').text()
//jS
元素.innerText='要加的内容';//纯文本,会过滤掉标签
//JQ
$('元素').text()//如果没有参数,则表示获取,只包含纯文本
$('元素').text("123");//表示新增或修改元素的文本内容
$('元素').text("");//清空内容
  1. $('元素').val()
//该方法是用于表单控件的value属性值
//JS
元素.value="123"
//JQ:
$('控件元素').val()//如果没有参数,则表示获取该控件的value值
$('控件元素').val("123");//表示新增或修改该控件的value值
$('控件元素').val("");//清空该控件的value值
三、两个特殊的成员
  1. $.trim()
    该方法不是DOM的方法,不是去选择元素做什么事情,而是去字符串的首尾空格
    比如用在表单验证中
是一个工具方法,
$('控件元素').val();
var a=$.trim(' aga   ');//'aga'
  1. .length
    在JQ中几乎都是方法,没有属性,而length是它的属性。主要是统计所选元素的个数的。
$("div").length;//数字,选中了多少个div,数字就是多少

资料、作业下载链接: https://www.imqd.cn/jquery-dom.html

相关文章
|
22天前
|
JavaScript
怎么判断两个文档节点、网页元素(element)是否相同?判断两个DOM节点是否相等、相同的4种方法
怎么判断两个文档节点、网页元素(element)是否相同?判断两个DOM节点是否相等、相同的4种方法
|
27天前
|
JavaScript
vue监听dom元素的宽高变化和自定义指令监听dom元素的宽高变化
vue监听dom元素的宽高变化和自定义指令监听dom元素的宽高变化
26 0
|
1天前
|
XML JavaScript 前端开发
XML DOM - 属性和方法
XML DOM 提供编程接口,用属性和方法访问及操作XML节点。通过JavaScript等语言,可利用DOM属性(如nodeName, nodeValue, parentNode, childNodes, attributes)了解和修改节点信息。方法如getElementsByTagName用于查找特定标签元素,appendChild和removeChild则用于添加或移除子节点。
|
1天前
|
JavaScript 前端开发 开发者
【Web 前端】如何操作DOM元素?
【4月更文挑战第22天】【Web 前端】如何操作DOM元素?
|
1天前
|
JavaScript 前端开发 索引
【Web 前端】JQ对象和DOM元素之间如何转换?
【4月更文挑战第22天】【Web 前端】JQ对象和DOM元素之间如何转换?
|
1天前
|
JavaScript 前端开发
JavaScript DOM 文档对象模型(获取、改变html元素)
JavaScript DOM 文档对象模型(获取、改变html元素)
|
16天前
|
JavaScript 前端开发
JavaScript DOM 操作:如何选中一个 HTML 元素?有哪些方法?
在JavaScript中,有五种主要方法选取HTML元素:1) `getElementById` 通过id选取单个元素;2) `getElementsByClassName` 选取具有特定类名的所有元素;3) `getElementsByTagName` 选取特定标签的所有元素;4) `querySelector` 使用CSS选择器选取单个元素;5) `querySelectorAll` 选取匹配CSS选择器的所有元素。这些方法结合使用可精确地定位到DOM树中的目标元素。
12 1
|
16天前
|
JavaScript 前端开发
JavaScript DOM 操作:如何动态创建和插入元素?
使用JavaScript的`createElement`, `createTextNode`和`appendChild`方法可动态创建并插入元素。
13 2
|
19天前
|
JavaScript 前端开发
N..
|
2月前
|
JavaScript 前端开发 容器
jQuery中的DOM操作
jQuery中的DOM操作
N..
14 1

相关课程

更多