首页 / JQUERY / web前端-框架jquery
web前端-框架jquery
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了web前端-框架jquery，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6402字，纯文字阅读大概需要10分钟。
内容图文
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
>
原文：https://www.cnblogs.com/quguanwen/p/11353254.html
内容总结
以上是互联网集市为您收集整理的web前端-框架jquery全部内容，希望文章能够帮你解决web前端-框架jquery所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。