来自 澳门金莎娱乐手机版 2019-09-11 14:01 的文章
当前位置: 金沙澳门官网网址 > 澳门金莎娱乐手机版 > 正文

DOM操作实例

都来深化影象吧,大家都清楚jQuery很好应用,因为它简化了javascript代码,更重要的是它还十二分基本上全体的浏览器,网页开采最头痛的便是其一了,所以jQuery也因而深受码农的保养,可是首先你得要记住它本领更好的选取它不是吗,过久了没用的天性方法也会忘记的,上边是jQuery的DOM操作方法属性的详解,看看加深下影象。

事例虽丑功用还一切呢!

复制代码 代码如下:

<!DOCTYPE html>
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        body {
            /*color: purple;*/
        }
        .a{
            color:red;
        }
        .b {
            color:purple;
        }
    </style>
    <script src="script/jquery-1.4.1.js"></script>
</head>
<body>
    <p id="div">class</p>
    <div id="all" class="a" >all
    <input type="text" value="text" name="text" id="text"/>
        <p id="p">p</p>
        <ul id="ul">
            <li id="a">苹果</li>
            <li id="b">脐橙</li>
            <li id="c">柚子</li>
        </ul>
        <div id="d">
            <p>内容</p>
        </div>
        <input type="button" value="鼠标悬浮效果" id="over" />
    </div>
    <script type="text/javascript">
        $().ready(function () {
            var p = $("#p");
            //alert(p.attr("id"));//attr("属性名")获取属性,attr("属性名","属性值")设置属性
            //p.attr("title","title");//设置属性
            //p.removeAttr("id");//删除钦点成分属性名的成分属性
            //$("#all").attr("class", "class");//设置class属性,如此设置属性会替换前面的class属性(class='class')
            //$("#all").addClass("class");//设置class属性,在原来的class属性里面追加四个class(class='all class')假使一个class里面有平等的属性(举例color),那么后面一个会覆盖后面一个
            //$("#all").removeClass("all");//删除钦赐的class属性
            //$("#all").removeClass();//移除class里面装有的class属性
            //$("#all").toggle(//交替方法
            //    function () {
            //        $(this).css("color","red");
            //},  function () {
            //    $(this).css("color","purple");
            //});
            //$("#div").click(function () { $("#all").toggle();});//用于显示遮盖交替钦命的要素
            //$("#all").click(function () { $("#div").text("class属性为:"+$("#all").attr("class"));});
            //$("#all").click(function () {
            //    $("#all").toggleClass("b")
            //});
            //alert($("#all").hasClass("all"));//剖断是或不是有此class属性
            //alert($("#all").is(".all"));//效果同上

            //alert($("#all").html());//同等于InnerHTML效果
            //$("#all").html("设置成功");
            //alert($("#all").text());//获取具备的文件内容
            //$("#all").text("设置成功");
            //alert($("[name='text']:eq(0)").val());//同等于value属性(val("设置属性值"))

            var newP = $("<p id='newP'>newP</p>");//创制成分,创设单个成分时因(<p/>)加上/
            //p.append(newP);//追法郎素到p内部前面(<p id='p'>p<p id='newP'>newP</p></p>)
            //newP.appendTo(p);//将newP追加到p内部前面
            //p.prepend(newP);//追美金素到p内部前边(<p id='p'><p id='newP'>newP</p>p</p>)
            //newP.prependTo(p);//将newp追加到p内部后边

            //p.after(newP);//追新币素到p成分的前面(<p id='p'>p</p><p id='newP'>newP</p>)
            //newP.insertAfter(p);//将newP追加到p成分的末尾
            //p.before(newP);//追加到p成分的前方
            //newP.insertBefore(p);//将newP追加到p成分前面
            //苹果  金柑  红柚 移动属性节点
            var a = $("#a");
            var c = $("#c");
            //c.insertBefore(a);//把c(内紫)成分移动到a(苹果)成分的前边
            //a.remove();//删除节点(全体的后裔节点也将被剔除)
            //a.remove();
            //c.after(a);//删除成分在增加赶回
            //$("ul>li").remove("li[id='a']");//依据规范删除钦赐成分
            //a.empty();//清空成分里面包车型地铁具有
            //a.clone().insertAfter(c);//把复制的节点a(苹果)增添到c(橘红)的末端

            //$("#d").replaceWith("<span>span</span>");//把id为#d成分里面包车型客车具有文件成分替换到钦点的剧情文本
            //$("<span>span</span>").replaceAll("#d");//同上,只是顺序反了

            //$("#ul").wrap("<b></b>");//把id为#ul的要素用<b>标签包裹起来(如果假如有多少个ul成分的话此方法会将各类ul都用三个<b>包裹起来)
            //$("#ul").wrapAll("<b></b>");//把id为#ul的要素用<b>标签包裹起来(假诺假使有四个ul成分的话此方法会将具备的ul用二个<b>包裹起来)
            //$("#ul").wrapInner("<b></b>")//将钦赐成分里面包车型大巴内容用二个<b>标签包裹起来

            //alert($("#ul").children().length);//获取具备的子成分(next()是赢得下八个同辈节点,prev()获取上一个同辈节点,siblings()获取具有的同辈节点)
            //$("#ul").closest("ul").css("color","red");//检索是还是不是与眼下因素相称,倘若部相称则赶回到父元素检索,否则重临空
            //alert($("#ul").css("height"));//css方法赢得的冲天也许有auto,且含有px,与css设置相关联,而用height()获取的万丈是因素在页面上的其实中度,且不带px,width也是平等

            //offset()方法
            var ul = $("#ul").offset();
            //alert(ul.left);//获取成分离视窗的偏移值(top)
            //position()方法
            var ul = $("#ul").position();
            //alert(ul.left);//获取相对定位的偏移值
            //$("#ul").scrollTop()  $("#ul").scrollLeft()获取滚动条距离最上部和右边的地点距离
            //$("#ul").scrollTop(300)  $("#ul").scrollLeft(300)设置滚动条距离最上端和左臂的地方距离
            //alert(("aabaa").slice(-2));//slice()重回前四个字符串,2为回到索引伊始前边的字符串
            $("#over").mouseover(function (e) {
                var tool = $("<div id='tool'>悬浮的内容</div>");
                $("body").append(tool);
                tool.css("position", "absolute").css("top", e.pageY+"px").css("left", e.pageX + "px");
                //tool.css({ "top": e.pageY + "px", "left": e.pageX + "px" }).show();
                //alert(e.pageX+" "+e.pageY);
            }).mouseout(function () {
                $("#tool").remove();
            });
        });
    </script>
</body>
</html>

你恐怕感兴趣的小说:

  • 锋利的jQuery jQuery中的DOM操作
  • 犀利的jQuery 要点总结(二) jQuery中的DOM操作(下)
  • jQuery 选择器、DOM操作、事件、动画
  • jQuery学习笔记[1] jQuery中的DOM操作
  • jQuery学习笔记之jQuery的DOM操作
  • 澳门金莎娱乐手机版 ,jquery中dom操作和事件的实例学习-表单验证
  • jquery中dom操作和事件的实例学习 仿yahoo邮箱登入框的提示效果
  • jquery中dom操作和事件的实例学习 下拉框应用
  • jQuery移动和复制dom节点实用DOM操作案例
  • jQuery的DOM操作之删除节点示例

本文由金沙澳门官网网址发布于澳门金莎娱乐手机版,转载请注明出处:DOM操作实例

关键词: