06 jquery 获取元素的内容-html()-val()-text()

浅浅的花香味﹌ 2022-12-08 12:50 166阅读 0赞

# 获取元素的内容 #

作者：曾庆林

### html()方法 ###

`Html()`:获取匹配元素集合中第一个元素的HTML内容

`html(htmlstring)` 设置匹配元素中的HTML内容

//很少用，几乎大部分的jquery方法都可以用这样的回掉函数形式
    html(function(index,hmtl))：根据传递的函数来设置匹配元素集合中每个元素的HTML内容并返回jQuery对象。

### text()方法 ###

`text()`:获取匹配元素中的文本

`text(string)`:设置元素的文本

注意：html（） 和 text 是有区别的一个是获取设置html 一个是获取设置 文本

### val() 方法 ###

`val()`:获取表单中的值

`val(string)`:设置中的值

val 主要针对表单中的值
      html（） text（） 主要针对 元素节点里面的html和文本内容

html

$(function(){ 
    /*1 当all 发生改变时，判断 all checked 属性是否为真，为真全选，为false 全不选*/
        $("#all").change(function(){ 
        	var val=$(this).attr("checked");
        	if(val){ 
        	  $(".item :checkbox").attr("checked",true);	
        	  $(".t").text($(".item :checkbox").length)
        	}else{ 
        	  $(".item :checkbox").attr("checked",false);	
        	  $(".t").text(0);
        	}
        	
        })
    //2 单击小的，当被选中的数量大于等于checkbox数量是 让all 全选 else all 不全选
         $(".item :checkbox").change(function(){ 
         	var selen=$(".item :checkbox:checked").length;
         	//checkbox被选中的个数
         	var itemlen=$(".item :checkbox").length;
         	//小checkbox的个数
         	if( selen>=itemlen){ 
         	   $("#all").attr("checked",true);
         	}else{ 
         	   $("#all").attr("checked",false);
         	}
            $(".t").text(selen);
         })
    
    })

![IT入门 感谢关注][IT_]

IT入门 感谢关注

练习地址： [www.520mg.com/it][www.520mg.com_it]

[IT_]: /images/20221123/6658c6c11c0b4f2881020c74e3f7a59e.png
[www.520mg.com_it]: http://www.520mg.com/it