jquery初介绍
1.jquery介绍
jquery可以理解为一个javascript的库(也可以叫轮子)，跟我们写的js文件一样，jquery是一个凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档，操作DOM，执行动画和开发Ajax的操作。jQuery封装了很多预定义的对象和函数
2.jquery的特性
jquery可以做以下事情
HTML元素选取
HTML元素操作
CSS操作
HTML事件函数
JavaScript特效和动画
HTML DOM遍历和修改
AJAX
Utilities
写个简单的例子
<html>
<head>
<meta charset="UTF-8">
<title>dom操作</title>
<script src="jquery-3.3.1/jquery-3.3.1.min.js"></script>
<script>
$(function(){
alert('Hello World');
});
</script>
</head>
</html>
jquery的方法大部分都是用$()来引用
举几个例子
$('div').html()//删选出与div相关的所有信息
$('div').html('大家好').css('color','red')//添加大家好的内容，并且更改css样式的颜色为红色
3.jquery的dom对象与js对象的互换
//dom对象和js对象的互换
var Div=document.getElementsByTagName('div')[0]
var $Div=$(Div);//js对象转换成Jq对象
4.jquery选择器
<body>
<div>1</div>
<div id="box">
<p>555</p>
<p>4646</p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<script>
//基本选择器
console.log($('div'));
console.log($('#box'))
$("#box p:eq(0)").css({
'background':'red','color':'blue','width':'200px'});
//eq表示选择第几个,css多个样式用{}
//层级选择器
$('#box p');
$('#box > p');
console.log('#box,p');
//过滤选择器
console.log($("#box>p:first"));
console.log($("#box>p:last"))
</script>
</body>
5.jquery的事件
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<button>链式事件</button>
<div class="box"></div>
<script>
//普通的写法
// console.log($.prototype)
// $('ul li').click(function(event){
// console.log(event)
// })
//绑定事件写法
// $('ul li').bind('click',function(event){
// console.log(event)
// })
//链式绑定
// $('button').bind('mousedown',function(){
// $(this).css('color','red')
// }).bind('mouseup',function(){
// $(this).css('color','yellow')
// })
//jq的事件委托
//给ul绑定一个click，目标源是li
// $('ul').on('click','li',function(){
// console.log($(this).index())//指向li,index获取索引
// })
//解脱事件
$('button').click(function(){
$('ul').off()
})
//绑定多个事件
$('.box').on('mouseover mouseout',function(e){
if(e.type=='mouseover'){
// $(this).css('color','blue')
}else if(e.type=='mouseout'){
}
})
//有一些方法是合成事件
$('div').hover(function(){
console.log(56)
},function(){
console.log(55556)
})
$('ul li').toggle(function(){
$(this).css('background','red')
},function(){
$(this).css('background','yellow')
})
</script>