<!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. ThinkPHP3.2.3使用PHPExcel类操作excel导入读取excel

    方法一: 1. 下载PHPExcel并保存在如下位置: 2. 在控制器中引用 vendor("PHPExcel.PHPExcel"); $objReader = \PHPExcel ...

  2. P5110 块速递推-光速幂、斐波那契数列通项

    P5110 块速递推 题意 多次询问,求数列 \[a_i=\begin{cases}233a_{i-1}+666a_{i-2} & i>1\\ 0 & i=0\\ 1 & ...

  3. 类似express的路由封装方式

    1.原理 主要过程涉及三个元素的定义,如下: //用于承载一系列方法的对象 var funObj = {}; //用于根据条件执行funObj中的方法 var app = function(){}; ...

  4. spring.jpa.open-view问题

    由ReentrantLock和JPA(spring.jpa.open-in-view)导致的死锁问题原因分析. 问题 在压测过程中,发现服务经过一段时间压测之后出现无响应,且无法自动恢复. 分析 从上 ...

  5. jQuery 两个日期时间相减

    var sDate='2016-10-31';var eDate='2016-10-10'var sArr = sDate.split("-");var eArr = eDate. ...

  6. 电脑软件安装过程文档.BA

    MD 01-打印并阅读-电脑软件安装过程文档.BAT-即此批处理脚本文档MD 02-阅读-电脑软件安装经验教训文档.DOCX-MD 03-制作-杏雨梨云USB维护系统2019中秋版之国庆更新-可启动U ...

  7. JAVA集合类概览

    带着问题来阅读 1.Java有哪些集合 2.不同集合的应用场景分别是哪些 3.哪些实现类是线程安全的 4.为什么Java集合不能存放基本类型 5.集合的fail-fast和fail-safe是什么 J ...

  8. Android无障碍宝典-talkback

    http://geek.csdn.net/news/detail/93269 http://geek.csdn.net/news/detail/135867

  9. HttpRunner3源码阅读：7.响应后处理 response.py

    response 上一篇说的client.py来发送请求,这里就来看另一个response.py,该文件主要是完成测试断言方法 可用资料 jmespath[json数据取值处理]: https://g ...

  10. Android 开发学习进程0.33 横竖屏切换

    安卓横竖屏大多数已经在manifest文件中将activity使用android:screenOrientation="portrait"属性写死,如简单的界面切换可直接更改为&q ...