【JQuery】初级学习（上）

最新推荐文章于 2020-03-31 10:27:39 发布

wlisonate

最新推荐文章于 2020-03-31 10:27:39 发布

阅读量208

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43271086/article/details/101382091

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Query是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

1，两种获取文本内容的方法

利用html()获取，如果有子标签则保留子标签。我们来看js代码

//利用html（）方法进行获取文本形式的内容，如果有子标签，保留标签
$(function () {
    $("#b1").click(function () {
        alert($("#d1").html());
    });
});

在这段代码中，click是一种多次点击事件，alert是弹框。$符号是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

利用text方法获取文本形式的内容

//利用text()方法获取文本形式的内容，如果有子标签，则不保留子标签
$(function () {
    $("#b2").click(function () {
        alert($("#d2").text());
    });
})

测试的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
</head>
<body>
<script src="jquery.min.js"></script>
<script src="html().js"></script>
<!--<div id="d">Hello JQuery</div>-->
<button id="b1">获取文本内容</button>
<br>
<button id="b2">获取文本内容</button>
<br>
<br>
<!--<input type="text" id="input1" value="默认值">-->
<div id="d1">
    这是div的内容
    <span>这是div里的span</span>
</div>
<br>
<div id="d2">
    这是div的内容
    <span>这是div里的span</span>
</div>
</body>
</html>

2，对CSS进行操作

增加背景色，利用addClass函数增加

//增加背景色
$(function () {
    $("#b1").click(function () {
        $("#d").addClass("pink");
    })
})

删除背景色，利用remove函数删除

//删除背景色
$(function () {
    $("#b2").click(function () {
        $("#d2").removeClass("pink");
    });
});

切换背景色，toggleClass函数进行切换

$(function () {
    $("#b3").click(function () {
        $("#d3").toggleClass("pink");
    });
});

设置单一样式和多种样式，利用css函数进行设置

$(function () {
    $("#b4").click(function () {
        $("d4").css("background-color","pink");
    });
    $("#b5").click(function () {
        $("d5").css({"background-color":"pink","color":"green"});
    });
});

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对CSS进行操作</title>
    <style>
        .pink{
            background-color: pink;
        }
    </style>
</head>
<body>
<script src="jquery.min.js"></script>
<script src="addClass.js"></script>
<button id="b1">增加背景色</button>
<br>
<br>
<div id="d">Hello JQuery</div>

<button id="b2">删除背景色</button>
<br>
<br>
<div id="d2" class="pink">Hello JQuery</div>
<button id="b3">切换背景色</button>
<br>
<br>
<div id="d3">Hello JQuery</div>

<button id="b4">设置单一样式</button>
<button id="b5">设置多种样式</button>
<br>
<br>
<div id="d4">
    只设置背景色
</div>
<br>
<div id="d5">
    背景色加字体颜色
</div>
</body>
</html>

3，CSS选择器

根据标签类型进行选择

$(function () {
    $("#b1").click(function () {
        $("div").addClass("pink");
    });
});

根据id进行选择

$(function () {
    $("#b2").click(function () {
        $("#d2").addClass("pink");
    });
});

重点来了，如果你有多个相同的id，则只会选择第一个

根据类进行选择

$(function () {
    $("#b3").click(function () {
        $(".d").addClass("pink");
    });
});

选择选择标签下的另一个标签

$("selector1 selector2") ，选择 selector1下的selector2元素。

// 在本例中 选择id=d3的div下的span元素
//div#d3这个还必须写在一起
$(function () {
    $("#b4").click(function () {
        $("div#d3 span").addClass("pink");
    });
});

注意：div#3必须写在一起

选择最后一个元素和第一个元素

$(function () {
    $("#b5").click(function () {
        $("div:first").addClass("pink");
    });
    $("#b6").click(function () {
        $("div:last").addClass("pink");
    });
});

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器</title>
    <style>
        .pink{
            background-color: pink;
        }
    </style>
</head>
<body>
<script src="jquery.min.js"></script>
<script src="yuansuXuanze.js"></script>
<button id="b1">给所有的DIV元素增加背景色</button>
<button id="b2">给id=d2的div标签增加背景色</button>
<button id="b3">给类b添加背景色</button>
<br>
<button id="b4">给层级中的元素增加配置</button>
<br>
<button id="b5">给第一个进行配置</button>
<br>
<button id="b6">给最后一个进行配置</button>
<br>
<div id="d1">
    Hello World
