jQuery_DOM 属性上|学习笔记

简介: 快速学习 jQuery_DOM 属性上

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

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


jQuery_DOM 属性上


一、概要

1、 .addClass( className ):

为每个匹配的元素添加指定的样式类名,给元素添加 class

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title></title>

// 引入 jQuery

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

<style>

.pc{

color: red;

}

</style>

</head>

<body>

<p>haha</p>

<script>

$(function(){

// 添加类名

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

})

</script>

</body>

</html>

效果截图:

p 标签变成了红色,打开后台,会看见 p 标签被添加了一个 pc 的类。

图片38.png

1、 .attr( attributeName ):

获取匹配的元素集合中的第一个元素的属性的值。设置每一个匹配元素的一个或多个属性。当它为一个参数的时候,后面仅跟一个属性名,为两个参数的时候,即为属性名对应属性值。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title></title>

// 引入 jQuery

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

<style>

.pc{

color: red;

}

</style>

</head>

<body>

<p>haha</p>

<a>haha</a>

<script>

$(function(){

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

$("a").attr("href","http://www.baidu.com");

})

</script>

</body>

</html>

效果截图:

点击 haha ,会跳转到百度的页面。

图片39.png

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title></title>

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

<style>

.pc{

color: red;

}

</style>

</head>

<body>

<p name="haha">哈哈</p>

<div></div>

<script>

$(function(){

$("a").attr("href","http://www.baidu.com");

var name=$("p").attr("name");//haha

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

})

</script>

</body>

</html>

效果截图:

图片40.png

2 .hasClass( className ):

确定任何一个匹配元素是否有被分配给定的(样式)类。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title></title>

// 引用  jQuery

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

<style>

.pc{

color: red;

}

</style>

</head>

<body>

<p name="haha">哈哈</p>

<div></div>

<h1 class="h11 aa"></h1>

<script>

$(function(){

$("a").attr("href","http://www.baidu.com");

var name=$("p").attr("name");//haha

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

console.log($("h1").hasClass("aa"));

})

</script>

</body>

</html>

效果截图:

图片41.png

3 .html():

获取集合中第一个元素匹配的 HTML 内容 设置每一个匹配元素的 html 内容。没有参数时获取当前元素的内容,有参数时给当前元素添加或更改内容。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title></title>

// 引用 jQuery

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

<style>

.pc{

color: red;

}

</style>

</head>

<body>

<a>haha</a>

<p name="haha">哈哈</p>

<div></div>

<h1 class="h11 aa"></h1>

<script>

$(function(){

var name=$("p").attr("name");//haha

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

console.log($("h1").hasClass("aa"));

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

})

</script>

</body>

</html>

效果截图:

图片42.png

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