jQuery常用方法
$的作用
-
1.$是一个函数名，等值于jQuery
把$换成jQuery也是一样的
-
2.$作为选择器，获取jQuery对象 3.$将DOM对象转换成jQuery对象
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<script src="script/jquery-3.6.1.js"></script>
<script>
//$()将DOM对象包装成jQuery对象，之后就能使用jQuery的方法
$("button").click(function(){
console.log($("button"))
//获取的不是DOM对象，而是DOM对象对应的jQuery对象
})
</script>
- 4.$(this)
<input type="button" value="按钮1">
<input type="button" value="按钮2">
<input type="button" value="按钮3">
<script src="script/jquery-3.6.1.js"></script>
<script>
$("input").click(function(){
console.log(this)
//输出的是DOM对象如<input type="button" value="按钮1">，而非jQuery对象
console.log(this.value)//DOM.value 如按钮1
})
</script>
如果想获取到jQuery对象，可以用$(this)将DOM转换成jQuery
<input type="button" value="按钮1">
<input type="button" value="按钮2">
<input type="button" value="按钮3">
<script src="script/jquery-3.6.1.js"></script>
<script>
$("input").click(function(){
console.log($(this))//jQuery对象
console.log($(this).val())//获取value
})
</script>
不过$(this)仅针对以前浏览器兼容性差的时候，现在直接用this就行
如果用jQuery写就还是用$(this)以保持代码统一
常用方法
index();获取元素索引
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<script src="script/jquery-3.6.1.js"></script>
<script>
$("button").click(function(){//点击按钮获取对应索引
let index = $(this).index();
console.log(index);
})
</script>
text();获取和设置文本节点
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<script src="script/jquery-3.6.1.js"></script>
<script>
$("button").click(function(){
let text = $(this).text();
console.log(text);
$(this).text("新按钮");
})
</script>
css();获取和设置css
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<script src="script/jquery-3.6.1.js"></script>
<script>
$("button").click(function(){
let height = $(this).css("height");//获取css
console.log(height);
//设置css
// $(this).css("height","60px")//单个
$(this).css({
height:"60px",
width:"60px"
})
})
</script>
val();获取和设置value属性
<input type="button" value="按钮1">
<input type="button" value="按钮2">
<script src="script/jquery-3.6.1.js"></script>
<script>
$("input").click(function(){
let value = $(this).val();
console.log(value);
$(this).val("新按钮");
})
</script>
attr();获取和设置属性值
<style>
img{
width: 640px;
height: 320px;
}
</style>
</head>
<body>
<img src="img/1.jpg" alt="">
<button>换图</button>
<script src="script/jquery-3.6.1.js"></script>
<script>
$("button").click(function(){
$("img").attr("src","img/2.jpg");
})
</script>
</body>
切换图片
<style>
img{
width: 640px;
height: 320px;
}
</style>
</head>
<body>
<img src="img/1.jpg" alt="">
<div>
<button>1</button>
<button>2</button>
<button>3</button>
</div>
<script src="script/jquery-3.6.1.js"></script>
<script>
let imgSrc = [
"img/1.jpg",
"img/2.jpg",
"img/3.jpg"
];
$("button").click(function(){
let index = $(this).index();
$("img").attr("src",imgSrc[index]);
})
</script>
</body>
addClass();添加class
<style>
.active{
background-color: red;
}
</style>
</head>
<body>
<button>1</button>
<button>2</button>
<button>3</button>
<script src="script/jquery-3.6.1.js"></script>
<script>
$("button").click(function(){
$(this).addClass("active");
})
</script>
</body>
removeClass();删除class
<style>
.active{
background-color: red;
}
</style>
</head>
<body>
<button class="active">1</button>
<button class="active">2</button>
<button class="active">3</button>
<script src="script/jquery-3.6.1.js"></script>
<script>
$("button").click(function(){
$(this).removeClass("active");
})
</script>
</body>
toggleClass();切换class
<style>
.active{
background-color: red;
}
</style>
</head>
<body>
<button class="active">1</button>
<button class="active">2</button>
<button class="active">3</button>
<script src="script/jquery-3.6.1.js"></script>
<script>
$("button").click(function(){
$(this).toggleClass("active");//有就删掉，没有就加上
})
</script>
</body>
点击按钮1，active被删掉
再点击按钮1，active又被添加
sibings();获取同级其他元素
<style>
.active{
background-color: red;
}
</style>
</head>
<body>
<button class="active">1</button>
<button>2</button>
<button>3</button>
<script src="script/jquery-3.6.1.js"></script>
<script>
$("button").click(function(){
$(this).addClass("active");
$(this).siblings().removeClass("active");//同级的其他元素删除active
})
</script>
</body>
find("selector");获取子级
<style>
.box{
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="box">
<button>按钮</button>
</div>
<div class="box">
<button>按钮</button>
</div>
<div class="box">
<button>按钮</button>
</div>
<script src="script/jquery-3.6.1.js"></script>
<script>
$(".box").click(function(){
$(this).find("button").css("background-color","blue")//.box的子级button
})
</script>
</body>
点击box的区域按钮背景色就会变蓝
parent();获取父级
<style>
.box{
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="box">
<button>按钮</button>
</div>
<div class="box">
<button>按钮</button>
</div>
<div class="box">
<button>按钮</button>
</div>
<script src="script/jquery-3.6.1.js"></script>
<script>
$("button").click(function(){
$(this).parent().css("background-color","blue")//button的父级.box
})
</script>
</body>
DOM操作
remove();
<ul class="fruits">
<li>苹果</li>
<li>香蕉</li>
<li>雪梨</li>
</ul>
<script src="script/jquery-3.6.1.js"></script>
<script>
$(".fruits li").click(function(){
$(this).remove();
})
</script>
点击香蕉，香蕉节点就会被删除
append();
<input type="text">
<button>添加</button>
<ul class="fruits">
<li>苹果</li>
<li>香蕉</li>
<li>雪梨</li>
</ul>
<script src="script/jquery-3.6.1.js"></script>
<script>
$("button").click(function(){
let value = $("input").val();
let li = $(`<li>${value}</li>`);//新建li标签
$(".fruits").append(li);//添加节点
})
$(".fruits").on("click","li",function(){//第二个参数是选择器，找到li
$(this).remove();//this指向li，用$()包装后用remove方法删除
});//on实现事件委托
</script>
jQuery事件
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
<script src="script/jquery-3.6.1.js"></script>
<script>
$(".box").mouseenter(function(){
console.log("enter");
});
$(".box").mouseleave(function(){
console.log("leave");
});
$(".box").mousemove(function(){
console.log("move");
});
</script>
</body>
let rt = $(".box").mouseenter();
console.log(rt);
函数返回值是box的div
所以可以采用链式编程
$(".box").mouseenter(function(){
console.log("enter");
}).mouseleave(function(){
console.log("leave");
}).mousemove(function(){
console.log("move");
});
- 获取坐标
<script>
$(".box").mouseenter(function(){
console.log("enter");
}).mouseleave(function(){
console.log("leave");
}).mousemove(function(e){
let x = e.pageX;
let y = e.pageY;
console.log(`横坐标：${x}，纵坐标：${y}`);
});
</script>
jQuery动画方法
show()&hide()
<style>
.box{
width: 89px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<button class="show">显示</button>
<button class="hide">隐藏</button>
<div class="box"></div>
<script src="script/jquery-3.6.1.js"></script>
<script>
$(".show").click(function(){
$(".box").show(500);//500ms过渡
});
$(".hide").click(function(){
$(".box").hide(500);
});
</script>
</body>
fadeiIn()&fadeOut()
<style>
.box{
width: 89px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<button class="fadeIn">显示</button>
<button class="fadeOut">隐藏</button>
<div class="box"></div>
<script src="script/jquery-3.6.1.js"></script>
<script>
$(".fadeIn").click(function(){
$(".box").fadeIn(500);//500ms过渡
});
$(".fadeOut").click(function(){
$(".box").fadeOut(500);
});
</script>
</body>
通过改变透明度实现隐藏和显示
jQuery的动画已被css3所取代，动画用css3设计
