微信扫一扫打赏支持

jquery-6 jquery属性选择器

jquery-6 jquery属性选择器

一、总结

一句话总结：jquery操作就是选择器加jquery对象的各种方法。

 

1、大量操作样式用什么方式？

大批量样式通过加类和减类完成

 

2、jquery中大量属性值设置用什么方式？

推荐json

$().css({})

 

3、如何将一个input文本的值赋给另一个input文本？

找到两个input，然后用val()方法

31     val=$('input').eq(0).val();
32 
33     $('input').eq(1).val(val);

 

4、如何将一个标签里面的其它标签都赋值给另外标签？

用html()方法

31 $('button').click(function(){
32     val=$('.d1').html();
33     $('.d2').html(val);
34 });

 

5、如何给元素增加一个类？

addClass()方法

27 $('img').mouseenter(function(){
28     $(this).addClass('img');
29 });

 

 

二、jquery属性选择器

1、相关知识

属性:
1.属性
attr();
attr({});

2.CSS类
addClass();
removeClass();
toggleClass();

3.HTML代码
html();
html(val);

4.文本
text();
text(val);

5.值
val();
val(val);

 

2、代码

val表单元素获取和赋值

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10         
11         .d1,.d2{
12             height:300px;
13             background: #ccc;
14         }        
15     </style>
16     <script src="jquery.js"></script>
17 </head>
18 <body>
19     <p>
20         <input type="text">
21     </p>
22     <p>
23         <button>>></button>
24     </p>
25     <p>
26         <input type="text">
27     </p>
28 </body>
29 <script>
30 $('button').click(function(){
31     val=$('input').eq(0).val();
32 
33     $('input').eq(1).val(val);
34 });
35 </script>
36 </html>

html取值和赋值

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10         
11         .d1,.d2{
12             height:300px;
13             background: #ccc;
14         }        
15     </style>
16     <script src="jquery.js"></script>
17 </head>
18 <body>
19     <div class='d1'>
20         <img src="a.png">
21         <img src="a.png">
22         <img src="a.png">
23         <img src="a.png">
24     </div>
25     <button>>></button>
26     <div class="d2">
27         
28     </div>
29 </body>
30 <script>
31 $('button').click(function(){
32     val=$('.d1').html();
33     $('.d2').html(val);
34 });
35 </script>
36 </html>

toggleClass切换类

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10         .div1{
11             background: #ccc;
12             cursor: pointer;
13         }
14         
15         .img{
16             background:#ccc;
17             border-radius:256px;
18             transform:scale(1.2,1.2);
19         }
20     </style>
21     <script src="jquery.js"></script>
22 </head>
23 <body>
24     <img src="a.png">
25 </body>
26 <script>
27 $('img').mouseenter(function(){
28     $(this).toggleClass('img');
29 });
30 
31 $('img').mouseleave(function(){
32     $(this).toggleClass('img');
33 });
34 </script>
35 </html>

attr获取属性值

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10         .div1{
11             background: #ccc;
12             cursor: pointer;
13         }
14     </style>
15     <script src="jquery.js"></script>
16 </head>
17 <body>
18     <img src="a.png">
19 </body>
20 <script>
21 $('img').click(function(){
22     alert($(this).attr('src'));
23 });
24 </script>
25 </html>

 

 

 

 

 

 

 

 
 
posted @ 2018-06-23 11:26  范仁义  阅读(427)  评论(0)  编辑  收藏  举报