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>