web前端-框架jquery
1.jquery库
就是js的库 ,可以通过jquery语法简化js操作 ,如文档遍历 ,文档操作 ,事件处理 ,动画js定时器等等
2.引用
下载:https://www.bootcdn.cn/jquery
引用:加入一条js在文档中<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js"></script>
3.jquery的选择器
1)基本选择器(与css一致)
# id选择器
. 类选择器
标签 标签选择器
* 通配符选择器
2)高级选择器(与css一致)
空格 空格 后代选择器
> > 自带选择器
3)过滤选择器(特殊)
:eq(index) 选择对象集合指定索引的dom,返回jq对象
:first 选择对象集合第一个dom对象,返回jq对象
:last 选择匹配的最后一个dom对象,返回jq对象
4)jeuery的链式编程筛选方法 ,jquery对象才有的方法 ,返回jq对象
find(选择器) 查找指定后代元素
children() 查找指定元素的子代
siblings() 查找兄弟元素
parent() 查找父元素
eq(index) 查找jq集合对象中第几个对象
5)语法
$('选择器').筛选方法().筛选方法()....
6)js对象转换为jquery对象
$(js对象)
###
<body> <div class="j1"> <ul> <li>111A</li> <li>222B</li> <li>333C</li> <li>444D</li> </ul> </div> <div class="j2"> <ul> <li>111A</li> <li>222B</li> <li>333C</li> <li>444D</li> </ul> </div> <script src="jsjquery.js"></script> <script> $('.j1 ul li:eq(2)').css({'color':'red','font-size':'30px'}); $('.j1 ul li:last').css({'color':'green','font-size':'30px'}); $('.j1 ul li:first').css({'color':'blue','font-size':'30px'}); let test = $('.j2'); test.children().children().eq(1).siblings().css({'color':'blue'}); test.find('li:eq(1)').css({'color':'red'}); console.log(test.children().parent()); </script> </body>
4.jquery的文档操作
对值操作
text() 修改内容
html() 修改整个元素
val() 修改值, 如input的value
对属性操作
arrt({'属性':'值' ,'属性':'值' ,'属性':'值'}) 设置属性
removeAttr('属性', '属性') 删除属性
对样式操作
css()
对类选择器操作
addClass()
removeClass()
toggleClass(A) 开关操作(如通过点击事件触发 ,如果有A这个类就移除 ,没有就添加)
对父子标签操作
父对象.append('标签') #父元素插入新子元素
子对象.appendTo('父对象选择器') #子元素插入指定的父元素
对兄弟标签操作
对象A.after(对象B) #A的后边插入B
对象A.before(对象B) #A的前边插入B
对象A.insertAfter(对象B) #A插入到B的后边
对象A.after(对象B) #A插入到B的前边
替换操作
对象A.replacewith(对象B) #替换一个标签
对象A,replaceall(对象B) #替换所有匹配标签
删除操作
对象A.remove() #对象A删除
对象A.empty() #清空对象A和自己后代所有元素
####练习
<body> <div class="d1"></div> <div class="d2"></div> <div class="d3"> <ul> <li>one</li> <li>two</li> <li>three</li> <li>four</li> </ul> </div> <div class="d4"> <span>span1</span> <span>span2</span> </div> <div class="d5"> <input type="text"> <a href="">put</a> <p>p1</p> <p>p2</p> <span>remove</span> </div> <script src="jsjquery.js"></script> <script> $('input').val('testbaby'); let test = document.getElementsByClassName('d1'); test = $('a'); test.attr({'href': 'https://www.baidu.com', 'test': '666'}); test.removeAttr('test'); test.css({'color': 'blue'}); test.addClass('b1 k1 d1'); test.removeClass('k1'); test.toggleClass('d1'); //因为ddd存在所以这里是移除 let test1 = $('<h1>test1</h1>'); let divd1 = $('.d2'); test1.appendTo(divd1); $('.d1').append('<h1>test1</h1>'); let test2 = $('.d3'); test2.find('ul').children().eq(1).after('<li>ttt</li>'); $('<li>eee</li>').insertAfter(test2.find('li').eq(3)); $('.d4').children().eq(0).replaceWith('<h2>span1</h2>'); $('<h3>p</h3>').replaceAll($('.d5>p')); $('.d5 > span').remove(); //$('.d5').empty(); </script> </body>
5.jquery的事件触发
鼠标事件
click(fn) 单击事件
dbclick(fn) 双击事件
mouseleave(fn) 鼠标悬浮移除事件
mouseenter(fn) 鼠标悬浮
mousedown(fn) 鼠标按下事件
mouseup(fn) 鼠标弹起事件
语法: jq对象.事件(fn)
####互斥选项卡
<body> <div class="d1"> <button>top1</button> <button>top2</button> <button>top3</button> <button>top4</button> </div> <script src="jsjquery.js"></script> <script> $('.d1 button').click(function () { ##所有的button按钮的dom对象都关联了click事件,jq帮我们完成了遍历 $(this).siblings().removeClass('b1'); $(this).addClass('b1') }) </script> </body>
6.jquery的简单动画效果
由js定时器实现效果
stop() 清除对象的定时器
hide(时间) 在规定时间内渐变隐藏元素(display: none)
show(时间) 在回定时间渐变展示元素
toggle() 开关元素的显示和关闭
fadeOut() 淡出
fadeIn() 淡入
<body> <button>open</button> <div class="box1" style="height: 100px;width: 100px;background-color: cornflowerblue"></div> <div class="box2" style="height: 100px;width: 100px;background-color: burlywood"></div> <div class="box3" style="height: 100px;width: 100px;background-color: cadetblue"></div> <script src="jsjquery.js"></script> <script> $('.box1').mouseenter(function () { $(this).stop().hide(2000); }); $('.box1').mouseleave(function () { $(this).stop().show(2000); }); $('button').click(function () { $('.box1').toggle(1000); }); $('.box3').mouseenter(function () { $(this).stop().fadeOut(1000) }); $('.box3').mouseleave(function () { $(this).stop().fadeIn(1000) }) </script> </body>
7.ajax
异步刷新 ,需要后端传数据 ,根据传来的数据生成标签
因为异步 ,如果要处理将要生成的标签A ,可以给A的父标签设置代理on ,jq父对象.on('事件','A标签') #A标签可以是个jq的对象集合
<body> <!--数据插入li标签--> <ul class="list1"> </ul> <div id='box' style="color: coral"></div> <!--ajax是前后端协同,因此必须要一个后端数据,我们调用一下--> <!--模拟从后端拿数据,局部刷新--> <script src="jsjquery.js"></script> <script> //直接调用jq的ajax()方法,字典写法 $.ajax({ //第一个请求url url:'https://www.luffycity.com/api/v1/course_sub/category/list/', //第二个请求类型 type:'get', //第三个如果请求成功,获取数据放入函数的形参中去,res对象下的data数组 success:function (res) { console.log(res); if(res.error_no === 0){ //底层for循环遍历data列表中的每一个值(字典)和索引,取出字典中的值给ul追加li标签 res.data.forEach(function (item,index) { //为ul便签添加子li标签,必须用``模板,动态获取函数参数,字典中的name的值 $('.list1').append(`<li catid='${item.id}'>${item.name}</li>`) }) } }, //第四个如果请求出错,返回是否出错 error:function (res) { // console.log(res) } }); //异步原因,此处执行在了ajax的前面,是个空对象!!要使用代理 // console.log($('li')); // $('li').click(function () { // console.log($(this).attr('catid')); // }); //代理执行事件on,当我完成不了对未来元素操作时,交给代理,代理是父元素的方法,绑定子标签,标签可以是存在或未来的 $('ul').on('click','li',function () { //这里的this是子标签li , 并取出该li的id属性值 ,用于后面请求url做拼接使用 let catid = $(this).attr('catid'); console.log(catid); $.ajax({ //模板字符串 url:`https://www.luffycity.com/api/v1/courses/?sub_category=${catid}&ordering=`, type: 'get', success:function (res) { console.log(res); } }) }) </script> </body>
