<!DOCTYPE html>

<html>

  <head>

    <title>01_basic.html</title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">

    <meta name="description" content="this is my page">

    <meta name="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

	<style>

		.divClass{

			text-align: center;

			width: 100%;

		}

	</style>

	<script type="text/javascript" src="js/jquery-1.11.3.js"></script>

	<script type="text/javascript">

		/*

		以下的写法可以简化，使用：

		$(function(){

		});

		意思是在document加载完之后执行：

			这里的加载完是指，一篇html的文档树所有元素都加载完（但是不包括具体

			信息：比如说具体的图片音频等，但是纯js中的window.onload是在全部元

			素，真正的加载完了之后，才会执行：真正的渲染完）

		*/

		$(document).ready(function() {

			// 获取div1中的html内容（html结构的）

			$("#btn1").click(function()  {

				alert($("#div1").html());

			});

			// 获取div1中的文本内容

			$("#btn2").click(function() {

				// alert($("#div1").text());

				// 因为下面的class选择器只使用了一次，所以可以使用.divClass的形式

				// 因为jQuery筛选了

				alert($(".divClass").text());

			});

			// 获取div1中的title属性的内容

			$("#btn3").click(function() {

				// alert($("#div1").attr("title"));

				// 因为下面的class选择器只使用了一次，所以可以使用.divClass的形式

				alert($(".divClass").attr("title"));

			});

			// 获取input标签的个数

			$("#btn4").click(function() {

				alert($("input").length);

			});

			// 改变div1中的值：text()、html()均可，但是html会覆盖原来内层的结构

			$("#btn5").click(function() {

				$("#div1").text("div的内容被修改了");

				// $(".divClass").html("div的内容被修改了");

			});

			// 同时获取div和span中的值

			$("#btn6").click(function() {

				alert("div中的内容："+$("div1").text() + ", span的内容为："+$("span").text());

			});

		});

	</script>

  </head>

  <body>

    <div id="div1" class="divClass" title="div 的  title属性值">

    	<p>div 的内容</p>

    </div><br><br>

    <input type="text" value="输入框1"><br>

    <input type="text" value="输入框2"><br><br>

    <span>这是span的信息</span><br>

	<input type="button" value="#获取div里面的Html内容" id="btn1">

    <br><br>

	<input type="button" value=".获取div里面的纯文本内容" id="btn2">

    <br><br>

	<input type="button" value="#获取div里面的title属性的值" id="btn3">

    <br><br>

	<input type="button" value="获取input的个数" id="btn4">

    <br><br>

	<input type="button" value="改变div里面的值" id="btn5">

    <br><br>

	<input type="button" value="同时获取div和span" id="btn6">

    <br><br>

  </body>

</html>

jQuery中获取属性值：attr()、html()、text()、val()等(一)的更多相关文章

  1. 总结Jquery中获取自定义属性使用.attr()和.data()以及.prop()的区别

    一..attr()和.data()的区别: .attr()和.data()本质上属于DOM属性和Jquery对象属性的区别. 看一个例子: <!DOCTYPE html> <html ...

  2. JQuery中根据属性或属性值获得元素(6种情况获取方法)

    根据属性获得元素 1.比如要获取页面p标签中属性有id的元素 $("p[id]").css("color","red"); 根据属性值获得元 ...

  3. JQuery中根据属性或属性值获得元素

    根据属性获得元素 1.比如要获取页面p标签中属性有id的元素 $("p[id]").css("color","red"); 根据属性值获得元 ...

  4. jQuery 属性操作attr().prop().text().html().val()

    这些方法用于获取和设置 DOM 元素的属性. 一.attr(): <!--样式:在style里面写的,用css来操作.--> <!--属性:在元素里面写的,用attr方法操作.--& ...

  5. jQuery中获取a标签的值

    如题,一组相同action的a标签,不同的是a标签的内容为搜索内容.点击页面显示不同的数据 刚开始试过在 a标签中添加 value值 和id 的值,结果在jQuery中获取值均失败! 后来发现,根本不 ...

  6. jQuery中操作属性的方法attr与prop的区别

    attr 与 prop 都可以对某个属性进行获取和设置的操作,二者的用法相同: <script src = 'jQuery.js'></script> <script&g ...

  7. 【Python】获取翻页之后的各页面中的属性值。

    如何获取翻页之后的页面中的html标签中的属性值? # coding=utf-8 from selenium import webdriver if __name__=="__main__& ...

  8. HtmlAgilityPack中使用xpath获取属性值

    HtmlAgilityPack介绍 HtmlAgilityPack是一个专门用来解析Html的库,它可以使用xml的方式来解析html. 有人说了,html本身不就是xml?是的,html就是xml, ...

  9. jquery中的属性和css

    jQuery中的属性用于获取或设置元素的属性 1.attr(),获取或设置所有相匹配的元素的属性值:removeAttr("attr"),移除所有相匹配的元素的属性 //html ...

