jq第二天
-
属性-CSS 类
addClass() 方法向被选元素添加一个或多个类。
<script>
$(function(){
$('button').click(function(){
$('p').addClass('nss')
})
})
</script>
<style type="text/css">
.nss{background-color: #2e6da4}
</style>
<p>4565665</p>
<p>2131334</p>
<button>k</button>
removeClass() 方法从被选元素移除一个或多个类。
<script>
$(function(){
$('button').click(function(){
$('p').removeClass('nss')
})
})
</script>
<style type="text/css">
.nss{background-color: #2e6da4}
</style>
<p class="nss">4565665</p>
<p>2131334</p>
<button>k</button>
toggleClass() 对设置或移除被选元素的一个或多个类进行切换。
<script>
$(function(){
$('button').click(function(){
$('p').toggleClass('nss')
})
})
</script>
<style type="text/css">
.nss{background-color: #2e6da4}
</style>
<p class="nss">4565665</p>
<p>2131334</p>
<button>k</button>
当这个p不使用nss的时候效果为 当这个p使用nss的时候效果为 (主要是切换效果不像addclass是死的效果 )
html()
取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素,那么只有第一个匹配元素的 HTML 内容会被获取。
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").html(function(n,m,l){
return "这个 p 元素的 index 是:"+n +","+m+l;
});
});
});
</script>
function(index, html)FunctionV1.4
此函数返回一个HTML字符串。接受两个参数,index为元素在集合中的索引位置,html为原先的HTML值。
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("p").html("Hello <b>world!</b>");
});
});
</script>
text([val|fn])
概述
取得所有匹配元素的内容。
结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
val([val|fn|arr])
概述
获得匹配元素的当前值。
在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选,将返回一个数组,其包含所选的值。
$("input:text").val("Bill Gates");
关于jquery中html()、text()、val()的区别
.html()用为读取和修改元素的HTML标签 对应js中的innerHTML
.html()是用来读取元素的HTML内容(包括其Html标签),.html()方法使用在多个元素上时,只读取第一个元素
.text()用来读取或修改元素的纯文本内容 对应js中的innerText
text()用来读取元素的纯文本内容,包括其后代元素;.text()方法不能使用在表单元素上
.val()用来读取或修改表单元素的value值
.val()是用来读取表单元素的"value"值,.val()只能使用在表单元素上
关于三者的区别
1. .val()方法和.html()相同,如果其应用在多个元素上时,只能读取第一个表单元素的"value"值,但是.text()和他们不一样,如果.text()应用在多个元素上时,将会读取所有选中元素的文本内容。
2 .html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。