jQuery 基础与运用

purerender

2018-05-08

1.jquery引入以及入口函数

引入方式

<!--方式一：下载到本地，引入路径-->
<script src="jquery-3.1.1.min.js"></script>
<!--方式二：cdnjs线上引入-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

入口函数（等页面的dom加载完才会执行函数内部的代码）

//第一种
$(document).ready(function(){})
//第二种
$().ready(function(){})
//第三种
$(function(){})

js的加载函数：

window.onload=function(){ }

注：与jquery的区别：

- 等 dom 图片 css等都加载完毕再执行里面的代码
- js的加载函数只可写一个，而jquery的入口函数可运行多次

2. css 内容和属性

设置样式

html代码

<div id = "box"></div>

js代码

- 设置一个样式

$(“#box”).css(“width”,”200px”);

- 设置多个样式

$(“#box”).css({
    “width”:”200px”,
    “height”:”200px”,
})

- 用addClass和removeClass设置和移除样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .red{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
<div id="box"></div>
<script src="jquery-3.1.1.min.js"></script>
<script>
    $("#box").addClass("red");//设置样式
    $("#box").removeClass("red");//移除样式
</script>
</body>
</html>

设置与返回属性值：prop() 与 attr()
- 用于返回属性值时，返回第一个匹配元素的值。
- 用于设置属性值时，为匹配元素集合设置一个或多个属性/值对。
- 移除属性，用 removeProp() 方法。

注：id，class，src，alt，checked等都是属性

<img src="" alt="" id="pic" width=""/>
<input type="checkbox" id="check"/>
<script src="jquery-3.1.1.min.js"></script>
<script>
    $(function(){
        //设置属性
        $("#pic").attr("width","");
        $("#check").prop("checked",true);
        //获取属性
        console.log($("#pic").attr("width"));//
        console.log($("#check").prop("checked"));//true
    })
</script>

注：prop() 方法应该用于检索属性值，如 DOM 属性或自定义的属性。若检索 HTML 属性，用 attr() 方法。

设置与返回内容：html() 与 text()
- 用于设置内容时，重写所有匹配元素的内容。

注：text() 设置或返回被选元素的文本内容，用于返回内容时，返回所有匹配元素的文本内容（会删除 HTML 标记）。

html() 设置或返回被选元素的 innerHTML，用于返回内容时，返回第一个匹配元素的内容。

<div id="box"></div>
<script src="jquery-3.1.1.min.js"></script>
<script>
    $(function(){
        //设置内容
        $("#box").html("<span>我是内部的span元素");
        $("#box").text("<span>我是span标签<span>");
        //获取内容
        console.log($("#box").html());
        console.log($("#box").text());
    })
</script>

表单的值的设置和获取

<input type="text" id="text"/>
<input type="button" id="btn" value="点击"/>
<script src="jquery-3.1.1.min.js"></script>
<script>
    $("#btn").click(function(){
        console.log($("#text").val());
    })
</script>

jquery对象和dom对象的转换

<div id="box">我是一个盒子</div>
<script src="jquery-3.1.1.min.js"></script>
<script>
    //$() 把js的dom对象转换成了jquery对象
    $("#box").css("fontSize","24px");
    //$(“#box”)[0]或$(“#box”).get(0) 把jquery对象转化成了dom对象
    $("#box").get().style.fontSize = "30px";
    $("#box")[].style.fontSize = "40px";
</script>

3. 选择器

基本选择器

层级选择器

过滤选择器

表单选择器

属性选择器

4. 动画

显示 show()和隐藏 hide() （参数可选）
- 参数1：隐藏效果的速度（毫秒 / "slow" / "fast"）；
- 参数2：在动画的不同点上元素的速度（默认 "swing" ：在开头或结尾移动慢，在中间移动快 /"linear" ：匀速移动）
- 参数3：该方法执行完后要执行的函数

<input type="button" id="btn1" value="显示"/>
<input type="button" id="btn2" value="隐藏"/>
<input type="button" id="btn3" value="切换"/>
<div id="box" style="width: 200px;height: 200px;background: red;display: none;">
</div>
<script src="jquery-3.1.1.min.js"></script>
<script>
    $("#btn1").click(function(){
        $("#box").show();//显示
    })
    $("#btn2").click(function(){
        $("#box").hide();//隐藏
    })
    $("#btn3").click(function(){
        $("#box").toggle();//show()和 hide()之间切换
    })
</script>

淡入 fadeIn()和淡出 fadeOut() （参数同上）

<input type="button" id="btn1" value="淡入"/>
<input type="button" id="btn2" value="淡出"/>
<input type="button" id="btn3" value="切换"/>
<div id="box" style="width: 200px;height: 200px;background: red;">
</div>
<script src="jquery-3.1.1.min.js"></script>
<script>
    $("#btn1").click(function(){
        $("#box").fadeIn();//淡入
    })
    $("#btn2").click(function(){
        $("#box").fadeOut();//淡出
    })
    $("#btn3").click(function(){
        $("#box").fadeToggle();//淡入淡出切换
    })
</script>

滑上 slideUp() 和滑下 slideDown() （参数同上）

<input type="button" id="btn1" value="滑上"/>
<input type="button" id="btn2" value="滑下"/>
<input type="button" id="btn3" value="切换"/>
<div id="box" style="width: 200px;height: 200px;background: red;">
</div>
<script src="jquery-3.1.1.min.js"></script>
<script>
    $("#btn1").click(function(){
        $("#box").slideUp();//滑上
    })
    $("#btn2").click(function(){
        $("#box").slideDown();//滑下
    })
    $("#btn3").click(function(){
        $("#box").slideToggle();//切换
    })
</script>

自定义动画 animate({样式}) （参数1：产生动画效果的一或多个 CSS 属性/值；其他三个参数同上）

注：该方法中属性名必须是驼峰写法，如：padding-left 写成 paddingLeft

<input type="button" id="btn" value="点击"/>
<div id="box" style="width: 200px;height: 200px;background: red;position: absolute">
</div>
<script src="jquery-3.1.1.min.js"></script>
<script>
    $("#btn").click(function(){
        $("#box").animate({
            "width":"400px",
            "height":"400px",
            "top":"200px",
            "left":"200px"
        })
    })
</script>

- 可应用动画的属性有：

backgroundPositionX

backgroundPositionY

borderBottomWidth

borderLeftWidth

borderRightWidth

borderTopWidth

borderWidth

borderSpacing

margin

marginBottom

marginLeft

marginRight

marginTop

padding

paddingBottom

paddingLeft

paddingRight

paddingTop

height

width

maxHeight

maxWidth

minHeight

minWidth

bottom

left

right

top

letterSpacing

lineHeight

textIndent

fontSize

outlineWidth

stop() 方法：为被选元素停止当前正在运行的动画（参数可选）
- 参数1：布尔值，规定是否停止被选元素的所有加入队列的动画。默认 false
- 参数2：布尔值，规定是否立即完成所有的动画。默认 false

<button id="start">开始</button>
<button id="stop1">停止</button>
<button id="stop2">停止所有</button>
<button id="stop3">停止但完成</button>
<div style="height: 100px;width: 200px;background-color: red;position: absolute;">HELLO</div>
<script src="jquery-3.1.1.min.js"></script>
<script>
    $(document).ready(function(){
        $("#start").click(function(){//启动动画
            $("div").animate({left:'100px'},);
            $("div").animate({fontSize:'3em'},);
        });
        $("#stop1").click(function(){
            $("div").stop();//停止当前活动的动画，但允许已排队动画向前执行
        });
        $("#stop2").click(function(){
            $("div").stop(true);//停止当前活动的动画，并清空动画队列（该元素所有动画停止）
        });
        $("#stop3").click(function(){
            $("div").stop(true,true);//立即完成当前活动的动画，然后停止
        });
    });<br /></script>

（未完，晚点更新）

jquery ul