</div>
<div id="d2">
    Hello World
</div>
<div class="d">
    Hello World
</div>
<br>
<div id="d3" >
    <span>Hello JQuery</span>
</div>
</body>
</html>

4，标签隐藏与显示

visible隐藏可见的，hidden显示不可见的

$(function () {
    $("#b3").click(function () {
        $("div:visible").hide();
    });
    $("#b4").click(function () {
        $("div:hidden").show();
    });
});

注意：div:visible 表示选中可见的div div :visible(有空格) 表示选中div下可见的元素

5，根据属性进行切换

给带有id属性的div切换边框

$("#b1").click(function () {
       $("div[id]").toggleClass("border");
    });

给具体id值的div进行边框切换

$("#b2").click(function () {
        $("div[id='pink']").toggleClass("border");
    });

给不等于具体id值的div进行边框切换

 $("#b3").click(function () {
        $("div[id!='pink']").toggleClass("border");
    });

给id以具体值开头的div切换边框（比如pink就是p）

$("#b4").click(function () {
        $("div[id^='p']").toggleClass("border");
    });

给id以具体值结尾的div切换边框（比如pink就是k）

$("#b5").click(function () {
        $("div[id$='k']").toggleClass("border");
    });

给id包含具体值的div进行边框切换（比如pink就是in）

  $("#b6").click(function () {
        $("div[id*='ee']").toggleClass("border");
    });

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>根据属性进行切换</title>
    <style>
        .pink{
            background-color: pink;
        }
        .green{
            background-color: green;
        }
        .border{
            border: 1px blue solid;
        }
        button{
            margin-top: 10px;
            display: block;
        }
        div{
            margin: 10px;
        }
    </style>
</head>
<body>
<script src="jquery.min.js"></script>
<script src="shuxingji5.js"></script>
<button id="b1">给有id属性的div切换边框</button>
<button id="b2">给id=pink的div切换边框</button>
<button id="b3">给有id!=pink属性的div切换边框</button>
<button id="b4">给有id以p开头的div切换边框</button>
<button id="b5">给有id以k结尾的div切换边框</button>
<button id="b6">给有id包含ee的div切换边框</button>
<br>
<br>
<div id="pink">id=pink的div</div>
<div id="green">id=green的div</div>
<div>没有id的div</div>
</body>
</html>

5，对表单对象进行切换


$(function () {
    $(".b").click(function () {
        var value = $(this).val();
        $("td[rowspan!=13] "+value).toggle(500);
    });
});

$("td[rowspan!=13] "+value).toggle(500)在这里重点讲解这句话，这句话中用不等于13是跳过下面所贴代码中被13包裹的那段代码，直接对tr中的标签进行操作。

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单对象</title>
    <style>
        table{
            border-collapse:collapse;
            table-layout:fixed;
            width:80%;
        }
        table td{
            border-bottom: 1px solid #ddd;
            padding-bottom: 5px;
            padding-top: 5px;
        }

        div button{
            display:block;
        }

    </style>
</head>
<body>
<script src="jquery.min.js"></script>
<script src="biaocedan6.js"></script>
<table><tr>
    <td rowspan="13" valign="top" width="150px">
        <div>
            <button value="input" class="b">切换所有的：input</button>
            <button value="button" class="b">切换：button</button>
            <button value="radio" class="b">切换：radio</button>
            <button value="checkbox" class="b">切换：checkbox</button>
            <button value="text" class="b">切换：text</button>
            <button value="password" class="b">切换：password</button>
            <button value="file" class="b">切换：file</button>
            <button value="submit" class="b">切换：submit</button>
            <button value="image" class="b">切换：image</button>
            <button value="reset" class="b">切换：reset</button>
        </div>
    </td>
    <td width="120px">说明</td>
    <td width="120px">表单对象</td>
    <td width="">示例</td>
