jQuery API

引入jQuery

生产环境如果想要使用jQuery,请点击下载
测试环境或者开发者环境只需在head标签内添加下面标签

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">

文档就绪事件 (推荐方法二)

写法一:
$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});
写法二:
$(function(){
 
   // 开始写 jQuery 代码...
 
});

选择器

事件中的选取当前元素
$(this)

元素选择器
选中所有p元素
$("p")

id选择器
选中所有id为test的元素
$("#test")

class选择器
选中所有class为test的元素
$(".test")

选取所有元素
$("*")

选中第一个p元素
$("p:first")

选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first")

选取每个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child")

选中带有herf属性的元素
$("[href]")

选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target='_blank']")

选取所有 target 属性值不等于 "_blank" 的 <a> 元素
$("a[target!='_blank']")

选取所有 type="button" 的 <input> 元素 和 <button> 元素
$(":button")

选取偶数位置的 <tr> 元素
$("tr:even")

选取奇数位置的 <tr> 元素
$("tr:odd")

事件 (事件阻止冒泡请return flase)

click 点击事件
$("p").click(function(){
  $(this).hide();
});


dbclick 双击事件
$("p").dblclick(function(){
  $(this).hide();
});


mouseenter  鼠标进入事件
$("#p1").mouseenter(function(){
    alert('您的鼠标移到了 id="p1" 的元素上!');
});


mouseleave  鼠标离开事件
$("#p1").mouseleave(function(){
    alert("再见，您的鼠标离开了该段落。");
});


mousedown 鼠标移动元素上方并且按下
$("#p1").mousedown(function(){
    alert("鼠标在该段落上按下！");
});


mouseup   当鼠标按下之后 松开的时候触发
$("#p1").mouseup(function(){
    alert("鼠标在段落上松开。");
});


hover  鼠标悬停的时候触发,有两个阶段鼠标进入和离开,分别对应各自的函数
$("#p1").hover(
    function(){
        alert("你进入了 p1!");
    },
    function(){
        alert("拜拜! 现在你离开了 p1!");
    }
);


focus  元素获得焦点时触发,一般都是input
$("input").focus(function(){
  $(this).css("background-color","#cccccc");   # 背景变成灰色  操作css的时候,额外添加的属性需要css修改,本身固有的直接跟点(.)后面
});


blur  失焦的时候触发,一般都是光标离开input
$("input").blur(function(){
  $(this).css("background-color","#ffffff"); # 背景变白色
});

jQuery 带有动画的效果

jQuery隐藏和现实

$("#hide").click(function(){
  $("p").hide();
});
 
$("#show").click(function(){
  $("p").show();
});

语法: speed隐藏/显示的速度可取值[fast,slow,毫秒] ,callback 事件执行完成后的回调函数
$(selector).hide(speed,callback);
$(selector).show(speed,callback);

如果不想设置两个按钮觉得太麻烦,就使用toggle(来回切换隐藏/显示) 自动检测当前是隐藏还是显示.
$("button").click(function(){
  $("p").toggle();
});

jQuery淡入和淡出

语法: speed取值 [fast,slow,毫秒]
$(selector).fadeIn(speed,callback);   # 淡入
$(selector).fadeOut(speed,callback);  # 淡出
$(selector).fadeToggle(speed,callback);  # 淡入/淡出 切换
$(selector).fadeTo(speed,opacity,callback);  # 淡出到一定的透明度 opacity透明度 取值[0~1之间的小数],1不透明,0完全透明


示例:
$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

jQuery滑动

语法:
slideDown() 方法用于向下滑动元素。
$(selector).slideDown(speed,callback);
$("#test").click(function(){
    $("p")[0].slideDown(1)
})


slideUp() 方法用于向上滑动元素。
$(selector).slideUp(speed,callback);

slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换
$(selector).slideToggle(speed,callback);

jQuery动画

jQuery animate() 方法用于创建自定义动画。
$(selector).animate({params},speed,callback);

