jQuery学习笔记

1.jQuery基础选择器

//parent>child选择器。

$("div>label").css("border", "solid 5px red");

//与ance desc选择器不同，parent>child选择器只能选择子辈们，而ance desc还可以选到孙辈甚至更低。



//prev + next选择器

$("p+label").css("background-color","red");//label在p之后



//prev ~ siblings选择器

 $("p ~ label").css("border", "solid 1px red");

//与prev + next选择器类似，但prev ~ siblings选择器可以选择prev后面所有同级的元素。

 

2.jQuery过滤性选择器

$("li:first").css("background-color", "red");//获取li的第一个子元素


$("li:eq(3)").css("background-color", "red");//获取li的第三个子元素


$("li:contains('jQuery')").css("background-color", "red");//获取li中包含jQuery的元素


$("li:has('p')").css("background-color", "red");//获取包含标签<p>的元素


$("li:first-child").css("background-color", "red");//获取所有li的子元素。与:first不同，:first只能获得一个元素，而:first-child可以获得符合条件的元素集合。


$("li:hidden").css("background-color", "red");//获取已隐藏的元素。visible是获取已显示的元素。

 

3.jQuery表单选择器

$("#frmTest :input").addClass("bg_blue");//:input和#frmTest之间要用空格。:text, :password, :checkbox, :input:submit使用方法同理。



//选中状态选择器

$("#frmTest :checked").attr("disabled", true);

//selected使用方法同理。

 

4.使用jQuery方法操作DOM元素

 

function rethtml() {

    var $html = "<div id='test' title='hi'>我是调用函数创建的</div>"

    return $html;

}

$("body").append(rethtml());//append()的参数可以是字符、HTML元素标记、返回字符串的一个函数。

var $str="Hello World！";

$($str).appendTo("div");//插入一个固定的位置



$(".green").after("$str");//在元素后面插入内容。before()函数同理。



$("body").append($(".red").clone());//复制元素



$($str).replaceAll(".green");//替换。replaceWith()函数同理，但两个参数位置与replaceAll()相反。



$(".red").wrapInner("<b>");//warp()和wrapInner()函数用来包裹元素，前者包裹元素本身，后者包裹元素内容。



$("span").each(function (index) {

    if (index == 1) {

        $(this).attr("class", "red");

    }

});//each()函数用于遍历指定的元素集合。参数是回调函数。



$("span").remove(".red");//移除指定元素与其子元素

$("span").empty();//移除所有指定元素

 

5.jQuery事件与应用

$(document).ready(function() {

    $("#btntest").bind("click", function () {

        $("#tip").html("我被点击了！");

    });

});//ready()函数，DOM加载完毕后就触发。



$(function () {

    bind("click", function () {

        $(this).attr("disabled", "true");

    })

});//使用bind()函数绑定事件。使用unbind()函数移除绑定。live()的使用方法与bind()一样。



$(function () {

    $("div").hover(

            function () {

                $(this).addClass("orange");

            },

            function () {

                $(this).removeClass("orange")

            })

});//鼠标移到所选元素上、离开该元素时执行。



$(function () {

    $("#btntest").bind("click", function () {

        $("div").toggle();

    })

});//toggle()函数用于绑定函数。当参数为空时，负责元素的显示与隐藏；参数不为空时，轮流执行绑定的函数。



//one()函数用于绑定函数的一次性事件，方法与bind()函数类似，不再演示。



//trigger()函数没看懂。



$(function () {

    $("input")

            .bind("focus", function () {

                $("div").html("请输入您的姓名！");

            })

    $("#txtest").bind("blur", function () {

        if ($(this).val().length == 0)

            $("div").html("你的名称不能为空！");

    })

});//focus事件获取焦点时触发，blur事件失去焦点时触发。例如，选中文本框时触发focus事件,选中文本框以外的地方触发blur事件。



$(function () {

    $("#seltest").bind("change", function () {

        if ($(this).val() == "苹果")

            $(this).css("background-color", "red");

        else

            $(this).css("background-color", "green");

    })

});//当一个元素的值发生变化时，将会触发change事件，例如在选择下拉列表框中的选项时，就会触发change事件。

 

6.jQuery动画与特效