1.库和框架
库:小而精 直接操作DOM
css()
jquerry封装js的那些操作: 事件,属性, ajax(交互的技术),DOM,选择器
框架:大而全 事件,DOM,属性操作,ajax,"模板引擎"
2.jquerry 的入口函数:
//等待文加载后使用
$(function{});
$(window).ready(function(){});
3.DOM事件三步走
（1）事件源
主要还是学习选择器
css大部分选择器都可以使用
$('div'); 获取出来的是jquery对象
$('#box');
$('.active');
选择器的方法
（2）事件
js onclick onmouseover onmouseout onmouseenter onmouseleave onscroll onresize onchange onsubmit
jq的事件都不带on
//click()参数是一个回调函数 ，当调用click方法之后，做完了事件操作，jquery内部又返回一个jQuery对象，
所以我们又可以再次调用jquery的方法。
JQ对象.click(function(){})
(3)事件的回调函数 是事件驱动
（4）对样式属性的操作
.css('color')
.css({
color:'red',
width:300
})
- 如果有一个参数，并且该参数的类型是字符串，获取
- 如果有一个参数，并且该参数的类型是{}，设置多个属性值
.css('color'，'red')
.css('width'，300)
- 如果有两个参数，设置单个的属性值
3.js jq 对象相互转换
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <ul> 9 <li class="item">alex</li> 10 <li>wusir</li> 11 <li>ritian</li> 12 </ul> 13 <script src="jquerry.js"></script> 14 <script> 15 var datas = ["red","green","yellow"]; 16 // 17 18 var item = document.getElementsByClassName("item")[0]; 19 console.log(item); 20 1.将jquerry对象转化为js对象 21 console.log($('li')[0]) 22 2.将js对象转化为jquerry对象 23 console.log($(item)) 24 3.用css对jquerry对象进行属性操作 <1>只写一个css属性表示创建一个类class=item 25 <2>写两个字符串表示进行属性修改<3>多个进行打包修改 26 console.log($(item).css("color","blue").click(function () { 27 alert(11); 28 })) 29 4.链式编程 : 每一个都是一个对象 jquerry 99%都是方法 30 $(item).css("color","green").click(function() { 31 alert(11); 32 }) 33 34 35 36 37 38 </script> 39 40 41 </body> 42 </html>
4.jquerry 高级选择器
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div class="box"> 9 <p id="a">alex</p> 10 <p>日</p> 11 <p>天</p> 12 </div> 13 <p>wusir</p> 14 <script src="jquerry.js"></script> 15 <script> 16 $(function () { 17 //1.> 子子孙孙 18 // $(".box>p").css("color","green"); 19 //2. 紧邻着的挨着的下一个兄弟元素 20 $("#a+p").css("color","green") 21 }) 22 23 </script> 24 25 </body> 26 </html>
5.基本过滤选择器 需要使用``
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <ul> 9 <li>alex</li> 10 <li>伊宁</li> 11 <li>未来</li> 12 <li>张菌康</li> 13 </ul> 14 <script src="jquerry.js"></script> 15 <script> 16 $(function () { 17 //定义一个变量 18 var i = 2; 19 //eq (index)为第index的索引 20 $(`ul li:eq(${i})`).css('color','red'); 21 $(`ul li:eq(${1})`).css("color","red"); 22 $('ul li:first').css('color','red'); 23 $('ul li:last').css('color','red'); 24 25 }) 26 </script> 27 28 </body> 29 </html>
6.属性选择器
为了区分某种专有的属性 类名=什么呀之类的 用[]括起来表明
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 input[type='text']{ 8 border: none; 9 outline: none; 10 border: 1px solid red; 11 width: 200px; 12 height: 100px; 13 font-size: 30px; 14 15 } 16 </style> 17 </head> 18 <body> 19 <form action=""> 20 21 <input type="text" name='user' aaa='bbb' > 22 <input type="password" name="pwd"> 23 <input type="submit"> 24 </form> 25 <script src="jquery.js"></script> 26 <script> 27 28 29 $(function () { 30 31 console.log($('input[type=text]')) 32 }); 33 </script> 34 </body> 35 </html>
7.筛选选择器
筛选出想要的
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div class="father">55 9 <p>alex</p> 10 <a href="#">日天</a> 11 <span>村长</span> 12 <div class="g">55 13 <span>一宁</span> 14 </div> 15 </div> 16 <script src="jquerry.js"></script> 17 <script> 18 $(function () { 19 1.查找指定元素.father的所有后代元素g 20 console.log($(".father").find(".g")); 21 $(".father").find(".g").css("color","green") 22 $(".g").click(function () { 23 //this这里已经封装了标记为专门的这个 24 console.log(this); 25 $(this).css("color","red"); 26 }) 27 2.find 亲儿子和孙子哦 28 $(".father").find("span").css("color","green") 29 find 重孙子哦 30 $('.father').find('.g>span').click(function () { 31 console.log(this); 32 }); 33 3.children亲儿子 找到的是子带的span 村长 34 $(".father").children("span").css("color","green") 35 4.parent ()查找父元素 36 $(".g span").parent().css("color","red") 37 38 39 40 41 }) 42 43 </script> 44 45 46 </body> 47 </html>
8.siblings
找到除了自己的所有兄弟标签
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <ul> 9 <li>尚宏运</li> 10 <li>刘宁谦</li> 11 <li>吕星星</li> 12 <li>赵挺</li> 13 </ul> 14 <script src="jquerry.js"></script> 15 <script> 16 $(function () { 17 $("ul li").click(function () { 18 //这里的this是js里的 需要转换为jq对象 19 //这里siblings是筛选除了li标签的所有兄弟,在这里除了自己的所有兄弟li 20 $(this).css("color","red").siblings('li').css("color","blue"); 21 }) 22 }) 23 </script> 24 </body> 25 </html>
9.选项卡
jquerry 版
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 padding: 0; 9 margin: 0; 10 } 11 ul{ 12 list-style:none; 13 } 14 a{ 15 text-decoration: none; 16 } 17 .box{ 18 width: 400px; 19 height: 300px; 20 21 } 22 .box ul { 23 width: 100%; 24 overflow: hidden; 25 } 26 .box ul li{ 27 float: left; 28 width: 50px; 29 height: 70px; 30 margin: 0 10px; 31 background-color: red; 32 text-align: center; 33 line-height: 70px; 34 } 35 a{ 36 color: #fff; 37 } 38 .active{ 39 width: 100%; 40 height: 100px; 41 background-color: green; 42 display: none; 43 } 44 </style> 45 </head> 46 <body> 47 <div class="box"> 48 <ul> 49 50 </ul> 51 <div class="active"> 52 53 </div> 54 </div> 55 <form action=""> 56 <input type="text" value="123"> 57 </form> 58 <script src="jquerry.js"></script> 59 <script> 60 $(function () { 61 $(".box ul").html( `<li> 62 <a href="javascript:void(0);">张三</a> 63 </li> 64 <li> 65 <a href="javascript:void(0);">李四</a> 66 </li> 67 <li> 68 <a href="javascript:void(0);">王五</a> 69 </li> 70 <li> 71 <a href="javascript:void(0);">赵六</a> 72 </li>`); 73 //1.单击 a 标签 74 $(".box ul li a").click(function () { 75 //2.进行js 的清除空白 76 $(this).css("color","red").parent("li").siblings("li").find("a").css('color',"#fff"); 77 //3.进行text操作 text后加()里面可以改变字 78 var textVal = $(this).text(); 79 var newVal = `<h2>${textVal}</h2>`; 80 //4.text的封装 81 $(".active").show().text(textVal); 82 // 4.innerHTML的封装 83 $('.active').show().html(newVal); 84 85 }) 86 }) 87 </script> 88 89 90 91 </body> 92 </html>
10.