jquery——dom元素

最新推荐文章于 2022-09-13 09:56:11 发布

打马御街前

最新推荐文章于 2022-09-13 09:56:11 发布

阅读量283

点赞数 2

本文链接：https://blog.csdn.net/Meatball_MMY/article/details/95660892

版权

一、jquery简介

Jquery：是一个轻量级的js函数库，是开源的框架库。
1.所需基础知识：HTML和css
2.包括功能：（1）html元素选取
（2）html元素操作
（3）html事件函数
（4）html DOM遍历和修改
（5）css操作
（6）js特效和动画
（7）AJAX
（8）大量插件
3.引入方式：和webjs引入方式一致
<script src=""></script>（其中引入jquery库）
4.注意：（1）js和jquery可以混合使用
（2）可以写加载事件也可以不写
（3）$:为顶级变量，类似jquery对象

二、DOM元素

1.获取DOM元素方法

（1）*获取所有对象元素
（2）tagname获取
（3）id获取
（4）class获取
（5）>获取
（6）空格获取
（7）混合使用

代码如下：

<body>
<button id="btn" class="btnlist">按钮</button>
<button id="btn1">按钮</button>
<script src="js/jquery-1.9.1.js"></script>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li id="li4">4</li>
    <li>5</li>
    <li>6</li>
</ul>
<input type="checkbox" checked/>篮球
<script>
    $(function () {
        console.log($("*"));//* 指获取所有对象元素
        console.log($("button"));//tagName获取dom元素
        console.log($("#btn"));//id获取dom元素
        console.log($(".btnlist"));//class获取dom元素
        console.log($("body>button"));//>获取dom元素
        console.log($("body button"));//空格获取dom元素
        console.log($("body>button#btn"));//混合使用
    });
</script>
</body>

注意： jquery选择器：可使用css1、css2、css3选择器来获取元素

选择器：

：focus 获得焦点元素
first、last:获取第一个或最后一个
：not 除了not的那一项，获取其他的
：even 偶数获取元素
：odd 奇数获取元素
：eq 根据索引获取元素
：lt/:gt 获取索引小于/大于某一个数的元素
：has 获取当前的元素里面必须的谁
：parent 获取的元素必须有子集元素或者文本
：nth-child(3) 根据序号获取元素
checked 匹配checkbox radio 被选择元素等。

<script>
    $(function () {
        console.log($("#btn,#btn1"));
        //获取当前元素的子元素  第一个或者最后一个元素
        console.log($("ul>li:first"));
        console.log($("ul>li:last"));
        console.log($("ul>li:last-child"));
        console.log($("ul>li:first-child"));
        //:not  除了谁  获取其他的
        console.log($("ul>li:not(#li4)"));
        //:even  偶数获取元素
        console.log($("ul>li:even"));
        //:odd  奇数获取
        console.log($("ul>li:odd"));
        //:eq  根据索引来获取元素
        console.log($("li:eq(0)"));
        //:lt   :gt   获取小于或者大于
        console.log($("li:lt(3)"));
        console.log($("li:gt(3)"));
        //:focus  获取焦点元素  :header 获取h标签
        //:has  获取当前的元素里面必须的有谁
        console.log($("ul:has(#li4)"));
        //:parent  获取的元素必须有子集  元素 或者文本
        console.log($("li#li4:parent"));
        //属性选择器
        console.log($("li[id][class]"));
        console.log($("li[id='li4']"));
        //:nth-child(3)  根据序号获取元素
        console.log($("ul>li:nth-child(3)"));
        //:checked  匹配checkbox  radio  被选择元素
        console.log($("input:checked"));
    });
</script>

2.动态创建DOM元素

创建的元素显示到界面——appendchild

jquery追加包裹方法：

追加方法：

（1）append appendTo 追加到当前元素的内容之后

（2）prepend prependTo 追加到当前元素的内容之前

（3）after before 追加到当前元素之后或之前

（4）insertafter insertbefore 追加到当前元素之后或之前

