zoukankan      html  css  js  c++  java

  • jQuery操作DOM

    ---恢复内容开始---

    1.元素属性操作

    　　1.1 获取元素的属性

    　　　　attr(name)

    <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="../Scripts/jquery-3.1.1.js"></script>
    <title></title>
    <meta charset="utf-8" />
    <style type="text/css">
        body {
            font-size:12px;
        }
        img {
            border:1px solid #ff6a00;
            width:300px;height:200px;
            padding:3px;float:left;
        }
        div {
            float:left;padding:10px;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            var urlStr = $("img").attr("src");
            var altStr = $("img").attr("alt");
            $("#div1").html("图片路径为：" + urlStr + "<br/>" + "图片名称为：" + altStr);
        })
    </script>
</head>
<body>
    <img alt="你的名字" src="../0227/5670d8646a4b6.jpg"/>
    <div id="div1"></div>
</body>
</html>
    实例：

    　　1.2 设置元素的属性

    　　　　设置单个属性

    　　　　attr(key,valeu)

    　　　　设置多个属性

    　　　　arrt({key1:value1,key2:value2,...})

    <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="../Scripts/jquery-3.1.1.js"></script>
    <meta charset="utf-8" />
    <style type="text/css">
        body {
            font-size:12px;
        }
        .clsSpn {
            float:left;padding-top:10px;padding-left:10px;
        }
        .clsImg {
            border:1px solid #ff0000;padding:3px;float:left;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            //一次设置一个属性
            $("img").attr("src", "../Image/Desert.jpg");
            $("img").attr("title", "这是桌面图片");
            //一次设置多个属性
            $("img").attr({ "src": "../Image/Desert.jpg", "title": "我变了吗？" });
            $("img").addClass("clsImg");
            $(".clsSpn").html("加载完毕");
        })
    </script>
</head>
<body>
    <img src="../Image/5670d8646a4b6.jpg" alt="你的名字" style="float:left;300px;height:200px"/>
    <span class="clsSpn">正在加载图片...</span>
</body>
</html>
    实例：

    　　1.3 删除元素属性

    　　　　removeAttr(name)

    2.获取和设置元素

    　　2.1 获取和设置元素内容

    　　　　在设置元素的内容有两个方法，即 html() 和 text() 。前者会被html所解析，后者则不会。

    html() 和 text() 方法的区别
    语法格式 参数说明 功能描述
    html() 无参数 获取元素的HTML内容
    html(value) value参数为元素的HTML内容 设置元素的HTML内容
    text() 无参数 获取元素的文本内容
    text(value) value参数为元素的文本内容 设置元素的文本内容

    　　2.2 获取和设置元素值

    　　　　在jQuery中，要获取元素的值通过val()方法，语法格式如下：

    　　　　val(val);

    　　　　其中如果不带参数val，是获取某元素的值；反之，则是将参数val的值赋给某元素。

    　　　　另外，通过 val() 方法还可以获取 select 标记中的多个选项值，其语法格式如下所示：

    　　　　val().join(",")

    <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="../Scripts/jquery-3.1.1.min.js"></script>
    <title>获取或设置元素的值</title>
    <meta charset="utf-8" />
    <style type="text/css">
        body {
            font-size:12px;text-align:center;
        }
        div {
            padding:3px;margin:3px;width:120px;float:left;
        }
        .txt {
            border:1px solid #ff0000;padding:3px;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("select").change(function () { //设置列表框change事件
                //设置p1显示select被选中的value的值
                $("#p1").text($("select").val().join(","));
            })
            $("input").change(function () {//设置输入框focus事件
                //获取输入框的value值
                var strTxt = $("input").val();
                //设置p的文本内容为指定值
                $("#p2").text(strTxt);
            })
            $("input").focus(function () {
                $("input").val('');
            })
        })
    </script>
</head>
<body>
    <div>
        <select multiple="multiple" style="85px;height:96px">
            <option value="1">Item 1</option>
            <option value="2">Item 2</option>
            <option value="3">Item 3</option>
            <option value="4">Item 4</option>
            <option value="5">Item 5</option>
            <option value="6">Item 6</option>
            <option value="7">Item 7</option>
            <option value="8">Item 8</option>
            <option value="9">Item 9</option>
        </select>
        <p id="p1"></p>
    </div>
    <div>
        <input type="text" class="txt"/>
        <p id="p2"></p>
    </div>
