JQUERY操作html--获取和设置内容、属性、回调函数
一：jQuery - 获取内容和属性
1.获得内容 - text()、html() 以及 val()
text() - 返回所选元素的文本内容
html() - 返回所选元素的内容（包括 HTML 标记）
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<body>
<p id="p1">圣诞快乐，<b>新年快乐</b></p> //给p元素里边的文本一部分加上b标签
<button id="b1">显示文本</button>
<button id="b2">显示html</button>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(e) { $("#b1").click(function(){
alert( $("#p1").text() ); //获取文本
}); $("#b2").click(function(){
alert( $("#p1").html() ); //获取html内容 结果会包含b标签 });
}); </script>
val() - 返回表单字段的value值
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<body>
<input type="text" id="ip" value="nihao">
<button id="but">显示value值</button>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(e) {
$("#but").click(function(){
alert($("#ip").val()); 结果返回表单元素的value值（nihao） }); }); </script>
2.获取属性 - attr()
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<body>
<a id="aa" href="www.baidu.com"></a>
<button id="but">显示元素属性</button>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(e) {
$("#but").click(function(){
alert($("#aa").attr("href"));
});
}); </script>
二、jQuery - 设置内容和属性
1设置内容和回调函数 - text()、html() 以及 val()
text() - 设置所选元素的文本内容
html() - 设置所选元素的内容（包括 HTML 标记）
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<body>
<p id="p1"></p>
<button id="b1">显示文本</button>
<button id="b2">显示html</button> </body>
</html>
<script type="text/javascript">
$(document).ready(function(e) { $("#b1").click(function(){ $("#p1").text("圣诞快乐，<b>新年快乐</b>") ; //设置文本
}); $("#b2").click(function(){ $("#p1").html("圣诞快乐，<b>新年快乐</b>") ; //设置html内容 结果会包含b标签 });
}); </script>
text()、html()回调函数
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<body>
<p id="p1">新年快乐</p>
<button id="b1">显示文本</button>
<button id="b2">显示html</button> </body>
</html>
<script type="text/javascript">
$(document).ready(function(e) { $("#b1").click(function(){ $("#p1").text(function(){ return "happy new year"; //调用函数，返回一个新的文本
}
) ;
}); $("#b2").click(function(){ $("#p1").text(function(){ return "happy <b>new</b> year"; //调用函数，返回一个新的文本
} );
});
}); </script>
val() - 设置表单字段的value值和回调函数
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<body>
<input type="text" id="ip">
<button id="but">显示value值</button>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(e) {
$("#but").click(function(){
$("#ip").val("happy"); }); }); </script>
val（）的回调函数
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<body>
<input type="text" id="ip">
<button id="but">显示value值</button>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(e) {
$("#but").click(function(){
$("#ip").val(function(){ return "happay";
}); }); }); </script>
2.设置属性 attr（）
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<body>
<a id="aa" href="www.baidu.com">11111</a>
<button id="but">显示元素属性</button>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(e) {
$("#but").click(function(){
alert($("#aa").attr( { "href":"http://news.baidu.com/" } )); //attr()里边，要加{}号
});
}); </script>
attr（）的回调函数
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<body>
<a id="aa" href="www.baidu.com"></a>
<button id="but">显示元素属性</button>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(e) {
$("#but").click(function(){
alert($("#aa").attr({ "href":function(){return "http://news.baidu.com/" } } )); //attr()里边，要加{}号
});
}); </script>
JQUERY操作html--获取和设置内容、属性、回调函数的更多相关文章
- JavaScript（19）jQuery HTML 获取和设置内容和属性
jQuery HTML jQuery 拥有可操作 HTML 元素和属性的强慷慨法. jQuery DOM 操作 jQuery 中非常重要的部分,就是操作 DOM 的能力.jQuery 提供一系列与 D ...
- JQuery基础之获取和设置标签内容
JQuery基础之获取和设置标签内容方法,如下图: 代码实现: <script src="JS/jquery-1.12.4.min.js"></script> ...
- jQuery基础之获取和设置标签元素属性
jQuery基础之获取和设置标签元素属性方法,如下图: 代码实现: <script src="JS/jquery-1.12.4.min.js"></script& ...
- 在jquery中应该使用prop方法来获取和设置checked属性，不应该使用attr。
在jquery中应该使用prop方法来获取和设置checked属性,不应该使用attr. $("#checkAll").prop("checked", true ...
- 第二十五篇 jQuery 学习7 获取并设置 CSS 类
jQuery 学习7 获取并设置 CSS 类 jQuery动态控制页面,那么什么是动态呢?我们就说一下静态,静态几乎又纯html+css完成,就是刷新页面之后,不会再出现什么变动,一个实打实的静态 ...
- jquery attr方法获取input的checked属性问题
1.通过prop方法获取checked属性,获取的checked返回值为boolean,选中为true,否则为flase <input type="checkbox" id= ...
- 如何用javascript获取和设置css3属性
==================获取======================== 我想到的第一个思路 var test = document.getElementById('test'); c ...
- Android : 反射机制获取或设置系统属性（SystemProperties）【转】
本文转载自:https://blog.csdn.net/wei_lei/article/details/70312512 Android.os.SystemProperties 提供了获取和设置系统属 ...
- Jquery操作表格多出一个内容行
目录 前言 需求 如何监听每一行点击,获取点击id 前后端 问题更新,ajax异步带来的问题 废弃使用HTML拼接 前言 我的前端实在是太差劲了,导致Jquery操作表格多出一个内容行,这个功能我都做 ...
随机推荐
- 关于autoptr
参考自: http://www.cppblog.com/expter/archive/2009/03/29/78270.html auto_ptr是什么. 解释1.auto_ptr是一个管理指针的对象 ...
- python 中date datetime time 与str的互转
以下全部引入 form datetime import datetime, timedelta import time 一.time 转str 二.datetime 转 str str_date = ...
- 【Todo】【读书笔记】机器学习-周志华
书籍位置: /Users/baidu/Documents/Data/Interview/机器学习-数据挖掘/<机器学习_周志华.pdf> 一共442页.能不能这个周末先囫囵吞枣看完呢.哈哈 ...
- 对数组进行malloc动态分配的一些总结
笔者在处理程序奔溃问题的时候,遇到栈溢出的情况,栈溢出最常见的情况是:迭代调用和数组过大.数组占用占空间,所以改为了malloc方式放在堆上.想想,就想整理一下关于对多维数组的动态分配问题. 一,堆和 ...
- javascript模仿php 函数 trim ltrim rtrim (原创)
javascript模仿php 函数 trim ltrim rtrim,去除字符串两边空格或其他符号 本文地址:js trim js php trim function trims(){ this. ...
- C++成员变量内存对齐问题,ndk下非对齐的内存访问导致BUS_ADRALN
同样的代码,在vs下运行正常,在android ndk下却崩溃: signal 7(SIGBUS),code 1 (BUS_ADRALN),fault addr 0xe6b82793 Func(sho ...
- 浏览器html页面乱码问题分析
直接访问某html文件,浏览器显示编码是正常的,页面通过<meta charset="UTF-8">指定了编码方式,该文件存储编码也是utf8. 通过配置的org.sp ...
- ArcGIS学习推荐
1. Arcgis Desktop 10帮助库 ArcGIS 系统的帮助库.该帮助库已经过编译,可为 ArcGIS 各方面的应用提供综合文档.建立该库的目的是满足以下各类主要用户的需求: GIS 专 ...
- 并发编程 05—— Callable和Future
Java并发编程实践 目录 并发编程 01—— ThreadLocal 并发编程 02—— ConcurrentHashMap 并发编程 03—— 阻塞队列和生产者-消费者模式 并发编程 04—— 闭 ...
- 1057 N的阶乘（大数运算）
题目链接:51nod 1057 N的阶乘 #include<cstdio> using namespace std; typedef long long ll; ; const int m ...