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>

转载于:https://www.cnblogs.com/xingyue1988/p/6216844.html

JQUERY操作html--获取和设置内容、属性、回调函数相关推荐

010_jQuery获取和设置内容属性
1. jQuery DOM操作 1.1. jQuery拥有可操作html元素和属性的强大方法. 1.2. jQuery提供一系列与DOM相关的方法, 这使访问和操作元素和属性变得很容易. 1.3. j ...
JavaScript（19）jQuery HTML 获取和设置内容和属性
jQuery HTML jQuery 拥有可操作 HTML 元素和属性的强大方法. jQuery DOM 操作 jQuery 中非常重要的部分,就是操作 DOM 的能力.jQuery 提供一系列与 D ...
jQuery获取、设置标签属性值
jQuery获取.设置标签属性值 jQuery提供了两种方法: attr():传入一个参数获取某属性值,两个参数:修改某属性值,返回参数的值(不推荐操作checked.readOnly.selecte ...
Android : 反射机制获取或设置系统属性（SystemProperties）
Android.os.SystemProperties 提供了获取和设置系统属性的方法,但是这个类被隐藏了,应用开发时无法直接访问,可以通过反射的机制进行操作. 获取系统属性 public stati ...
jquery attr方法获取input的checked属性问题
1.通过prop方法获取checked属性,获取的checked返回值为boolean,选中为true,否则为flase <input type="checkbox" id= ...
Android 使用反射机制获取或设置系统属性（SystemProperties）
网上有很多介绍,但是感觉比较混乱!由于自己能力有限,只做一些简单易懂的介绍. 一.获取和设置SystemProperties属性的代码下面是通过反射来获取和设置系统属性的代码 public fina ...
jQuery操作标签--样式、文本、属性操作, 文档处理
1.样式 2.文本 3.属性操作全选,反选效果 4.文档处理操作标签一.样式操作样式类: addClass(); // 添加指定的css类名removeClass(); //移除指定的css类 ...
php property 获取,JavaScript中如何获取和设置property属性代码详解
JavaScript中对象的property有三个属性: 1.writable.该property是否可写. 2.enumerable.当使用for/in语句时,该property是否会被枚举. 3. ...
java判断对象无数据_java利用反射机制判断对象的属性是否为空以及获取和设置该属性的值...
1.java利用反射机制判断对象的属性是否为空: Map validateMap = new LinkedHashMap(); validateMap.put("serial", ...

JQUERY操作html--获取和设置内容、属性、回调函数

一：jQuery - 获取内容和属性

二、jQuery - 设置内容和属性

JQUERY操作html--获取和设置内容、属性、回调函数相关推荐

最新文章

热门文章