Yang's Blog
所有文章 标签 分类 关于
Yang's Blog

目录

JQuery 笔记

 收录于 前端
   约 14435 字   预计阅读 29 分钟 

常见方法

关键字 简介 示例代码
val 取值 示例代码
html 获取元素内容,如果有子元素，保留标签 示例代码
text 获取元素内容,如果有子元素，不包含子元素标签

取值

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<script src = "https://how2j.cn/study/jquery.min.js"></script>
<script>
	$(function(){
  		$("#b1").click(function(){
        	alert($("#input1").val());                	
      });
  });    
</script>

<button id="b1">取值</button>
<input type = 'text' id = 'input1' value = "hahahahahahah">

获取元素内容,如果有子元素，保留标签

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

<script src="https://how2j.cn/study/jquery.min.js"></script>
  
<script>
$(function(){
   $("#b1").click(function(){
      alert($("#d1").html());
   });
});
  
</script>
  
<button id="b1">获取文本内容</button>
   
<br>
<br>
  
<div id="d1">
这是div的内容
<span>这是div里的span
</span>
</div>

获取元素内容,如果有子元素，不包含子元素标签

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

<script src="https://how2j.cn/study/jquery.min.js"></script>
   
<script>
$(function(){
   $("#b1").click(function(){
      alert($("#d1").text());
   });
});
   
</script>
   
<button id="b1">获取文本内容</button>
    
<br>
<br>
   
<div id="d1">
这是div的内容
<span>这是div里的span
</span>
</div>

CSS

关键字 简介 示例代码
addClass 增加class 示例代码
removeClass 删除class 示例代码
toggleClass 切换class 示例代码
css css函数

增加class

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

<script src="https://how2j.cn/study/jquery.min.js"></script>

<script>
	$(function(){
  $("#b1").click(function(){
    $("#d").addClass("pink");
  });  
});
</script>
<style>
  .pink{
    background-color:pink;
  }
</style>
<div id ='d'>
  
  Hellbhvvdfvdfv
</div>

删除class

 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

<script src="https://how2j.cn/study/jquery.min.js"></script>
 
<script>
$(function(){
   $("#b1").click(function(){
      $("#d").removeClass("pink");
   });
  
});
  
</script>
  <button id="b1">删除背景色</button>
<br>
<br>
 
<style>
.pink{
   background-color:pink;
}
</style>
  
<div id="d" class="pink">
  
Hello JQuery
  
</div>

切换class

通过toggleClass() 切换一个样式中的class 这里的切换，指得是： 如果存在就删除 如果不存在，就添加

 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

<script src="https://how2j.cn/study/jquery.min.js"></script>
  
<script>
$(function(){
   $("#b1").click(function(){
      $("#d").toggleClass("pink");
   });
   
});
   
</script>
  <button id="b1">切换背景色</button>
<br>
<br>
  
<style>
.pink{
   background-color:pink;
}
</style>
   
<div id="d" >
   
Hello JQuery
   
</div>

css函数

通过css函数直接切换样式

css(property,value)

第一个参数是样式属性，第二个参数是样式值

css({p1:v1,p2:v2})

参数是 {} 包含的属性值对。 属性值对之间用 逗号，分割 属性值之间用 冒号 ：分割 属性和值都需要用引号 “

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<script src="https://how2j.cn/study/jquery.min.js"></script>
<script>
  $(function(){
  $("#b1").click(function(){
    $("#d1").css("background-color","pink");
  });
    
    $("#b2").click(function(){
      $("#d2").css({"background-color":"pink","color":"green"});
    });
});
</script>


<button id = "b1">danyi</button>
<button id = "b2">mult</button>
<div id="d1">
  dan yi yang shi
  </div>

<div id = "d2">
  mult yang shi
  </div>

选择器

关键字 简介 示例代码
$(“tagName”) 元素 示例代码
$(“id”) id 示例代码
$(“className”) 类 示例代码
$(“selector1 selector2”) 层级 示例代码
:first :last 最先最后 示例代码
:odd :even 奇偶 示例代码
:hidden :visible 可见性 示例代码
[attribute] [attribute=value] [attribute!=value] [attribute^=value] [attribute$=value] [attribute*=value] 属性 示例代码
:input :button :radio :checkbox :text :file :submit :image :reset 表单对象 示例代码
:enabled :disabled :checked :selected 表单对象属性 示例代码
this 当前元素

