jq第二天 （属性-CSS 类 ，html/文本/值 ）

•  

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{/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{/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()的区别

 这里的读取指alert的值

 

.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()都可以使用回调函数的返回值来动态的改变多个元素的内容。