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

相关文章
|
1月前
|
JavaScript 前端开发
使用jQuery操作DOM元素
使用jQuery操作DOM元素
16 1
|
1月前
|
JavaScript 前端开发
JavaScript操作DOM元素
JavaScript操作DOM元素
11 1
|
19天前
|
JavaScript
vue监听dom元素的宽高变化和自定义指令监听dom元素的宽高变化
vue监听dom元素的宽高变化和自定义指令监听dom元素的宽高变化
19 0
|
7天前
|
存储 JavaScript 前端开发
JavaScript DOM 操作:解释一下 cookie、sessionStorage 和 localStorage 的区别。
Cookie是服务器发送至客户端的文本信息,会随每个请求发送回服务器,适合控制会话状态但可能暴露隐私。SessionStorage仅在当前会话中存储数据,关闭浏览器后清除,适合临时存储如登录状态。LocalStorage则持久保存数据,即使关闭浏览器也不会清除,适用于存储长期设置。三种方式各有侧重,应按需求选择。
12 0
|
7天前
|
JavaScript 前端开发 安全
JavaScript DOM 操作:解释一下浏览器的同源策略。
**同源策略**是浏览器安全基石,它阻止脚本跨不同协议、域名或端口访问资源,防止恶意行为。例如,HTTP页面无法直接用JS获取HTTPS页面内容。**CORS**允许跨域请求,但需服务器配合设置,通过`document.domain`属性可配置,但仍受限于服务器配置。
10 4
|
11天前
|
JavaScript 前端开发
N..
|
28天前
|
JavaScript 前端开发 容器
jQuery中的DOM操作
jQuery中的DOM操作
N..
13 1
|
1月前
|
前端开发 JavaScript Java
第四章使用jQuery操作DOM元素
第四章使用jQuery操作DOM元素
9 0
|
JavaScript 前端开发
使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性
使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性
159 0
使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性
|
JavaScript 开发者
jQuery_ 复制元素、DOM 插入到现有元素外|学习笔记
快速学习 jQuery_ 复制元素、DOM 插入到现有元素外
203 0
jQuery_ 复制元素、DOM 插入到现有元素外|学习笔记