快速上手JQuery

最新推荐文章于 2023-07-20 19:54:44 发布

jacke5t

最新推荐文章于 2023-07-20 19:54:44 发布

阅读量133

点赞数

本文链接：https://blog.csdn.net/weixin_44420527/article/details/105348249

版权

1、JQuery介绍

JQuery是js的一个框架，是对js代码的再次封装，方便开发者更加快捷的进行开发。

2、JQuery导入

一般框架的导入都放在头部，自己编写的js放在body的最下面

<script src="jquery.min.js"></script>

3、JQuery选择器

3.1 后代选择器

//后代选择器，id为div下所有的p  和css一样
$("#div p").css("background","red");

3.2 子选择器

//子选择器，id为div下直属的p  和css一样
$("#div>p").css("background","red");

3.3 id选择器

//id为div的元素和class为div的元素
$("#div").css("background","red")

3.4 class选择器

$(".div").css("background","red")

3.5 指定索引选择器

$("div:first").css("background","red") //第一个div
$("div:last").css("background","red") //最后一个div
$("div:eq(0)").css("background","red") //索引为0的div

3.6 关系型选择器

/*
</html>
    <body>
        <div class="div">1</div>
        <div id="div"><p>2</p></div>
        <div>3</div>
    </body>
</html>
*/

var childen = $("#div").children();//获取子元素（p标签）
var prev = $("#div").prev();//获取上一个兄弟元素（第一个div） 一个层级的叫兄弟
var next = $("#div").next();//获取下一个兄弟元素（第三个div） 一个层级的叫兄弟
var siblings = $("#div").siblings();//获取同层除了自己所有元素（第一个和第三个div）
var parent = $("#div").parent(); //获取父元素（上一级元素）（body）
console.log(parent);
var parents = $("#div").parents(); //获取先祖元素（上级的所有元素）（body、html）
console.log(parents)

4、修改样式

html源码

</html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../jquery-1.8.3.min.js"></script>
    </head>
    <style>
        .style1{
            font-size: 40px;
        }
        .style2{
            color: red;
        } 
    </style>
    <body>
        <div>1</div>
        <div id="div"><p>2</p></div>
        <div class="div">3</div>
    </body>
</html>

4.1 获取css的属性值

.css方法如果只指出属性，没有给值，可以获取对应属性的值

var width = $("#div").css("width");

4.2 修改样式

// 修改单个样式
$("#div").css("width","300px");

// 修改多个样式
$(".div").css({
          "width": "300px",
          "height": "300px",
          "background":"green"
})

4.3 添加样式

$("#div").addClass("style1 style2"); //给div添加style1和tyle2样式

4.4 删除样式

$("#div").removeClass("style2"); //删除样式，在添加后的基础上删除指定样式

4.5 切换样式

$("#div").click(
        function () {
        $("#div").toggleClass("style1 style2");
        }
    )  // 点击div元素即可实现样式的添加与移除，有样式就移除，没有就加上

5、修改属性

5.1 获取元素属性值

//.attr方法直接指出属性，返回属性值
var class_value = $("#div").attr("class");
console.log(class_value);

5.2 设置和修改属性

//.attr方法直接指出属性和属性值，设置属性值
$("#div").attr("class","div div1");
//.attr方法直接指出多个属性和属性值
$("#div").attr({
    "class":"div div1",
    "nice":"nice work"
});

5.3 删除属性

$("#div").removeAttr("name"); //删除name属性

6、修改内容

6.1 修改内容

//若没有给出内容，则返回内容
var html = $("#div").html()
console.log(html)

//修改内容，会将元素内的内容覆盖（原内容会被清除）
$("#div").html(
    "<h1>添加内容</h1>"
)

6.2 修改文本‘’

//若没有给出文本，则返回文本
var text = $("#div").text()
console.log(text)

//修改文本，会将元素内的内容覆盖（原内容会被清除）
$("#div").text(
    "<h1>添加内容</h1>"  //原样返回文本内容
)

6.3 input输入内容的设置

// 设置id为input的输入框内的内容
$("#input").val("输入框的默认值")

7、修改距离

7.1 获取宽高

var width = $("#div").width();//元素宽度
var height = $("#div").height(); //元素的高度

7.2 修改宽高

$("#div").height(100);  //修改div的高度为100px
$("#div").width(100);  //修改div的宽度为100px

7.3 修改位置

$("#div").css({position:"absolute",top:200,left:50}) //修改div为绝对定位，距左50px，距上200px。

8、动画效果

8.1 显示和隐藏

