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. 用 Freemarker 生成 word 文档（包含图片）

    1. 用word写一个需要导出的word模板,然后存为xml格式. 2. 将xml中需要动态修改内容的地方,换成freemarker的标识符,例如: <w:p wsp:rsidR="0 ...

  2. iOS开发之UITextField的使用详解

    UITextField的使用详解 UITextField控件是开发中,使用频率比较高的控件了,那么有必要总结一下. 一.UITextField手动编写控件 UITextField  *txtAccou ...

  3. Java主要有那几种文件类型，各自作用

    java提供了两类数据类型:基本类型,引用类型. 1.基本类型包括:boolean ,byte,char,int,short,float,long,double,值得注意的是:在原始数据类型中,除了b ...

  4. Apache是目前应用最广的Web服务器，PHP3是一种类似ASP的脚本语言

    一.如何获得软件? 获得这3个软件包的方法很多,目前大多数Linux分发都捆绑了这3个软件包,如RedHat.本文介绍的安装方法是基于从这些软件的官方站点上下载获得的软件包进行的,针对RedHat L ...

  5. SEP图示

    Icon Description This icon indicates the following status: The client can communicate with Symantec ...

  6. PAT (Top Level) Practise 1008 Airline Routes（Tarjan模版题）

    1008. Airline Routes (35) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue Given a ...

  7. Objective-C中属性及其特质@property、attribute

    属性: 属性@property和属性attribute不同,@property在OC里有自己的一套专对实例变量的处理机制.attribute我们可以特指属性所具有或遵循的特质. 使用属性,编译器就会自 ...

  8. 针对css3特性浏览器兼容 封装less

    //--------------------------------------------------- // LESS Prefixer //--------------------------- ...

  9. SQL阻止保存要求重新创建表的更改 在哪里设置

    ef生成的数据表,有数据,设计的时候,想把某个字段改成可为null. 报 “阻止保存要求重新创建表”错误 百度一下: 修改数据库表结构时提示[不允许保存更改.您所做的更改要求删除并重新创建以下表.您对 ...

  10. HTML5 viewport 标签与 CSS3 background-size 属性 使图片完全适应区域内容

    要使一张图片不论在移动端还是在桌面端都能适应区域内容,可以使用 HTML5 的 viewport 标签结合 CSS3 的 background-size 属性. 适应区域内容是指图片的宽或高的长度满足 ...