JQuery学习(三)-JQuery对元素节点的操作

管理选择器所得到的结果

用jQuery选择出来的元素与数组非常类似,可以通过jQuery提供的一系列方法对其进行处理。包括获取长度,查找某个元素、筛选元素、遍历每个元素等。

size()获取选择器中元素的个数,类似数组中的length
index(element)查找元素在集合中的位置
add()给集合添加元素
not()去除元素集合中的某个元素
filter()筛选元素集合中的元素
find()通过查询获取新的元素集合
each()对选择器中的元素进行遍历

示例代码

<!--jQuery管理选择器得到的结果演示-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理选择器得到的结果</title>
    <script src="scripts/jQuery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function () {
            var li1 = $("li");
            //查看包含元素的个数:length属性
            alert(li1.length); //4

            var li2 = $("li:eq(2)");
            //index():
            // 用法1:查找元素的位置在多个查找到的元素集合中的位置
            var i = li1.index(li2);
            alert(i); //2

            //用法2:查找指定元素在其父亲下的子元素的索引
            alert($("li:eq(2)").index()); //3

            //add()  返回一个新的集合,包含所有,原来的集合不变
            var temp = li1.add("span");
            alert(temp.length); //5
            alert(li1.length); //4

            //not() 去除一部分,返回一个新集合,原来的集合不变
            temp = li1.not(":odd");  //去掉奇数个
            alert(temp.length); //2

            //filter()  筛选出一部分,返回一个新集合,原来的集合不变
            temp = li1.filter(":odd");
            alert(temp.text()); //苹果小米

            //find()  找指定元素下的符合选择器的子元素
            temp = $("ul").find("li");
            alert(temp.length);  //4

            //each()  对选择器中的元素遍历(循环)  重用
            //index:元素索引
            $("ul li").each(function (index) {
                //this:当前对象,是js对象,转换成jQuery对象:$(this)
                alert(index + "," + $(this).text());  //遍历输出
                if(index==2) {
                    //提前结束循环,返回false
                    return false;
                }
             })
        });
    </script>
</head>
<body>
<h3>常用的手机品牌</h3>
<ul>
    <span>test</span>
    <li>华为</li>
    <li>苹果</li>
    <li>vivo</li>
    <li>小米</li>
</ul>
<li>testli</li>
</body>
</html>

jQuery的一个强大地方就是可以使用链式操作,可以大大缩短代码的长度,其中有两个方法用的多,比如:end()-回到操作对象的上一个对象,andSelf()-将前面对象进行组合后共同处理。

jQuery对元素节点的操作

  • jQuery元素节点的操作
    通过jQuery来动态对节点进行操作是很容易的,对节点的操作主要分为:查询节点、创建节点、插入节点、删除节点、复制节点、替换节点、包裹节点、对节点的属性操作、对节点的样式操作、设置和获取节点的HTML、文本和值、遍历元素、对节点的CSS-DOM操作。
  • 创建元素节点
    可以通过使用jQuery的工厂函数$()来完成对节点的创建
var $node_1=$("<p></p>"); //创建一个空的元素节点
var $node_2=$("<p>hello</p>"); //创建一个带文本的元素节点
var $node_3=$("<p title='hi'>world</p>"); //创建一个带属性的元素节点
  • 插入元素节点
append()向每个匹配的元素内部追加内容
appendTo()将所有匹配的元素追加到指定的元素中
prepend()向每个匹配的元素内部前置内容
prependTo()将所有匹配的元素前置到指定的元素中
after()在每个匹配的元素之后插入内容
insertAfter()将所有匹配的元素插入到指定元素的后面
before()在每个匹配的元素之前插入内容
insertBefore()将所有匹配的元素插入到指定的前面
  • 删除元素节点

remove()方法

var $remove_li=$("ul li:eq(1)").remove(); //删除ul元素中的第2li元素,返回被删除的li元素对象
$("ul li:eq(1)").remove("li[title!='苹果']");//通过传递参数来进行选择性的删除

detach()方法

var $detach_li=$("ul li:eq(1)").detach(); 
//和remove类似删除指定的元素,与remove不同的是,所有绑定的事件、附加的数据都会保留下来

empty()方法

$("ul li:eq(1)").empty(); 
//empty方法并不是删除元素节点,而是清空节点,它能清空元素中的所有后代节点
  • 复制节点

clone()方法

