jQuery入门

jquery:
是基于原生js封装的一个轻量级的第三方JS类库

设计目的:
写的更少,做的更多

优势:
1.轻量级
2.完善的API文档
3.出色的浏览器兼容
4.免费开源
5.强大的选择器
6.出色的DOM操作
7.事件处理
8.链式写法
9.支持AJAX
10.丰富的插件库

使用方式:
1.下载使用本地jquery文件
2.CDN方式 使用在线jquery文件
3.使用包管理器 npm install jquery

<scriptsrc="../../js/jquery-3.3.1.map.js" type="text/javascript" charset="utf-8"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>

<input type="text" name="" id="" value="" />
<button id="btn">show</button>
<script src="js/jquery-3.3.1.map.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    $(function(){
        $("#btn").click(function(){
            $("<p>",{
                css:{color:"green",
                    fontSize:"20px",
                    border:"1px solid red",}
    }).html($("input[type=text]").val()).appendTo($(document.body)).hide().fadeIn(1000);
        });
    });
</script>

核心函数
jQuery() 简写 $
$(function(){}) 是 $(document).ready(function(){}的简写形式 表示界面中的DOM元素加载完毕时
$(选择器) 获取对应生殖器匹配的元素 返回的时jquery对象
$(html标签形式的字符型) 创建DOM节点元素
$(html元素) 将原生DOM对象 转换为jquery对象

$(document).ready(function()){
    // jquery code...
}
//简写形式
$(function()){
    // jqery code...
}

和window.onload的区别:
1.onload时原生JS中的,而ready时jquery中的方法
2.时机不同:onload指待所有资源加载完毕;而ready指DOM元素加载完毕
3.onload一个页面只能书写一次;而ready可以同时使用多次

强大的选择器

<div id="d1"></div>
<div class="d2"></div>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<script src="../../js/jquery-3.3.1.map.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    $(function(){
        $("#d1");
        $(".d2");
        $("li:even").css("color","red");
        $("li:odd").css("color","blue");

        $("li:eq(0)").css("font-size","20px")
    })
</script>

支持类似ccs的选择器方法

内容的操作
html()获取或设置元素的内容相当于 innerHTML()
text()获取或设置元素的内容相当于 innerText()
val()获取或设置元素的内容相当于 value
获取:
获取时相同类名获取第一个的内容

console.log($(".d1").html());

设置:
修改时会修改所有的内容

console.log($(".d1").html("<p>jquery</p>"));

对于类名的操作
addClass(类名|函数) 添加类名 在原有基础上新增
removeClass(类名|函数)删除类名
toggleClass(类名|函数)切换类名 有就删除,没有就添加

$(function(){
    //在原有类名基础上添加类名
    $(".d1").addClass("d2");
    //支持同时添加多个类名 多个类名间空格间隔
    $(".d1").addClass("d3 d4");
    //参数也可以时给函数 该函数必须返回一个或多个类名
    //该函数自带两个参数:参数1表示当前元素所在集合中的下标,参数2表示该元素原有的类名值
    $(".d1").addClass(function(i,val){
        console.log(i.val);
        return "r5 r6";
    })
    $(".d1").removeClass("d4");
    //若参数没有给,会删除匹配到的元素的所有类名
    $(".d1").removeClass();
    //也可以时函数
    $(".d1").removeClass(function(){
        return "d1";
    });

    $(".d1").click(function(){
        $(".d1").toggleClass("d2");
    })
});

属性是操作
attr(“属性名”,属性值|函数) 设置元素的对应属性为对应属性值
attr(“属性名”) 获取元素对应的属性值
removeAttr(“属性名”)删除对应属性

prop(“属性名”,属性值|函数) 设置对应属性为对应属性值
prop(“属性名”) 获取元素对应属性值
removeProp(“属性名”)删除对应属性

$(function(){
    //添加一个属性
    $(":text").attr("placeholder","请输入");
    //支持同时添加多个属性:以对象的形式设置
    $("img").attr({
        src: "http://www.sinaimg.cn/dy/slidenews/1_img/2017_27/63957_1285861_470607.jpg",
        width: 200,
        height: 400,
    });
    //获取
    console.log($("img").attr("width"));
    //删除
    $("img").removeAttr("width");

    $("img").prop("title","hahaha");
    console.log(("img").prop("title"));
    //无法操作
    $("input").removeProp("placeholder");

});

区别:
attr()常用于操作元素的自定义属性,也可以操作自带属性
prop()常用于操作元素的自带属性
当操作时布尔类型的属性时,使用prop()获取

css样式属性的操作
css(属性,属性值|函数) 设置元素的对应的css样式
设置一个属性

$("#d1").css("color","red");

支持设置多个属性 以对象的形式书写

