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. 在iOS开发中使用FMDB

    在iOS开发中使用FMDB 前言 SQLite (http://www.sqlite.org/docs.html) 是一个轻量级的关系数据库.iOS SDK 很早就支持了 SQLite,在使用时,只需 ...

  2. PCL 1.6.0 VS2010 Configuration

    Open VS2010, create a new project, then open Property Manager, double-click Microsoft.Cpp.win32.user ...

  3. StereoBM::disp12MaxDiff Crash the Release

    Initializing "cv::StereoBM bm.state->disp12MaxDiff" should be careful, inappropriate va ...

  4. [转]一步一步asp.net_购物车订单与支付宝

    本文转自:http://www.cnblogs.com/mysweet/archive/2012/05/19/2508534.html 最近这几天很忙,一边忙着准备一堆课程设计(8门专业课.....伤 ...

  5. sql in查询排序

    1.默认下,使用select xxx where in(xx,xx)查询,返回结果是按主键排序的,如果要按in()中值的排列顺序,可以这样做:   select * from talbe where ...

  6. 免费手机号码归属地API查询接口和PHP使用实例分享

    免费手机号码归属地API查询接口和PHP使用实例分享 最近在做全国性的行业分类信息网站,需要用到手机号归属地显示功能,于是就穿梭于各大权威站点之间偷来了API的接口地址. 分享出来,大家可以用到就拿去 ...

  7. 各种常用的JSON接口,开动你的大脑你就可以做出各种应用,值得收藏

    各种常用的JSON接口,开动你的大脑你就可以做出各种应用,值得收藏   浏览:1412 发布日期:2014/01/27 分类:技术分享 这里为大家搜集了一些能够返回JSON格式的服务接口.部分需要用J ...

  8. lua5.2版本在VS2010下的环境搭建

    第一次使用脚本语言,第一次使用解释性语言 公司的现在维护的游戏开发的比较早,采用的lua还是比较早的版本,像NPC脚本系统就是使用lua+luabind结合的module模式,服务器端没涉及到,所以不 ...

  9. [转]EF 4.1 Code First

    这篇文章介绍Code First开发以及如何与DbContext API一起使用.Code First允许使用C#或VB.NET类定义模型,在类或属性上有选择性的执行额外的配置或者使用Fluent A ...

  10. 数据传输:JSON,XML

    一.调用Ajax需要的JSON数据    1.url 处理页面    2.data 传递数据    3.datatype返回数据类型    4.type 提交数据方式    5.success成功之后 ...