JavaScript jQueryDOM节点操作

初学者liwd 2020-05-05 12:16:40
//1.0jQuery的属性
/*
每个元素都有一个或者多个特性,这些特性的用途就是给出相应元素或者其内容的附加信息。
如:在img元素中,src就是元素的特性,用来标记图片的地址
JavaScript中操作特性的DOM方法主要有3个,
1.getAttribute()获取特性
2.setAttribute()设置特性
3.removeAttribute() 移出特性
在jQuery中操作特性的jQuery方法:
1.attr() 获取/设置属性
2.removeAttr() 移出属性
在jQuery中用一个attr()与removeAttr()就可以全部搞定了,
jQuery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会经常用到attr()
*/
//1.1 attr()与removeAttr()的用法
/*
attr()方法的用法:
1. $(element).attr("属性名");//获取属性名的属性值
2. $(element).attr("属性","属性值");//设置属性的属性值
3. $(element).attr("属性名","函数值");//设置属性的函数值
4. $(element).attr({"属性名":"属性值","属性名":"属性值"});//给指定元素设置多个属性值
removeAttr()方法的用法:
1. $(element).removeAttr("属性名");//移出对应的属性

//1.0 jQuery选择器
/*
页面的任何操作都需要节点的支撑,开发者如何快速高效的找到指定的节点也是前端开发中的一个重点。
jQuery提供了一系列的选择器帮助开发者达到这一目的,让开发者可以更少的处理复杂选择过程与性能优化,更多专注业务逻辑的编写。
jQuery几乎支持主流的css1~css3选择器的写法,我们从最简单的也是最常用的开始学起:
*/
//1.1 ID选择器 $("#id");
/*
id选择器也是基本的选择器,jQuery内部使用JavaScript函数document.getElementById()来处理ID的获取。
原生语法的支持总是非常高效的,所以在操作DOM的获取上,如果能采用id的话尽然考虑用这个选择器
注意:id是唯一的,每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id,
将只匹配该id选择集合的第一个DOM元素。但这种行为不应该发生;有超过一个元素的页面使用相同的id是无效的
*/


// 1.0 jQuery属性的.html()与.text()方法
/*
读取、修改元素的html结构或者元素的文本内容是常见的DOM操作,
JavaScript中提供innerHTML与innerText属性
jQuery针对这样的处理提供了2个便捷的方法.html()与.text()
*/
// 1.1 $(element).html()方法
/*
获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容.
1. $(element).html() 获取element元素的HTML内容
2. $(element).html("htmlString") 为每一个匹配元素添加html内容

重要说明:$(element) .html()方法内部使用的是DOM的innerHTML属性来处理的,
所以在设置与获取上需要注意的一个最重要的问题,这个操作是针对整个HTML内容(不仅仅只是文本内容)
*/
//1.0 jQuery属性 动态操作class
/*
1. $(element).addClass();//为每个匹配元素所要增加的一个或多个样式名
- 方法不会替换一个样式类名。它只是简单的添加一个样式类名到元素上
2. $(element).removeClass();//每个匹配元素移除的一个或多个用空格隔开的样式名
3. $(element).toggleClass();
//在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,
取决于这个样式类是否存在或值切换属性。即:如果存在(不存在)就删除(添加)一个类
*/
/*
JavaScript中通过className属性来动态的操作class类
*/

//1.0 jQuery样式操作$(element).css()方法
/*
通过JavaScript获取DOM元素上的style属性,我们可以动态的给元素赋予样式属性。
在jQuery中我们要动态的修改style属性我们只要使用css()方法就可以实现了:
$(element).css()方法:获取元素样式属性的计算值或者设置元素的CSS属性
*/
//1.1 $(element).css()方法使用方法
/*
1. $(element).css("属性名") //获取匹配元素集合中的第一个元素的样式属性的计算值
2. $(element).css(["属性名1","属性名2"]) //传递一个数组,返回一个对象结果
3. $(element).css("属性","属性值") //设置元素的css样式
4. $(element).css({"属性1":"属性值1","属性2":"属性值2"}) //可以传一个对象,同时设置多个样式
5. $(element).css({属性名,function}) //可以传入一个回调函数,返回取到对应的值进行处理
*/

//1.2 注意事项
/*
浏览器属性获取方式不同,在获取某些值的时候都jQuery采用统一的处理,比如颜色采用RBG,尺寸采用px
$(element).css()方法支持驼峰写法与大小写混搭的写法,内部做了容错的处理
当一个数只被作为值(value)的时候,jQuery会将其转换为一个字符串,并添在字符串的结尾处添加px,
例如 .css("width",50}) 与 .css("width","50px"})一样
...全文
14 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

61,111

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