jQuery引入
1 <script src="jquery.js"></script> 2 <script>jquery代码+js</script>
jQuery选择器
基础选择器
1 $('#id值') 2 $('.类值') 3 $('div') 4 $('*') 5 $('div,p')
层级选择器
1 $('div p') 2 $('div.p') 3 $('div+p') 4 $('div>a') 5 $('div~a')
基本筛选器
1 :first 2 :last 3 :eq(索引) 4 :odd 索引为奇数的 5 :even 索引为偶数的 6 :gt(索引) 大于某个索引的那些元素 7 :lt(索引) 小于指定索引的 8 :not('选择器') 排错满足这个选择器的那些标签 9 :has('选择器') 找到后代中有满足这个选择器的标签
属性选择器
1 [属性名] 2 [属性名=属性值] 3 [属性名!=属性值] 4 input[type=text]
表单筛选器
1 :text input type=text 的input标签 2 :password 3 ...
表单对象属性筛选器
1 :enabled 2 :disabled 3 :checked 4 :selected
筛选器方法
1 下一个: 2 .next() 3 .nextAll() 4 .nextUntil('选择器') 5 上一个 6 .prev() 7 .prevAll() 8 .prenUntil('选择器') 9 父级 10 .parent() 11 .parents() 12 .parentsUntil('选择器') 13 14 儿子和兄弟 15 .children() 所有的儿子 16 .children('选择器') 17 18 .siblings() 所有兄弟标签 19 .siblings('选择器') 20 filter过滤 21 $('div').filter('选择器') 22 find() 找后代的 23 $('div').find('#d1') 24 25 .first() 26 .last() 27 ... 28
今日内容
标签操作
样式操作
样式类操作
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'}); 8 9
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 100px; 11 } 12 .c2{ 13 background-color: green; 14 height: 1000px; 15 100px; 16 } 17 .c3{ 18 background-color: blue; 19 height: 1000px; 20 100px; 21 } 22 .s1{ 23 position: fixed; 24 left:20px; 25 bottom: 20px; 26 height: 40px; 27 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 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> 31
文本操作
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']) 20 21
属性操作
1 attr(attrName)// 返回第一个匹配元素的属性值 2 attr(attrName, attrValue)// 为所有匹配元素设置一个属性值 3 attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值 4 removeAttr(attrName)// 从每一个匹配的元素中删除一个属性 5 6 示例: 7 设置单个属性 8 $('.c1').attr('xx','oo'); 9 设置多个属性 10 $('.c1').attr({'age':'18','sex':'alex'}); 11 查看属性 12 $('.c1').attr('属性名'); 13 $('.c1').attr('xx'); 14 删除属性 15 $('.c1').removeAttr('xx'); 16 17 prop -- 针对的是checkedselecteddisabled.. 18 19 查看标签是否有checked属性,也就是是否被选中 20 attr $(':checked').attr('checked'); //checked -- undefined 21 prop $(':checked').prop('checked'); //true -- false 22 23 通过设置属性的方式来设置是否选中: 24 $(':radio').eq(2).prop('checked',true); true和false不能加引号 25 $(':radio').eq(2).prop('checked',false); 26 27 简单总结: 28 1.对于标签上有的能看到的属性和自定义属性都用attr 29 2.对于返回布尔值的比如checkbox、radio和option的是否被选中或者设置其被选中与取消选中都用prop。 30 具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr() 31
文档处理
1 添加到指定元素内部的后面 2 $(A).append(B)// 把B追加到A 3 $(A).appendTo(B)// 把A追加到B 4 #添加字符串照样能识别标签 ***** 5 $('#d1').append('<a href="http://www.jd.com">京东</a>'); 6 添加到指定元素内部的前面 7 $(A).prepend(B)// 把B前置到A 8 $(A).prependTo(B)// 把A前置到B 9 示例 10 $('a').prependTo($('div')); 11 12 添加到指定元素外部的后面 13 $(A).after(B)// 把B放到A的后面 14 $(A).insertAfter(B)// 把A放到B的后面 15 16 添加到指定元素外部的前面 17 $(A).before(B)// 把B放到A的前面 18 $(A).insertBefore(B)// 把A放到B的前面 19 20 移除和清空元素 21 remove()// 从DOM中删除所有匹配的元素。 22 empty()// 删除匹配的元素集合中所有的子节点，包括文本被全部删除，但是匹配的元素还 23 $('div').remove(); 24 $('div').empty(); 25 26 替换 27 replaceWith() 28 replaceAll() 29 示例: 30 var a = document.createElement('a') 31 a.href = 'http://www.baidu.com'; 32 a.innerText = 'xxx'; 33 34 $('span').replaceWith(a); 35 $(a).replaceAll('span'); 36 37 clone()克隆 38 <button class="btn">屠龙宝刀,点击就送!</button> 39 40 $('.btn').click(function () { 41 // var a = $(this).clone(); //克隆标签 42 var a = $(this).clone(true); //连带事件一起克隆 43 $(this).after(a); 44 45 })
作业1: 自定义登录认证
作业2: 全选反选取消
作业3: 添加记录和删除记录 表格