$("li:eq(1)").clone().appendTo("ul"); //复制第二个li元素插入到ul中
//传递了一个参数为true,代表复制元素的同时复制元素中所绑定的事件
$("li:eq(1)").clone(true).appendTo("ul"); 
  • 替换节点

replaceWith()方法和replaceAll()方法

$("li:eq(1)").replaceWith("<li>草莓</li>");//把第二个元素替换掉
$("<li>草莓</li>").replaceAll("li:eq(1)"); //把第二个li元素替换掉
//结果一样,语法颠倒
  • 包裹节点

wrap()方法、wrapAll()方法和wrapInner()方法

$("li").wrap("<i></i>"); //用i标签把没个li标签包裹起来
$("li").wrapAll("<i></i>");//用i标签把多个li标签整体包裹起来,要是被包裹的多个元素有其它元素,其它元素会被放到包裹元素之后
$("li").wrapInner("<i></i>");//吧匹配到元素内部内容用i标签包裹起来
  • 节点属性操作

设置获取属性的方法attr(), 删除属性的方法:removeAttr()

alert($("li:eq(1)").attr("title")); //获取第二个li元素的title属性
$("ul").attr({"title":"列表","id":"mysql"});//一次设置多个属性
$("li:eq(1)").removeAttr("title")//删除第二个li内的title属性
  • 节点样式操作

获取和设置样式可以用前面讲的设置获取属性(attr())方法来实现

var li_class=$("li:eq(2)").attr("class"); //获取第二个li元素的class属性
$("li:eq(2)").attr("class","myclass");//给第二个元素设置class属性为myclass

追加样式使用addClass()方法

$("li:eq(2)").addClass("another");//给第二个li元素追加another类选择器,和前面设置的样式不同的功能会叠加,相同的功能会覆盖

移除样式使用removeClass()方法

$("li:eq(2)").removeClass("myClass"); //移除一个class选择器
$("li:eq(2)").removeClass("myClass another");//以空格方式隔开来同时移除多个class选择器

切换样式使用toggleClass()方法

$("li:eq(2)").toggleClass("another");//重复切换another选择器,已经使用的时候移除,没有使用的时候设置

判断是否有某个样式使用hasClass()方法

$("li:eq(2)").hasClass("another"); //有返回true,没有返回false
//此方法和$("li:eq(2)").is("another");等同
  • 设置和获取HTML、文本和值

主要方法有html()方法、text()方法、val()方法

$("li:eq(2)").html("西瓜"); //设置第二个li元素的内容为西瓜
alert($("li:eq(2)").html());//获取第二个li元素的内容
$("li:eq(2)").text("<b>西瓜</b>");//设置第二个li元素的内容
alert($("li:eq(2)").text());//获取第二个li元素的内容
$("input").val("请输入电子邮箱地址");//设置input元素的value值
alert($("input").val());//获取指定input元素内的value值
$("#single").val("选择3号");//设置下拉框选中项
$(":multiple").val("选择2号","选择3号");//设置下拉列表选中多项
$(":checkbox").val(["check1","check2"]);//设置复选框选中项
$(":radio").val(["radio1"]);//设置单选框选中
  • 遍历节点

children()方法:该方法用于获得匹配元素的子元素集合

alert($("ul").children().size()); //获取ul内子元素的数量

next()和prev()方法:用于获得匹配元素后面(前面)紧邻的同辈元素

$("#city").next(); //获取id为city元素的下一个同级元素
$("#city").prev().prev(); //获取id为city元素的上两个同级元素

parent()方法:用于取得匹配元素的父级元素

$("#city").parent(); //获取id为city元素的父级元素

siblings()方法:该方法用于获取匹配元素前后所有的同辈元素

$("#city").siblings(); //获取id为city元素的前后所有个同级元素

closest()方法:该方法用于取得最近的匹配元素。首先检查当前元素是否匹配,如果匹配则直接返回元素本身,如果不匹配则逐级向上查找父元素,找到则返回,找不到则返回空的对象。

  • CSS-DOM技术简单来说就是对读取和设置style对象的各种属性。

常用的CSS-DOM方法如下
获取和设置某个元素的样式属性

$("p").css("color"); //取得段落的color样式属性的值
$("p").css({"color":"#ff0011","background":"blue"});//将所有段落的字体颜色设置为红色并且背景为蓝色
$("p").css("color":"red");//将所有段落字体设为红色

