<!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. sublime安装emmet

    1,先安装package install 2,然后安装emmet,安装完后会自动load加载Pyv8,如果加载不成功只能手动下载(详情可以百度).

  2. Kafka流处理内幕详解

    1.概述 流处理是一种用来处理无穷数据集的数据处理引擎.通常无穷数据集具有以下几个特点: 无穷数据:持续产生的数据,它们通常会被称为流数据.例如:银行信用卡交易订单.股票交易就.游戏角色移动产生的数据 ...

  3. (python函数02)列表生成式

    (python函数02)列表生成式 示例代码  num = [i for i in range(1, 10)] print(num) ​ num = [i for i in range(1, 10) ...

  4. springboot整合mybatis源码分析

    springboot整合mybatis源码分析 本文主要讲述mybatis在springboot中是如何被加载执行的,由于涉及的内容会比较多,所以这次只会对调用关系及关键代码点进行讲解,为了避免文章太 ...

  5. 【动画消消乐 】仿ios、android中常见的一个loading动画 074

    前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出-   自我介绍 ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计 ...

  6. [WUSTCTF2020]朴实无华

    [WUSTCTF2020]朴实无华 考点:1.MD5碰撞 2.命令执行绕过 打开题发现编码有些问题,修改编码为utf-8 看了源码和请求包没发现什么东西,看到title想到了robots.txt文件, ...

  7. js--class类、super和estends关键词的学习笔记

    前言 JavaScript 语言在ES6中引入了 class 这一个关键字,在学习面试的中,经常会遇到面试官问到谈一下你对 ES6 中class的认识,同时我们的代码中如何去使用这个关键字,使用这个关 ...

  8. Mybatis学习笔记-动态SQL

    概念 根据不同环境生成不同SQL语句,摆脱SQL语句拼接的烦恼[doge] 本质:SQL语句的拼接 环境搭建 搭建数据库 CREATE TABLE `blog`( `id` VARCHAR(50) N ...

  9. MFC对文件文件夹转移、删除、重命名、复制【转】

    HFileOperation()函数主要对文件夹有四种操作:复制,删除,移动,重命名. 写了四个函数.可以很好的对文件夹进行操作. //函数名:MoveFolder //参数:lpszFromPath ...

  10. TypeScript学习笔记（四）装饰器

    目录 一.装饰器的作用 二.类装饰器 1. 普通装饰器 为类扩展属性和方法 使用装饰器修改属性和重写方法 2. 装饰器工厂 三.属性装饰器 四.方法装饰器 使用方法装饰器对方法进行扩展 五.方法参数装 ...