一般是html 元素 原本有一个css,写入一个最终结果的css样式到{params}里面,然后动画就是从原有css过度到最终css
下面的例子是将div绝对定位从左边的0移动到距左边250像素
<head>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:'250px'});
  });
});
</script> 
</head>
 
<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>

同时操作多个属性
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      opacity:'0.5',
      height:'150px',
      width:'150px'
    });
  });
});
</script> 
</head>
 
<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
如果需要改变，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>

jQuery停止动画

$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
默认地，stop() 会清除在被选元素上指定的当前动画。

jQuery可以链式调用

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

jQuery DOM操作

获取内容 text()、html() 以及 val()

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值, 一般是读取input的value值

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});
$("#btn1").click(function(){
  alert("值为: " + $("form input:first").val());
});

获取属性attr()

$("button").click(function(){
  alert($("#runoob").attr("href"));
});

设置内容 - text()、html() 以及 val() 以及属性 attr

$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
    $("#test3").val("RUNOOB");
});
$("button").click(function(){
    $("#runoob").attr({
        "href" : "http://www.runoob.com/jquery",
        "title" : "jQuery 教程"
    });
});

jQuery创建元素以及添加元素

创建元素

var txt1="<p>文本。</p>";              // 使用 HTML 标签创建文本
var txt2=$("<p></p>").text("文本。");  // 使用 jQuery 创建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本。";

添加元素(子集添加,前后添加)

子集添加append prepend

append() 方法在被选元素的结尾插入内容（仍然该元素的内部）
$("body").append(txt1,txt2,txt3);

prepend() 方法在被选元素的开头插入内容。
$("body").prepend(txt1,txt2,txt3);

前后添加 before after

jQuery before() 方法在被选元素之前插入内容
 $("img").before("<b>之前</b>");

jQuery after() 方法在被选元素之后插入内容
$("img").after("<i>之后</i>");

删除元素(删除元素的子元素,删除元素以及子元素)

jQuery remove() 方法删除被选元素及其子元素。
$("#div1").remove();  #删除div1标签以及子标签

jQuery empty() 方法删除被选元素的子元素。
$("#div1").empty();  # 保留div1标签内的子元素之外的内容

jQuery操作css

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

$("button").click(function(){
  $("h1,h2,p").addClass("blue");  # 添加类
  $("div").addClass("important");
});

$("button").click(function(){
  $("body div:first").addClass("important blue");  # 添加多个类
});
$("button").click(function(){
  $("h1,h2,p").removeClass("blue");  # 移除类
});

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");  # 切换类
});

#css("propertyname");获取css语法
$("p").css("background-color");  # 获取指定css样式的值

#css("propertyname","value");  # 设置css语法
$("p").css("background-color","yellow");
# css({"propertyname":"value","propertyname":"value",...}); 设置多个css语法
$("p").css({"background-color":"yellow","font-size":"200%"});

ajax 请查看另外一篇文章

文章地址请点击 ajax

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 219,366评论 6赞 508
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 93,521评论 3赞 395
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 165,689评论 0赞 356
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,925评论 1赞 295
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,942评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,727评论 1赞 305
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,447评论 3赞 420
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,349评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,820评论 1赞 317
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,990评论 3赞 337
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,127评论 1赞 351
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,812评论 5赞 346
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,471评论 3赞 331
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,017评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,142评论 1赞 272
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,388评论 3赞 373
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 45,066评论 2赞 355

推荐阅读更多精彩内容

  • h5常见的面试题
    第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HT...
    kismetajun阅读 27,489评论 1赞 45
  • JQ
    通过jQuery，您可以选取（查询，query）HTML元素，并对它们执行“操作”（actions）。 jQuer...
    枇杷树8824阅读 657评论 0赞 3
  • # jQuery笔记总结篇
    jQuery笔记总结篇 poetries 已关注 2016.10.20 10:52* 字数 9137 阅读 660...
    小杰的简书阅读 1,798评论 2赞 32
  • JQuery
    1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,341评论 0赞 2
  • jQuery笔记总结篇
    原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    程序员poetry阅读 16,646评论 18赞 503