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. Scala _ [underscore] magic

    I started learning Scala a few days before. Initially i was annoyed by the use of too many symbols i ...

  2. ArcEngine 获取像元值

    栅格数据获取像元值, 使用ISurface.GetElevation(IPoint pnt),功能是实现了,获取的 不是像元值,是插值结果.而由于栅格数据是离散的值,每个栅格值代表了特殊的含义,插值之 ...

  3. dtd语法之定义属性

    1.语法: <!ATTLIST 元素名称 属性名称 属性类型 默认值>  属性类型: l CDATA :文本数据 l (en1|en2|……) :属性值任选其一 l ID :属性值必须是唯 ...

  4. PHP统计字符串里单词查询关键字

    <?function full_count_words($str) {     //返回完整数组,包含字符串里每个单词 $words = str_word_count($str,1);     ...

  5. DS实验题 sights

    算法与数据结构实验题 6.3 sights ★实验任务 美丽的小风姑娘打算去旅游散心,她走进了一座山,发现这座山有 n 个景点, 由于山路难修,所以施工队只修了最少条的路,来保证 n 个景点联通,娇弱 ...

  6. php安装json模块

    centOS上因为看php源码中没有json模块,于是采用pecl自动编译安装:# yum install php-devel# yum install php-pear# yum install g ...

  7. git的某些默认行为--会推送pull的内容，即使commit的时候不显示

    今天一不小心又在git上犯了个大错误,用gitflow之前进行过pull分支的操作,然后用IDE选择修改的文件提交,可是推送的时候把pull的内容也推送到远程服务器了,提交的时候用git status ...

  8. vbaexcel

    Sub WordTest() Dim objwordApp As Word.Application Dim objword As Word.Document Dim objSeheet As Stri ...

  9. Nginx目录别名(Alias)支持PHP的配置

    需求:通过 example.com 访问 /var/data/www,但通过 example.com/pa 访问的却是 /var/data/phpmyadmin,即保护phpmyadmin不暴露在ww ...

  10. (IOS)Swift Music 程序分析

    本文主要分享下楼主在学习Swift编程过程中,对GitHub上的一个开源App Swift Music的研究心得. 项目地址:https://github.com/xujiyao123/SwiftMu ...