jquery基础知识2

Posted 2021-01-09 qq849784670

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery基础知识2相关的知识，希望对你有一定的参考价值。

1.js和jquery对象的转换

　　js==>jquery对象　　$(js对象)

　　jquery==>js　　　　jq对象[index]　　jq对象.get(index)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li class="item">qing</li>
        <li>qingqing</li>
        <li>qingqingqing
    </ul>
    <script src="jquery.js"></script>
    <script>
        //js innerText innerHTML value
        //标签属性的操作  .src  .href .id .claaName
        //样式 .style.属性
        //DOM操作

        var datas = ["red","green","yellow"]
        //1.jquery对象转化成js对象（js包含jquery）
        // console.log($("li")[0]);
        var item = document.getElementsByClassName("item")[0];
        //让js对象转换成jquery对象
        // console.log($(item));
        console.log($(item).css("color","red").click(function(){
            alert(1111);
        }))
        //链式编程
        $(item).css("color","red").click(function(){
            alert(111);
        })
        for(var i = 0;i < datas.length;i++){
            $("li")[i].style.backgroundColor = datas[i];
        }
    </script>
</body>
</html>

View Code

2.选择器：选中标签对应的jq对象

　　jq高级选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="box">
       <p id="a">qing</p>
        <p>q</p>
        <p>ing</p>
    </div>
    <p>zhang</p>
    <script src="jquery.js"></script>
    <script>
        $(function () {
            // $(".box>p").css("color","green");
            //挨着的下一个兄弟元素
            console.log($("#a+p"));
        })
    </script>
</body>
</html>

View Code

　　基本过滤选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
    </ul>
    <script src="jquery.js"></script>
    <script>
        $(function () {
            var i = 2;
            $(`ul li:eq(${i})`).css("color","red");
            $("ul li:first").css("color","red");
            $("ul li:last").css("color","red");
        })
    </script>
</body>
</html>

View Code

　　属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input[type="text"]{
            border: none;
            outline: none;
            width: 200px;
            height: 100px;
            font-size: 30px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <form action="#">
        <input type="text" name="user" aaa="bbb">
        <input type="password" name="pwd">
        <input type="submit" >
    </form>
    <script src="jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            console.log($("input[type=text]"));
        })
    </script>
</body>
</html>

View Code

　　筛选选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <div class="father">
        <p>qing</p>
        <a href="#">asd</a>
        <span>qwe</span>
        <div class="g">
            <span>91</span>
        </div>
    </div>
    <script src="jquery.js"></script>
    <script>
        $(function () {
            // console.log($(".father").find(".g"));
            $(".g").click(function () {
                //js对象
                // console.log(this);
                // $(this).css("color","red");
            });
            //find()方法会找到后代无论是子代还是子孙
            // console.log($(".father").find("span"));
            //谁触发了点击事件this就是谁
            // $(".father").find(".g>span").click(function () {
            //     console.log(this)
            // })
            //只找子代
            console.log($(".father").children("span"));
            //parent()获取的是亲爹
            console.log($(".g span").parent());
        })
    </script>
</body>
</html>

View Code

3.siblings方法（排他思想）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
</ul>
    <script src="jquery.js"></script>
<script>
    $(function () {
        //点元素 变红色
        $("ul li").click(function () {
            $(this).css("color","red").siblings("li").css("color","black");
        })
    })
</script>
</body>
</html>

View Code

4.选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style:none;
        }
        a{
            text-decoration: none;
        }
        .box{
            width: 400px;
            height: 300px;

        }
        .box ul {
            width: 100%;
            overflow: hidden;
        }
        .box ul li{
            float: left;
            width: 50px;
            height: 70px;
            margin: 0 10px;
            background-color: red;
            text-align: center;
            line-height: 70px;
        }
        a{
            color: #fff;
        }
        .active{
            width: 100%;
            height: 100px;
            background-color: green;
            display: none;
        }
        </style>
</head>
<body>
    <div class="box">
        <ul>

        </ul>
        <div class="active">

        </div>
        <form action="#">
            <input type="text" value="123">
        </form>
    </div>
    <script src="jquery.js"></script>
    <script>
        $(function () {
            console.log($("input[type=text]").val("111"));
            //初始化操作
            $(".box ul").html(`<li>
                <a href="javascript:void(0);">张三</a>
            </li>
            <li>
                <a href="javascript:void(0);">李四</a>
            </li>
            <li>
                <a href="javascript:void(0);">王五</a>
            </li>
            <li>
                <a href="javascript:void(0);">赵六</a>
            </li>`);
            //点击a标签的时候执行的操作
            $(".box ul li a").click(function () {
                $(this).css("color","green").parent("li").siblings("li").find("a").css("color","#fff");
                var textVal = $(this).text();
                var newVal = `<h1>${textVal}</h1>`;
                $(".active").show().html(newVal);
            })
        })
    </script>
</body>
</html>

View Code

