jQuery常见函数------jQuery学习之路6

最新推荐文章于 2024-07-01 17:49:35 发布

dragoned_123

最新推荐文章于 2024-07-01 17:49:35 发布

阅读量155

点赞数

分类专栏： jQuery 文章标签： jquery javascript js

本文链接：https://blog.csdn.net/dragoned_123/article/details/107671535

版权

jQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

jQuery常见函数

文章目录

jQuery常见函数
常用的函数

常用的函数

<input type="text" value="文本框1">
<input type="text" value="文本框2" disabled>
<input type="text" value="文本框3">
<br>
<div id="div3">div第一个文本</div>
<div id="div4">div第二个文本</div>
<div>div第三文本</div>
<br>
<select id="s1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<button id="b1">清除整个下拉列表</button>
<button id="b2">清除整个下拉列表之列表</button>
<button id="b3"><B>添加下拉列表之列表</B></button>
<button id="b4">each</button>

效果

在这里插入图片描述

val()

无参方式：$(选择器).val()

获取第一个DOM对象的value属性的值
```
var in1 = $(":text:disabled");
alert(in1.val());
```
有参方式：$(选择器).val(值)

更改整个jQuery对象数组里面DOM对象的value值
```
var in2 = $(":text:enabled");
in2.val("enabled");
```

text()

无参方式：$(选择器).text()

把包含的所有DOM对象的文字形成字符串返回
```
var in3 = $("div");
alert(in3.text());
```
有参方式：$(选择器).text(值)

把包含的所有DOM对象进行文字设值
```
in3.text("统一之后");
```

attr()

无参方式：$(选择器).attr(“属性名”)

获取第一个DOM对象的属性值
```
alert(in3.attr("id"));
```
有参方式：$(选择器).attr(“属性名”,“值”)

把包含的所有DOM对象的属性进行设值
```
in3.attr("id","d3");
```

remove()

$(选择器).remove()

将数组中所有的DOM对象和子对象全部删除
```
$("#b1").click(function () {
    $("#s1").remove();
});
```

empty()

$(选择器).empty()

将数组中所有的DOM的子对象删除
```
$("#b2").click(function () {
    $("#s1").empty();
});
```

append()

$(选择器).append(“

文字

”)

为数组中所有的DOM对象添加子对象

$("#b3").click(function () {
    $("#s1").append("<option>1</option><option>2</option><option>3</option>");
});

html()

无参：$(选择器).html()

获取第一个DOM对象的innerHTML内容
```
alert($("#b3").html());
```
有参：$(选择器).html(值)

设置DOM数组所有的元素内容
```
$("#b3").html("添加下拉列表之列表");
```

each()

$.each(遍历对象,function(index,element){处理函数})

jQuery对象.each(function(index,element){处理函数})

$("#b4").click(function () {
    var l = [1,2,3];
    $.each(l,function (i,n) {
        console.log(i+","+n);
    })
    in3.each(function (index,element) {
        console.log(index+","+element.innerText);
    })
});

index：数组的下标

element：数组的对象

完整源码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单过滤器</title>
    <style>
        body{
            margin-top: 250px;
            margin-left: 400px;
        }
        div{
            background-color: rebeccapurple;
            height: 100px;
            width: 100px;
            float: left;
        }
        #d3{
            background-color: #995333;
            height: 100px;
            width: 100px;
            float: left;
        }
    </style>
    <script src="js/jquery-3.5.1.js"></script>
</head>
<body>
<input type="text" value="文本框1">
<input type="text" value="文本框2" disabled>
<input type="text" value="文本框3">
<br>
<div id="div3">div第一个文本</div>
<div id="div4">div第二个文本</div>
<div>div第三文本</div>
<br>
<select id="s1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<button id="b1">清除整个下拉列表</button>
<button id="b2">清除整个下拉列表之列表</button>
<button id="b3"><B>添加下拉列表之列表</B></button>
<button id="b4">each</button>
<script>
    var in3 = $("div");
    alert(in3.text());
    in3.text("统一之后");
    alert(in3.attr("id"));
    in3.attr("id","d3");
    var in1 = $(":text:disabled");
    alert(in1.val());
    var in2 = $(":text:enabled");
    in2.val("enabled");
    $("#b1").click(function () {
        $("#s1").remove();
    });
    $("#b2").click(function () {
        $("#s1").empty();
    });
    $("#b3").click(function () {
        $("#s1").append("<option>1</option><option>2</option><option>3</option>");
        alert($("#b3").html());
        $("#b3").html("添加下拉列表之列表");
    });

    $("#b4").click(function () {
        var l = [1,2,3];
        $.each(l,function (i,n) {
            console.log(i+","+n);
        })
        in3.each(function (index,element) {
            console.log(index+","+element.innerText);
        })
    });
</script>
</body>
</html>

当然你要学习更多的话可以去W3Cschool

[https://www.w3school.com.cn/jquery/jquery_dom_get.asp]:

dragoned_123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery常见函数------jQuery学习之路6

jQuery常见函数文章目录jQuery常见函数常用的函数效果val()text()attr()remove()empty()append()html()each()完整源码常用的函数<input type="text" value="文本框1"><input type="text" value="文本框2" disabled><input type="text" value="文本框3"><br><div id="div3">div
复制链接

扫一扫