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>