样式操作
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');
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'])