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”));

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

运行结果:

jQuery_DOM 属性下|学习笔记

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

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

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

代码运行结果:

jQuery_DOM 属性下|学习笔记

此时的 value 值已被改变

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

获得 type 并把 type 值进行修改

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

运行结果:

jQuery_DOM 属性下|学习笔记

2、removeAttr(attributeName)

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

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

解开 a 标签后运行代码:

jQuery_DOM 属性下|学习笔记

2、removeAttr(attributeName)

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

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

解开 a 标签后运行代码:

jQuery_DOM 属性下|学习笔记

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>

执行结果:

jQuery_DOM 属性下|学习笔记

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>

执行效果:

jQuery_DOM 属性下|学习笔记

上一篇:服务器节点动态上下线案例全部代码实现|学习笔记


下一篇:判断节点是否存在|学习笔记