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

相关文章
|
2月前
|
JavaScript 前端开发
使用jQuery操作DOM元素
使用jQuery操作DOM元素
16 1
|
6月前
|
JavaScript 前端开发 开发者
jQuery文档对象模型DOM的实际应用
jQuery文档对象模型DOM的实际应用
30 0
|
1天前
|
XML JavaScript 前端开发
XML DOM - 属性和方法
XML DOM通过属性(如nodeName、nodeValue、parentNode、childNodes和attributes)和方法提供编程接口,让开发者用JavaScript等语言以节点方式交互XML。属性描述节点信息,方法执行操作,如删除节点。
|
6天前
|
JavaScript
DOM 属性列表(命名节点图 Named Node Map)
这段内容介绍了DOM中的`attributes`属性,它返回元素节点的属性节点列表,形成一个命名节点图。这个列表自动更新,当属性增删时反映变化。示例代码展示了如何加载&quot;books.xml&quot;,获取第一个`&lt;book&gt;`元素的属性列表,然后使用`getNamedItem()`方法获取&quot;category&quot;属性的值并显示属性数量。输出为&quot;cooking&quot;和&quot;1&quot;。
|
11天前
|
XML JavaScript 前端开发
XML DOM - 属性和方法
XML DOM 提供编程接口,让开发者用JavaScript等语言操作XML文档。接口包含属性和方法,属性如nodeName、nodeValue、parentNode和childNodes,用于查询节点信息;方法如getElementsByTagName、appendChild和removeChild,执行增删操作。示例中,JavaScript代码`txt=xmlDoc.getElementsByTagName(&quot;title&quot;)[0].childNodes[0].nodeValue`从books.xml获取第一个&lt;title&gt;元素的文本内容,赋值给变量txt。
|
18天前
|
移动开发 JavaScript 前端开发
webgl学习笔记3_javascript的HTML DOM
webgl学习笔记3_javascript的HTML DOM
19 0
webgl学习笔记3_javascript的HTML DOM
N..
|
2月前
|
JavaScript 前端开发 容器
jQuery中的DOM操作
jQuery中的DOM操作
N..
14 1
|
2月前
|
前端开发 JavaScript Java
第四章使用jQuery操作DOM元素
第四章使用jQuery操作DOM元素
10 0
|
2月前
|
JavaScript
jQuery操作DOM元素案例
jQuery操作DOM元素案例
11 0
|
3月前
|
JavaScript
在Vue中,如何使用`v-bind`指令将属性绑定到DOM元素上?
在Vue中,如何使用`v-bind`指令将属性绑定到DOM元素上?
40 3