包裹的方法

（1）wrap 包裹当前匹配元素

（2）unwrap * unwrap 移除当前匹配元素的包裹元素

（3）wrapAll 将所有匹配元素用一个包裹

（4）wrapInner 用标签包裹匹配元素的内容 * * * replaceWith 用元素替换匹配元素 * replaceAll 写法颠倒

清空当前匹配元素的所有内容 empty
remove() 移除元素

动态创建代码如下：

<script>
    $(function () {
        var r = "<div></div>";
        var str = document.createElement("div");
        var s = $("<div></div>");
        console.log(str, s);
        s.addClass("txt");
        $("button").wrapAll(s);
        $("button").wrapInner("<span></span>");
});
</script>

3.操作DOM元素

jquery操作dom元素的属性和方法：
jquery可以进行隐式迭代
（1）设置元素的文本值innerHTML、innerTEXT
html/text:获取或设置元素的文本或HTML值
代码示例中有
（2）根据索引获取元素eq(index)
（3）获取或设置元素值val()
（4）给元素添加类addClass()
（5）给元素移除类名称removeClass()
（6）类别的切换toggleClass()

设置属性的方法：

（1）attr("id","user")//设置属性
id:参数

user:值

remove(id)/remove(user) // 移除属性

一次性设置多个属性：

$("input").attr({
id:
"data-list"：
})
注意：一次性可以设置多个属性，但一次性只能获取一个属性

（2）prop(name|properties|key,value|fn)设置属性
name:属性名称

properties：属性名/值对对象

key,function(index,attr)

属性名称
返回属性值的函数，第一个参数作为当前元素的索引值，第二个参数为原先的属性值

注意：jquery操作css:可一次性设置多个属性，不可一次性获取多个属性。
对象.style

代码如下：

        //获取或设置元素值   val()
        $("input").val("321");

        //给元素添加类  addClass
        $("input").addClass("txt txt1");
        //给元素移除类名称 removeClass
        $("input").removeClass("txt1");

        //类别的切换 toggleClass  有则删没有则加
        $("input").toggleClass("txt");

        //设置属性的方法 attr 参数1  名称  参数2  值  设置或者获取
        $("input").attr("id", "user");
        console.log($("input").attr("id"));
        $("input").attr("data-user", "maodou");
        console.log($("input").attr("data-user"));

        //移除属性
        $("input").removeAttr("id");
        $("input").removeAttr("data-user");
        $("input").removeAttr("class");

        // 一次性设置多个属性
        $("input").attr({
            id: "username",
            "data-list": "list"
        });

        //prop  设置属性  获取
        console.log($("input[type=checkbox]").prop("checked"));
        //$("input[type=checkbox]").prop("checked", true);
        $("input[type=checkbox]").prop("checked", function (index, value) {
            console.log(index);
            return !value;
        });
        $("input[type=checkbox]").prop("id", "checked");
        $("input[type=checkbox]").removeProp("id");

        //css()  设置或者获取元素的样式  设置一个或者多个
        //$("#block").css("border","1px solid black");
        $("#block").css({
            width: "100px",
            height: "100px",
            border: "1px solid black",
            backgroundColor: "red"
        });
        console.log($("#block").css("backgroundColor"));
        console.log($("#block").css("border"));

        //offest  //获取当前的相对偏移量   返回值是对象  left top
        console.log($("#block").offset());
        console.log($("#block").position());
        //scrollTop  当前元素 相对滚动条到顶部的距离 （谁有滚动条就谁）  y
        //scrollLeft 当前元素 相对滚动条到左边的距离 （谁有滚动条就谁）  x
        console.log($(window).scrollTop());

打马御街前

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery——dom元素

一、jquery简介 Jquery：是一个轻量级的js函数库，是开源的框架库。1.所需基础知识：HTML和css2.包括功能：（1）html元素选取（2）html元素操作（3）html事件函数（4）html DOM遍历和修改 ...
复制链接

扫一扫