随机推荐

  1. 给App加上音频编辑功能，让你的用户Show起来

    如今短视频当道,BGM无处不在,用户在每个能秀的地方都想要加上个性表达的音频.作为一个开发者,需不断探索和迎合用户的行为喜好,音频编辑功能成为用户在编辑个人信息.内容创作.生活分享等场景下的必需品. ...

  2. C++：第一个c++程序

    // C++ 环境搭建: https://www.bilibili.com/video/BV1nt4y1r7Ez?t=535 // 学习资料:https://www.runoob.com/cplusp ...

  3. 每天五分钟Go - 闭包

    闭包的示例代码 func getSequence() func() int{ i:=0 return func() int { i+=1 return i } } 首先,函数名getSequence, ...

  4. 【贪心+排序】凌乱的yyy / 线段覆盖 luogu-1803

    题目描述 现在各大oj上有n个比赛,每个比赛的开始.结束的时间点是知道的. yyy认为,参加越多的比赛,noip就能考的越好(假的) 所以,他想知道他最多能参加几个比赛. 由于yyy是蒟蒻,如果要参加 ...

  5. 程序向informix数据库插入text类型的中文乱码问题

    部署应用的Linux服务器的编码格式为utf-8.但是数据库的编码格式为Gbk.所以导致的乱码.但是其他类型的数据中文并不乱码. 通过图片中修改编码格式,可以解决,导致的后果就是tomcat的日志输出 ...

  6. Codeforces Round #735 (Div. 2) 题解

    比赛地址:https://codeforces.com/contest/1554. 只有 ABCD 的题解,E 不会. A 答案是 \(\max_i\{a_ia_{i+1}\}\).证明:(反证)如果 ...

  7. Treestar Flowjo 10.6.2 for win64安装破解教程

    Treestar FlowJo v10.6.2是一款极其优秀好用的流式细胞数据分析工具,通过图像分析细胞的各种变化,利用软件自带的分析功能,结合细胞模型创建合理的数据分析平台.本教程提供其安装包.注册 ...

  8. 深入刨析tomcat 之---第10篇 how tomcat works 第13章,Response 发送错误信息 sendError

    writedby 张艳涛 在浏览器中发送一个错误应用url 那么tomcat是如何发送错误的呢? 基本上是发送http 的response协议,分为两部分一部分是response设置头信息, 那么先分 ...

  9. SuperEdge 高可用云边隧道有哪些特点？

    作者 作者李腾飞,腾讯容器技术研发工程师,腾讯云TKE后台研发,SuperEdge核心开发成员. 背景 在边缘集群中,边缘端和云端为单向网络,云端无法主动连接边缘端,常见的解决方案是边缘端主动和云端( ...

  10. 实战 | Hive 数据倾斜问题定位排查及解决

    Hive 数据倾斜怎么发现,怎么定位,怎么解决 多数介绍数据倾斜的文章都是以大篇幅的理论为主,并没有给出具体的数据倾斜案例.当工作中遇到了倾斜问题,这些理论很难直接应用,导致我们面对倾斜时还是不知所措 ...