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

相关文章
|
1月前
|
XML JavaScript 数据格式
jQuery - 获取内容和属性
jQuery 拥有可操作 HTML 元素和属性的强大方法。
39 6
|
1月前
|
JavaScript 前端开发 开发者
深入了解jQuery:轻松实现高效的DOM操作
【10月更文挑战第11天】深入了解jQuery:轻松实现高效的DOM操作
48 0
|
1月前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
62 4
|
2月前
|
JavaScript 前端开发
jQuery 操作 DOM 及 CSS
本文介绍了如何使用jQuery进行DOM操作和CSS样式的修改,包括如何获取和设置元素的文本内容、属性值、添加和删除元素,以及如何使用jQuery的addClass、removeClass、toggleClass、hasClass和css方法来操作元素的CSS。通过示例代码,展示了jQuery在实际开发中的便捷性。
jQuery 操作 DOM 及 CSS
|
1月前
|
存储 JavaScript 前端开发
jQuery 对属性的操作
【10月更文挑战第8天】
|
2月前
|
JSON JavaScript 前端开发
Jquery常用操作汇总,dom操作,ajax请求
本文汇总了jQuery的一些常用操作,包括DOM元素的选择、添加、移除,表单操作,以及如何使用jQuery发送Ajax请求,涵盖了GET、POST请求和文件上传等常见场景。
|
1月前
|
JavaScript 前端开发 API
深入理解jQuery:高效DOM操作与事件处理
【10月更文挑战第11天】深入理解jQuery:高效DOM操作与事件处理
18 0
|
2月前
|
JavaScript 前端开发
前端基础(十)_Dom自定义属性(带案例)
本文介绍了DOM自定义属性的概念和使用方法,并通过案例展示了如何使用自定义属性来控制多个列表项点击变色的独立状态。
43 0
前端基础(十)_Dom自定义属性(带案例)
|
2月前
|
XML JavaScript 数据格式
jQuery - 获取内容和属性
jQuery - 获取内容和属性
27 5
|
2月前
|
JavaScript IDE 开发工具
jQuery - 获取内容和属性2
jQuery - 获取内容和属性2
20 3