开发者学堂课程【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”));
获得到属性的属性值,只能获取到已有的默认的属性
运行结果:
这就是 prop 只要一个参数的结果,只是获得到属性的属性值
Prop 第二种属性值,当有两个参数是,它改变属性对应的属性值
Console.log($(“input”).prop(“value“,”haha“));
代码运行结果:
此时的 value 值已被改变
注意:只能获取到已有的默认的属性
获得 type 并把 type 值进行修改
Console.log($(“input”).prop(“type“,”text“));
运行结果:
2、removeAttr(attributeName)
从字面一意思他是一个移除属性的方法
为匹配的元素集合中的每个元素中移除一个属性 (attribute)。
解开 a 标签后运行代码:
2、removeAttr(attributeName)
从字面一意思他是一个移除属性的方法
为匹配的元素集合中的每个元素中移除一个属性(attribute)。
解开 a 标签后运行代码:
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>
执行结果:
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>
执行效果: