JQuery：JQuery捕获HTML

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相关推荐

jquery jQuery的入口函数 $函数 dom对象和jquery对象
文章目录 jquery jQuery的入口函数 $函数 dom对象和jquery对象 jQuery的入口函数视频代码 $函数视频代码 dom对象和jquery对象视频代码 jquery j ...
jQuery 学习笔记一(认识jQuery jQuery选择器 jQuery中的DOM操作)
第一章认识jQuery jQuery代码风格 $(document).ready(function(){ //... }); 简化 $(function(){ //... }); jQuery对象转 ...
JQuery + jquery插件
免费开源的纯Html, JQuery + jquery插件 http://wijmo.com/ 转载于:https://www.cnblogs.com/Rising/archive/2010/12/1 ...
[jQuery] jQuery中如何将数组转化为json字符串，然后再转化回来？
[jQuery] jQuery中如何将数组转化为json字符串,然后再转化回来? var typeOf = obj => Object.prototype.toString.call(obj); ...
[jQuery] jQuery UI怎样自定义组件？
[jQuery] jQuery UI怎样自定义组件? 又是第一次,现在的感受是jQueryUI Widget能让你代码组织得更好,风格更一致. 如何开始使用首先用$.widget()方法开始定义你的组 ...
[jQuery] jQuery和Zepto的区别？各自的使用场景？
[jQuery] jQuery和Zepto的区别?各自的使用场景? 创建$的方式不同.前者略微要大,后者略微小点.场景....emmmm 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, ...
[jQuery] jQuery与jQuery UI有啥区别？
[jQuery] jQuery与jQuery UI有啥区别? 1)jQuery是一个js库,主要提供的功能是选择器.属性修改和事件绑定等 2)jQuery UI则是在jQuery的基础上,利用jQue ...
[jQuery] jQuery是通过哪个方法和Sizzle选择器结合的？
[jQuery] jQuery是通过哪个方法和Sizzle选择器结合的? 通过创建一个div元素,检测被传入的fn是否被当前浏览器支bai持 function assert( fn ) { var d ...
[jQuery] jQuery的队列是如何实现的？队列可以用在哪些地方？
[jQuery] jQuery的队列是如何实现的?队列可以用在哪些地方? 一.队列是什么?队列是一种数据结构,跟生活中的排队是一样的,符合先进先出,后进后出的原则即:对一个数组做一些限制:1.只允许在 ...
[jQuery] jquery.extend与jquery.fn.extend的区别？
[jQuery] jquery.extend与jquery.fn.extend的区别? 1.认识jQuery extend()和jQuery.fn.extend()jQuery的API手册中,exte ...

JQuery：JQuery捕获HTML

JQuery：JQuery捕获HTML相关推荐

最新文章

热门文章