jQuery

最新推荐文章于 2022-11-16 10:54:32 发布

July-Mao

最新推荐文章于 2022-11-16 10:54:32 发布

阅读量452

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/mf_happying/article/details/79147998

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一.jQuery简介
jQuery对象通过jQuery包装DOM对象后产生的
jQuery对象是jQuery独有的，如果一个对象是jQuery对象，就可以使用jQuery里面的方法
$(“#test”).html–获取ID为test的元素内的HTML代码基本语法$ (selsetor).action()
二.jQuery的引入
1.下载jQuery文件
https://jquery.com/download/
2.添加到pycharm中
这里写图片描述
3.在html文件中引入

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

三.jquery选择器

1.基本选择器
$("*") $("#id") $(".class") $("element") $(".class,p,div")
2.层级选择器
$(".outer div")后代
$(".outer>div")子代(只在儿子层)
$(".outer+div")毗邻
$(".outer~div")
3.基本筛选器
$("li:first")取列表的第一个元素
$("li:eq(2)")通过索引取
$("li:even")取列表的偶
$("li:lt(1)")取小于索引值的元素
$("li:gt(2)")取大于索引值的元素
4.属性选择器
$('[id="div1"]')
$('[name='alex'][id]')
5.表单选择器
$("[type='text']")----->缩写形式 $(":text")  只适用于input标签

<body>
<div>hello div</div>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
<p>hello p</p>
<input type="button" value="name">
<script>
    $("li:first").css("color","red")
    $("[type='button']").css("width","300px")
</script>

四实例
1.菜单选择

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
    <style>
        .menu{
            height: 500px;
            width: 30%;
            background-color: rebeccapurple;
            float: left;
        }
        .content{
            height: 500px;
            width: 70%;
            background-color: aquamarine;
            float: left;
        }
        .title{
            line-height: 50px;
            background-color: antiquewhite;

        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="menu">
        <div class="item">
            <div class="title" onclick="show(this)">菜单一</div>
            <div class="con">
                <div>111</div>
                <div>111</div>
                <div>111</div>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="show(this)">菜单二</div>
            <div class="con hide">
                <div>111</div>
                <div>111</div>
                <div>111</div>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="show(this)">菜单三</div>
            <div class="con hide">
                <div>111</div>
                <div>111</div>
                <div>111</div>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="show(this)">菜单四</div>
            <div class="con hide">
                <div>111</div>
                <div>111</div>
                <div>111</div>
            </div>
        </div>
    </div>
</div>
<div class="content"></div>
<script>
    function show(self) {
        $(self).next().removeClass("hide")
        $(self).parent().siblings().children(".con").addClass("hide")

    }
</script>
</body>
</html>

这里写图片描述
2.标签切换的时候下面内容也同时切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .menu{
            background-color: rebeccapurple;
            line-height: 40px;
        }
        .content{
            background-color: aqua;
            boder:2px red solid;
            height: 300px;
        }
        .hide{
            display: none;
        }
        .current{
            background-color: gray;
            color: yellow;
            border-top: solid 2px red;
        }
        .menu li{
            display: inline-block;
        }
        .menu a{
            border-right: blueviolet 1px solid;
            padding: 11px;
        }
    </style>
</head>
<body>
<div class="tab_outer">
    <ul class="menu">
        <li xxx="c1" class="current" onclick="tab(this)">菜单一</li>
        <li xxx="c2" onclick="tab(this)">菜单二</li>
        <li xxx="c3" onclick="tab(this)">菜单三</li>
    </ul>
    <div class="content">
        <div id="c1">内容一</div>
        <div id="c2" class="hide">内容二</div>
        <div id="c3" class="hide">内容三</div>
    </div>
</div>
</body>
</html>
<script>
    function tab(self){
        $(self).addClass("current").siblings().removeClass("current")
        //将点击的标签增加current的样式，并去掉其余标签current的样式
        var s=$(self).attr("xxx")//取得点击的标签的属性值
        $("#"+s).removeClass("hide").siblings().addClass("hide")
    }
</script>

这里写图片描述
应用情景

补充js获取属性值的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div" onclick="func1(this)">hello</div>
</body>
</html>
<script>
    //方法一
    // function func1(self) {
    //     console.log(self.getAttribute("id")) //获取属性值  div
    // }
    //方法二
    document.getElementById("div").onclick=function () {
          console.log(this.getAttribute("id"))
    }
</script>

五.jQuery的attr和pop属性
具体看 jQuery API中文文档

<body>
    <input type="checkbox" id="ck">
</body>
</html>
<script>
    $("#ck").attr("id")//获取id的属性值---ck
    $("#ck").attr("id","eee")//修改属性值
    $("#ck").attr("checked","true")//在选框中打钩
    $("#ck").removeAttr("checked")//去掉选框中的钩
    $("#ck").prop("checked","true")//prop不可以设置自定义属性
    $("#ck").removeProp("checked")//设置属性，attr都可以设置
</script>

六.jQuery的for循环

<script>
   li=[10,20,30,40]
   dic={name:"grey",age:18}
   $.each(dic,function (i,x) {
       console.log(i,x)
   })
   //table标签下的所有的tr标签
    $("table tr").each(function () {
        console.log($(this).html)

    })
</script>

七.实例-正反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<button onclick="selectall()">全选</button>
<button onclick="cancel()">取消</button>
<button onclick="reverse()">反选</button>
<table border="1">
    <tbody>
        <tr>
            <td>
                <input type="checkbox">
            </td>
            <td>1111</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>2222</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>3333</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>4444</td>
        </tr>
    </tbody>
</table>

</body>
</html>
<script>
   function selectall() {
       $("table:checkbox").each(function () {
            $(this).attr("checked","true")
       })
   }
    function cancel() {
       $("table:checkbox").each(function () {
            $(this).removeAttr("checked","false")
       })

    }
    function reverse() {
        $("table:checkbox").each(function () {
           if($(this).attr("checked")) {
               $(this).removeAttr("checked")
           }
           else{
              $(this).removeAttr("checked","true") 
           }
       })
    }
</script>

八.实例-模态对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
<style>
    *{
        margin: 0px;
    }
    #div1{
        height: 2000px;
        background-color: aqua;
        position: fixed;
        /*用了fixed必须写width:100%*/
        width: 100%;
        top:0;
        left:0;
        z-index: 1000;

    }
    #div2{
        position: fixed;
        width: 100%;
        top:0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rebeccapurple;
        opacity: 0.3;


    }
    #div3{
        height: 200px;
        width: 200px;
        background-color: aquamarine;
        position: absolute;
        top:50%;
        left: 50%;
        z-index:1003;
        /*z-index 属性设置元素的堆叠顺序。Z-index 仅能在定位元素上奏效（例如 position:absolute;）
        ！Z-index 可用于将在一个元素放置于另一元素之后。*/
        margin-left: -100px;
        margin-top: -100px;
    }
    .hide{
        display: none;
    }
</style>
</head>
<body>
    <div id="div1">
        <input type="button" value="click" onclick="show(this)">
    </div>
    <div id="div2" class="hide"></div>
    <div id="div3" class="hide">
        <input type="button" value="cancel" onclick="cancel(this)">
    </div>

</body>
</html>
<script>
    function show(self) {
        $(self).parent().siblings().removeClass("hide")

    }
    function cancel(self) {
        $(self).parent().parent().children("#div2,#div3").addClass("hide")

    }
</script>

九.clone–复制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="outer">
    <div id="item">
        <input type="button" value="+" onclick="fun1(this)">
        <input type="text">
    </div>
</div>
</body>
</html>
<script>
    function fun1(self) {
        var Clone=$(self).parent().clone()
        Clone.children(":button").val("-").attr("onclick","fun2(this)")
        $("#outer").append(Clone)

    }
    function fun2(self) {
        $(self).parent().remove()
    }
</script>