<!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. 搭建kerberos和NTP服务器以及安全的NFS服务

    说明:这里是Linux服务综合搭建文章的一部分,本文可以作为单独搭建Kerberos和NTP时钟服务的参考. 注意:这里所有的标题都是根据主要的文章(Linux基础服务搭建综合)的顺序来做的. 如果需 ...

  2. Git的使用（六）

    前言 版本管理工具总结: 开发团队项目,对项目的版本进行管理. 使用过的版本管理工具: TFS.SVN与Git. TFS:管理项目,通过visual Studio管理源码,拉取分支,提交代码等.也可以 ...

  3. Python基础之subprocess

    前言 subprocess这个函数很好用,类似于控制台执行,功能很多,今天先介绍subprocess调用exe,并行调用两个或两个以上的exe. Subprocess调用exe 调用exe有几种方式, ...

  4. 深入刨析tomcat 之---第13篇 tomcat的三种部署方法

    writedby 张艳涛 一般我们都知道将web 应用打成war包,放到tomcat的webapp目录下,就是部署了,这是部署方法1 第2种部署方法我们也知道,就是讲web应用的文件夹拷贝到webap ...

  5. Android 开发必备的知识点——JVM基础【转】

    image 1.JVM与操作系统的关系 Java Virtual Machine JVM 全称 Java Virtual Machine,也就是我们耳熟能详的 Java 虚拟机.它能识别 .class ...

  6. AWS 安全信息泄露-----21天烧了27万

    安全问题一直都是个老生常谈的话题,对于我们做IT的来说,是更为重视的.从使用开发工具的是否授权合规,到从事的工作内容是否合法.我们都应该认真的思考一下这些问题,毕竟我们要靠IT这门手艺吃饭. 2021 ...

  7. python代码下载m3u8视频

    代码如下: # -*- coding: utf-8 -*- import requests import re import os import base64 from Crypto.Cipher i ...

  8. 在Linearlayout中新增ScrollView支持滚动

    https://blog.csdn.net/wenzhi20102321/article/details/53491176 1.一般只需要在布局中加个ScrollView即可 2.如果布局中包含lis ...

  9. vue菜单切换

    HTML: <div id="box"> <ul> <li v-for= "(item,index) in arry"> & ...

  10. 探索HashMap源码 一行一行解析 jdk1.7版本

    今天我们来说一说,HashMap的源码到底是个什么? 面试大厂这方面一定会经常问到,很重要的.以jdk1.7 为标准    先带着大家过一遍 是由数组.链表组成 , 数组的优点是:每个元素有对应下标, ...