//显示
$("#show").click(
    function(){
        $("#div").show("slow") //参数有fast和slow，也可以设置动画效果时间，时间单位是毫秒
    }
);
//隐藏
$("#hide").click(
    function(){
        $("#div").hide(1000)//参数有fast和slow，也可以设置动画效果时间，时间单位是毫秒
    }
);
//显示和隐藏切换
$("#button").click(
    function(){
        //在显示和隐藏两种效果之间切换
        $("#div").toggle("fast")  //参数有fast和slow，也可以设置动画效果时间，时间单位是毫秒
    }
);

8.2 淡入淡出

//淡出
$("#hide").click(
    function(){
        $("#div").fadeOut(1000)//参数有fast和slow，也可以设置动画效果时间，时间单位是毫秒
    }
);
//淡入
$("#show").click(
    function(){
        $("#div").fadeIn("fast")//参数有fast和slow，也可以设置动画效果时间，时间单位是毫秒
    }
);
//淡出淡入切换
$("#button").click(
    function(){
        $("#div").fadeToggle(2000)//参数有fast和slow，也可以设置动画效果时间，时间单位是毫秒
    }
);

8.3 上下滑动

//向上滑动
$("#hide").click(
    function(){
        $("#div").slideUp(1000)//参数有fast和slow，也可以设置动画效果时间，时间单位是毫秒
    }
);
//向下滑动
$("#show").click(
    function(){
        $("#div").slideDown("fast")//参数有fast和slow，也可以设置动画效果时间，时间单位是毫秒
    }
);
//上下滑动切换
$("#button").click(
    function(){
        $("#div").slideToggle(2000)//参数有fast和slow，也可以设置动画效果时间，时间单位是毫秒
    }
);

8.4 自定义动画

animate() 方法实现了自定义动画，该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以实现动画效果。

//语法：
$(selector).animate(styles,speed,easing,callback)
//示例
$("p").animate({borderWidth:"10px"});

/*参数
	selector：选择器，选择要自定义的元素
	styles：必填，规定产生动画效果的 CSS 样式和值。
		borderwidth：外边框变化效果
		margin：外边距变化效果
		padding：内边距变化效果
		width、height：宽高变化效果
		fontSize：字体大小变化效果
		left：位置变化效果
	speed：可选，规定动画的速度
	easing：可选。规定在不同的动画点中设置动画速度的 easing 函数。
	callback：可选。animate 函数执行完之后，要执行的函数。
*/

案例：自定义动画实现图片轮播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.min.js"></script>
    <style>
        img{ /*设置轮播图里面的图片宽高，左浮动*/
            width: 700px;
            height: 450px;
            float: left;
        }
        #div{/*设置放置全部图片和克隆图片的div的宽，并清除浮动*/
            width: 2800px;
            overflow: hidden;
        }
        #outer_div{/*本元素是#div的父元素，设置父元素的宽为一张图片的框，超出部分隐藏*/
            width:700px;
            overflow: hidden;
            border: 5px black solid;
        }
    </style>
</head>
<body>
<div id="outer_div">
    <div id="div">
        <img src="images/1.jpg">
        <img src="images/2.jpg">
        <img src="images/3.jpg">
    </div>
</div>
    <script>
        var clone = $("img")[0].cloneNode(true); //克隆第一张图片
        $("#div").append(clone); //把克隆的图片添加到轮播区域的div中
        var len = $("img").length; //计算图片的数量
        console.log(len);
        var i = 1;
        var interval = setInterval( 
           	//设置定时器，#div每三秒向左移动一次一张图片的宽度，由于父元素把其余部分隐藏，整个#div在移动的过程在用户的眼中就相当于在固定窗口中，相连的图片滑动切换。
            function () {
                if (i>=len){ //当#div展示最后一张克隆图片时，快速把#div的位置设置为第一张图片显示的位置，由于头尾两张图内容一样，用户并不能察觉到#div的快速切换。从而在视觉上实现循环轮播图的效果
                    i = 1;
                    $("#div").css("margin-left","0px");
                }
                $("#div").animate({"margin-left":-i*700+"px"},2000);//自定义图片左外边距变化效果，切换效果持续两秒
                i++;
            },3000
        )
    </script>
</body>
</html>

效果：
轮播图

9、事件

9.1 示例

$("p").click(
    function(){//事件调用函数
        console.log($(this).text())//this：哪个对象调用，this指代哪个对象，如果想用this进行属性获取需要用$(),可实现获取所点击的元素属性。
    }
);

9.2 JQuery的常用事件