获取和设置元素的宽度和高度

$("p").height(); //取得段落的高度
$("p").height(20);//将所有段落的高设为20px
$("p").width();//获取所有段落的宽度
$("p").width(20); //将所有段落的宽度设为20px

关于定位元素定位的几个常用方法
scrollTop()和scrollLeft()方法

$("div.demo").scrollTop(300); //设置相对滚动条顶部的偏移
var p=$("p:first");
$("p:last").text("scrollTop:" + p.scrollTop());//获取第一段相对滚动条顶部的偏移
$("div.demo").scrollLeft(300); //设置相对滚动条左侧的偏移
var p=$("p:first");
$("p:last").text("scrollLeft:" + p.scrollLeft());//获取第一段相对滚动条左侧的偏移

offset()方法:获取和设置元素在当前视窗的相对偏移,主要有top和left属性。

$("#dv").offset({top:10,left:30});//设置dv的偏移量
var $offset = $("#dv").offset();
//获取dv相对视窗的偏移量
$("dv").html("left: " + $offset.left + ", top: " + $offset.top);

关于offset()方法的一个漂浮块小程序:

<!--在浏览器中生成一个漂浮的块,遇到边界改变运动方向-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div漂浮运动块</title>
    <style type="text/css">
        div{
            position: absolute;
            width: 150px;
            height: 30px;
            border: 3px solid yellow;
            background-color: cyan;
        }
    </style>
    <script src="scripts/jQuery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function () {
            //利用定时器
            window.setInterval(move,20);
        });

        var leftFlag = 1;
        var topFlag = 1;

        function move() {
            //窗口的宽度和高度
            //当前div的宽度和高度
            var maxLeft = $(window).width() - $("div").width();
            var maxTop = $(window).height() - $("div").height();


            var offset = $("div").offset();
            //当前左偏移量
            var left = offset.left;
            //当前上偏移量
            var top = offset.top;

            if(left >= maxLeft || left <= 0) {
                leftFlag = -leftFlag;
            }

            if(top >= maxTop || top <= 0) {
                topFlag = -topFlag;
            }

            //移动
            left = left + 2*leftFlag;
            top = top + 2*topFlag;
            $("div").offset({"left":left,"top":top});
        }
    </script>
</head>
<body>
<div>这是一个漂浮的块</div>
</body>
</html>

position()方法:获取匹配元素相对父元素的偏移,同样有两个属性top和left。