$("#d1").css({
    width:"300px",
    height:"100px",
    fontSize:"30px",
});

css(属性名) 获取元素对应的样式属性值

$("#d1").css("color");

若时设置,则会匹配到所有元素多有效

$("p").css("color","blue");

若是获取.则只获取匹配到第一个元素的指定值

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

若是函数,函数的返回值即设置的属性值

$("p").css("border","1px solid");
$("p").css("line-height",function(i,val){
    return (i+1)*40+"px";
});

有关尺寸的方法
height() 获取或设置元素的高度
width() 获取或设置元素的宽度

innerWidth() 获取元素width+padding
innerHeight() 获取元素height+padding

outerWidth() 获取元素width+padding+border
outerWidth(true) 获取元素width+padding+border+margin
outerHeight() 获取元素height+padding+border
outerHeight(true) 获取元素height+padding+border+margin

获取

$("#d1").height();
console.log($("#d1").innerHeight());
console.log($("#d1").outerHeight());
console.log($("#d1").outerHeight(true));

设置

$("#d1").height(200);

有关位置的方法
offset() 获取或设置元素基于可视区域的位置
position() 获取匹配到的第一个元素基于最近的定位父级元素的位置
scrollLeft() 获取或设置水平滚动条的滚动距离
scrollTop() 获取或设置垂直滚动条的滚动距离

获取 返回值:包含两个属性left和top的对象

console.log($("#d1").offset());
console.log($("#d1").offset().left);
console.log($("#d1").offset().top);
console.log($(".box>div").position());
console.log($(".box>div").position().left);
console.log($(".box>div").position().top);
$(window).scroll(function(){
    console.log($(":root").scrollLeft());
    console.log($(":root").scrollTop());
});

设置

$("#d1").offset({left:100,top:100});
$("html").scrollTop(200);
$("html").scrollLeft(200);

DOM节点的操作
创建节点 $(html标签形式的字符串)

添加元素
方法1:
A.append(B) 在元素A的内部的后面添加元素B
A.appendTo(B) 将元素A添加到元素B的内部的后面
A.prepend(B) 在元素A的内部前面添加元素B
A.prependTo(B) 将元素A添加多元素B的内部的前面

var d = $("<div></div>");
$("body").append(d);
$("<div>",{
    class:"d1",
    css:{
        color:"red"
    },
    click: function(){
        alert($(this).text());
    }
}).text("hhh").appendTo(document.body);
$("<h1>jquery</h1>").prependTo(document.body);

方式2:
A.after(B) 在A的外部的活命添加元素B
A.befort(B) 在A的外部的前面添加元素B
insertAfter()
insertBefort()

d.after($("<p>我是外部后面添加的</p>"));
d.before($("<a href=''>在外部前面添加</a>"));

替换元素
A.replaceWith(B) 将A替换元素B

d.replaceWith($("<h2>DOM</h2>"));

删除元素
A.remove() 删除元素A

$("div").remove();

A.empty() 清空元素A中所有的内容

$(document.body).empty();

特效动画
基本
show() 显示
参数可选的
参数1: 两种形式
1.slow nomal fasr
2.以毫秒为单位时间
参数2: 动画执行完毕时的回调函数

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

hide() 隐藏
toggle() 显隐切换

$("#show").click(function(){
    $("#d1").toggle("1000",function(){
        alert("动画结束");
    });
});

淡入淡出
fadeIn() 淡入
fadeOut() 淡出
fadeToggle() 淡入淡出切换
fadeTo(时长,切换到的透明度,函数)
滑动
slideDown() 下滑出现
slideUp() 下滑收起
slideToggle()
自定义动画
animate(动画属性,时长,函数)
参数1:以对象的形式书写,规定动画的属性以及属性值,若是符合属性用驼峰法书写
注意: jquery核心库中色彩动画不支持,如背景色,需要下载ColorAnimate插件

方式1:

$("#custom").click(function(){
    $("#d1").animate({
        width:"400px",
        height:"200",
        fontSize:"30"
    },2000);
});

方式2:属性值可以基于当前值发生变化

$("#custom").click(function(){
    $("#d1").animate({
        width:"+=50",
        height:"-=50",
    },2000);
});

发生3:支持队列动画

$("#custom").click(function(){
    $("#d1").animate({width:400},1000);
    $("#d1").animate({height:300},1000);
    $("#d1").animate({borderRadius:"50%"},1500);
});         

暂停动画
stop()
参数1:布尔值 是否清除队列中的动画 默认false
参数2:布尔值 是否直接完成当前动画 默认false

$("#pause").click(function(){
    $("#d1").stop(true,true);
})

延迟动画
delay(时长)

$("#delay").click(function(){
    //支持链式操作
    $("#d1").delay(2000).hide().delay(1000).slideDown();
});