32-jQuery-Day02

jQuery-Day02

第一节、筛选函数式编程

1.2、内容筛选

//选择 含有文本 'di' 的 div 元素
//:contains 筛选包含指定文本的 
$("#btn1").on("click",function(){
    $("div:contains('di')").css("background-color","blue");
});

//选择不包含子元素(或者文本元素) 的 div 空元素
//:empty 匹配所有不包含子元素或者文本的空元素
$("#btn2").on("click",function(){
    $("div:empty").css("background-color","blue");
});
//选择含有 class 为 divin 元素的 div 元素
//has 筛选包含有给定选择器的元素
$("#btn3").on("click",function(){
    $("div:has(.divin)").css("background-color","blue");
});
//选择含有子元素(或者文本元素)的div元素
//parent 筛选包含有子元素（DOM元素 子节点或文本节点）的父元素
$("#btn4").on("click",function(){
    $("div:parent").css("background-color","blue");
});

第二节、操作元素的值（HTML内容，文本，value值）

jQuery对象.html([val])

作用：获取或者设值指定元素的HTML内容

jQuery对象.text([val])

作用：获取或者设值指定元素中文本

jQuery对象.val([值])

作用：获取或设值指定元素的value值

$("#btn1").on("click",function(){
    var ps = $("p:parent");
    console.log(ps.html());
});

$("#btn2").on("click",function(){
    var ps = $("p:parent");
    console.log(ps.html("我是添加的"));
    //innerHTML
});

$("#btn3").on("click",function(){
    var ps = $("p:parent");
    console.log(ps.text(ps.text()+"我是添加的"));//如果添加文本则会将原来所有都会覆盖
    //innerText
});

checkboxs.each(function(){
    //alert(this.value);
    alert($(this).val());
});

第三节、操作元素的属性

属性的分类：

1、返回值为true或者false属性：checked selected disabled

2、一般属性：id class name type…

3、自定义属性：通过代码在元素上设值属性

获取属性值：attr(“属性名”)

​ prop(“属性名”)

设置属性：attr(“属性名”,“属性值”)

​ attr({key:value,key:value…})

//获取元素的属性值
console.log($("input").attr("type"));//checkbox   获取一般属性
console.log($("input").attr("checked"));//checked 获取返回值为true或者false的属性
console.log($("input").attr("aa"));//aa 获取自定属性

console.log("========================");
console.log($("input").prop("type"));//checkbox 获取一般属性
console.log($("input").prop("checked"));//true 获取返回值为true或者false的属性
console.log($("input").prop("aa"));//undifined 获取自定义属性

$("input").attr("type","radio");
//console.log($("input").attr("type","button"));//checkbox   获取一般属性
$("input").attr("checked","checked");//checked 获取返回值为true或者false的属性
$("input").attr("cc","dd");//aa 获取自定属性

$("input").prop("type","radio");//checkbox 获取一般属性
$("input").prop("checked",true);//true 获取返回值为true或者false的属性
$("input").prop("cc","dd");//undifined 获取自定义属性

总结：attr可以操作任意的属性，但是操作返回值为true或者false的属性的时候返回值为属性的值（checked=“checked” disabled = disabled selected–selected）

​ prop只能一般属性和返回值为true或者false 属性，不能操作自定义属性。但是返回值为true或者false的属性，如果想作为条件判断，使用prop比较方便，因为会直接返回true或者false。

可以通过JSON设置多个属性

$("input").attr({id:'in1',class:'in2'});

移除属性

$("input").removeAttr("checked");

全选与反选案例

<script type="text/javascript">
    $("#btn1").on("click",function(){
    //获取全选框的状态
    //$("#btn1").attr("checked");  attr  元素上没有该属性，获取时获取不到
    if($("#btn1").prop("checked")){
        $("input").slice(1).prop("checked",true);
    }else{
        $("input").slice(1).prop("checked",false);
    }

    $("input").slice(1).on("click",function(){
        var flag =  false;//判断有没有 一个个勾选框没有被选中
        var inputs =  $("input").slice(1);
        inputs.each(function(){
            if(!$(this).prop("checked")){
                $("#btn1").prop("checked",false);
                flag = true;
            }
        })
        if(!flag){
            $("#btn1").prop("checked",true);	
        }
    })
});
</script>

第四节、操作样式

元素.attr(“class”,“class值”) //会覆盖原有的样式表

元素.addClass(“class值”)// 添加一个新的样式，会跟原来的样式叠加

元素.removeClass(“class值”) //移除指定的样式表

元素.css(属性驼峰命名:“值”) //添加内嵌样式

$("#btn1").on("click",function(){
    //$("div").attr({class:'div1'});
    //$("div").attr({class:'div1'});
    //$("div").addClass("div1");
    //$("div").removeClass("div1");
    $("div").css({borderRadius:'10px',opacity:'0'});
});

;
//$("div").attr(class{:}^{\prime }div{1}^{\prime });//$(“div”).addClass(“div1”);
//$(“div”).removeClass(“div1”);
$(“div”).css({borderRadius:‘10px’,opacity:‘0’});
});