---恢复内容开始---
一 JQuery选择器:
基本选择器和基本过滤器和筛选选择器
基础选择器:
<title>Title</title> <script src="../day047前端--JQuery和bom/js/jquery.js"></script> </head> <body> <div class = "box" id = "wrap"> <p class="active">alex</p> <p class="active">alex</p> <p class="active">alex</p> <p class="active">alex</p> <p class="active">alex</p> <p class="active">alex</p> <p class="active">alex</p> </div> <script> // $('div')[0].style.backgroundColor='rad'; // console.log($('div')[0]) //jsdom对象用style点... // console.log($('div')) //jquery对象用css.点... // console.log($('#wrap'))//id选择器 // console.log($(".box")); //类选择器 // console.log($('#wrap .action')); // 后代选择器加空格 $('#wrap .active').click(function () { console.log($(this).text()); //这样获取的是JQuery对象的text值 // console.log($(this).text('haha')) //rext括号里写内容直接影响的是文本 }) </script>
小结:
- 标签选择器 $('div')
- id选择器$('#box') - class选择器
筛选选择器:
<title>Title</title> <script src="../day047前端--JQuery和bom/js/jquery.js"></script> </head> <body> <ul> <li>大佬</li> <li>老二</li> <li>老三</li> <li>老四</li> </ul> <input type="text"> <script> //获取值 ,eq()的使用 // console.log($("li:eq(1)").css("background",'red')); //索引从0开始 //设置单个值或者多个值 // $("li:eq(1)").css("color","red"); // //通过字典的形式给对象设置多个值 // $("li:eq(1)").css({ // "color":"red", // "background-color":"blue" // }); // //属性选择器 给input背景加颜色 $("input[type='text']").css({ backgroundColor:"yellow" }) </script>
小结:
- eq(index) index从0开始 选取匹配的元素 - gt(index) 大于index的元素 - lt(index) 小于index的元素 - odd 奇数 - even 偶数 - first 第一个 - last 最后一个
筛选方法:
小结:
- $('ul').find('li.active') 查找后代(儿子和孙子。。。。)元素 - children() 查找亲儿子 - eq() 获取指定的元素 索引从0 开始 - parent() 获取亲爹 - siblings() 选取兄弟(除它本身之外)
属性选择器: 通过$(....) 直接选.
选择器重要例子:
<script src="../day047前端--JQuery和bom/js/jquery.js"></script> </head> <body> <input type="text"> //设置type的格式 radio是单选小点 <input type="radio" checked>男 // 默认选中checked <input type="radio">女 <select name="" id="">//下拉框 <option value="">抽烟</option> // 下拉框里面的内容, option是下拉框元素 <option value="">喝酒</option> <option value="hahha" selected>烫头</option> //selected为默认选中项 </select> <script> console.log($('input[type=radio]:checked')); //这里默认选中的是男 ,input[type=radio]:checked等于$('input:radio:checked console.log($('select option:selected').val()) // jquery对象 这里默认选中时烫头,以前是通过fom表单来获取key和val这里 //有几个方法,点text()获取文本 点html()获取标签和文本 点val()获取里面 // 的value的值 有了这些就可以和后端交互了 </script>
二 jquery 自定义动画 animate({动画队列属性},时间,fn)
<title>Title</title> <script src="jquery.js"></script> <style> .box{ width: 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', "color":'green', "top":"400", "left":"600", } // animate() 自定义动画,,里面第一个属性要放到字典里.第二个是执行时间,第三个是个回函数,时间完成后执行函数 $('.box').animate(animate1,3000,function () { $(this).hide();//当前对象隐藏,让其运动到指定位置后隐藏 }) }) </script> </body> </html>
三 简单音频插件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <audio src="./Beyond - 情人.mp3" controls></audio> </body> </html>
四 jquery 的DOM操作:
样式操作
对象属性操作
标签属性操作
类操作
(1) 样式操作:
.css()
(2)类的操作:
<div class="box hide">得劲</div> <script> $('button').click(function () { // $('.box').addClass('hide'); 添加类 // $('.box').removeClass('aa bb cc'); 删除类 // $('.box').toggleClass('hide'); 如果你上面有默认,隐藏那他就会帮你删除隐藏反之给你添加(就是切换点击事件显隐) }) </script>
(3)值得操作:
# 如果没有参数,表示获取值,如果有一个参数,表示设置值
- text() 获取文本
- html() 获取标签和文本,如果某一个标签里面没有子元素,那我可以完全用他来渲染该标签的内部
- val() 获取value值
(4)对象属性操作:
# 如果有一个参数,表示获取值,两个参数,设置值
prop()
# 移除单个值或者多个值,多个值用空格隔开
removeProp()
(5)标签属性操作:
# 如果有一个参数,表示获取值,两个参数,设置值
attr()
# 移除单个值或者多个值,多个值用空格隔开
removeAttr()