前端学习篇 -- jQuery 文档

1、简介

1.1 入口函数

入口函数

$(document).ready(function() {
    //开始写 jQuery 代码...
})

简洁写法

$(function() {
    //开始写 jQuery 代码...
})

js入口函数

window.onload = function() {
    //执行代码
}

jQuery 与 js 入口函数的区别

jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行
JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行
jQuery 的入口函数可以写多个，JavaScript 的入口函数只能写一个

1.2 选择器

1.2.1 常用选择器

$(“p”)：选取所有p标签元素
$("#test")：选取 id 为 test 的元素
$(".test") ：选取所有 class 为 test 的元素

1.2.2 其他选择器

$(".test:eq(0)")：选取第一个 class 为 test 的元素
$(this)：选取当前 HTML 元素
$(“p:first,p:last”)：选取第一个,最后一个 p标签元素
$(“li:odd”)：选取偶数位置的li标签元素
$(“li:even”)：选取奇数位置的li标签元素

2、效果

所有效果可带参数

第一个参数：设置时间（slow：慢，fast：快，毫秒）

第二个参数可设置回调函数 Callback 方法

2.1 显示和隐藏

show():显示
hide():隐藏
toggle():来回切换显示隐藏

2.2 淡入淡出

fadeIn():淡入
fadeOut():淡出
fadeToggle():来回切换淡入淡出

fadeTo():透明度变换

 $("#div1").fadeTo("slow",0.15); //相当 opacity 0.15

2.3 滑动

slideDown():向下滑动
slideUp():向上滑动
slideToggle():来回切换滑动

2.4 动画

元素 position 属性需设置为 relative、fixed 或 absolute，无法改变背景，要用插件
animate({属性},时间)

$("button").click(function(){
    let div=$("div");
    div.animate({height:'300px',opacity:'0.4'},"slow");
    div.animate({width:'300px',opacity:'0.8'},"slow");
    div.animate({height:'100px',opacity:'0.4'},"slow");
    div.animate({width:'100px',opacity:'0.8'},"slow");
});

停止动画stop()

$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideDown(5000);
    });
    $("#stop").click(function(){
        $("#panel").stop();
    });
});
不带参数:停止当前动画
true:停止所有动画
true,true:停止但迅速完成第一个动画

2.5 Callback 函数

$("button").click(function(){
    $("p").hide("slow",function(){
        alert("段落现在被隐藏了");
    });
});

2.6 延迟触发

delay(‘毫秒’)

$("#div1").delay(200).fadeIn() //延迟200ms触发

3、DOM 操作

3.1 内容

可设置参数为指定值

text():返回所选元素的文本内容
html():返回所选元素的内容（包括html标记）
val():返回表单的值

3.2 属性

一个参数为获取属性，两个参数为设置属性

attr():设置或返回被选元素自定义的属性和值

$("button").click(function(){
    $("#runoob").attr({
        "href" : "http://www.runoob.com/jquery",
        "title" : "jQuery 教程"
    });
});

prop():设置或返回被选元素本身的属性和值

attr() 方法和 prop() 方法的区别

<img src="/smile.jpg"/>
<button>获取图像的 class 属性值</button>
$("button").click(function(){
    //如果属性存在，返回属性值；如果属性不存在，则返回 undefined
    console.log( $("img").attr("class") );
    //如果属性存在，返回属性 true；如果属性不存在，则返回 false
    console.log( $("img").prop("class") );
});

3.3 offset() 和 position()

offset()

返回被选元素相对于document的偏移坐标，参数：{top:value,left:value}

$("p").offset({top:200,left:200});   //p 元素相对文档上偏移180px,左偏移200px
<p style="margin-top:20px">123</p>  //设置值 - margin 值 = 偏移实际值

offset(function(index,currentoffset))

返回被选元素相对于元素的偏移坐标

index：返回集合中元素的 index 位置
currentoffset：返回被选元素的当前坐标

$("p").offset(function(index,c){
     newPos = {};
     newPos.left = c.left + 100;
     newPos.top = c.top + 100;
     return newPos;
});

position()

返回被选元素相对于有定位的父元素偏移坐标，只读属性

该方法返回一个带有两个属性（以像素为单位的 top 和 left 位置）的对象

3.4 添加元素

设置参数为内容，也可添加标签

append()：在被选元素内部结尾插入内容
prepend()：在被选元素内部开头插入内容
after()：在被选元素外部之后插入内容
before():在被选元素外部之前插入内容

3.5 删除元素

remove()：删除父元素及其子元素

$("p").remove(".italic"); //删除所有 class 为 italic 的 p 标签
$("#div1").remove(); //删除 id 为 #div1 标签及下面的所有子元素

