本文详细介绍了jQuery的各种效果，包括显示隐藏、滑动、透明度和自定义动画，并展示了属性的获取与设置方法。此外，还涵盖了文本内容、元素遍历、创建删除以及尺寸位置的操作。同时，讲解了事件注册，如on()方法、事件委托、解绑和自动触发，最后讨论了jQuery对象拷贝和多库共存的实现。
目录
1.element.on(events,[selector],fn)
一：jQuery效果
| 效果 | 元素 | 语法规范 |
|---|---|---|
| 显示隐藏 | show(); hide(); toggle() | show([speed],[easing],[fn])。speed三种预定字符串("slow"/'normal'/fast)或表示动画时长的毫秒数（1000指1秒）。easing默认是(swing)可用（linear）fn:回调函数每个函数执行一次 |
| 滑动 | slideDown(); slideUp(); slideToggle() | 与上方一样 |
| 淡入淡出 | fadeIn(); fafeOut(); fadeToggle() ; fadeTo(); | fadeIn([speed],opacity,[easing],[fn])。opacity取值在(0,1)之间。其他同上 |
| 自定义动画 | animate | animate(params,[speed],[easing],[fn] |
1.显示隐藏
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
<script>
//显示
$(function(){
$("button").eq(0).click(function(){
$("div").show(1000,function(){
alert(1);
});
})
//隐藏
$("button").eq(1).click(function(){
$("div").hide(1000,function(){
alert(1);
});
})
//切换
$("button").eq(2).click(function(){
$("div").toggle(1000,function(){
alert(1);
});
})
});2.滑动
<body>
<button>下拉</button>
<button>上拉</button>
<button>切换滑动</button>
<div></div>
<script>
//下拉
$(function(){
$("button").eq(0).click(function(){
$("div").slideDown();
})
//上拉
$("button").eq(1).click(function(){
$("div").slideUp();
})
//切换
$("button").eq(2).click(function(){
$("div").slideToggle();
});
});
//事件切换
$(".nav>li").hover(function(){//鼠标离开和切换的复合写法
$(this).children("ul").slideDown(200);
},function(){
$(this).children("ul").slideUp(200);
})3.透明度
<body>
<button>淡入效果</button>
<button>淡出效果</button>
<button>切换</button>
<button>修改透明度</button>
<div></div>
<script>
$(function(){
$("button").eq(0).click(function(){
$("div").fadeIn(3000);//淡入
})
$("button").eq(1).click(function(){
$("div").fadeOut(3000);//淡出
})
$("button").eq(2).click(function(){
$("div").fadeToggle(3000);//切换
})
$("button").eq(2).click(function(){
$("div").fadeTo(3000,0.5);//透明度
})
})4.定义动画
<style>
div{
position:absolute;
width:200px;
height:200px;
background:pink;
}
</style>
</head>
<body>
<button>运动</button>
<div></div>
<script>
$(function(){
$("button").click(function(){
$("div").animate({//变化后的值
left:500,
top:300,
opacity:.4
},500);
})
})二：jQuery属性操作
1.获取属性方法
attr("属性")//类似于原生getAttribute()
2.设置属性语法
attr("属性","属性值")//类似原生setAttribute()
<body>
<a href="http://www.itcast.cn" title="电脑">电脑</a>
<input type="checkbox" name="" id="" checked>
<div index="1" data-index="2">我是div</div>
<script>
$(function(){
//1.element.prop("属性名")获取元素固有属性值
console.log($("a")).prop("href");
$("a").prop("title","都挺好");
$("input").change(function(){
console.log($(this).prop("checked"));
});
//console.log($("div")).prop("index");
//2.元素自定义属性
cosole.log($("div").attr("index"));
$("div").attr("index",4);
//3.数据缓存
$("span").data("uname","andy");
console.log($("span").data("uname"));
//这个方法获取data-index自定义属性
console.log($("div").data("index"));
})三：jQuery文本内容值
<body>
<div>
<span>我是内容</span>
</div>
<input type="text" value="请输入内容">
<script>
//1.获取设置元素内容html
console.log($("div").html());
//$("div").html("123");
//2.设置元素文本内容
console.log($("div").text());
//$("div")html("123");
$("div").text("123");
//3.获取设置表单元素val()
console.log($("input").val());
$("input").val("123");
四：jquery遍历each
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
$(function(){//第一种遍历方法
//$("div").css("color","red");
//如果针对同一元素做不同操作
var arr=["red","green","blue"];
var sum=0;
$("div").each(function(i,domEle){
//回调函数第一个参数一定是索引号,第二个参数是dom元素对象
$(domEle).css("color",arr[i]);
sum +=parseInt($(domEle).text());
//parseInt转换为数字类型
})
//第二种方法$.each(object,function(index,element){xxx;})
$.each({
name:"andy",
age:18,
},function(i,ele){
console.log(i);
console.log(ele);
})
})
五：创建添加删除元素
<body>
<ul>
<li>我是李</li>
</ul>
<div class="text">我是div</div>
<script>
$(function(){
//1.创建元素
var li=$("<li>我是后来的li</li>")
//2.添加元素
//(1)内部添加
$("ul").append(li);//内部添加并且放到内容最后面
$("ul").prepend(li);//内部添加并且放到内容最前面
//(2)外部添加
//element.after("内容")把内容放目标元素后面
//element.before("内容")把内容放在目标元素前面
var div=$("<div>寝你那句</div>");
$(".text").after(div);
$(".text").before(div);
//3.删除元素element.remove()删除元素本身
//element.empty()删除元素集合中所有子节点
//element.html("")清空匹配的元素内容
$("ul").remove();
$("ul").empty();
$("ul").html("");
})六：jQuery尺寸，位置方法
1.jQuery尺寸
| 语法 | 用法 |
|---|---|
| width()/height() | 取的匹配元素的宽度和高度 |
| innerWidth()/innerHeight() | 取得匹配元素的宽和高包含padding |
| outerWidth()/outerHeight() | 取得匹配元素的宽和高包含padding，border |
| outerWidth(true)/outerHeight(true) | 取得匹配元素的宽和高，包含padding，border，margin |
<style>
div{
width:200px;
height:200px;
background-color:pink;
padding:10px;
border:15px soild red;
margin:20px;
}
</style>
</head>
<body>
<div></div>
<script>
$(function(){
//第一种
console.log($("div").width());
$("div").width(300);
//第二种
console.log($("div").innerWidth());
//第三种
console.log($("div").outerWidth());
//第四种
console.log($("div").outerWidth(true));
})2.位置
| 方法 | 用法 |
|---|---|
| offset()有两个属性left和top可以设置偏移 | 获取设置距离文档的位置 |
| position()不能设置偏移 | 获取距离带有父级定位的位置，若无父级定位则以这类文档为准 |
| scrollTop()/scrollLeft() | 页面滚动 |
<style>
*{
margin:0;
padding:0;
}
.father{
width:400px;
height:400px;
background-color:pink;
margin:100px;
overflow:hidden;
}
.son{
width:150px;
height:150px;
background-color:purple;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<script>
$(function(){
//第一种
console.log($(".son").offset());
console.log($(".son").offset().top);
$(".son").offset({
top:200,
left:200
});
//第二种
console.log($(".son").position()); <body>
<div class="back">返回顶部</div>
<div class="container">
</div>
<script>
$(function(){
var boxTop=$(".container").offset().top;
$(window).scroll(function(){
console.log($(document).scrollTop());
if($(document).scrollTop()>=boxTop){
$(".back").fadeIn();
}else{
$(".back").fadeOut();
}
});
$(".back").click(function(){
$("body,html").stop().animate({
scrollTop:0
});
})
})七：jquery事件注册
1.element.on(events,[selector],fn)
on()方法在匹配元素上绑定一个或多个事件的事件处理函数
events:一个或多个空格分割的事件类型
selector:元素的子元素选择器
fn:回调函数
<style>
div{
width:100px;
height:100px;
background-color:pink;
}
</style>
</head>
<body>
<div></div>
<script>
$(function(){
$("div").click(function(){
$(this).css("background","purple");
});
$("div").mouseenter(function(){
$(this).css("background","blue");
});
//2.事件处理on
$("div").on({
mouseenter:function(){
$(this).css("background","blue");
},
click:function(){
$(this).css("background","red");
},
mouseleave:function(){
$(this).css("background","purple");
}
})
//3.
$("div").on("mouseenter mouseleave",function(){
$(this).toggleClass("current");
})
})2.事件委托：
$("ul").on("click","li",function(){
alert("11");
})//click绑定ul，但触发对象是ul里面的小li3.事件解绑：
<script>
$("div").on({
click:function(){
console.log("点击");
},
mouseover:function(){
console.log("经过");
},
$("div").off();//括号里为空解绑所有事件
$("div").off("click");//解绑所有div点击事件
$("ul").off("click","li");//解绑事件委托
//one()只触发一次
$("p").one("click",function(){
alert(11);
})
})
</script>
</head>
<body>4.自动触发事件
<script>
$(function(){
$("div").on("click",function(){
alert(11);
});
//自动触发
$("div").click();//第一种
$("div").trigger("clik");//第2种
$("div").triggerHandler("click");//第3种不会触发元素的默认行为，直接显示。
$("input").on("focus",function(){
$(this).val("你好吗");
});
})
</script>
<body>
<div></div>
<input type="text">
</body> 八：jQuery对象拷贝，多库共存
'''
$.extend([deep],target,object1,[objectN])
deep:如果设为true为深拷贝。target:要拷贝的目标对象。object1:待拷贝到第一个对象的对象。objectN:代拷贝到第N个对象的对象 浅拷贝：浅拷贝把原来对象里面的复杂数据类型地址拷贝给目标对象，修改目标对象会影响被拷贝对象。
深拷贝：前面加true，完全克隆拷贝对象，而不是目标地址，修改目标对象不会影响被拷贝对象
'''
<script>
$(function(){
var targetObj={};
var obj={
id:1,
name:"andy"
};
$.extend(targetObj,obj);
console.log(targetObj);
//第二种
var targetObj={
id:0,
msg:{
sex:"男"
}
}
var targetObj={};
var obj={
id:1,
name:"andy"
};
$.extend(targetObj,obj);
console.log(targetObj);//会覆盖targetObj里面原来的数据
//1.浅拷贝把原来对象里面的复杂数据类型地址拷贝给目标对象
targetObj.msg.age=20;
console.log(targetObj);
console.log(obj);
//深拷贝
$.extend(true,targetObj,obj);
targetObj.msg.age=20;
console.log(targetObj);
console.log(obj);
})
</script> 可以把$改为jQuery
7664
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
