一: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--获取和设置内容、属性、回调函数的更多相关文章

  1. JavaScript(19)jQuery HTML 获取和设置内容和属性

    jQuery HTML jQuery 拥有可操作 HTML 元素和属性的强慷慨法. jQuery DOM 操作 jQuery 中非常重要的部分,就是操作 DOM 的能力.jQuery 提供一系列与 D ...

  2. JQuery基础之获取和设置标签内容

    JQuery基础之获取和设置标签内容方法,如下图: 代码实现: <script src="JS/jquery-1.12.4.min.js"></script> ...

  3. jQuery基础之获取和设置标签元素属性

    jQuery基础之获取和设置标签元素属性方法,如下图: 代码实现: <script src="JS/jquery-1.12.4.min.js"></script& ...

  4. 在jquery中应该使用prop方法来获取和设置checked属性,不应该使用attr。

    在jquery中应该使用prop方法来获取和设置checked属性,不应该使用attr. $("#checkAll").prop("checked", true ...

  5. 第二十五篇 jQuery 学习7 获取并设置 CSS 类

    jQuery 学习7 获取并设置 CSS 类   jQuery动态控制页面,那么什么是动态呢?我们就说一下静态,静态几乎又纯html+css完成,就是刷新页面之后,不会再出现什么变动,一个实打实的静态 ...

  6. jquery attr方法获取input的checked属性问题

    1.通过prop方法获取checked属性,获取的checked返回值为boolean,选中为true,否则为flase <input type="checkbox" id= ...

  7. 如何用javascript获取和设置css3属性

    ==================获取======================== 我想到的第一个思路 var test = document.getElementById('test'); c ...

  8. Android : 反射机制获取或设置系统属性(SystemProperties)【转】

    本文转载自:https://blog.csdn.net/wei_lei/article/details/70312512 Android.os.SystemProperties 提供了获取和设置系统属 ...

  9. Jquery操作表格多出一个内容行

    目录 前言 需求 如何监听每一行点击,获取点击id 前后端 问题更新,ajax异步带来的问题 废弃使用HTML拼接 前言 我的前端实在是太差劲了,导致Jquery操作表格多出一个内容行,这个功能我都做 ...

随机推荐

  1. 《BI项目笔记》创建多维数据集Cube(2)

    本节建立: 历年的初烟水分均值变化分析Cube:区域维度:地州,专县时间维度:年等级维度:大等级,小等级指标:水分均值 数据源视图: 数据处理: ) ) DELETE FROM T_QualMoist ...

  2. Oracle数据库字段类型说明

    目前Oracle 数据库大概有26个字段类型,大体分为六类,分别是字符串类型.数字数据类型.日期时间数据类型.大型对象(LOB)数据类型.RAW和LONG RAW数据类型.ROWID和UROWID数据 ...

  3. 打完补丁后测试db_link对SCN的影响

    环境:11.2.0.4.0 升 11.2.0.4.8 后测试 背景:oracle 的db_link会导致实例间SCN同步,SCN增长速度过快则会产生错误: 方案:oracle官方推荐升级版本,但升级之 ...

  4. zabbix3.0.4 部署之八 (zabbix3.0.4 微信报警)

    [root@sv-zabbix ~]# cat /usr/local/zabbix/share/zabbix/alertscripts/weixin.py #!/usr/bin/env python# ...

  5. 使用File类递归列出E盘下全部文件

    import java.io.File;public class FileListTest { public void tree(File file){ if(file.listFiles()!=nu ...

  6. ssh和putty

    SH(Secure Shell的缩写),由 IETF 的网络工作小组(Network Working Group)所制定:SSH 为建立在应用层和传输层基础上的安全协议.SSH 是目前较可靠,专为远程 ...

  7. openwrt 的依赖找不到问题

    Openwrt报告库找不到Package * is missing dependencies for the following libraries: libc.so.6 或其他先检查系统里面有没有这 ...

  8. Objective-C( Foundation框架 一 字符串)

    Objective-C 中核心处理字符串的类是 NSString 与 NSMutableString ,这两个类最大的区别就是NSString 创建赋值以后该字符串的内容与长度不能在动态的更改,除非重 ...

  9. PHPCMS出错Call to undefined function sitename()

    一站点使用PHPCMS V9.4.2,因很久未升级,在使用后台的在线升级,升级到9.5.4后,出现“Call to undefined function sitename()”错误(注原模板未升级), ...

  10. 微信、QQ浏览器X5内核问题汇总

    一. 资料汇总 1.前端H5调起QQ浏览器的总结:http://km.oa.com/group/22486/articles/show/210189?kmref=search 2.Android We ...