一：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. Windows下安装postgresql_psycopg2时出现 "Unabled to find vcvarsall.bat" 的解决办法

    使用django时会用到postgresql的数据库,如下表: 数据库引擎设置 设置 数据库 适配器 postgresql PostgreSQL psycopg 版本 1.x, http://www. ...

  2. springmvc的单文件上传

    @RequestMapping("/up") public ModelAndView up(MultipartFile myfiles , HttpServletRequest r ...

  3. Spring <bean> 参数意义

    1.id bean的唯一标识, 2.class 类的完全限定名, 3.parent 父类bean定义的名字. 如果没有任何声明,会使用父bean,但是也可以重写父类.重写父类时,子bean 必须与父b ...

  4. iOS开发 弹簧效果

    #import "DDJelloView.h" #define SYS_DEVICE_WIDTH    ([[UIScreen mainScreen] bounds].size.w ...

  5. Java远程调试代码不一致问题汇总

    欢迎和大家交流技术相关问题: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://g ...

  6. C++ template的一些高级用法（元编码，可变参数，仿函数，using使用方法,. C++ 智能指针）

    1 .  通用函数可变参数模板 对于有些时候,我们无法确切的知道,函数的参数个数时,而又不想过多的使用所谓的函数重载,那么就可以效仿下面的例子: #include<iostream> #i ...

  7. 无障碍网页设计（WCAG2.0）

    无障碍化是指无论健全人还是残疾人,年轻人还是老年人都可以平等地获取互联网上的信息和服务.无障碍化网站建设不单可以增加网站的受益群体,更是一个有情怀.有担当的互联网企业的责任,也是一个互联网从业人员应该 ...

  8. PHP中字符串的连接和换行

    PHP中字符串的连接使用点,不是加号.换行\n需要用双引号括起来,不能用单引号. eg. <?php print_r("hello"."\n"); pri ...

  9. HDU 1106 排序 题解

    排序 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submissi ...

  10. HDU 4939 Stupid Tower Defense （2014 Multi-University Training Contest 7）

    思路:首先红色肯定要放在最后面.前面蓝色和绿色dp求解. dp[i][j]  表示前面(i+j) 个 有 i 个蓝色塔  j个绿色塔 能造成最大伤害. //====================== ...