JQuery学习笔记 (3)

1). 获取元素的属性

$(function() {
            var strAlt = $("img").attr("src"); //属性值一
            strAlt += "<br/><br/>" + $("img").attr("title"); //属性值二
            $("#divAlt").html(strAlt);
        })

2). 设置元素的属性

$(function() {
            $("img").attr("src", "Images/img01.jpg");//设置src属性
            $("img").attr("title", "这是一幅风景画");//设置title属性
            $("img").attr({ src: "Images/img02.jpg", title: "这是一幅风景画" });//同时设置二个属性
            $("img").addClass("clsImg");//增加样式
            $("span").html("加载完毕");//显示加载状态
        })

 

3). 设置元素的属性(二)

$(function() {
            $("img").attr("src", function() { return "Images/img0" + Math.floor(Math.random() * 2 + 1) + ".jpg" }); //设置src属性
            $("img").attr("title", "这是一幅风景画"); //设置title属性
            $("img").addClass("clsImg"); //增加样式
        })

 

4). 获取或设置元素的内容

$(function() {
        var strHTML = $("#divShow").html();//获取HTML内容
        var strText = $("#divShow").text();//获取文本内容
        $("#divHTML").html(strHTML);//设置HTML内容
        $("#divText").text(strText);//设置文本内容
        })

 

5). 获取或设置元素的值

$(function() {
            $("select").change(function() { //设置下拉列表框change事件
                var strSel = $("select").val().join(","); //获取下拉列表框所选中全部选项值
                $("#p1").html(strSel); //显示下拉列表框所选中全部选项值
            })
            $("input").change(function() { //设置文本框focus事件
                var strTxt = $("input").val(); //获取文本框的值
                $("#p2").html(strTxt); //显示文本框所输入的值
            })
            $("input").focus(function() { //设置文本框focus事件
                $("input").val(""); //清空文本框的值
            })
        })

 

6). 直接设置元素样式值

$(function() {
            $("p").click(function() {
                $(this).css("font-weight", "bold");//字体加粗
                $(this).css("font-style", "italic");//斜体
                $(this).css("background-color", "#eee");//增加背景色
            })
        })

 

7). 增加CSS类别

$(function() {
            $("p").click(function() {
            $(this).addClass("cls1 cls2"); //同时新增二个样式类别
            })
        })

8). 类别切换

$(function() {
            $("img").click(function() {
            $(this).toggleClass("clsImg"); //切换样式类别
            })
        })

 

9). 动态插入节点方法

$(function () {
            $("div").append(" <b>Write Less Do More</b> "); //插入内容
            $("div").append(retHtml); //插入内容
            function retHtml() {
                var str = " <b>Write Less Do More</b> ";
                return str;
            }
        })

$(function() {
            $("img").appendTo($("span")); //插入内容
        })

$(function() {
            $("span").after(retHtml); //插入内容
            function retHtml() {
                var str = "<span><b>Write Less Do More</b><span>";
                return str;
            }
        })

 

10).复制元素节点

$(function() {
            $("img").click(function() {
                $(this).clone(true).appendTo("span");
            })
        })

 

11). 替换元素节点

$(function() {
            $("#Span1").replaceWith("<span title='replaceWith'>陶国荣</span>");
            $("<span title='replaceAll'>tao_guo_rong@163.com</span>").replaceAll("#Span2");
        })

 

12). 包裹元素节点

$(function() {
            $("p").wrap("<b></b>");//所有段落标记字体加粗
            $("span").wrapInner("<i></i>");//所有段落中的span标记斜体
        })

 

13). 遍历元素

$(function() {
            $("img").each(function(index) {
                //根据形参index设置元素的title属性
                this.title = "第" + index + "幅风景图片，alt内容是" + this.alt;
            })
        })

14). 删除元素

$(function() {
            $("ul li:first").css("font-weight", "bold");//设置首行
            $("#Button1").click(function() {
                $("ul li").remove("li[title=t]");//删除指定属性的元素
                $("ul li:eq(1)").remove();//删除节点中第2个元素
            })
        })