jquery-6 jquery属性选择器

时间：2023-03-09 17:21:04
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表单元素获取和赋值

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

         }

         .d1,.d2{

             height:300px;

             background: #ccc;

         }

     </style>

     <script src="jquery.js"></script>

 </head>

 <body>

     <p>

         <input type="text">

     </p>

     <p>

         <button>>></button>

     </p>

     <p>

         <input type="text">

     </p>

 </body>

 <script>

 $('button').click(function(){

     val=$('input').eq(0).val();

     $('input').eq(1).val(val);

 });

 </script>

 </html>

html取值和赋值

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

         }

         .d1,.d2{

             height:300px;

             background: #ccc;

         }

     </style>

     <script src="jquery.js"></script>

 </head>

 <body>

     <div class='d1'>

         <img src="a.png">

         <img src="a.png">

         <img src="a.png">

         <img src="a.png">

     </div>

     <button>>></button>

     <div class="d2">

     </div>

 </body>

 <script>

 $('button').click(function(){

     val=$('.d1').html();

     $('.d2').html(val);

 });

 </script>

 </html>

toggleClass切换类

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

         }

         .div1{

             background: #ccc;

             cursor: pointer;

         }

         .img{

             background:#ccc;

             border-radius:256px;

             transform:scale(1.2,1.2);

         }

     </style>

     <script src="jquery.js"></script>

 </head>

 <body>

     <img src="a.png">

 </body>

 <script>

 $('img').mouseenter(function(){

     $(this).toggleClass('img');

 });

 $('img').mouseleave(function(){

     $(this).toggleClass('img');

 });

 </script>

 </html>

attr获取属性值

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

         }

         .div1{

             background: #ccc;

             cursor: pointer;

         }

     </style>

     <script src="jquery.js"></script>

 </head>

 <body>

     <img src="a.png">

 </body>

 <script>

 $('img').click(function(){

     alert($(this).attr('src'));

 });

 </script>

 </html>

相关文章