<!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. ClickHouse学习系列之八【数据导入迁移&同步】

    背景 在介绍了一些ClickHouse相关的系列文章之后,大致对ClickHouse有了比较多的了解.它是一款非常优秀的OLAP数据库,为了更好的来展示其强大的OLAP能力,本文将介绍一些快速导入大量 ...

  2. Maven多模块Spring的注入

    第一次做多模块项目,Unit Test的时候发现Biz模块没法注入Dal模块的Mappper,提示找不到Bean. POM文件是正确引入了dependency的,扫描的package也没错,所以卡了好 ...

  3. Java基础之反射生成JDK动态代理

    在Java的java.lang.reflect包下提供了一个Proxy类和一个InvocationHandler接口.通过这个类和接口可以生成JDK动态代理类或动态代理对象. JDK动态代理例子: / ...

  4. c# checkedListBox设置多列横向显示 经验总结

    1. 设置checkedListBox的MultiColumn 属性为true; 2. 调整checkedListBox的宽度,调整ColumnWidth的宽度

  5. Guava - 字符串处理

    Joiner 连接 比如,有这样一个集合[1,2,3,4,5,7,null],想把这个集合转换成以#分割的字符串,并过滤掉集合中的空元素 List<Integer> eleList = A ...

  6. nodejs 文本逐行读写功能的实现

    利用nodejs实现:逐行读写(从一个文件逐行复制到另外一个文件):逐行读取.处理和写入(读取一行,处理后,写入另一个文件) 1.所需要的模块: fs,os,readline 2.具体实现: a. 功 ...

  7. SQL之case when then用法_之二

    select CustomerNo, Name, Sex, Birthday, IDType, IDNo, validityday, case (null ) when '1' then '高级VIP ...

  8. Intouch/ifix关于语音报警的一种设置思路

    工控项目最近升级改造,需要使用Intouch/ifix提供一个语音报警功能.这个不像先前提供的单一的声音报警,业主方要求能详细的提供某某水泵或者是某某设备故障报警,这就要求我们这边对语音解析或者基础控 ...

  9. mongodb（27017、28017）未授权访问

    重启docker systemctl restart docker.service 下载mingodb docker pull mongo:3.6 列出镜像 docker images mongo 创 ...

  10. SpringMVC 源码解析笔记

    作者笔记仓库:https://github.com/seazean/javanotes 欢迎各位关注我的笔记仓库,clone 仓库到本地后使用 Typora 阅读效果更好. 一.调度函数 请求进入原生 ...