JQuery:捕获HTML
1、jQuery - 获取内容和属性
介绍：
　　jQuery 拥有可操作 HTML 元素和属性的强大方法。
　　jQuery 中非常重要的部分，就是操作 DOM 的能力。
　　jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。
方法：
1.1 获得内容 - text()、html() 以及 val()
　　三个简单实用的用于 DOM 操作的 jQuery 方法：
　　text() - 设置或返回所选元素的文本内容
　　html() - 设置或返回所选元素的内容（包括 HTML 标记）
　　val() - 设置或返回表单字段的值
实例1：下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容：
　　$("#btn1").click(function(){
　　　　alert("Text: " + $("#test").text());
　　});
　　$("#btn2").click(function(){
　　　　alert("HTML: " + $("#test").html());
　　});
代码如下：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>

    <script>

        $(function(){

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

                alert("Text:"+$("#test").text());

            });

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

                alert("HTML:"+$("#test").html());

            });

        });

    </script>

</head>

<body>

    <p id="test">这是段落中的 <i>斜体</i> 文本。</p>

    <button id="btn1">显示文本</button>

    <button id="btn2">显示HTML</button>

</body>

</html>

 

实例2：下面的例子演示如何通过 jQuery val() 方法获得输入字段的值：
　　$("#btn1").click(function(){
　　　　alert("值为: " + $("#test").val());
　　});
代码如下：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>

    <script>

        $(function(){

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

                alert("Value:"+$("#test").val());

            });

        });

    </script>

</head>

<body>

    <p>名称：<input id="test" type="text" value="我在学JQuery！"></p>

    <button id="btn">显示值</button>

</body>

</html>

1.2 获取属性 - attr()
　　jQuery attr() 方法用于获取属性值。
　　下面的例子演示如何获得链接中 href 属性的值：
　　$("button").click(function(){
　　　　alert($("#runoob").attr("href"));
　　});
代码如下：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>

    <script>

        $(function(){

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

                alert("Attr:"+$("#test").attr("href"));

            });

        });

    </script>

</head>

<body>

    <p><a href="http://www.baidu.com" id="test">href</a></p>

    <button id="btn">显示属性值</button>

</body>

</html>

JQuery：JQuery捕获HTML的更多相关文章

  1. jQuery: jquery.json.js

    http://api.jquery.com/jQuery.parseJSON/ http://www.json.org/json-zh.html http://fineui.codeplex.com/ ...

  2. 什么是jquery $ jQuery对象和DOM对象 和一些选择器

    1什么是jQuery: jQuery就是将一些方法封装在一个js文件中.就是个js库 我们学习这些方法. 2为什么要学习jQuery: 原生js有以下问题: 1.兼容性问题2.代码重复3.DOM提供的 ...

  3. (转)整体把握jQuery -jQuery 的原型关系图

    整体把握jQuery -jQuery 的原型关系图 (原)http://www.html5cn.org/article-6529-1.html 2014-7-2 17:12| 发布者: html5cn ...

  4. JQuery --- 第一期 (初识jQuery, JQuery核心函数和工具方法)

    个人学习笔记  初识jQuery 1.我的第一个JQuery <!DOCTYPE html> <html lang="en"> <head> & ...

  5. Jquery—Jquery异步功能实例

    Jquery确实是一个非常好的JavaScript框架,今天利用闲暇时间给大家一个借助Jquery异步实现校验username的唯一性的样例: 代码1--index.jsp文件: <%@ pag ...

  6. 锋利的jQuery ——jQuery中的事件和动画（四）

    一.jQuery中的事件 1)加载DOM $(document).ready()和window.onload的区别 1>执行时机 $(document).ready(){}  方法内注册的事件, ...

  7. [jQuery]jQuery DataTables插件自定义Ajax分页实现

    前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...

  8. jQuery jQuery对象与dom对象的转换

    jQuery对象本质上是一个构造函数,主要作用是返回jQuery对象的实例. jQuery选择器返回的是一个类似数组的对象,用下标运算取出的对象如$('body')[0],是dom对象,对此jquer ...

  9. jQuery jquery.windy 快速浏览内容

    在线实例 效果一 效果二 效果三 使用方法 <div class="container">     <section class="main" ...

  10. [Js/Jquery]Jquery tagsinput在h5邮件客户端中应用

    摘要 最近一直在折腾邮件的h5应用,为了保证在pc,ios,android端都可以使用,所以使用H5页面的方式嵌入app的webview中. 页面 UI大概是这样的 Jquery tagsinput下 ...

随机推荐

  1. 分布式架构高可用架构篇_05_fastdfs集群的安装

    参考: 龙果学院http://www.roncoo.com/share.html?hamc=hLPG8QsaaWVOl2Z76wpJHp3JBbZZF%2Bywm5vEfPp9LbLkAjAnB%2B ...

  2. Mac 配置环境变量

    系统:mac OS 10.10.3  or later 1.如果不能使用一些常用终端命令,如ls,open.可能是环境变量配置不当导致的.尤其是手动修改 输入以下命令: export PATH=/us ...

  3. Tree Context Menu

    Right click on a node to display context menu.   My Documents Photos Program Files Intel Java Micros ...

  4. HDU 1284 思维上的水题

    其实如果想出了方法真的好水的说... 然而一开始想了好久都没想出来... 最后看了一下最大数据才32768 可以直接枚举...枚举每个硬币的数量 看看后来能不能凑够n 因为还是怕超时..(虽然只有3乘 ...

  5. jQuery 判断多个 input file 都不能为空

    例如有两个图片上传的 input,都必须上传图片: html 选择文件 1 :<input type="file" name="myfile[]" cla ...

  6. a标签属性说明

    语法 <a target="value" href="url" > varlue:值. _blank:在新窗口中打开被链接文档. _self:默认. ...

  7. nginx服务器调优

    nginx服务器调优措施总结: 1.选择合适的网络IO模型 epoll select poll 2.配置合适的启动进程数和每个进程处理请求的工作线程数 3.启用gzip压缩以减小通信量以减少网络IO ...

  8. P1092 虫食算 NOIP2002

    为了测试stl 30分的暴力写法... #include <bits/stdc++.h> using namespace std; const int maxn = 11; int n; ...

  9. 迷宫dfs

    #include<stdio.h>int mov1[4]={0,0,1,-1};int mov2[4]={1,-1,0,0};int map[5][5]={0,1,0,0,1,      ...

  10. HQL之多表查询（一对多和多对多）

    一.一对多 以班级Classes和学生Student为例:   回忆sql语句: //内链接,两种方式效果一样,查询的是两边都有的数据 SELECT c.*,s.* FROM classes c,st ...