元素

$(“tagName”) 根据 标签名 选择所有该标签的元素

 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

<script src="https://how2j.cn/study/jquery.min.js"></script>
  
<script>
$(function(){
   $("#b1").click(function(){
      $("div").addClass("pink");
   });
   
});
   
</script>
  <button id="b1">给所有的div元素增加背景色</button>
<br>
<br>
  
<style>
.pink{
   background-color:pink;
}
</style>
   
<div >
Hello JQuery
</div>
 
<div >
Hello JQuery
</div>
 
<div >
Hello JQuery
</div>

id

$("#id") 根据 id 选择元素 id应该是唯一的，如果id重复，则只会选择第一个。

 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

<script src="https://how2j.cn/study/jquery.min.js"></script>
   
<script>
$(function(){
   $("#b1").click(function(){
      $("#d1").addClass("pink");
   });
    
});
    
</script>
  <button id="b1">给id=d1的div增加背景色</button>
<br>
<br>
   
<style>
.pink{
   background-color:pink;
}
</style>
    
<div id="d1">
Hello JQuery
</div>
  
<div id="d2" >
Hello JQuery
</div>
  
<div  id="d3">
Hello JQuery
</div>

类

$(".className") 根据 class 选择元素

 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

 <script src="https://how2j.cn/study/jquery.min.js"></script>
   
<script>
$(function(){
   $("#b1").click(function(){
      $(".d").addClass("pink");
   });
    
});
    
</script>
  <button id="b1">给class='d'的div增加背景色</button>
<br>
<br>
   
<style>
.pink{
   background-color:pink;
}
</style>
    
<div class="d">
Hello JQuery
</div>
  
<div class="d" >
Hello JQuery
</div>
  
<div  >
Hello JQuery
</div>

层级

$(“selector1 selector2”) 选择 selector1下的selector2元素 。 在本例中 选择id=d3的div下的span元素

 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

<script src="https://how2j.cn/study/jquery.min.js"></script>
    
<script>
$(function(){
   $("#b1").click(function(){
      $("div#d3 span").addClass("pink");
   });
     
});
     
</script>
  <button id="b1">给id='d3'的div 下的 span 增加背景色</button>
<br>
<br>
    
<style>
.pink{
   background-color:pink;
}
</style>
     
<div class="d">
  <span>Hello JQuery</span>
    
</div>
   
<div class="d" >
  <span>Hello JQuery</span>
</div>
   
<div id="d3" >
  <span>Hello JQuery</span>
</div>

最先最后

$(selector:first) 满足选择器条件的第一个元素 $(selector:last) 满足选择器条件的最后一个元素

 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

<script src="https://how2j.cn/study/jquery.min.js"></script>
     
<script>
$(function(){
   $("#b1").click(function(){
      $("div:first").addClass("pink");
   });
      
   $("#b2").click(function(){
      $("div:last").addClass("pink");
   });
 
});
      
</script>
  <button id="b1">第一个增加背景色</button>
  <button id="b2">最后一个增加背景色</button>
<br>
<br>
     
<style>
.pink{
   background-color:pink;
}
</style>
      
<div>
  <span>Hello JQuery</span>
     
</div>
    
<div >
  <span>Hello JQuery</span>
</div>
    
<div >
  <span>Hello JQuery</span>
</div>

奇偶

$(selector:odd) 满足选择器条件的奇数元素 $(selector:even) 满足选择器条件的偶数元素 因为是基零的，所以第一排的下标其实是0(是偶数)

 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

<script src="https://how2j.cn/study/jquery.min.js"></script>
      
<script>
$(function(){
   $("#b1").click(function(){
      $("div:odd").toggleClass("pink");
   });
       
   $("#b2").click(function(){
      $("div:even").toggleClass("green");
   });
  
});
       
</script>
  <button id="b1">切换奇数背景色</button>
  <button id="b2">切换偶数背景色</button>
<br>
<br>
      
<style>
.pink{
   background-color:pink;
}
.green{
   background-color:green;
}
</style>
       
<div>
  <span>Hello JQuery 0</span>
      
</div>
 
<div>
  <span>Hello JQuery 1</span>
      
</div>
     
<div >
  <span>Hello JQuery 2</span>
</div>
     
<div >
  <span>Hello JQuery 3</span>
</div>
 
<div >
  <span>Hello JQuery 4</span>
</div>
 
</div>
     
