操作类的三个方法
// 1,addClass(class|fn)
// z作用 添加一个类 如果要添加多个,多个类名之间用空格隔开
// 2,removeClass([class|fn])
// 删除一个类 删除多个之间用空格隔开
// 3,toggleCLass(class|fn.[,sw])
// 切换类
var btns = document.getElementsByTagName("button");
btns[0].onclick = function () {
$("div").addClass("class1 class2");
}
btns[1].onclick = function () {
$("div").removeClass("class2 class1");
}
btns[2].onclick = function () {
$("div").toggleClass("class2 class1");
}
操作位置和尺寸
var btns=document.getElementsByTagName("button");
btns[0].onclick=function(){
console.log($(".father").width());
// height()方法和次类似
// offset([coordinates])
// 作用:获取元素距离窗口的偏移位置
console.log($(".son").offset().left);
// position()
// 作用 获取元素距离定位元素的位置 只能获取不能设置
console.log($(".son").position().left);
}
btns[1].onclick=function(){
$(".father").width("500px");
$(".son").offset({
left:10
})
}
操作位置和尺寸
// 1,html
// 和原生的innerHTML一模一样
// 2,text
// 和innerText一样
// 3,val
var btns=document.getElementsByTagName("button");
btns[0].onclick=function(){
$("div").html("<p>我是段落<p>");
}
btns[1].onclick=function(){
console.log($("div").html());
}
btns[4].onclick=function(){
console.log($("input").val("去输入"));
}
操作样式
$(function () {
// 逐个设置
// $("div").css("width","100px");
// $("div").css("height","100px");
// // 2,链式设置
// $("div").css("width","100px").css("height","100px")
// // 3批量设置
$("div").css({
width:"100px",
height:"50px",
backgroundColor:"red"
})
// 4获取
console.log($("div").css("width"));
})
操作滚轮
var btns = document.getElementsByTagName("button");
btns[0].onclick = function () {
// 获取滚动的偏移位
console.log($(".scrollTop").scrollTop());
// 获取网页的滚动位置
console.log($("body").scrollTop()+("html").scrollTop())
}
btns[1].onclick=function(){
$(".scrollTop").scrollTop("300");
}