今天分享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');
});
857
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
