jquery元素处理、二级导航

126 阅读1分钟
attr()方法:获取元素某个属性的取值。(“选择器”). attr(name)获得匹配选择器的对象的指定属性。"选择器").attr(name,value)设置匹配选择器的对象的指定属性。js中的getAttribute和steAttribute

removeAttr;方法:删除某个属性的取值。例如:$("选择器").removeAttr(name)//删除所有匹配元素的指定属性.原生js中的removeAttribute

    $(this).attr("align", "center");//添加属性,js setAttribute
    $(".one").removeAttr("class ");//删除属性removeAttribute
    console.log($(this).attr("align"));//获得属性getAttribute 
    
addClass()方法:attr()设置属性值,先清空其他属性值,而addClass()方法可以再现有class追加另外的值。

 $(".one").children("div").click(function () {
        $(this).attr("class", "bg");//attr是不管里面有没有内容,都是class=bg
        $(this).addclass("bg");//追加bg
    })


removeClass(;方法:元素移除一个或多个属性值。例如$("选择器").removeClass(value);会从匹配元素的class属性中移除指定的值。

$(".one").children("div").click(function () {
        if ($(this).hasclass("bg")) {
            $(this).removeclass("bg");//删除class
        } else {
            $(this).addclass("bg");//添加class
        }
    })


toggleClass(0;方法:切换class属性中的一个或多个属性值的切换。例如:$("选择器").toggleClass(value)会切换所有匹配选择器的元素的class属性值,如果属性值存在则删除它,如果属性值不存在,则添加它。

$( ".one" ).children("div" ).toggleClass("bg");//这种方式不经常使用,因为除了添加类,还有其他操作,toggleclass是做不到的。

hasClass();方法:判断匹配元素class属性中是否含有某个值,有返回true,没有返回false;

html()可以用来读取或者设置某个元素中的HTML内容(包括标记):innerHTml

text(方法:可以用来读取或者设置某个元素中的文本内容:innerText

 $(".one").children("div").click(function () {
        // console.log($(".b").html());//获得信息
        //$(".b").html(" < b > 你好</b > ")
        // console.log($(".b").text());
        //$(".b").text("你好")
    })
    console.log($("input[name=username]").val());//输出val信息
    $("input [ name=username] ").va1("lily");//设置值
    console.log($("input[ name=course]").val());//这是错误用法,通用checked去判断是否选中。

二级导航
$(function () {
    $("h2").click(function () {
        $(this).next("ul").show(1000);//让h2下面的u1显示
        $(this).parent("div").siblings("div").children("ul").hide(1000); //找h2的父亲的兄弟的孩子ul并隐藏
    })
    $("h2").click(function () {
        if ($(this).hasClass("bg")) {//判断class是不是bg
            $(this).removeclass("bg");//如果是,移除class
            $(this).next("ul").hide(1000);//隐藏
        } else {
            $(this).addclass("bg");//不是,添加bg
            $(this).next("ul").show(1000);//显示
        }
    })

})