事件	描述
blur	表单失去焦点
focus	表单获取焦点
submit	提交事件
change	表单发生修改
keydown	键盘按下
keyup	键盘弹起
click	鼠标单击事件
mouseover	鼠标移动到对象上面
mouseout	当鼠标移除
mousedown	鼠标按下
mouseup	鼠标弹起

10、添加和删除元素

10.1 添加

//在标签内部的尾部插入节点
var img2 = $("<img src='images/2.jpg'>");
$("#content").append(img2);

//在标签内部的头部插入节点
var img3 = $("<img src='images/3.jpg'>");
$("#content").prepend(img3);

//插入到当前元素外部的后面
var img2 = $("<img src='images/2.jpg'>");
$("#content").after(img2);

//插入到当前元素外部的前面
var img3 = $("<img src='images/3.jpg'>");
$("#content").before(img3);

10.2 删除

//删除指定元素
$("#content>img:eq(1)").remove()  //删除content元素下面的第二个img
$("#content>img")[1].remove()   //删除content元素下面的第二个img

// 清空元素
$("#content").empty()  //清空元素

10.3 克隆

var img = $("<img src='images/1.jpg'>")
var img2 = img.clone()
$("#content").append(img)
$("#content").append(img2)

10.4 案例：条件筛选

链家的条件筛选精简版。点击条件可以添加条件，点击已经添加的条件可以删除条件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.8.3.min.js"></script>
    <style>
        li{
            float: left;
            margin-left: 20px;
        }
        span{
            color: white;
            background-color: #31c19e;
            font-size: 15px;
            border-radius:3px;
            padding-left: 2px;
            padding-right: 3px;
            margin-left: 10px;
        }
        #box{
            width: 80%;
            height: 240px;
            background: #fbfbfb;
            margin: 20px auto;
            padding-top: 5px;
        }
        .choice{
            margin-top: 20px;
        }
        #view > div{
            float: left;
            margin-top: 5px;
        }
    </style>
</head>
<body>
<div id="box">
    <div class="choice">
        <ul class="city" type="none" style="overflow: hidden;">
            <p style="float: left; margin-top: 0px"><b>位置</b></p>
            <li>a区</li>
            <li>b县</li>
            <li>c市</li>
            <li>d县</li>
        </ul>
    </div>
    <div class="choice">
        <ul class="way" type="none" style="overflow: hidden;">
            <p style="float: left; margin-top: 0px"><b>方式</b></p>
            <li>整租</li>
            <li>合租</li>
        </ul>
    </div>
    <div class="choice">
        <ul class="rent" type="none" style="overflow: hidden;">
            <p style="float: left; margin-top: 0px"><b>租金</b></p>
            <li>≤1200元</li>
            <li>1200-2000元</li>
            <li>2000-2500元</li>
            <li>2500-3000元</li>
            <li>3000-3500元</li>
            <li>3500-4000元</li>
            <li>≥4000元</li>
        </ul>
    </div>
    <div id="view">已选:
        <br>
        <div id="city"></div>
        <div id="way"></div>
        <div id="rent"></div>
    </div>
</div>
    <script>
        var li_list = $("ul>li");
        var choice_list = $("#view>span");
        console.log(li_list.parent());
        console.log(choice_list);
        li_list.click(
            function () {
            var content = $(this).text();
            var span = "<span>" + content + "</span>";
            console.log($(this).text());
            var name = $(this).parent().attr("class");
            console.log(name);
            var id_name = "#" + name;
            if (name=="city"){
                console.log("city");
                $(id_name).empty();
                $(id_name).append(span);
            } else if (name=="way"){
                console.log("way");
                $(id_name).empty();
                $(id_name).append(span);
            } else if (name=="rent"){
                console.log("rent");
                $(id_name).empty();
                $(id_name).append(span);
            }
        }
        );
        $("#city").click(
            function () {
                $("#city").empty()
            }
        );
        $("#way").click(
            function () {
                $("#way").empty()
            }
        );
        $("#rent").click(
            function () {
                $("#rent").empty()
            }
        );
    </script>
</body>
</html>

效果：

jacke5t

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
快速上手JQuery

1、JQuery介绍JQuery是js的一个框架，是对js代码的再次封装，方便开发者更加快捷的进行开发。2、JQuery导入一般框架的导入都放在头部，自己编写的js放在body的最下面<script src="jquery.min.js"></script>3、JQuery选择器3.1 后代选择器//后代选择器，id为div下所有的p 和css一样$("...
复制链接

扫一扫