今天分享JQuery API的使用
1.JQuery操作样式:
css():css()方法可以设置或获取样式
*设置单个样式
$(“li:odd”).css(“backgroundColor”,”#00f”);
*设置多个样式(两种方法)
第一种方法:
$(“li:odd”).css(“backgroundColor”,”#00f”);
$(“li:odd”).css(“fontSize”,”14px”);
第二种方法:
$(“#one”).css({
“K”:”V”,
“K”:”V”
});
*获取样式
css(“属性”);
获取样式的时候,假如是多个元素,只会返回第一个元素对应的属性值;但是设置样式的时候,假如是多个元素,所有的元素设置都起作用。
2.class操作
原生JS的一个属性:obj.className
Jquery 提供四个方法操作类。
addClass(className) 添加一个类
removeClass(className) 移除一个类
toggleClass(className) 切换一个类
hasClass(className) 是否有这个类
3.index()方法:返回当前元素在所有兄弟元素里的索引。
4.JQuery操作属性
attr()
*单个属性操作
$("img").attr('title', '错错错');
*多个属性操作
$("img").attr({
"width":60,
"height":"60px"
});
*获取属性
$("img").attr("alt")
5.prop() 操作结果是布尔值类型的属性。
$("#ckb").prop('checked', true);
6.动画
(1)基本动画
第一组:对角切换
show(time,function); 可以只有第一个参数(毫秒)
hide(time,function); 可以只有第一个参数(毫秒)
toggle(time); show与hide来回切换
第二组:上下切换
slideDown(time,function)
slideUp(time,function)
slideToggle(time)
第三组:淡入淡出动画
fadeIn(time,funtion)
fadeout(time,function)
fadeToggle(time,function)
fadeTo(time,透明值) 淡化到透明值。一定要加时间
(2)自定义动画
animate({属性:值},毫秒,swing/linear,function)
第一个参数:对象,需要动画的样式
第二个参数:speed 动画执行的时间
第三个参数:动画执行的效果
第四个参数:回调函数
$("div:eq(0)").animate({left:700}, 8000,"swing");
$("div:eq(1)").animate({left:700}, 8000,"linear");
7.JQuery节点的动态创建与添加
第一:在父亲的末尾追加儿子
父亲.append(儿子);
儿子.appendTo(父亲);
第二组:在父亲的最前面添加儿子
父亲.prepend(儿子);
儿子.prependTo(父亲);
第三组:在父元素中追加兄弟
父亲.after(兄弟); 在父亲元素的后面添加一个兄弟元素。
父亲.before(兄弟); 在父亲元素的前面添加一个元素。
8.JQuery节点的清空与删除
*清空/删除节点的三种方法:
第一种:使用html(“”)清空元素里面的内容(常用)。html()是jq方法,表示html的内容。
第二种:使用empty()方法清空元素里面的内容,效果等同于html("")。
第三种:使用remove(),即把子元素清空,也把自己也清空。
如:
$("div").html("");
$("div").empty();
$("div").remove();
9.JQuery节点剪切黏贴
*使用append()方法把节点剪切并黏贴(放到)元素里:
$("div").append($("p:eq(2)"));
10.JQuery节点的复制黏贴
*使用clone()方法把节点复制一份后,并黏贴到元素里
$("div").append($(".outer").clone());
*clone方法的不同参数有不同作用:
clone()与clone(false)等价,表示不复制事件;clone(true)深度复制,会复制事件。
验证流程:
先把元素绑定事件;
再把元素克隆到某个元素里;
如果把clone参数设成false,则复制后的元素不响应事件,被复制的可以响应事件。如果参数为true,则无论是复制的还是被复制的都可以响应事件。
11.val()
第一:val()不带参数表示获取值。如:
alert($("#btn").val());//获取按钮的值(常用)
alert($("#btn").attr("value"));//获取按钮的值(不常用)
alert($("#txt").val());//获取文本框的值
第二:val("")带参数,表示设置值。如:
$("#txt").val("保时捷");//设置文本的值为保时捷
案例:仿京东搜索框
//文本框得到焦点时
$("#txt").focus(function() {
if($(this).val()=="宝马"){
$(this).val("");
}
});
// 文本框失去焦点时
$("#txt").blur(function() {
if($(this).val()==""){
$(this).val("宝马");
}
});
12.width()与height()方法
第一:为什么使用width()/height()?
使用css()方法获取宽度,会得到带单位的宽度,对以后计算不太方便,所以使用width()。
第二:width()获取不带单位的宽度,是真正内容的宽度。
alert($("div").width());//200 直接获取不带单位的宽度
第三:innerWidth()获取不带单位的宽度,包括左右padding。即width+左右padding。如:
alert($("div").innerWidth());//230 直接获取不带单位的宽度
第四:outerWidth()获取不带单位的宽度,包括左右padding、左右border。即width+左右padding+左右border。如:
alert($("div").outerWidth());//250 直接获取不带单位的宽度
第五:outerWidth(true)获取不带单位的宽度,包括左右padding、左右border、左右margin。即width+左右padding+左右border+左右margin。如:
alert($("div").outerWidth(true));//270 直接获取不带单位的宽度
第六:使用width(宽度)设置宽度。
$("div").width(500);//设置宽度为500
第七:获取整个窗口/页面的宽高
$(window).width()
$(window).height()
第八:动态获取页面可视区的宽高(窗口大小改变)。
$(window).resize(function() {
document.write(($(window).width())+"<br/>");
document.write(($(window).height()));
});
13.scrollTop()和scrollLeft()
第一:没设置参数代表获取值,设置参数代表设置值。
第二:scrollTop()页面从上往下滚动的距离。
$(window).scrollTop();//获取页面从上往下卷的距离
第三:scrollLeft()页面从左到右滚动的距离。
$(window).scrollLeft();//获取页面从左往右卷的距离
案例:固定导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
height: 4000px;
}
.top{
height: 40px;
background-color: #ccc;
}
ul{
list-style: none;
text-align: center;
line-height: 30px;
width: 1080px;
margin:0 auto;
}
li{
float: left;
width: 180px;
height: 30px;
background-color: #f40;
}
.fixed{
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="nav">
<ul>
<li>栏目一</li>
<li>栏目二</li>
<li>栏目一</li>
<li>栏目一</li>
<li>栏目一</li>
<li>栏目一</li>
</ul>
</div>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script type="text/javascript">
var h=$(".top").height();
$(function(){
// 窗口滚动事件--应用:当卷到某个位置时,
$(window).scroll(function(){
var num =$(window).scrollTop();
if(num>=h){
//让导航使用固定定位
$(".nav").addClass('fixed');
}else{
$(".nav").removeClass('fixed');
}
});
});
</script>
</body>
</html>
14.offset()和position()方法
第一:offset():获取相对于文档(即网页)开头到盒子显示时之间的(top/left)位置。
console.log($(".son").offset());//显示obj{top:180,left:180},
即(子元素的top+父元素的margin和子元素的left+父元素的margin)
第二:position():获取元素相对于有定位的父元素的(top/left)位置
$(".son").position();//显示obj{top:80,left:80}。子元素的top和left。
15.jquery事件机制
发展历程:简单事件绑定---》bind事件绑定---》delegate事件绑定---》on事件绑定(推荐)
第一:简单事件绑定机制
click(function(){}) 单击事件
mouseenter(function(){}) 鼠标进入事件
mouseleave(function(){}) 鼠标移走
缺点:不能同时注册多个事件,要一个一个事件进行绑定。也不能为动态元素设置事件绑定。
第二:bind事件绑定
bind事件绑定,一次可以绑定多个事件,并只有一个响应结果。
$("span").bind('click mouseenter', function() {
alert("success");
});
bind事件绑定,一次可以绑定多个事件,并返回不同的事件响应结果。
$("span").bind({
click:function(){
alert("right");
},
mouseenter:function(){
alert("wrong");
}
});
缺点:不支持动态元素事件绑定。如:
//简单事件不支持动态元素事件绑定
$("p").click(function(){
alert("happy");
});
//bind定事件也不支持动态元素事件绑定
$("p").bind('click', function() {
alert("bad");
});
第三:delegate 代理,委托
delegate三个参数:
第一个参数:selector 选择器,表示事件最终由谁执行
第二个参数:事件类型
第三个参数:事件处理函数
优点:支持动态元素事件绑定
缺点:必须注册委托事件,给祖先注册委托事件,后代执行事件。
<div id="box">
<div>
<span>abcdef</span>
<p>00000</p>
<p>zzzzz</p>
<p>kkkkk</p>
<p>ttttt</p>
</div>
</div>
$("#box").delegate('p', 'click', function(event) {
alert("haha");
});
第四:on事件绑定机制
Jquery1.7版本之后,on统一了所有的事件版本。除了之后的版本用on之外,移动框架也用on。Jq怎么写,移动框架就怎么写。
*on三个参数:
on(“事件名”,“元素/子元素”,执行函数(){});
*on可以单独给自己元素绑定事件。如:
//直接给自己绑定元素
("p").on('click', function() {
alert("heihei");
});
*on代理绑定事件,给祖先元素注册事件,由子元素执行事件。
//on代理绑定事件,给祖先元素注册事件,由子元素执行
$("div").on("click","p",function(){
alert("哈哈");
});
优点:一个元素可以绑定多个事件。
*支持动态元素事件绑定,但这个事件绑定必须是on代理事件的绑定或者是父元素直接绑定自己的事件。直接给自己绑定的事件是不可用的。
*事件的执行顺序:先执行自己直接注册的事件,然后执行委托事件,最后执行祖先元素的直接注册事件。
*on绑定多个事件的写法(与bind绑定事件一样)
$("div").on({
click:function(){
alert("right");
},
mouseenter:function(){
alert("wrong");
}
});
16.事件解绑
第一种方式:unbind() (基本不用)
$(selector).unbind();//解绑所有的事件
$(selector).unbind(“click”);//解绑单击事件
第二种方式:undelegate() (基本不用)
$(selector). undelegate ();//解绑所有的事件
$(selector). undelegate (“click”);//解绑单击事件
第三种方式:off() (推荐使用)
$(selector).off();//解绑所有的事件
$(selector).off(“click”);//解绑单击事件
17.触发事件
定义:在一个元素上调用另一个元素的事件。
触发某个元素的单事件
第一种方式触发:$(selector).事件名();
$("p").click();
第二种方式触发:$(selector).trigger("事件名");
$("p").trigger('click');
案例:点击按钮,触发p元素的单击事件
$("p").on("click",function(){
alert("ok");
});
$("#btn").on("click",function(){
// 触发p元素的单击事件
// 第一种方式触发:$(selector).事件名();
$("p").click();
// 第二种方式触发:$(selector).trigger("事件名");
$("p").trigger('click');
});