03 jQuery属性控制

属性相关的控制主要有以下几个功能

 val()  => 处理value属性
text()  => 处理innerText
html()  => 处理innerHTML
attr()  => 处理所有属性的
css()  => 处理所有css样式的

仔细看下吧，简单的很：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.min.js"></script>
    <script>
        $(function(){
            // 如果给参数, 就是设置值, 如果没参数, 就是获取值
            $("#text_1").val("我是谁?");
            console.log($("#text_1").val());
            // attr() 如果给一个参数. 就是获取值. 如果给2个参数就是设置属性值
            $("#text_2").attr("type", "button").val("god");
            console.log($("#text_2").attr("type"));
            // css() 如果一个参数, 取值, 如果2个参数, 设置值
            $("#mydiv").css("background", "#eee");
            console.log($("#mydiv").css("background"))
 
            // text()和html()很像. 
            console.log($("#mydiv_2").text())  // 拿到纯文本
            console.log($("#mydiv_2").html())  // 拿到html标签
            // 如果传参. 则text(xxx)把xxx作为文本放入标签内.  
            //          则html(xxx)把xxx作为html放入标签.
        })
    </script>
</head>
<body>
    <input type="text" name="" id="text_1">
    <input type="text" name="" id="text_2">
    <div id="mydiv" style="width: 200px;height:100px; background:pink;"></div>
    <div id="mydiv_2" >
        <span>哈哈</span>
        <span>呵呵</span>
    </div>
</body>
</html>

posted @ 2023-08-28 17:07 生而自由爱而无畏阅读(7) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 02 jQuery选择器

· 10 CSS边框属性

· 2023.3.2 jQuery 的属性操作与DOM 的增删改

· jQuery html() text() val()方法

· 4、jquery中的一些属性方法

阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现

公告

昵称：生而自由爱而无畏
园龄： 3年4个月
粉丝： 8
关注： 3

+加关注

2025年3月

日

一

二

三

四

五

六

python爬虫成神之路进行时

03 jQuery属性控制

03 jQuery属性控制

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

推荐排行榜

	val() => 处理value属性
	text() => 处理innerText
	html() => 处理innerHTML
	attr() => 处理所有属性的
	css() => 处理所有css样式的

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="jquery.min.js"></script>
	<script>
	$(function(){
	// 如果给参数, 就是设置值, 如果没参数, 就是获取值
	$("#text_1").val("我是谁?");
	console.log($("#text_1").val());
	// attr() 如果给一个参数. 就是获取值. 如果给2个参数就是设置属性值
	$("#text_2").attr("type", "button").val("god");
	console.log($("#text_2").attr("type"));
	// css() 如果一个参数, 取值, 如果2个参数, 设置值
	$("#mydiv").css("background", "#eee");
	console.log($("#mydiv").css("background"))

	// text()和html()很像.
	console.log($("#mydiv_2").text()) // 拿到纯文本
	console.log($("#mydiv_2").html()) // 拿到html标签
	// 如果传参. 则text(xxx)把xxx作为文本放入标签内.
	// 则html(xxx)把xxx作为html放入标签.
	})
	</script>
	</head>
	<body>
	<input type="text" name="" id="text_1">
	<input type="text" name="" id="text_2">
	<div id="mydiv" style="width: 200px;height:100px; background:pink;"></div>
	<div id="mydiv_2" >
	<span>哈哈</span>
	<span>呵呵</span>
	</div>
	</body>
	</html>