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'

   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”或者微信扫描二维码都可以关注微信公众号