var p = $("p:first);
var position = p.position();
//获取p元素在父容器中的偏移量
$("p:last").html("left: " + position.left + ", top: " + position.top);

元素节点操作示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery节点操作</title>
    <style type="text/css">
        .li{
            background-color: yellow;
        }

        #div1{
            background-color: yellow;
            width: 200px;
            height: 100px;
        }

        #div2{
            position:absolute;
            left: 50px;
            top: 150px;
            background-color: cyan;
        }
    </style>
    <script src="scripts/jQuery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function () {
            //创建元素  属性,内容一步到位
            var li = $("<li id='meizu'>魅族</li>");

            //============添加元素=======================
            //追加:append()  追加到指定元素的内部
            //$("ul").append(li);
            //appendTo()  作用和append()一样,但是反过来
            //li.appendTo("ul");

            //prepend() prependTo  前置到指定元素的内部
            //$("ul").prepend(li);

            //after()   insertAfter()  //添加到指定元素之后
            //$("li:eq(0)").after(li);  //添加到华为之后
            //before()   insertBefore() //添加到指定元素之前
            //$("li:eq(0)").before(li);  //添加到华为之前

            //=============删除元素=======================

            //给每一个li添加点击事件
            $("li").click(function () {
                //切换class属性,如果没有,则添加,如果有则删除 class=li
                $(this).toggleClass("li");
            })
            //remove()  删除元素,不会保留事件和附加数据,适合删除后不再利用
            /*var li1 = $("li:eq(0)").remove();
            $("ul").append(li1); //从第一个移除,追加到最后一个位置*/

            //detach()  删除元素,保留事件和附加数据,适合删除后再利用
            //var li1 = $("li:eq(0)").detach();
            //$("ul").append(li1);
            //empty()  清空,  清空文本和子元素
            //$("li:last").empty();

            //============复制元素=============================
            //clone()
            //复制vivo到小米后面
            //$("li:eq(2)").clone(true).appendTo("ul"); //true参数表示保留事件和附加数据

            //============替换元素=========================
            //replaceWith()
            //$("li:eq(3)").replaceWith("<li>红米</li>");
            //replaceAll()  作用一样,语法相反
            //$("<li>红米</li>").replaceAll("li:eq(3)");

            //============包裹元素==============================
            //wrap() 每一个选中的li都包裹一个i标签   <i><li>...</li><i>    <i><li>...</li><i>
            //$("li").wrap("<i></i>")
            //wrapAll() //所有li之外包裹一个i标签  <i><li></li><li></li><i>
            //$("li").wrapAll("<i></i>")  //使用<span>标签测试
            //wrapInner()  匹配到元素内部   <li><i>...</i></li>
            //$("li").wrapInner("<i></i>")

            //============属性操作============================
            //attr() 获取属性的值,设置属性的值
            //获取
            //alert($("li:eq(0)").attr("id"));
            //设置
            //$("li:eq(0)").attr("id","hh");
            //alert($("li:eq(0)").attr("id"));
            //设置多个值,使用JSON格式
            //$("li:eq(0)").attr({"id":"hh","name":"hw"});
            //alert($("li:eq(0)").attr("name"));

            //removeAttr()  删除属性
            //$("li:eq(0)").removeAttr("id");

            //prop(),针对单选框复选框,checked,下拉框,列表框选择,selected
            $("option:eq(1)").prop("selected",true);

            //============节点样式操作==========================
            //针对class属性直接提供了对应的方法
            //addClass()  加class属性
            //removeClass()  移除class
            //toggleClass()  切换样式,如果有,则移除,如果没有,则添加
            //hasClass()  是否有对应的样式,是:返回true,没有:false
            //is()  等价于hasClass()

            //在加载后,奇数索引的li背景色都是黄色
            //$("li:odd").addClass("li");

            //============设置和获取HTML、文本和值==================
            //html() ---> 等价于js:innerHTML
            //alert($("ul").html()); //返回内部所有的部分
            //alert($("ul").text()); //只获取内部文本,标签不返回
            //text() ---> 等价于js:innerText
            //$("#info").html("<span>test</span>");
            //$("#info").text("<span>test</span>"); //把<span>当成普通文本
            //val() --> 等价于js:value
            //alert($("select").val());  //获取select选中的值
            //$("select").val("Dalian"); //设置一个值
            //$("select").val(["Dalian","Tianjin"]); //设置多个值,使用数组

            //============变量节点===========================
            //children():所有子元素
            //parent():父元素
            //next():后一个兄弟, prev():前一个兄弟
            //siblings() 所有的兄弟
            //closest() 最近的,从它自己开始查找,如果不匹配,则逐级向上
            //alert($("#span1").closest("div").html());

            //============CSS-DOM===============================
            //$("#span1").css("color","red");  //一个样式属性
            /*$("#span1").css({"color":"red","background-color":"blue"});
            alert($("#span1").css("color"));*/

            //height():元素高度
            //alert($("#div1").height());
            //$("#div1").height(50);
            //width():元素宽度

            //============CSS-DOM  定位==========================
            //scrollTop(),scrollLeft() 设置滚动条的滚动位置,
            //$("select").scrollTop(500); //可能有浏览器不支持

            //offset()  相对当前窗口的偏移,主要有两个属性,left,top
            //获取偏移量
            //alert($("#div2").offset().left + "," + $("#div2").offset().top);
            //设置偏移量
            $("#div2").offset({"left":200,"top":300});
        });
    </script>
</head>
<body>
<h3>常用的手机品牌</h3>
<ul>
    <li id="huawei">华为</li>
    <li>苹果</li>
    <!--<span>test</span>-->  <!--用于测试wrapAll-->
    <li>vivo</li>
    <li>小米</li>
</ul>

<select name="city" size="4" multiple>
    <option value="Beijing" selected>北京</option>
    <option value="Nanjing">南京</option>
    <option value="Tianjin">天津</option>
    <option value="Shijiazhuang">石家庄</option>
    <option value="Dalian">大连</option>
    <option value="Nanchang">南昌</option>
    <option value="Zhengzhou">郑州</option>
</select>

<div id="info"></div>

<div id="div1">
    <div><span id="span1">test</span></div>
</div>

<div id="div2">我是一个div</div>
</body>
</html>
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值