前端学习-jQuery-2

老师的博客地址：https://www.cnblogs.com/yuanchenqi/articles/6070667.html

day44

属性操作：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
--------------------------属性
$("").attr();取属性值
 
$("").removeAttr();
$("").prop();
$("").removeProp();
--------------------------CSS类
$("").addClass(class|fn)
$("").removeClass([class|fn])
--------------------------HTML代码/文本/值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])
---------------------------
$("").css("color","red")  修改属性值
 
 
关于属性操作，固有属性用prop,自定义属性用attr

　Jquery 遍历：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="jquery-3.1.1.js"></script>
 
<p>000</p>
<p>111</p>
<p>222</p>
 
<script>
    arr=[11,22,33];
//    方式一
//    $.each(arr,function (x,y) {
//        console.log(x);
//        console.log(y)
//    })
    //方式2
    $("p").each(function () {
        console.log($(this))
    })
     
</script>
 
</body>
</html>

　prop 以及each 的实例正反选：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="jquery-3.1.1.js"></script>
 
 
     <button onclick="selectall();">全选</button>
     <button onclick="cancel();">取消</button>
     <button onclick="reverse();">反选</button>
 
     <table border="1">
         <tr>
             <td><input type="checkbox"></td>
             <td>111</td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td>222</td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td>333</td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td>444</td>
         </tr>
     </table>
 
     <script>
         // 这里我们使用each遍历input标签，因为这个input是html自带元素，$(this)当前遍历对象，所以这里我们用prop方法，我们把checked设置为true
         function selectall() {
             $("input").each(function () {
                 $(this).prop("checked",true)
             })
         }
         function cancel() {
             $("input").each(function () {
                 $(this).prop("checked",false)
             })
         }
         function reverse() {
             $("input").each(function () {
                 if ($(this).prop("checked")){
                     $(this).prop("checked",false)
                 }
                 else {
                     $(this).prop("checked",true)
                 }
             })
 
         }
     </script>
 
</body>
</html>

 

 

文档处理：

内部插入标签

外部插入标签

替换

删除

复制

 

posted @   BigBao的博客  阅读(198)  评论(0)  编辑  收藏  举报
编辑推荐：
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架
点击右上角即可分享
微信分享提示
AI IDE Trae