</body>
</html>
    实例：

     3.元素样式操作

    　　3.1 直接设置元素样式值

    　　　　css("name","value")   name:样式名称    value:样式的值

    　　3.2 增加元素CSS类别

    　　　　增加一个样式

    　　　　addClass("class")    class:类别名称

    　　　　增加多个样式

    　　　　addClass("class1 class2 class3")   中间空格隔开

    　　3.3 切换元素CSS类别

    　　　　 toggleClass("class")

    　　3.4 删除元素CSS类别

    　　　　removeClass([class])

    　　　　删除一个class

    　　　　removeClass("class0")

    　　　　删除多个class　　

    　　　　removeClass("class1" "class2" "class3" ...)

    　　　　删除全部class

    　　　　removeClass()

    4.页面元素操作

    　　4.1创建节点元素

    　　　　函数 $() 用于动态创建页面元素，语法格式为：

    　　　　$(html)

    var $div=$("<div title='jQuery'>Something</div>");
         $("body").append($div);

    　　　　

    ---恢复内容结束---

    1.元素属性操作

    　　1.1 获取元素的属性

    　　　　attr(name)

    <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="../Scripts/jquery-3.1.1.js"></script>
    <title></title>
    <meta charset="utf-8" />
    <style type="text/css">
        body {
            font-size:12px;
        }
        img {
            border:1px solid #ff6a00;
            width:300px;height:200px;
            padding:3px;float:left;
        }
        div {
            float:left;padding:10px;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            var urlStr = $("img").attr("src");
            var altStr = $("img").attr("alt");
            $("#div1").html("图片路径为：" + urlStr + "<br/>" + "图片名称为：" + altStr);
        })
    </script>
</head>
<body>
    <img alt="你的名字" src="../0227/5670d8646a4b6.jpg"/>
    <div id="div1"></div>
</body>
</html>
    实例：

    　　1.2 设置元素的属性

    　　　　设置单个属性

    　　　　attr(key,valeu)

    　　　　设置多个属性

    　　　　arrt({key1:value1,key2:value2,...})

    <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="../Scripts/jquery-3.1.1.js"></script>
    <meta charset="utf-8" />
    <style type="text/css">
        body {
            font-size:12px;
        }
        .clsSpn {
            float:left;padding-top:10px;padding-left:10px;
        }
        .clsImg {
            border:1px solid #ff0000;padding:3px;float:left;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            //一次设置一个属性
            $("img").attr("src", "../Image/Desert.jpg");
            $("img").attr("title", "这是桌面图片");
            //一次设置多个属性
            $("img").attr({ "src": "../Image/Desert.jpg", "title": "我变了吗？" });
            $("img").addClass("clsImg");
            $(".clsSpn").html("加载完毕");
        })
    </script>
</head>
<body>
    <img src="../Image/5670d8646a4b6.jpg" alt="你的名字" style="float:left;300px;height:200px"/>
    <span class="clsSpn">正在加载图片...</span>
</body>
</html>
    实例：

    　　1.3 删除元素属性

    　　　　removeAttr(name)

    2.获取和设置元素

    　　2.1 获取和设置元素内容

    　　　　在设置元素的内容有两个方法，即 html() 和 text() 。前者会被html所解析，后者则不会。

    html() 和 text() 方法的区别
    语法格式 参数说明 功能描述
    html() 无参数 获取元素的HTML内容
    html(value) value参数为元素的HTML内容 设置元素的HTML内容
    text() 无参数 获取元素的文本内容
    text(value) value参数为元素的文本内容 设置元素的文本内容

    　　2.2 获取和设置元素值

    　　　　在jQuery中，要获取元素的值通过val()方法，语法格式如下：

    　　　　val(val);

    　　　　其中如果不带参数val，是获取某元素的值；反之，则是将参数val的值赋给某元素。

    　　　　另外，通过 val() 方法还可以获取 select 标记中的多个选项值，其语法格式如下所示：

    　　　　val().join(",")

    <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="../Scripts/jquery-3.1.1.min.js"></script>
    <title>获取或设置元素的值</title>
    <meta charset="utf-8" />
    <style type="text/css">
        body {
            font-size:12px;text-align:center;
        }
        div {
            padding:3px;margin:3px;width:120px;float:left;
        }
        .txt {
            border:1px solid #ff0000;padding:3px;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("select").change(function () { //设置列表框change事件
                //设置p1显示select被选中的value的值
                $("#p1").text($("select").val().join(","));
            })
            $("input").change(function () {//设置输入框focus事件
                //获取输入框的value值
                var strTxt = $("input").val();
                //设置p的文本内容为指定值
                $("#p2").text(strTxt);
            })
            $("input").focus(function () {
                $("input").val('');
            })
        })
    </script>
</head>
<body>
    <div>
        <select multiple="multiple" style="85px;height:96px">
            <option value="1">Item 1</option>
            <option value="2">Item 2</option>
            <option value="3">Item 3</option>
            <option value="4">Item 4</option>
            <option value="5">Item 5</option>
            <option value="6">Item 6</option>
            <option value="7">Item 7</option>
            <option value="8">Item 8</option>
            <option value="9">Item 9</option>
        </select>
        <p id="p1"></p>
    </div>
    <div>
        <input type="text" class="txt"/>
        <p id="p2"></p>
    </div>
