获得内容 - text()、html() 以及 val()
括号为空时获取值,括号中加入参数是赋值
html(), 相当于 innerHTML
text(), 相当于 innerTEXT
val() 只有有value属性的才能取到值 //设置或者获取表单字段的值(前提是表单设置了value属性)
1.<input type='text' value='xxx'/> 这个就需要用 val()。
2.<span>你好</span> 这个就用 text()。
3.<div><p>您好!</p></div> 这个就用html()。
html可以添加像<a></a>、<p></p>等标记
text只能写文本,如果写了参数则会以文本形式输出
innerText和innerHTML都是将字符串放入hmtl标签中的一个函数
但是innerHTMl可以解析hmtl标记
例如 你放入一个<a>斯蒂芬</a> 如果在DIV中它里面就会出现一个带下划线的a元素;
innerText只支持普通字符串;
三个简单实用的用于 DOM 操作的 jQuery 方法
text() - 设置或返回所选元素的文本内容 // 使用此方法时要注意, 当text设置为空串时,
也就是text("")时,他会删除所选元素的所有下级标签,不仅仅删除文字,下级标签也会被删除
html() - 设置或返回所选元素的内容(包括 HTML 标记)
val() - 设置或返回表单字段的值
下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容
实例
text()
$("#btn1").click(function(){
alert($("#test").text());
});
"html()
$("#btn2").click(function(){
alert($("#test").html());
});
下面的例子演示如何通过 text()、html() 以及 val() 方法来设置内容:
实例
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
获取属性 - attr() // 不能获得css样式里的属性值,只能获得标签中的属性值
jQuery attr() 方法用于获取属性值。
下面的例子演示如何获得链接中 href 属性的值:
$("button").click(function(){
alert($("#w3s").attr("href"));
});
总结:可以在动态产生的标签中设置class或者其他属性的值,然后通过attr获取对应的标签的动态变化值。
例子:
在html中,通过以下代码处理后端传过来的数据,动态生成标签。
为了方便绑定事件时获取事件标签的text()值和每个标签的编号,可以将编号存到class属性中。
{% for article in page %}
<td class="center" id="t1">
{% if article.is_show %}
<a class="{{ article.id}}">推荐</a>
{% else %}
<a class="{{ article.id}}" >不推荐</a>
{% endif %}
</td>
{% endif %}
在绑定事件时可以进行以下操作
$('#t1 a').on('click',function(){
id = $(this).attr('class')
ta = $(this).text()
alert(id)
alert($(this).text())
$(this) --> 代表当前点击的标签
设置属性 - attr()
jQuery attr() 方法也用于设置/改变属性值。
下面的例子演示如何改变(设置)链接中 href 属性的值:
实例
$("button").click(function(){
$("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});
attr() 方法也允许您同时设置多个属性。
下面的例子演示如何同时设置 href 和 title 属性:
实例
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial"
});
});
text()、html() 以及 val() 的回调函数
上面的三个 jQuery 方法:text()、html() 以及 val()以及css,同样拥有回调函数。回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。
下面的例子演示带有回调函数的 text() 和 html():
实例
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "Old html: " + origText + " New html: Hello <b>world!</b>
(index: " + i + ")";
});
});