前端
内容回顾:
-BOM
-jquery介绍
-jquery下载和引入方式
npm install jquery
-jquery的选择器
-基本选择器
-通配符选择器
- id选择器
- 类选择器
- 标签选择器
- 高级选择器
- 后代 空格表示
-子代 >
- 毗邻兄弟 +
- 兄弟 ~
- 组合选择器 div,p,a
- 交集选择器 div,active
- 属性选择器 $('input[type="text"]')
- jquery的动画效果
- 普通动画
先要停掉动画 stop()
- show(3000,fn)
- hide()
- toggle(3000,fn)
- 卷帘门效果
- slideDown()
- slideUp()
- slideToggle()
- 淡入淡出
- fadeIn()
- fadeOut()
- fadeToggle()
- jquery和js对象转换
js===>jquery
$(jsDOM对象)
jquery==>jsDOM对象
$('div')[0]
$('div').get(0)
今日内容:
<head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery.js"></script> <style> li:nth-child(3){ background: deeppink; } </style> </head> <body> <ul> <li class="item1">alex</li> <li class="item1">得劲</li> <li class="item1">裤架为</li> <li class="item1">王家辉</li> </ul> <input type="text"> <input type="radio" checked name="sex" value="1">男 <input type="radio" name="sex" value="0">女 <select name="" id=""> <option value="smoke" >抽烟</option> <option value="drink">喝酒</option> <option value="tangtou" selected>烫头</option> <option value="koufoot">抠脚</option> </select> <button>提交</button> <script> //ajax //筛选选择器 $('ul li:eq(3)').css('color','yellow');//eq从0开始选择 $('ul li:first').css('color','red'); $('ul li:last').css('color','red'); $('ul li:nth-child(4)').css('background','yellow');//从1开始选择 // console.log($('input[type=radio]:checked')); // console.log($('select option:selected').text()); $('button').click(function () { console.log($('input[type=radio]:checked')); }) </script> </body>
-补充选择器(筛选选择器,筛选的方法)
-筛选选择器
-eq() 获取匹配的元素 索引从0开始
-first()
-last()
-属性选择器$('ul li:nth-child(4)')
-$('input [type=radio]:checked') 获取选中的单选的元素
-$('select option:selected').text() 获取下拉框被选中的元素
<body> <ul> <li class="item1"> <a href="javascript:void(0);">alex</a> <ol> <li>小茹</li> </ol> </li> <li class="item2"> <p class="active">得劲</p> </li> <li class="item3">裤架为</li> <li class="item4">王家辉</li> </ul> <script> //find(selector) console.log($('ul').find('li.item1 a').css('color','red')) //链式编程 $('ul').find('li.item1 a').css('color','red').click(function () { //html() 如果没有参数，表示获取值，如果有一个参数，表示设置值 alert($(this).html()); console.log($(this).html('黄文泰')); $(this).html('黄文泰').css({'color':'yellow'}) }); console.log($('ul').find('*')); //获取的是亲儿子们 console.log($('ul').children()); // $('ul li:eq(3)') console.log($('ul li').eq(3)) //获取的是亲爹爹 console.log( $('p.active').parent()) console.log( $('.item1').siblings('.item2')); </script>
- 筛选的方法
- $('ul').find('li.active') 查找后代（儿子和孙子。。。。）元素
- children() 查找亲儿子
- eq() 获取指定的元素 索引从0 开始
- parent() 获取亲爹
- siblings() 选取兄弟（除它本身之外）
<script src="jquery.js"></script> <style> *{ padding: 0; margin: 0; } ul{ list-style: none; } div.box{ width: 600px; height: 600px; } ul{ overflow: hidden; } ul li { float: left; width: 194px; height: 80px; line-height: 80px; text-align: center; background-color: red; border: 1px solid darkgoldenrod; font-size: 18px; color: #fff; font-weight: 700; } ul li a{ display: block; width: 194px; height: 80px; text-decoration: none; color: #fff; } ul li a.active{ background-color: green; } div.box p{ width: 594px; height: 300px; line-height: 300px; text-align: center; color: #fff; font-weight: bolder; background-color: darkred; display: none; } div.box p.active{ display: block; } </style> </head> <body> <div class="box"> <ul> <li> <a href="javascript:void(0)">新闻</a> </li> <li> <a href="javascript:void(0);">音乐</a> </li> <li> <a href="javascript:void(0);">体育</a> </li> </ul> <p>新闻</p> <p>音乐</p> <p>体育</p> </div> <script> $('ul li a').click(function () { $(this).addClass('active').parent().siblings('li').find('a').removeClass('active'); let index = $(this).parent().index(); console.log(index); $('.box p').eq(index).addClass('active').siblings('p').removeClass('active'); }) </script>
<head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery.js"></script> <style> *{ padding: 0; margin: 0; } ul{ list-style: none; } div.box{ width: 600px; height: 600px; } ul{ overflow: hidden; } ul li { float: left; width: 194px; height: 80px; line-height: 80px; text-align: center; background-color: red; border: 1px solid darkgoldenrod; font-size: 18px; color: #fff; font-weight: 700; } /*ul li {*/ /*display: block;*/ /* 194px;*/ /*height: 80px;*/ /*text-decoration: none;*/ /*color: #fff;*/ /*}*/ ul li.active{ background-color: green; } div.box p{ width: 594px; height: 300px; line-height: 300px; text-align: center; color: #fff; font-weight: bolder; background-color: darkred; display: none; } div.box p.active{ display: block; } </style> </head> <body> <div class="box"> <ul> <li>新闻</li> <li>音乐</li> <li>体育</li> </ul> <p>新闻</p> <p>音乐</p> <p>体育</p> </div> <script> $('ul li').click(function () { console.log($(this).addClass('active')); $(this).addClass('active').siblings('li').removeClass('active'); let index = $(this).index(); $('.box p').eq(index).addClass('active').siblings('p').removeClass('active'); }) </script> </body> </html>
- jquery自定义动画
- animate({动画队列属性},时间,fn)
.box{ 200px; height: 200px; background-color:red; color: #fff; position: absolute; top: 30px; left: 0; line-height:200px; text-align: center; } </style> </head> <body> <button>动画</button> <div class="box">得劲</div> <script> //动画 在3秒时间 宽高 400px 变成圆，color:green $('button').click(function () { let animate1 = { "width":'400', "height":"400", "border-radius":'200', "top":"400", "left":"600", } // animate() 自定义动画 $('.box').animate(animate1,3000,function () { $(this).hide(); }) }) </script>
音频
<audio src="./Beyond%20-%20情人.mp3" controls></audio>
- jquery的DOM操作
- 样式操作
- .css()
- 对象属性操作
# 如果有一个参数，表示获取值，两个参数，设置值
prop()
# 移除单个值或者多个值，多个值用空格隔开
removeProp()
- 标签属性操作
# 如果有一个参数，表示获取值，两个参数，设置值
attr()
# 移除单个值或者多个值，多个值用空格隔开
removeAttr()
- 类操作
- addClass('active xxx bbb ccc')
- removeClass('active xxx')
- toggleClass()
- 值的操作
# 如果没有参数，表示获取值，如果有一个参数，表示设置值
- text()
- html()
- val()
<style> .box{ width: 200px; height: 200px; background-color:red; color: #fff; position: absolute; top: 30px; left: 0; line-height:200px; text-align: center; } div.hide{ display: none; } </style> </head> <body> <button>隐藏</button> <div class="box hide">得劲</div> <script> $('button').click(function () { $('.box').addClass('hide'); // $('.box').removeClass('aa bb cc'); // $('.box').toggleClass('hide'); }) </script> </body> <body> <div class="box"> </div> <input type="text" value="家辉"> <script> // console.log($('.box').text()); // $('.box').text('得劲'); console.log($('.box').html()); $('.box').html('<h2>得劲</h2>'); console.log($('input[type=text]').val()); $('input[type=text]').val('哈哈哈') </script> </body>
<body> <audio src="Beyond%20-%20情人.mp3" controls id="21" class="" title=""></audio> <input type="radio" checked>男 <a href="">百度一下</a> <script> console.log($('audio')); console.log($('audio').prop('src')); console.log($('audio').prop('id','mp3')); console.log($('input').prop('checked')); console.log($('input').attr('checked')); $('a').attr('href','http://www.baidu.com'); $('a').prop('href','http://www.baiduxxx.com'); $('a').attr('title','http://www.baidu.com'); $('a').removeAttr('href title'); console.log($('a')) </script>