1显示隐藏功能
但凡有两个函数完成的功能是相反的，比如一个显示一个隐藏，那么肯定会有第三个函数的效果是前两个函数的和。也就是说两个单词是反义词，那么肯定会有第三个单词，而且都和toggle有关。
hide()隐藏内容
show() 显示
toggle() 一下显示一下隐藏
括号中如果有参数，填数字（单位是毫秒），那么会有动画效果，如果不填，没有动画效果。
对比js和jq：
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 div{ 10 width: 200px; 11 height: 200px; 12 background: green; 13 display: none; 14 } 15 </style> 16 <!-- <script> 17 window.onload = function(){ 18 var oBtn = document.getElementById('btn') 19 var oBox = document.getElementById('box'); 20 oBtn.onclick = function(){ 21 oBox.style.display = 'none' 22 } 23 } 24 </script> --> 25 <script src="js/jquery-1.12.4.min.js"></script> 26 <script> 27 // $(document).ready(function(){}) 28 $(function(){ 29 30 // 找到按钮，绑定单击 找到div 隐藏 31 $('#btn').click(function(){ 32 33 // $('div').hide(500) 34 // $('div').show(500) 35 $('div').toggle(500) 36 }) 37 }) 38 </script> 39</head> 40<body> 41 <!-- 需求：按钮 div，按钮单击控制div隐藏 display:none style --> 42 <button id="btn">按钮</button> 43 <div id="box"></div> 44</body> 45</html>
2.jq控制HTML内容
html():传参数表示修改内容，不传参数表示访问内容
html()
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="js/jquery-1.12.4.min.js"></script> 9 <script> 10 $(function(){ 11 // html(): 传参数表示修改内容，不传参数表示访问内容 12 // alert($('div').html()) 13 14 // $('div').html('jq') 15 // $('div').html('<p>jq</p>'); 16 $('div').html('') 17 }) 18 </script> 19</head> 20<body> 21 <div>div</div> 22</body> 23</html>
3.控制HTML属性
控制标签属性 k = "v" src value link中的href
3.1prop()
prop()用法：分为单属性和多属性两种写法
多属性就是字典的语法{k:v,k:v}：只支持修改，不支持访问。
单属性分为访问和修改两种。
访问（传一个参数是控制的key）
修改（参数一是key，参数二是这个key对应的值）参数之间用逗号隔开
3.2val（）
val()只用来修改访问value属性值，用法和html()完全相同
传参表示修改，不传参表示访问
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="js/jquery-1.12.4.min.js"></script> 9 <script> 10 $(function(){ 11 // prop() : 单属性 和 多属性 -- 字典{k:v,} -- 只支持修改 12 13 // 单属性： 访问（传一个参数是控制的key） 和 修改: 参数1是key，参数2是这个key对应的值 14 // alert($('img').prop('src')) 15 // $('img').prop('src', 'img3.jpg') 16 // $('img').prop({'src':'img3.jpg', 'alt':'赵四'}) 17 // alert($('input').prop('value')) 18 // $('input').prop('value', 'aaa') 19 20 // val() -- 只用来修改访问value属性值 -- 用法和html（）完全相同 21 // alert($('input').val()) 22 $('input').val('aaa') 23 }) 24 </script> 25</head> 26<body> 27 <img src="img2.jpg" alt=""> 28 <input type="text" value="请输入用户名"> 29</body> 30</html>
4.jq控制css
css()----和prop()完全相同
rgb颜色：三个0为黑色
小驼峰fontSize和font-size都对
在字典中，如果是有字符和数字混合的形式，那么必须写引号。
字典中如果属性key只是单纯的width，可以不写引号。
在前端中100px可以写成100，字典中属性key的value值100可以不加引号，但是100px必须写引号。
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="js/jquery-1.12.4.min.js"></script> 9 <script> 10 $(function(){ 11 // alert($('div').css('color')) 12 $('div').css('color', 'red') 13 $('div').css({width:500, 'height':'300px', 'background':'green', 'font-size':'60px'}) 14 }) 15 </script> 16</head> 17<body> 18 <div>div</div> 19</body> 20</html>
5.选择器
查找标签从而去控制它。
js的选择器都可以用，而且还有更多的选择器
eq equal 选中下标等于某个数字的标签（两种写法，可以看下面的代码块）
选择器转移（选择集转移）：.next() .prev() .nextAll() .prevAll()
选中某个属性 = 某个值的标签，只要键值对存在
$('img[alt=aa]').css('background','green')
下面的环境都是父子集
has选中了谁的子级是xx，父级执行了命令
find选中子集执行了命令
下面的选择器很重要
.parent()选择元素的父元素
可以先用一个this，然后找到这个元素的父级。
.children()选择元素的所有子元素
括号里面放具体的哪一个子集。
.siblings()选择元素的同级别元素 -----排他思想：只许州官放火不许百姓点灯
先将自己控制一遍，然后调用siblings再把除了自己的其他同级元素控制一遍
这个 this
jq中使用this---$(this)
会自动检索事件发生的目标
链式编程（链式调用）的好处：简化代码量，执行的时候提高效率，
导航标签都用ul套li
jq中使用onclick、onmouseover等都取消on
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="js/jquery-1.12.4.min.js"></script> 9 <script> 10 $(function(){ 11 // $('li').css('background', 'green') 12 // $('li:first').css('background', 'green') 13 // $('li:last').css('background', 'green') 14 15 // eq equal 选中下标等于某个数字的标签 16 // $('li:eq(0)').css('background', 'green') 17 // $('li').eq(1).css('background', 'green') 18 19 // 选择器转移 选择集转移 20 // $('.box').next().css('background', 'green') 21 // $('.box').prev().css('background', 'green') 22 // $('.box').prevAll().css('background', 'green') 23 // $('.box').nextAll().css('background', 'green') 24 // 选中某个属性=某个值的标签，只要键值对真实存在 25 // $('img[alt=aa]').css('background', 'green') 26 $('.box1').has('p').css('background', 'green') // 父 27 $('.box2').find('p').css('background', 'green') // 子 -- 层级 28 }) 29 </script> 30</head> 31<body> 32 <ul> 33 <li>文字1</li> 34 <li>文字2</li> 35 <li class="box">文字3</li> 36 <li>文字4</li> 37 <li>文字5</li> 38 <li>文字6</li> 39 <li>文字7</li> 40 <li>文字8</li> 41 </ul> 42 <img src="aa.jpg" alt="aa"> 43 <img src="bb.jpg" alt="bb"> 44 <div class="box1"> 45 <p>box1里面的p has</p> 46 </div> 47 <div class="box2"> 48 <p>box2里面的p find</p> 49 </div> 50</body> 51</html>
siblings():
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="js/jquery-1.12.4.min.js"></script> 9 <script> 10 $(function(){ 11 $('button').click(function(){ 12 // 点了哪个按钮 这个按钮的背景色是绿色 ; 别人 其他的button不能是绿色 13 // 这个this -- 会自动检索事件发生的目标 -- jq $(this) 14 $(this).css('background', 'green').siblings().css('background', '') 15 }) 16 }) 17 </script> 18</head> 19<body> 20 <!-- 同级 排他思想：只许州官放火不许百姓点灯 --> 21 <button>按钮</button> 22 <button>按钮</button> 23 <button>按钮</button> 24 <button>按钮</button> 25 <button>按钮</button> 26 <button>按钮</button> 27 <button>按钮</button> 28 <button>按钮</button> 29 <button>按钮</button> 30 <button>按钮</button> 31 <button>按钮</button> 32 <button>按钮</button> 33 <button>按钮</button> 34 <button>按钮</button> 35 <button>按钮</button> 36 <button>按钮</button> 37 <button>按钮</button> 38</body> 39</html>
6.***获取指定元素下标 -----index()
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="js/jquery-1.12.4.min.js"></script> 9 <script> 10 $(function(){ 11 $('li').click(function(){ 12 alert( $(this).index() ) 13 }) 14 }) 15 </script> 16</head> 17<body> 18 <!-- 单击li，单击谁就弹出这个li的下标 --> 19 <ul> 20 <li>文字1</li> 21 <li>文字2</li> 22 <li>文字3</li> 23 <li>文字4</li> 24 <li>文字5</li> 25 <li>文字6</li> 26 <li>文字7</li> 27 <li>文字8</li> 28 </ul> 29</body> 30</html>
7.***添加类删除类
.addClass()添加类
.removeClass()删除类
删除了class=“xx”中的类名xx，而不会删除class。删除完之后是class。
class中可以添加多个类。
class=“aa bb cc”如果括号里面不填类名，会删除所有类名，如果填了类名，就删除指定的类名。
toggleClass()
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="js/jquery-1.12.4.min.js"></script> 9 <script> 10 $(function(){ 11 $('button').click(function(){ 12 // $('div').addClass('aa') 13 // $('div').removeClass('aa') 14 // $('div').removeClass() 15 $('div').toggleClass('daqiu') 16 }) 17 }) 18 </script> 19</head> 20<body> 21 <button>按钮</button> 22 <div class="aa bb cc">div</div> 23</body> 24</html>
8.animate
jQuery提供的一个程序员可以根据自己的需求封装动画效果或功能的函数。
自定义封装动画的函数。
animate(字典形式的动画过程，动画时间，运动曲线，回调函数)
4个参数，只有参数1是必填项{}
动画时间 毫秒为单位，默认值是600；
运动曲线：字符串的形式 linear（默认值） 和swing----工作不常用
运动曲线就是加速减速
回调函数：前面动画过程执行完成之后，要执行的命令 --- 就是匿名函数而已。
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 div{ 10 width: 100px; 11 height: 100px; 12 background: green; 13 } 14 </style> 15 <script src="js/jquery-1.12.4.min.js"></script> 16 <script> 17 $(function(){ 18 // $('div').animate(字典形式的动画过程, 动画时间, 运动曲线, 回调函数) 19 // animate4个参数只有参数1是必填项 {} 20 // 动画时间 毫秒为单位 默认值是600 21 // 运动曲线：字符串的形式 linear（默认值） swing -- 工作不常用 22 // 回调函数 前面动画过程执行完成之后要执行的命令 -- 就是匿名函数而已 23 $('div').eq(0).animate({width:1000}, 2000, 'linear', function(){ 24 alert('动画完成了的命令') 25 }) 26 // $('div').eq(1).animate({width:1000}, 2000, 'swing') 27 }) 28 </script> 29</head> 30<body> 31 <div></div> 32 <!-- <div></div> --> 33</body> 34</html>
9.***常用动画函数
slideUp()隐藏
slideDown()显示
slideToggle() 一会显示一会隐藏
清除动画排队机制，在形成动画函数之前加stop()
fadeIn() 淡入
fadeOut() 淡出
fadeToggle() 一会淡入一会淡出
括号里面可以写动画时间，运动曲线，回调函数三个参数，但这三个参数可以可以不写
fadeTo() 设置透明度，参数一是时间，参数2是透明度0-1的数值。
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 div{ 10 width: 200px; 11 height: 200px; 12 background: green; 13 /* display: none; */ 14 } 15 </style> 16 <script src="js/jquery-1.12.4.min.js"></script> 17 <script> 18 $(function(){ 19 $('button').click(function(){ 20 // 1、滑动动画 21 // $('div').slideUp() // 隐藏 22 // $('div').slideDown() // 显示 23 // 清除动画排队机制：在形成动画函数之前加stop() 24 // $('div').stop().slideToggle() 25 26 // 2、透明度动画 27 // $('div').fadeIn(1000) // 淡入 28 // $('div').fadeOut() // 淡出 29 // $('div').fadeToggle() 30 $('div').fadeTo(600, 0.5) // 设置透明度参数是时间，参数2 是透明度0-1的数值 31 }) 32 }) 33 </script> 34</head> 35<body> 36 <button>按钮</button> 37 <div></div> 38</body> 39</html>
10.***事件属性
click() 鼠标单击
ready() DOM加载完成
blur() 元素失去焦点
focus()元素获得焦点
submit()用户提交表单
hover()同时为mouseenter和mouseleave事件指定处理函数
mouseover()鼠标进入（进入子元素也触发）
mouseout()鼠标离开（离开子元素也触发）
mouseenter()鼠标进入（进入子元素不触发）
mouseleave()鼠标离开（离开子元素不触发）
上面的这些鼠标移入和离开，触发和不触发指的是不再次触发父级。验证两组不一样的时候，鼠标先进入父级，再进入子级，然后没有再次触发，验证成功。如果是直接进入子级的话，因为子级和父级是一体的，会触发。
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 .father{ 10 width: 300px; 11 height: 300px; 12 background: green; 13 } 14 .son{ 15 width: 200px; 16 height: 200px; 17 background: pink; 18 } 19 </style> 20 <script src="js/jquery-1.12.4.min.js"></script> 21 <script> 22 $(function(){ 23 // 鼠标移入标签向下运动150px， 鼠标离开回到默认状态0 margin-top 24 // $('.father').mouseover(function(){ 25 // $(this).animate({'margin-top':150}) 26 // }) 27 // $('.father').mouseout(function(){ 28 // $(this).animate({'margin-top':0}) 29 // }) 30 31 32 // $('.father').mouseenter(function(){ 33 // $(this).animate({'margin-top':150}) 34 // }) 35 // $('.father').mouseleave(function(){ 36 // $(this).animate({'margin-top':0}) 37 // }) 38 39 $('.father').hover(function(){ 40 // 鼠标移入 41 $(this).animate({'margin-top':150}) 42 }, function(){ 43 // 鼠标离开 44 $(this).animate({'margin-top':0}) 45 }) 46 }) 47 </script> 48</head> 49<body> 50 <div class="father"> 51 <div class="son"></div> 52 </div> 53</body> 54</html>
表单验证：用户输入，然后利用正则判断，如果正确，那么让其登录。
XHTML1.0 $('form').submit(function(){}) ----- 一个页面只能有一个form标签
HTML5.0 表单域标签的id名.submit(function(){}) --- 一个页面可以有多个form
表单提交submit 组织默认提交行文 return false
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="js/jquery-1.12.4.min.js"></script> 9 <script> 10 $(function(){ 11 // 表单域.submit(function(){}) 12 // xhtml1.0 $('form').submit(function(){}) -- 一个页面只能有一个form标签 13 // html5.0 表单域标签的id名.submit(function(){}) -- 一个页面可以有多个form标签 14 $('#login').submit(function(event){ 15 // return false //某些浏览器里面表单有默认提交行为 -- return false 不需要event 16 // event.defaultPrevent() 17 alert('ok') 18 }) 19 }) 20 </script> 21</head> 22<body> 23 <form action="" method="get" id="login"> 24 <input type="text"> 25 <input type="submit"> 26 </form> 27</body> 28</html>
