JQuery
2022-11-03 本文已影响0人
山猪打不过家猪
1.认识JQuery
所有的jquery都要写在这里面
$(function(){
})
DOM和JQ对象
1.DOM对象，原生JS获取DOM对象
var myDiv = document.querySelector('div')
2.JQ获取div对象，得到一个jq对象
$('div')
DOM对象只能使用JS方法，JQ对象只能使用JQ的方法
3.两个对象相互转换
- DOM——JQ
<video src="mov.mp4"></video>
<script>
//方法一：DOM-JQ
$('video');
//方法二：DOM-JQ
var myVideo = document.querySelector('video');
$(myVideo);
</script>
3.两个对象相互转换
- JQ——DOM
//1
$('video')[0].play();
//2
$('video').get(0).play();
2.常用方法
2.1 选择器
常用选择器
image.png
后代选择器
image.png
- 和css基本一致
注意：>表示的第一层的亲儿子，空格表示所有的儿子
筛选选择器
image.png
选择器方法（重点）
image.png
2.2 方法
设置样式
-
$('div').css(属性名，属性值)简单样式
<script>
$(function(){
//获取页面中4个div
$('div').css('background','pink');
//最后一个li
$('ul>li:last').css('background','red');
})
</script>
- 复杂样式
<body>
<div>我是div</div>
<script>
$(function(){
$('div').css({
'width':'200px',
'height':'200px',
'background':'red',
});
})
</script>
</body>
jq排他
- 点击变色
<body>
<button>排他</button>
<button>排他</button>
<button>排他</button>
<button>排他</button>
<button>排他</button>
<button>排他</button>
<script>
$(function(){
//1.给所有的button绑定点击事件
$('button').click(function(){
//2.当前元素变化背景颜色
$(this).css('background','red');
//3.其余的兄弟去掉背景色
$(this).siblings('button').css('background','');
})
})
</script>
</body>
- 链式编程，写一行
$(this).css('background','red').siblings('button').css('background','');
京东Tab栏切换
image.png
image.png
事件切换
$('nav').hover(function(){鼠标经过},function(){鼠标离开});
<script>
$(function(){
$('.nav').hover(function(){
$(this).children('ul').stop().slideToggle();
})
})
</script>
设置属性
prop(属性,属性值)
<script>
$(function(){
$('a').prop('href','www.baidu.com')
})
})
</script>
-
attr(属性,属性值)获取自定义属性
<script>
$(function(){
$('a').prop('data-index','2')
})
})
遍历
对同一个元素做不懂的操作
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
$(function(){
var arr = ['red','blue','green']
//第一个参数：index,第二个dom对象
$('div').each(function(i,domEle){
$(domEle).css('backgroundColor',arr[i]);
})
})
</script>
</body>
-
$.each()遍历数组和对象
$(function(){
var arr = ['red','blue','green']
//遍历数组,对象
$.each(arr,function(i,domEle){
console.log(i);
console.log(domEle)
})
})