<div >
  <span>Hello JQuery 5</span>
</div>
     
<div >
  <span>Hello JQuery 6</span>
</div>

可见性

$(selector:hidden) 满足选择器条件的不可见的元素 $(selector:visible) 满足选择器条件的可见的元素 注； div:visible 和**div :visible(有空格)**是不同的意思 div:visible 表示选中可见的div div :visible(有空格) 表示选中div下可见的元素

 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

<script src="https://how2j.cn/study/jquery.min.js"></script>
        
<script>
$(function(){
   $("#b1").click(function(){
     $("div:visible").hide();
   });
   $("#b2").click(function(){
      $("div:hidden").show();     
   });
});
         
</script>
  <button id="b1">隐藏可见的</button>
  <button id="b2">显示不可见的</button>
  
<br>
<br>
        
<style>
.pink{
   background-color:pink;
}
  
</style>
         
<div>
  <span>Hello JQuery 1</span>
        
</div>
       
<div >
  <span>Hello JQuery 2</span>
</div>
       
<div >
  <span>Hello JQuery 3</span>
</div>
   
<div >
  <span >Hello JQuery 4</span>
</div>
   
</div>
       
<div >
  <span>Hello JQuery 5</span>
</div>
       
<div >
  <span>Hello JQuery 6</span>
</div>

属性

$(selector**[attribute]**) 满足选择器条件的**有某属性的**元素 $(selector**[attribute=value]**) 满足选择器条件的属性**等于value**的元素 $(selector**[attribute!=value]**) 满足选择器条件的属性**不等于value**的元素 $(selector**[attribute^=value]**) 满足选择器条件的属性**以value开头**的元素 $(selector**[attribute$=value]**) 满足选择器条件的属性**以value结尾**的元素 $(selector**[attribute*=value]**) 满足选择器条件的**属性包含value**的元素

注： 一般不要使用[class=className] 而应该使用.className 因为使用$("[class=‘className’]") .toggleClass(“anotherClassName”) 会导致class变成className anotherClassName,再次 使用 [class=className] 就无法选中了 而.className没有这个问题。

 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
61
62
63
64
65
66
67
68
69

<script src="https://how2j.cn/study/jquery.min.js"></script>
       
<script>
$(function(){
   $("#b1").click(function(){
      $("div[id]").toggleClass("border");
   });
   $("#b2").click(function(){
      $("div[id='pink']").toggleClass("border");
   });
   $("#b3").click(function(){
      $("div[id!='pink']").toggleClass("border");
   });
   $("#b4").click(function(){
      $("div[id^='p']").toggleClass("border");
   });
   $("#b5").click(function(){
      $("div[id$='k']").toggleClass("border");
   });
   $("#b6").click(function(){
      $("div[id*='ee']").toggleClass("border");
   });
 
});
        
</script>
  <button id="b1">给有id属性的div切换边框</button>
  <button id="b2">给id=pink的div切换边框</button>
  <button id="b3">给有id!=pink属性的div切换边框</button>
  <button id="b4">给有id以p开头的div切换边框</button>
  <button id="b5">给有id以k结尾的div切换边框</button>
  <button id="b6">给有id包含ee的div切换边框</button>
 
<br>
<br>
       
<style>
.pink{
   background-color:pink;
}
.green{
   background-color:green;
}
.border{
   border: 1px blue solid;
    
}
 
button{
   margin-top:10px;
   display:block;
}
 
div{
  margin:10px;
}
</style>
        
<div id="pink">
    id=pink的div
</div>
      
<div id="green">
  id=green的div
</div>
      
<div >
   没有id的div
</div>

表单对象

表单对象选择器 指的是选中form下会出现的输入元素 :input 会选择所有的输入元素，不仅仅是input标签开始的那些，还包括textarea,select和button :button 会选择type=button的input元素和button元素 :radio 会选择单选框 :checkbox会选择复选框 :text会选择文本框，但是不会选择文本域 :submit会选择提交按钮 :image会选择图片型提交按钮 :reset会选择重置按钮

注意: 第7行

$(“td[rowspan!=13] “+value).toggle(500);

$(“td[rowspan!=13] 后面有一个空格，表示层级选择器，如果没有就会出错 toggle(500) 表示在显示与隐藏之间来回切换，生效时间是500毫秒

注： :submit会把

更新于 2020-08-21
阅读原始文档
 JQuery
返回 | 主页