jQuery_DOM 属性下|学习笔记

简介: 快速学习 jQuery_DOM 属性下

开发者学堂课程【jQuery 开发教程:jQuery_DOM 属性下】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/362/detail/4292


jQuery_DOM 属性下


目录:

一、DOM 属性 prop 方法

二、DOM 属性 removeAttr 方法

三、DOM 属性 removeClass 方 法

四、DOM 属性 removeProp 方法

五、DOM 属性 toggleClass 方法

六、DOM 属性 val 方法


一、jQuery_DOM属性

1、prop( propertyName)

Prop 里面有个参数,也可以又两个参数,并且为匹配元素设置一个或多个属性

获取匹配的元素集中第一个元素的属性 (property) 值为匹配的元素设置个或多个属性( properties)。

(注意:只能获取到已有的默认的属性),接下来我们代码演示:

示例:

打印 input 内 value 属性的属性值

<body>

<!--<p>haha< / p>-->

<!--<a>haha< /a> -->

<!--<p name="haha"'>哈哈< / p>-->

< !--<div> c f div>-->

<!--<hi class="h11 aa"> </ h1>-->

//打印出 input 里面 value 属性的属性值

<input type="checkbox" value="xuanze" / ><script>

$ (function()i

$ ( "p"" ).addclass ( "pc"");

$ ( "a" ).attr ( "href" , "http : / / www . baidu.com"" );var name=s ( "p" ) .attr ( "name" ) ; // haha

$ ( "div" ) .text ( name );

console.log ( s ( "h1 " ).hasclass ( "aa") );

console.log(s ( "a" ).html());

$ ( "a" ) .html ( "hehe") ;

//打印出input方法

console.log($ ("input").prop( "value",”haha”));

获得到属性的属性值,只能获取到已有的默认的属性

运行结果:

图片43.png

这就是 prop 只要一个参数的结果,只是获得到属性的属性值

Prop 第二种属性值,当有两个参数是,它改变属性对应的属性值

Console.log($(“input”).prop(“value“,”haha“));

代码运行结果:

图片44.png

此时的 value 值已被改变

注意:只能获取到已有的默认的属性

获得 type 并把 type 值进行修改

Console.log($(“input”).prop(“type“,”text“));

运行结果:

图片45.png

2、removeAttr(attributeName)

从字面一意思他是一个移除属性的方法

为匹配的元素集合中的每个元素中移除一个属性 (attribute)。

解开 a 标签后运行代码:

图片46.png

2、removeAttr(attributeName)

从字面一意思他是一个移除属性的方法

为匹配的元素集合中的每个元素中移除一个属性(attribute)。

解开 a 标签后运行代码:

图片47.png

Href属性已经成功移除掉

2、removeClass([className ] )

移除集合中每个匹配元素上一个,多个或全部样式。

3、removeProp(/propertyName )

为集合中匹配的元素 删除一个属性(property)

4、toggleClass()

在匹配的元素集合中的每个元素上添加或删除一个或多个样式类取决于这个样式类是否存在或值切换属性如果存在(不存在)就删除(添加)一个类。

示例:

<!DOCTYPE html><html lang="en"><head>

<meta charset="UTF-8"><title></title>

<script src="jquery-2.2.1.min.js"></script><style>

p{

//设置 p 标签样式

Wight:100px

Height:50px

Background-color:darkgreen

Line-height:50px

Border-radius:5px

}

//设置 pc 类

.pc{background-color:green}

< /style>< / head>

<body>

<p>button</ p><script>

$( function(){

(“p”).on(“mouseover mouseout”,function())

$(this).toggleClass(“pc”)

})

< / script>

</ body>

< / html>

执行结果:

图片48.png

2、val()

获取匹的元素集合中第一个元素的当前值。设置四配的元素集合中每个元素的值。获取表单元素值

示例:

<!DOCTYPE html><html lang="en"><head>

<meta charset="UTF-8"><title></title>

<script src="jquery-2.2.1.min.js"></script><style>

p{

//设置 p 标签样式

Wight:100px

Height:50px

Background-color:darkgreen

Line-height:50px

Border-radius:5px

}

//设置 pc 类

.pc{background-color:green}

< /style>

< / head>

<body>

<p>button</ p>

<input type=”text” value=“some text”/>

<script>

$( function(){

(“p”).on(“mouseover mouseout”,function())

$(this).toggleClass(“pc”)

})

Console.log($(“input”).val)

< / script>

</ body>

< / html>

执行效果:

图片49.png

相关文章
|
3月前
|
JavaScript
DOM 属性列表(命名节点图 Named Node Map)
`DOM`中的`Named Node Map`是元素节点属性的列表,自动更新增删操作。代码示例载入&quot;books.xml&quot;,获取第一个`&lt;book&gt;`元素的属性列表,`x.length`显示属性数量,`x.getNamedItem(&quot;category&quot;).nodeValue`输出&quot;category&quot;属性值,如&quot;cooking&quot;,并显示属性总数1。
|
14天前
|
JavaScript
jQuery - 设置内容和属性
jQuery - 设置内容和属性
44 14
|
15天前
|
XML JavaScript 数据格式
jQuery - 获取内容和属性
jQuery - 获取内容和属性
46 12
|
3月前
|
存储 JavaScript
DOM 属性列表(命名节点图 Named Node Map)
`DOM`的`Named Node Map`代表元素的属性列表,当属性增删时会自动更新。示例展示了如何加载&quot;books.xml&quot;,获取第一个`&lt;book&gt;`元素的属性。变量`x`存储属性列表,`x.length`显示属性数量,`x.getNamedItem(&quot;category&quot;)`返回&quot;category&quot;属性值。代码输出属性值&quot;cooking&quot;和属性数量1。
|
4月前
|
XML JavaScript 前端开发
属性和方法向 XML DOM 定义了编程接口
XML DOM 提供编程接口,通过属性和方法操作XML结构。使用JavaScript等语言,可访问和修改节点。属性如nodeName、nodeValue揭示节点信息,方法如getElementsByTagName、appendChild、removeChild实现查找、添加和删除节点功能。节点对象x的应用示例贯穿其中。
|
1月前
|
JavaScript 前端开发 程序员
后端程序员的前端必备-jQuery核心学习笔记
后端程序员的前端必备-jQuery核心学习笔记
46 13
|
2月前
|
JavaScript 前端开发 API
前端框架与库 - jQuery基础与DOM操作
【7月更文挑战第18天】jQuery 是一个简化JavaScript任务的库,以其“write less, do more”理念著称。核心功能包括DOM操作、事件处理和Ajax。DOM操作如选择元素(`$(&quot;p&quot;)`、`$(&quot;#myDiv&quot;)`、`$(&quot;.myClass&quot;)`)、创建及添加元素、修改属性和内容。事件处理如绑定(`click`)和触发(`trigger`)。常见问题涉及`$`符号冲突(使用`jQuery`代替)、异步加载管理和选择器性能优化。了解并规避这些问题能提升jQuery使用效率。
23 0
|
3月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
3月前
|
JavaScript
DOM 属性列表(命名节点图 Named Node Map)
`DOM`的`Named Node Map`是属性节点列表,由元素的`attributes`属性返回。它自动更新增删属性。示例代码加载&quot;books.xml&quot;,获取第一个`&lt;book&gt;`元素的属性列表,`x.getNamedItem(&quot;category&quot;).nodeValue`显示&quot;cooking&quot;,`x.length`显示属性数量1。
|
3月前
|
JavaScript
DOM 属性列表(命名节点图 Named Node Map)
**DOM的NamedNodeMap概括:**它表示元素的属性节点列表,如`&lt;book&gt;`的`attributes`。这个映射自动更新,添加或删除属性时响应变化。代码示例加载&quot;books.xml&quot;,获取首个`&lt;book&gt;`的属性,`x.getNamedItem(&quot;category&quot;).nodeValue`显示类别,`x.length`显示属性数。输出示例:类别为&quot;cooking&quot;,属性计数为1。