5.动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <button id="btn">动画</button>
    <div class="box"></div>
    <script src="jquery.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                // $(".box").hide();
                //toggle自己判断显隐状态
                $(".box").stop().toggle(1000);
            })
        })
    </script>
</body>
</html>

View Code

6.自定义动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            position: absolute;
            left: 20px;
            top: 30px;
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <button>动画</button>
    <div></div>
    <script src="jquery.js"></script>
    <script>
        $(function () {

            // $(‘div‘).animate(
            // {
            //     param1: value1,
            //     param2: value2
            // },
            // speed,
            // function() {
            //     /* stuff to do after animation is complete */
            // });
            $("button").click(function () {
                var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100};
                var json2 = {
                    "width": 100,
                    "height": 100,
                    "left": 100,
                    "top": 100,
                    "border-radius": 100,
                    "background-color": "red"
                };

                //自定义动画
                $("div").animate(json, 1000, function () {
                    $("div").animate(json2, 1000, function () {
                        alert("动画执行完毕！");
                    });
                });

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

View Code

7.html的标签属性操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .tt{
            color: red;
        }
        .active{
            color: green;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
    <script src="jquery.js"></script>
    <script>
        $(function () {
            //初始化操作
            // $(".box").html("<a href=‘http://www.baidu.com‘>百度一下</a>");
            $(".box").html("<a id=‘anchor‘></a>");
            $("#anchor").attr("href","http://www.baidu.com").text("百度一下");
            console.log($("#anchor").attr("id"));
            $("#anchor").attr({
                title:"123",
                class:"tt"
            });
            $("body").click(function () {
                // $("#anchor").attr("class","active");
                $("#anchor").addClass("active");
                //移除多个类名
                $("#anchor").removeClass("active tt");
                $("#anchor").removeAttr("title href");
            })

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

View Code

8.prop标签对象属性操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    男<input type="radio" name="sex" checked>
    女<input type="radio" name="sex">
    <script src="jquery.js"></script>
    <script>
        $(function () {
            // console.log($("input[type=radio]").eq(0).attr("checked"));
            console.dir($("input[type=radio]").eq(1).prop("checked"));
            $("input[type=radio]").eq(1).prop("abc","123");
            console.log($("input[type=radio]").eq(1));
        })
    </script>
</body>
</html>

View Code

9.控制元素显示隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .hidden{
            display: none;
        }
    </style>
</head>
<body>
    <button>隐藏</button>
    <div class="box"></div>
    <script src="jquery.js"></script>
    <script>
        $(function () {
            // var isShow = true;
            // $("button").click(function () {
            //     if (isShow){
            //         $(".box").addClass("hidden");
            //         isShow = false;
            //     } else{
            //         $(".box").removeClass("hidden");
            //         isShow = true;
            //     }
            // })

            $("button").click(function () {
                $(".box").toggleClass("hidden");
            })
        })
    </script>
</body>
</html>

View Code

10.选项卡的嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        .box{
            width: 400px;
            height: 300px;
        }
        .box ul{
            width: 100%;
            overflow: hidden;
        }
        .box ul li{
            float: left;
            width: 50px;
            height: 70px;
            margin: 0 10px;
            background-color: red;
            text-align: center;
            line-height: 70px;
        }
        a{
            color: #fff;
        }
        .active{
            width: 100%;
            height: 100px;
            background-color: green;
            display: none;
        }
        .show{
            display: block;

        }
    </style>
</head>
<body>
   <button class="next">下一张</button>
    <div class="box">
        <ul>
            <li>
                <a href="javascript:void(0);">张三</a>
            </li>
            <li>
                <a href="javascript:void(0);">李四</a>
            </li>
            <li>
                <a href="javascript:void(0);">王五</a>
            </li>
            <li>
                <a href="javascript:void(0);">赵六</a>
            </li>
        </ul>
        <div class="active"></div>
        <div class="active"></div>
        <div class="active"></div>
        <div class="active"></div>
    </div>
   <script src="jquery.js"></script>
   <script>
       $(function () {
            var count = 0;
            $(".next").click(function () {
                console.log(1)
                count++;
                $(‘ul li‘).eq(count).css(‘backgroundColor‘,‘green‘).siblings(‘li‘).css(‘backgroundColor‘,‘red‘);
                $("div.active").eq(count).addClass("show").html("abc").siblings("div.active").removeClass("show");
            })
            $(".box ul li a").click(function () {
                $(this).css("color","green").parent("li").siblings("li").find("a").css("color","#fff");
                //index()方法获取索引
                console.log($(this).parent().index());

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

View Code

以上是关于jquery基础知识2的主要内容，如果未能解决你的问题，请参考以下文章

26个jQuery代码片段使用技巧

Javascript代码片段在drupal中不起作用

jQuery应用代码片段

Visual Studio 2012-2019的130多个jQuery代码片段。

markdown 在WordPress中使用jQuery代码片段

使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面