</body>
</html>
    实例：

     3.元素样式操作

    　　3.1 直接设置元素样式值

    　　　　css("name","value")   name:样式名称    value:样式的值

    　　3.2 增加元素CSS类别

    　　　　增加一个样式

    　　　　addClass("class")    class:类别名称

    　　　　增加多个样式

    　　　　addClass("class1 class2 class3")   中间空格隔开

    　　3.3 切换元素CSS类别

    　　　　 toggleClass("class")

    　　3.4 删除元素CSS类别

    　　　　removeClass([class])

    　　　　删除一个class

    　　　　removeClass("class0")

    　　　　删除多个class　　

    　　　　removeClass("class1" "class2" "class3" ...)

    　　　　删除全部class

    　　　　removeClass()

    4.页面元素操作

    　　4.1创建节点元素

    　　　　函数 $() 用于动态创建页面元素，语法格式为：

    　　　　$(html)

    var $div=$("<div title='jQuery'>Something</div>");
         $("body").append($div);

     　　4.2 内部插入节点

    　　　　append()  自己添加xxx

    　　     appendTo()    把自己添加到xxxx    

    　　 4.3 外部插入节点

    外部插入节点的方法
    语法格式 参数说明 功能描述
    after(content) content表示插入目标外部后面的内容 向所选择的元素外部后面插入内容
    after(function) 通过function函数返回插入目标外部后面的内容 向所选择的元素外部后面插入function函数所返回的内容
    before(content) content表示插入目标外部前面的内容 向所选择的元素外部前面插入内容
    before(function) 通过function函数返回插入目标外部前面的内容 向所选择的元素外部前面插入function函数所返回的内容
    insertAfter(content) contene表示插入目标元素外部后面的内容 将所选择的元素插入另一个指定的元素后面
    insertBefore(contene) contene表示插入目标元素外部前面的内容 将所选择的元素插入另一个指定的元素前面

    　　4.4 复制元素节点

    　　　　clone()  该方法不具有任何元素的行为

    　　　　clone(true)   该方法新元素具备被复制元素的所有行为

    <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
    <script src="../Scripts/jquery-3.1.1.min.js"></script>
    <style type="text/css">
        img {
            width:300px;height:200px;border:1px solid #808080;margin:5px
        }
        div {
            padding:10px;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("img").click(function () {
                $(this).clone(true).appendTo($("div"));
            })
        })
    </script>
</head>
<body>
    <div>
        <img alt="你继续点！" src="../Image/5670d8646a4b6.jpg"/>
    </div>
</body>
</html>
    练习：

     　　4.5 替换元素节点

    　　　　replaceWith(content)  将所有选择的元素替换成指定的HTML或DOM元素，其中参数content为被所选择元素替换的内容

    　　　　replaceAll(selector)  将所选择的元素替换成指定的selector的元素，其中参数selector为需要被替换的元素。

    　　　　二者区别：

    　　　　replaceWith()与replaceAll() 方法都可以实现元素节点的替换，前者是用括号内中的字符串替换元素本身。后者是字符串替换括号内被选中的元素。

    　　　　替换成功后，新元素的事件都将失效。

    　　4.6 包裹元素节点

    包裹元素节点
    语法格式 参数说明 功能描述
    wrap(html) html参数为字符串代码，用于生成元素并包裹所选元素 把所有选择的元素用其他字符串代码包裹起来
    wrap(element) elem参数用于包裹所选元素的的DOM元素 把所有选择的元素用其他DOM元素包裹起来
    wrap(function) function参数为包裹结构的一个函数 把所有选择的元素用function函数返回的代码包裹起来
    unwrap() 无参数 移除选择元素的父元素或包裹标记
    wrapAll(html) html参数为字符串代码，用于生成元素并包裹所选元素 把所有的选择元素用单个元素包裹起来
    wrapAll(element) elem参数用于包裹所选元素的的DOM元素 把所有选择的元素用单个DOM元素包裹起来
    wrapInner(html) html参数为字符串代码，用于生成元素并包裹所选元素 把所有选择元素的子内容（包括文本节点）用代码串包裹起来
    wrapInner(element) elem参数用于包裹所选元素的的DOM元素 把所有选择元素的子内容（包括文本节点）用DOM元素包裹起来
    wrapInner(function) function参数为包裹结构的一个函数 把所有选择元素的子内容（包括文本节点）用function函数返回的代码包裹起来

    　　4.7 遍历元素

    　　　　each(callback)

    　　　　this:代表的是每一个元素

    　　　　index:从0开始的序号

    $("div").each(function(index){
   this.title="helloworld"+index;     
})

    　　4.8 删除页面中指定的元素

    　　　　remove([expr])

    　　　　expr:可选项，如果接受参数，则参数为帅选元素的jQuery表达式，通过该表述式指定的元素，并进行删除。

    　　　　

    function(){
  $("ul li").remove("li[title=pass]");
  $("ul li:eq(1)").remove();    
}
  • 相关阅读:
    vs2005发布生成自定义dll
    模拟msn消息提示(右下角)
    通过GridView导出Excel
    在ASP.NET 2.0中直接得到本页面生成的HTML代码
    asp.net实现SQL Server备份还原
    通用分页存储过程算法(.net类实现)
    超链接打开自定义的协议
    GridView技巧2
    sql语句获取本周、本月数据
    asp.net开发自定义控件
  • 原文地址：https://www.cnblogs.com/Akeke/p/6479109.html
Copyright © 2011-2022 走看看