Jquery添加元素

 

addClass() 方法向被选元素添加一个或多个类

该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性

    $(function() {
        // addClass():给元素添加class属性
        // 如果元素上已经有其他的classname
        // 那么会将新增加的追加到现有的classname后面
        // //找到第一个input,绑定对点击事件
        $("input:first").click(function() {
                //先获取到所有的li
                //然后再给这些li添加class
                $("ul li").addClass("basic")
            })
            // removeClass():可以将元素的某个class移除
            // ,如果未传参数,则可以将元素上的所有class移除掉
        $("input:eq(2)").click(function() {
            //先获取到所有的li
            //然后再移除li添加class
            $("ul li").removeClass("basic")
                //移除class为bigger的
            $("ul li").removeClass();
            //将元素上所有class移除掉
        })
        $("input:eq(3)").click(function() {
            //先获取到所有的li
            //hasClass(类名),用来判断元素上是否又某个class,如果有,则返回true,
            //   反之则返回false
            //alert($("ul li").hasClass("bigger"))
            //如下代码用来判断是否又tigger,如果没有则进行添加
            if (!$("ul li").hasClass("basic")) {
                $("ul li").addClass("basic");
            }
        })
        $("input:eq(4)").click(function() {
            $("ul li").toggleClass("basic")
        })
    })

append方法追加元素

    $(function() {
        $("#btn").click(function() {
            $("ul").append("<li>西瓜</li>")
        })
        $("#btn1").click(function() {
            $("<li>香瓜</li>").appendTo("ul");
        })
        $("#btn2").click(function() {
            $("ul").prepend("<li>西瓜</li>")
        })
        $("#btn3").click(function() {
            // console.log($("#btn3"));
            $("<li>蜜瓜</li>").prependTo("ul");
        })
        $("#btn4").click(function() {
            // console.log($("#btn3"));
            $("ul").after("西瓜");
        })
        $("#btn5").click(function() {
            // console.log($("#btn3"));
            $("ul").before("西瓜");
        })
    })

text()用来设置或返回被选元素的文本内容

html()用来返回或设置被选元素内容

 $(function() {
        $("div").click(function() {
            // alert($("#username").val())
            // console.log($("span").html("Hello"));
            console.log($("span").text("Hello"));
        })
    })

简易选项卡

   $(function() {
        //给力标签绑定鼠标移入事件
        $("ul li").mouseover(function() {
            //如何获取到当前鼠标移入的li标签.this
            $(this).css("opacity", 1).siblings().css("opacity", 0.5);
            //给鼠标移入的li标签的opactiy设置为1,
            // 将其他的兄弟标签li的opacity设置为0.5
        })
        $("ul li").mouseout(function() {
            $(this).siblings().css("opacity", 1);
        })
    })