empty()：删除子元素

$("#div1").empty(); //删除 id 为 #div1 标签下的所有子元素

3.6 类

addClass()：添加类
removeClass()：删除类
toggleClass()：来回切换

3.7 css()方法

一个参数为获取样式，两个参数为设置样式

(1) 返回 CSS 属性

$("p").css("background-color");

(2) 设置 CSS 属性

$("p").css({
    background-color: "yellow",
    font-size: "20px"
});

3.8 尺寸

width() 和 height() 方法：返回元素的宽度和高度（不包括内边距跟边框）
innerWidth() 和 innerHeight() 方法：返回元素的宽度和高度（包括内边距）
outerWidth() 和 outerHeight() 方法：返回元素的宽度和高度（包括内边距和边框）//通用
outerWidth(true) 和 outerHeight(true) 方法：返回元素的宽度和高度（包括内边距和边框及外边距）

$(window).width() //浏览器时窗口可视区域宽度
$(window).height() //浏览器时窗口可视区域高度
$(window).scrollTop() //获取滚动条到顶部的垂直高度
$(window).scrollLeft() //获取滚动条到左边的垂直宽度

4、遍历

可设置参数到指定位置

4.1 祖先

parent()：返回被选元素直接上一级

parents()：返回元素上级直至html

<div><ul><li><span></span></li></ul></div>
$("span").parents("ul") // 返回 ul 元素

parentsUntil()：介于两个标签之间

$("span").parentsUntil("div") //div与p之间所有标签（不包括div与p）

4.2 后代

children()：返回被选元素的所有直接子元素

<div><p></p><span></span></div>
$("div").children("p") //返回 div 下的所有 p

find()：返回元素所有下级

<div><p><span></span></p></div>
$("div").find("span") //返回 span 元素

4.3 同胞

siblings()：返回元素的同胞元素
next()：返回元素的直接下一个同胞元素
prev()：返回元素的直接上一个同胞元素
nextAll()：返回元素下面的同胞元素
prevAll()：返回元素上面的同胞元素

4.4 过滤

first()：返回被选元素的首个元素

$("div p").first(); //选择div标签下的第一个p标签

last()：返回被选元素的最后一个元素
eq()：返回被选元素中带有指定索引号的元素

filter()：匹配的元素会被返回

$("p").filter(".url");  //返回带有类名 "url" 的所有 <p> 元素

not()：与 filter() 相反

$("p").not(".url");  //返回不带有类名 "url" 的所有 <p> 元素

4.5 其他杂项

each()：相当于 JS 的 forEach()，不同的是 each() 第一个参数是 index，第二个参数是 item

<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>

$("li").each(function(index,item){
    alert($(this).index,$(this).item)
});

index()：返回指定元素索引

has()：返回拥有匹配指定选择器的一个或多个元素在其内的所有元素

<p>我住在<span>Duckburg</span>。</p> //yellow色
<p>我最好的朋友是 Mickey。</p> //默认

$("p").has("span").css("color","yellow"); //p 下面包含有 span 标签 color 为 yellow

is()：查看选择的元素是否匹配选择器

$("p").parent().is("div") //匹配p的父元素是div

data()：向被选元素附加数据，或者从被选元素获取数据

$("#btn1").click(function(){
    //向 div 附加数据，属性 greeting，值 Hello World
    $("div").data("greeting", "Hello World"); 
});
$("#btn2").click(function(){
    alert($("div").data("greeting"));
});

removeData()：移除之前通过 data() 方法设置的数据
```
$("div").removeData("greeting")
```

end()：返回上一个选择器

<ul class="first">
   <li class="foo">list item 1</li> //red
   <li>list item 2</li>
   <li class="bar">list item 3</li> //green
</ul>
$('ul.first').find('.foo').css('background-color', 'red')
  .end().find('.bar').css('background-color', 'green');

trigger() ：触发被选元素上指定的事件以及事件的默认行为
- trigger() 会操作 jQuery 对象匹配的所有元素，而 triggerHandler() 只影响第一个匹配元素
- 由 triggerHandler() 创建的事件不会在 DOM 树中冒泡
```
//先触发一次 resize 事件
$(window).on('resize',function(){}).trigger('resize')
```

5、 noConflict() 方法

释放对 $ 标识符的控制

创建自己的简写

let jq = $.noConflict();
jq(document).ready(function(){
    jq("button").click(function(){
        jq("p").text("jQuery 仍然在工作!");
    });
});

可以把 $ 符号作为变量传递给 ready 方法

$.noConflict();
jQuery(document).ready(function($){
    $("button").click(function(){
        $("p").text("jQuery 仍然在工作!");
    });
});