</tr>
    <tr>
        <td>input按钮</td>
        <td >:button</td>
        <td><input type="button" value="input按钮"/></td>
    </tr>

    <tr>
        <td>button按钮</td>
        <td >:button</td>
        <td><button>Button按钮</button></td>
    </tr>
    <tr>
        <td>单选框</td>
        <td >:radio</td>
        <td><input type="radio" ></td>
    </tr>
    <tr>
        <td>复选框</td>
        <td >:checkbox</td>
        <td><input type="checkbox"  ></td>
    </tr>

    <tr>
        <td>文本框</td>
        <td >:text</td>
        <td><input type="text" /></td>
    </tr>
    <tr>
        <td>文本域</td>
        <td ></td>
        <td><textarea></textarea></td>
    </tr>
    <tr>
        <td>密码框</td>
        <td >:password</td>
        <td><input type="password" /></td>
    </tr>
    <tr>
        <td>下拉框</td>
        <td ></td>
        <td><select><option>Option</option></select></td>
    </tr>

    <tr>
        <td>文件上传</td>
        <td >:file</td>
        <td> <input type="file" /></td>
    </tr>

    <tr>
        <td>提交按钮</td>
        <td >:submit</td>
        <td><input type="submit" /></td>
    </tr>
    <tr>
        <td>图片型提交按钮</td>
        <td >:image</td>
        <td><input type="image" src="http://how2j.cn/example.gif" /></td>
    </tr>

    <tr>
        <td>重置按钮</td>
        <td >:reset</td>
        <td><input type="reset" /></td>
    </tr>
</table>
</body>
</html>

6.对当前元素进行隐藏

利用this指针进行操作

//隐藏当前元素
$(function () {
    $("#b1").click(function () {
        $(this).hide();
    });
});

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>当前元素</title>
</head>
<body>
<script src="jquery.min.js"></script>
<script src="this7.js"></script>
<button id="b1">点击隐藏</button>
</body>
</html>

7.根据标签进行切换

$(function () {
    $("#b1").click(function () {
        $("div").first().toggleClass("pink");
    });
   $("#b2").click(function () {
       $("div").last().toggleClass("pink");
   });
   $("#b3").click(function () {
       $("div").eq(4).toggleClass("pink");
   });
});

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
        .pink{
            background-color: pink;
        }
    </style>
</head>
<body>
<script src="jquery.min.js"></script>
<script src="divSelect0.js"></script>
<button id="b1">切换第一个</button>
<button id="b2">切换最后一个</button>
<button id="b3">切换第五个</button>

<div>
    <span>Hello JQuery 1</span>

</div>

<div >
    <span>Hello JQuery 2</span>
</div>

<div >
    <span>Hello JQuery 3</span>
</div>

<div >
    <span>Hello JQuery 4</span>
</div>

</div>

<div >
    <span>Hello JQuery 5</span>
</div>

<div >
    <span>Hello JQuery 6</span>
</div>
</body>
</html>

8，对父亲和祖先元素进行改变

父亲用parent，祖先用parents

$(function () {
    $("#b1").click(function () {
        $("#currentDiv").parent().toggleClass("b");
    });
    $("#b2").click(function () {
        $("#currentDiv").parents().toggleClass("b");
    });
});

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父亲，祖先元素选取</title>
    <style>
        div{
            padding:20px;
        }

        div#grandParentDiv{
            background-color:pink;
        }

        div#parentDiv{
            background-color:green;
        }

        div#currentDiv{
            background-color:red;
        }

        .b{
            border: 2px solid black;
        }

    </style>
</head>
<body>
<script src="jquery.min.js"></script>
<script src="parents1.js"></script>

<button id="b1">改变parent（）边框</button>
<button id="b2">改变parents()边框</button>
<br>
<br>
<div id="grandParentDiv">
    祖先元素
    <div id="parentDiv">
        父元素
        <div id="currentDiv">
            当前元素
        </div>
    </div>
</div>
</body>
</html>

9，对儿子和后代元素进行改变

儿子是children,后代是find

$(function () {
    $("#b1").click(function () {
        $("#currentDiv").children().toggleClass("b");
    });
    $("#b2").click(function () {
        $("#currentDiv").find("div").toggleClass("b");
    });
});

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>儿子 后代</title>
    <style>
        div{
            padding:20px;
        }

        div.grandChildrenDiv{
            background-color:pink;
        }

        div.childrenDiv{
            background-color:green;
            margin:10px;
        }

        div#currentDiv{
            background-color:red;
        }

        .b{
            border: 2px solid black;
        }

    </style>
