jQuery第三天

最新推荐文章于 2024-06-10 17:18:33 发布

狗都不干机械

最新推荐文章于 2024-06-10 17:18:33 发布

阅读量68

点赞数

文章标签： jquery js html

本文链接：https://blog.csdn.net/I_love_bc/article/details/116033060

版权

jQuery第三天

一.jQuery属性操作

1.1设置或获取元素固有属性值prop()

所谓元素固有属性就是元素本身自带的属性,比如 a元素里面的href , 比如input元素里面的type。

获取属性语法
prop(“属性’”)
设置属性语法
prop(“属性”, ’ ‘属性值’ )

1.2设置或获取元素自定义属性值attr()

用户自己给元素添加的属性,我们称为自定义属性。比如给div添加index=“1"。

获取属性语法
attr(“属性”) // 类似原生getAttribute()
设置属性语法
attr(“属性”, “属性值”) // 类似原生setAttribute()
改方法也可以获取H5自定义属性

1.3数据缓存data()

data()方法可以在指定的元素上存取数据,并不会修改DOM元素结构。一旦页面刷新 ,之前存放的数据都将被移除。

附加数据语法
data(“name”’,'value") // 向被选元素附加数据
获取数据语法
date("‘name’")//向被选元素获取数据
同时,还可以读取HTML5自定义属性data-index ,得到的是数字型

二. jQuery内容文本值

主要针对元素的内容还有表单的值操作。

1.普通元素内容html0) (相当于原生inner HTML)

html()//获取元素的内容
html("内容") // 设置元素的内容

2.普通元素文本内容text( (相当与原生 innerText)

text()//获取元素的内容
text("内容") // 设置元素的内容

3.表单的值val() (相当于原生value)

val()//获取元素的内容
val("内容") // 设置元素的内容

三. jQuery元素操作

主要是遍历、创建、添加、删除元素操作。

3.1遍历元素

jQuery隐式迭代是对同一元素做了同样的操作。如果想要给同一类元素做不同操作,就需要用到遍历。
语法1：

$ ("div") . each (function (index, domEle) { XXX; } )

each()方法遍历匹配的每一个元愫。主要用DOM处理。each 每一个
里面的回调函数有2个参数: index 每个元素的索引号; domEle是每个DOM元素对象,不是jquery对象
所以要想使用jquery方法,需要给这个dom元素转换为jquery对象$(domEle)

语法2 :

$.each (object , function (index, element) { XXX;} )

$.each0方法可用于遍历任何对象。主要用于数据处理,比如数组,对象
里面的函数有2个参数: index 是每个元素的索引号; element 遍历内容

3.2创建元素

语法:

$("<li></li>");

动态的创建了一个li

3.3添加元素

内部添加

element.append("内容)

把内容放入匹配元素内部c最后面,类似原生appendChild.

element.prepend("内容")

把内容放入匹配元素内部最前面。

外部添加

element.after("内容")
//把内容放入目标元素后面
element.before("内容' ") // 把内容放入目标元素前面

①内部添加元素,生成之后,它们是父子关系。
②外部添加元素,生成之后,他们是兄弟关系。

3.4删除元素

element.remove() // 删除匹配的元素(本身)
element.empty() // 删除匹配的元素集合中所有的子节点
element.html("") // 清空匹配的元素内容

四. jQuery尺寸、位置操作

4.1 jQuery 尺寸

●以上参数为空,则是获取相应值,返回的是数字型。
●如果参数为数字,则是修改相应值。
●参数可以不必写单位。

4.2 jQuery位置

位置主要有三个: offset()、 position()、 scrollTop()/scrollLeft()
1. offset(设置或获取元素偏移
①offset() 方法设置或返回被选元素相对于文档的偏移坐标,跟父级没有关系。
②该方法有2个属性left、top。 offset().top 用于获取距离文档顶部的距离, offset().left 用于获取距离文档左侧的距离。
③可以设置素的偏移: offset({ top: 10, left: 30 });

2. position获取元素偏移
①position() 方法用于返回被选元素相对于带有定位的父级偏移坐标,如果父级都没有定位,则以文档为准。

3. scrollTop0)/scrollLeft(设置或获取元素被卷去的头部和左侧
①scrollTop()方法设置或返回被选元素被卷去的头部。

五.案例

1.复选框

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <script>
        $(function () {
            $("#all").change(function () {
                $("#dange input").prop("checked", $("#all").prop("checked"))
            })
            $("#dange input").change(function () {
                if ($("#dange input:checked").length === $("#dange input").length) {
                    $("#all").prop("checked", true)
                } else {
                    $("#all").prop("checked", false)
                }
            })
        })
    </script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            margin: 100px auto 0;
            width: 300px;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid rgb(194, 192, 192);
            width: 300px;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="all" />
                    </th>
                    <th>商品</th>
                    <th>价钱</th>
                </tr>
            </thead>
            <tbody id="dange">
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPhone8</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Pro</td>
                    <td>5000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Air</td>
                    <td>2000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>Apple Watch</td>
                    <td>2000</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>

狗都不干机械

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery第三天

jQuery第三天一.jQuery属性操作1.1设置或获取元素固有属性值prop()所谓元素固有属性就是元素本身自带的属性,比如 a元素里面的href , 比如input元素里面的type。获取属性语法prop(“属性’”)设置属性语法prop(“属性”, ’ ‘属性值’ )5.2设置或获取元素自定义属性值attr()用户自己给元素添加的属性,我们称为自定义属性。比如给div添加index=“1"。获取属性语法attr(“属性”) // 类似原生getAttribute()设
复制链接

扫一扫