jQuery 标签操作 样式操作

样式操作

样式类操作

1 addClass();// 添加指定的CSS类名。
2 removeClass();// 移除指定的CSS类名。
3 hasClass();// 判断样式存不存在
4 toggleClass();// 切换CSS类名,如果有就移除,如果没有就添加。
1 示例代码
2     $('.c1').addClass('c2');
3     $('.c1').addClass('c2');
4     $('.c1').hasClass('c2');
5     $('.c1').toggleClass('c2');

css样式

1 原生js
2     标签.style.color = 'red';
3 jquery
4     $('.c1').css('background-color','red');  
5     同时设置多个css样式
6     $('.c1').css({'background-color':'yellow','width':'200px'})

位置操作

1 查看位置
2 $('.c2').position();  //查看相对位置 
3     {top: 20, left: 20}
4 $('.c2').offset();    //查看距离窗口左上角的绝对位置
5     {top: 28, left: 28}
6 设置位置
7     $('.c2').offset({'top':'20','left':'40'});

jQuery绑定点击事件的写法

1     原生js绑定点击事件
2     // $('.c1')[0].onclick = function () {
3     //     this.style.backgroundColor = 'green';
4     // }
5 jquery绑定点击事件
6     $('.c1').click(function () {
7         $(this).css('background-color','green');
8     })

点击事件和滚动事件的示例代码

复制代码
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .c1{
 8             background-color: red;
 9             height: 100px;
10             width: 100px;
11         }
12         .c2{
13             background-color: green;
14             height: 1000px;
15             width: 100px;
16         }
17         .c3{
18             background-color: blue;
19             height: 1000px;
20             width: 100px;
21         }
22         .s1{
23             position: fixed;
24             left:20px;
25             bottom: 20px;
26             height: 40px;
27             width: 80px;
28             background-color: purple;
29             line-height: 40px;
30             text-align: center;
31 
32         }
33         .s1 a{
34             color: white;
35             font-size: 14px;
36             text-decoration: none;
37         }
38         .hide{
39             display: none;
40         }
41 
42 
43     </style>
44 </head>
45 <body>
46 <!--<a name="top">这里是顶部</a>-->
47 <!--<a>这里是顶部</a>-->
48 <span>顶部位置</span>
49 <div class="c1"></div>
50 
51 <button class="change-postion">走你</button>
52 
53 <div class="c2"></div>
54 <div class="c3"></div>
55 
56 <span class="s1 hide">
57     <!--<a href="#top">返回顶部</a>-->
58     <span>返回顶部</span>
59 
60 </span>
61 
62 
63 <script src="jquery.js"></script>
64 <script>
65     //点击事件来改变标签位置
66     $('.change-postion').click(function () {
67         $('.c1').offset({top:200,left:200});
68     });
69     
70     //滚动事件,监听滚动距离来显示或者隐藏标签
71     $(window).scroll(function () {
72         console.log($(window).scrollTop());
73         if ($(window).scrollTop() >=200){
74             $('.s1').removeClass('hide');
75         }else {
76             $('.s1').addClass('hide');
77         }
78     });
79     
80     // 回到顶部,scrollTop设置值
81     $('.s1').click(function () {
82         $(window).scrollTop(0);
83     })
84 
85 </script>
86 
87 </body>
88 </html>
复制代码

尺寸

复制代码
 1 $('.c1').height();  //content 高度
 2 $('.c1').width();   //content 宽度
 3 $('.c1').innerHeight();//content高度+padding高度
 4 $('.c1').innerWidth(); //content宽度+padding宽度
 5 $('.c1').outerHeight();//content高度+padding高度 + border高度
 6 $('.c1').outerWidth();//content宽度+padding宽度+ border宽度
 7 
 8 
 9 示例:
10 <!DOCTYPE html>
11 <html lang="en">
12 <head>
13     <meta charset="UTF-8">
14     <title>Title</title>
15     <style>
16         .c1{
17             width: 100px;
18             height: 100px;
19             border: 2px solid red;
20             background-color: green;
21             padding: 20px 30px;
22         }
23     </style>
24 </head>
25 <body>
26 <div class="c1"></div>
27 
28 <script src="jquery.js"></script>
29 </body>
30 </html>
复制代码

文本操作

1 html()//取得第一个匹配元素的html内容,包含标签内容
2 html(val)//设置所有匹配元素的html内容,识别标签,能够表现出标签的效果
3 
4 text()// 取得所有匹配元素的内容,只有文本内容,没有标签
5 text(val)//设置所有匹配元素的内容,不识别标签,将标签作为文本插入进去
6 示例:
7 $('.c1').text('<h3>你好,太白</h3>');
8 $('.c1').html('<h3>你好,太白</h3>');

值操作

复制代码
 1 获取值
 2     input type='text'的标签--$('#username').val();
 3     input type='radio'标签获取被选中的标签的值 --- $(':radio:checked').val();
 4     input type='checkbox'标签获取被选中的标签的值 --- 直接$(':checkbox:checked').val();是不行的,需要循环取值  
 5         var d = $(':checkbox:checked');
 6         for (var i=0;i<d.length;i++){
 7             console.log(d.eq(i).val());
 8         }
 9         
10     单选select --- $('#city').val();
11     多选select --- $('#author').val(); // ["2", "3"]    
12 
13 设置值
14     input type='text'的标签 --- $('#username').val('李杰');
15     input type='radio'标签 ---  $('[name="sex"]').val(['3']);
16             如果 $('[name="sex"]').val('3'),所有标签的值都变成了'3';
17     input type='checkbox'设置值 --- $('[name="hobby"]').val(['2','3'])
18     单选select --- $('#city').val('1');  option value='1'
19     多选select --- $('#author').val(['2','3'])
复制代码

 

posted @   竹石2020  阅读(173)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示