</head>
<body>
<script src="jquery.min.js"></script>
<script src="son2.js"></script>
<button id="b1">改变孩子的边框</button>
<button id="b2">改变find的边框</button>
<br>
<br>
<div id="currentDiv">
    当前元素
    <div id="childrenDiv">
        儿子元素1
        <div id="grandChildrenDiv">后代元素</div>
    </div>
    <div>
        儿子元素2
        <div id="grandChildrenDiv">后代元素</div>
    </div>
</div>
</body>
</html>

10，给同级元素进行改变

使用siblings函数进行改变

$(function () {
    $("#b1").click(function () {
        $("#currentDiv").siblings().toggleClass("b");
    });
});

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>同级</title>
    <style>
        div{
            padding:20px;
            background-color:pink;
            margin:10px;
        }

        div#parentDiv{
            background-color:green;
        }

        div#currentDiv{
            background-color:red;
        }

        .b{
            border: 2px solid black;
        }

    </style>
</head>
<body>
<script src="jquery.min.js"></script>
<script src="tongji3.js"></script>
<button id="b1">给同级加上边框</button>
<div id="parentDiv">
    父元素
    <div id="currentDiv">
        当前元素
    </div>
    <div>
        同级元素
    </div>
    <div>
        同级元素
    </div>
</div>
</body>
</html>

11，属性值操作（包括获取，删除，修改）

获取操作

//通过attr（）获取一个元素的属性
$(function () {
    $("#b1").click(function () {
        alert("alert属性是："+ $("#h").attr("align"));
    });
    $("#b2").click(function () {
        alert("game属性是："+$("#h").attr("game"));
    });
});

其中的game是自定义属性。

修改操作

$(function () {
    $("#b3").click(function () {
        $("#h3").attr("align","right");
    });
});

删除操作

$(function () {
    $("#b4").click(function () {
        $("#h4").removeAttr("align");
    });
});

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性进行操作</title>
</head>
<body>
<script src="jquery.min.js"></script>
<script src="shuxing4.js"></script>
<button id="b1">获取align属性</button>
<button id="b2">获取自定义属性game</button>

<button id="b3">修改align属性为right</button>
<button id="b4">删除align属性</button>
<br>
<br>
<h1 id="h" align="center" game="LOL"></h1>
<h1 id="h3" align="center">居中标题</h1>
<h1 id="h4" align="center" game="LOL">居中标题</h1>
</body>
</html>

12.进行隐藏，显示，切换，滑动操作

隐藏

$("#b1").click(function () {
        div.hide();
    });

显示

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

切换

 $("#b3").click(function () {
        div.toggle();
    });

向上

 $("#b7").click(function () {
        div1.slideUp();
    });

向下

$("#b8").click(function () {
        div1.slideDown();
    });

向上向下切换

$("#b9").click(function () {
        div1.slideToggle();
    });

延时操作在里面写进系数，以毫秒作为单位来写，比如2000毫秒就是两秒，比如：

$("#b12").click(function () {
        div1.slideToggle(2000);
    });

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示 隐藏 切换</title>
    <style>
        button{
            display:block;
        }
        div{
            border:solid 1px gray;
            background-color:pink;
            width:300px;
            height:100px;
        }
    </style>
</head>
<body>
<script src="jquery.min.js"></script>
<script src="showHideToggle5.js"></script>

<button id="b1">立即隐藏</button>
<button id="b2">立即显示</button>
<button id="b3">立即切换</button>
<button id="b4">延时显示</button>
<button id="b5">延时隐藏</button>
<button id="b6">延时切换</button>
<br>
<br>
<button id="b7">向上滑动</button>
<button id="b8">向下滑动</button>
<button id="b9">滑动切换</button>
<button id="b10">延时向上滑动</button>
<button id="b11">延时向下滑动</button>
<button id="b12">延时滑动切换</button>

<br>
<br>
<div id="d">用于演示的div</div>
<div id="d1">用于演示d1的div</div>

</body>
</html>

wlisonate

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【JQuery】初级学习（上）

Query是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。jQ...
复制链接

扫一扫

专栏目录