一.jQuery的概念
封装了大量的js,封装了js的入口函数,兼容性问题,DOM操作,事件,ajax
核心思想:write less,do more
官网:jqury.com下载(也可以搜索bootcdn下载)
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js 是正常的jQuery代码
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js 是压缩的jQuery代码
导入:<script type="text/javascript" src="(指定目录下的)jQuery.js"></script>
jQuery内部的api99%都是方法
事件三步走:
jQuery中绑定事件直接$('选择器就可以')
jQuery中的事件就是JavaScript中的事件去掉on
jQuery中的事件驱动就是事件的回调函数
例:$('#box').click(function(){
$('#box').css('color','red);
})
二.jQuery的入口函数
1.不用等待图片资源加载完成后就可以调用(入口函数没有时间覆盖现象)
<script type="text/javascript" src="jQuery.js"></script>
$(document).ready(function(){
具体操作代码
})
2.简便写法:
$(function(){
具体操作代码
})
三.js对象和jQuery对象的相互转换
1.jQuery对象转换成js对象
(1)
<script>
$(function(){
//去jQuery对象中的每一个值
console.log($('li'))
})
</script>
(2)
jq对象.get(索引)
2.js对象转换成jQuery对象
<script>
$(function(){
oA=document.getElementById('a');
console.log($(oA))
})
</script>
四.选择器
(博客)
1.css中已经学习的选择器
图
2.紧邻选择器(紧挨着的,是下一个不是上一个)
<body>
<div>
<p>sddf</p>
<a href="#">ede</a>
<p>a</p>//红色
<p>awe</p>
</div>
<script type="text/javascript" src="../day45/jQuery.js"></script>
<script>
$(function(){
console.log($('a+p').css('color','red'))
})
</script>
</body>
3.基本过滤选择器(从多个中选出一个指定索引的)
<body>
<div>
<span>a</span>
<span>g</span>
<span>th</span>
<span>j</span>
</div>
<script type="text/javascript" src="../day45/jQuery.js"></script>
<script>
$(function(){
$('div span:eq(2)').css('color','red')
})
</script>
</body>
4.属性选择器
<body>
<form action="#">
<input type="text">
<input type="submit">
<input type="password">
</form>
<script type="text/javascript" src="../day45/jQuery.js"></script>
<script>
//type上不用加引号
$('input[type=text]').css('background-color','red')
</script>
</body>
5.筛选选择器
1.find('选择器')
查找指定元素的所有后代元素(包括子子孙孙)
<body>
<div>
<a href="">dg</a>
<div><ul>
<li>c</li>
<li>c</li>
<li>c</li>
</ul></div>
<span>
<a href="">n <span>按时</span></a>
</span>
<form action=""><input type="text"></form>
</div>
<script type="text/javascript" src="../day45/jQuery.js"></script>
<script>
$(function(){
$('div').find('a').css('color','red').mouseout(function(){
//得到的是js对象
console.log(this)
})
})
</script>
</body>
2.children('选择器')
选中的是指定元素的直接子元素(亲儿子)
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<a href="">dg</a>
<div><ul>
<li>c</li>
<li>c</li>
<li>c</li>
</ul></div>
<span>
<a href="">n <span>按时</span></a>
</span>
<form action=""><input type="text"></form>
</div>
<script type="text/javascript" src="../day45/jQuery.js"></script>
<script>
$(function(){
$('div').children('a').css('color','red')
})
</script>
</body>
3.parent()
查找父元素(亲的)
<body>
<div>
<a href="">dg</a>
<div><ul>
<li>c</li>
<li>c</li>
<li>c</li>
</ul></div>
<span>
<a href="">n <span>按时</span></a>
</span>
<form action=""><input type="text"></form>
</div>
<script type="text/javascript" src="../day45/jQuery.js"></script>
<script>
$(function(){
console.log($('span a').parent())
})
</script>
</body>
4.eq('索引')
从所有符合条件的中选择某一个
<body>
<div>
<a href="">dg</a>
<div><ul>
<li>c</li>
<li>c</li>
<li>c</li>
</ul></div>
<span>
<a href="">n <span>按时</span></a>
</span>
<form action=""><input type="text"></form>
</div>
<script type="text/javascript" src="../day45/jQuery.js"></script>
<script>
$(function(){
console.log($('a')[1])
})
</script>
</body>
5.siblings()
查找所有兄弟元素(不包括自己)
<body>
<ul>
<li>a</li>
<li>a</li>
<li>ad</li>
<li>ad</li>
<li>ad</li>
</ul>
<script type="text/javascript" src="../day45/jQuery.js"></script>
<script>
$(function(){
$('li').click(function(){
$(this).css('color','red');
$(this).siblings('li').css('color','#999');
})
})
</script>
</body>
五.对样式属性的操作
设置css.样式(css里面的属性可以用驼峰体,也可以用-连接)
单个:
$('#box').css('color','red)
多个:
$('#box').css{
'color':'red';
'width':'200px':
}
例:
$('.box').click(function(){
$('.box').css({
'background-color':'green',
'width':'200px',
})
})
六.DOM的操作
1.对标签属性的操作
attr()
<body>
<div class="aaa"></div>
<script type="text/javascript" src="jQuery.js"></script>
<script>
$(function(){
//attr中只有一个值是获取属性
console.log($('.aaa').attr('class'));
//设置单个属性
$('.aaa').attr('id','bbb');
//一次设置多个属性
$('.aaa').attr(
{
'color':'yellow',
'background-color':'red',
})
})
</script>
</body>
removeAttr()
<body>
<div class="aaa"></div>
<script type="text/javascript" src="jQuery.js"></script>
<script>
$(function(){
$('.aaa').removeAttr('class');
})
</script>
</body>
2.对标签对象属性的操作
prop()
特例,只在input的radio中应用
<body>
男<input type="radio" name="sex" checked>
女<input type="radio" name="sex" >
<script type="text/javascript" src="jQuery.js"></script>
<script>
$(function(){
console.log($('input').eq(0).prop('checked'));
console.log($('input').eq(1).prop('checked'));
})
</script>
</body>
removeProp()
3.对值得操作
html()
对标签和文本操作
如果没有参数表示获取值
有参数表示赋值
<body>
<div class="aaa"></div>
<script type="text/javascript" src="jQuery.js"></script>
<script>
$(function(){
$('.aaa').html('<a>百度一下</a>');
})
</script>
</body>
text()
对文本操作,如果没有参数表示获取值
有参数表示赋值
<body>
<div class="aaa"></div>
<script type="text/javascript" src="jQuery.js"></script>
<script>
$(function(){
$('.aaa').text('<a>百度一下</a>');//<a>百度一下</a> 此时的a标签不起作用
})
</script>
</body>
val()
一定是标签中有value属性的
表单控件
<body>
<form action="javascript:void(0)">
<input type="text" value="不犯法">
</form>
<script type="text/javascript" src="jQuery.js"></script>
<script>
$(function(){
$('input').val('a');
})
</script>
</body>
4.对类名的操作
addClass()
在原有类名的基础上增加新的类名
<body>
<div class="a"></div>
<script type="text/javascript" src="jQuery.js"></script>
<script>
$(function(){
$('div').addClass('b')
})
</script>
removeClass()
移除所有类名中的某一个类名或某一些类名
<body>
<div class="a"></div>
<script type="text/javascript" src="jQuery.js"></script>
<script>
$(function(){
$('div').addClass('b');
$('div').removeClass('a b')
})
</script>
</body>
toggleClass()
如果类名存在就移除,不存在就增加
<body>
<div class="a"></div>
<script type="text/javascript" src="jQuery.js"></script>
<script>
$(function(){
$('div').addClass('b');
$('div').toggleClass('b')//移除
})
</script>
</body>
六.对属性的操作
jquery的属性操作模块分为四个部分：html属性操作，dom属性操作，类样式操作和值操作
DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。比如prop()、removeProp()
九.动画
9.1
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
100px;
height: 100px;
/*display: none;*/
}
</style>
</head>
<body>
<button>动画</button>
<button>动画</button>
<button>动画</button>
<div class="box"></div>
<script type="text/javascript" src="jQuery.js"></script>
<script>
$(function(){
isshow=true;
$('button').click(function(){
//显示隐藏
//hide() 隐藏方法 获取多个事件时,不用主动便利,内部直接便利
// 括号里不加参数就是直接隐藏,
// 括号里加参数,第一个参数是隐藏所用的时间,第二个参数一秒之后执行的回调函数
// $('.box').hide(1000);
//与hide()用法相同
// $('.box').show(1000,function(){
// alert(1);
// });
//显示隐藏简单版
// $('.box').stop().toggle(1000);
//淡入淡出
//$('.box').fadeIn(2000);
//显示
// $('.box').fadeOut(2000);
//隐藏
//卷下来,卷上去
//$('.box').slideDown(2000);
//$('.box').slideUp(2000);
//主动操控
//if(isshow){
//清定时器,先清后开
// $('.box').stop().slideUp(2000);
//isshow=false
// }else{
// $('.box').stop().slideDown(2000);
//isshow=true;
// }
//jQuery封装好的
// $('.box').stop().slideToggle(1000);
})
})
</script>
</body>
9.2自定义动画
$("选择器").click(function () {
var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100};
// 样式字典 所用时间 回调函数
$("div").animate(json, 1000, function () {
alert("动画执行完毕！");
});
})
十,