客户端网页编程09——Jquery

最新推荐文章于 2024-06-27 10:45:00 发布

WB1224678

最新推荐文章于 2024-06-27 10:45:00 发布

阅读量395

点赞数

本文链接：https://blog.csdn.net/WB1224678/article/details/53574660

版权

客户端网页编程09——Jquery

二级联动

个人理解:所谓框架就是别人把写好的功能封装成的源生代码，我们需要哪些功能就直接拿来用！

jquery：前端框架（对JavaScript原生代码的封装）

jquery封装 JavaScript 原生代码：方法的封装

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <p id="p1">this is p</p>
    <p class="p1">this is p</p>
    <p class="p2 p3">this is p</p>
    <p class="p2">this is p</p>
    <script>
       /*var op = document.getElementById("p1");
       op.style.backgroundColor = "red";

       var op1 = document.getElementsByClassName("p1")[0];
       op1.style.backgroundColor = "orange";*/

        function $(text){
            //将text文本进行拆分
            var chooseArr = text.split(" ");
            if(chooseArr.length==1){
                //通过传入的符号确定要调用的方法
                var ch = chooseArr[0].substr(0,1);
                switch(ch){
     case "#":return document.getElementById(chooseArr[0].substr(1));
     case ".":return document.getElementsByClassName(chooseArr[0].substr(1));
     default:return document.getElementsByTagName(chooseArr[0]);
                }
            }else{
               //继续判断传入的元素个数
            }
        }

        console.info($("#p1"));

       console.info($(".p1"))
        $(".p1")[0].style.backgroundColor = "red";
    </script>
</body>
</html>

jquery与原生代码区别： jquery返回的对象（Object），原生代码返回获取的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jQuery-2.2.2-min.js"></script>
    <script>
        /*原生js方法获取到p元素*/
        /*window.onload = function(){
            var op = document.getElementById("p1");
            console.info(op);
        }*/

        /*通过jquery方式来实现的元素获取*/
        /*$(document).ready(function(){
            var op = $("#p1");
            console.info(op);
        });*/


        $(function(){
            var op = $("#p1");
            console.info(op);
        });



    </script>
</head>
<body>
    <p id="p1"></p>

</body>
</html>

选择器：

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

    </style>

</head>
<body>
    <p id="p1">this is p</p>
    <p class="p1">this is p</p>
    <div></div>
    <input type="text" name="username"/>
    <span name="username">this is span</span>

    <ul id="ul1">
        <li>新闻</li>
        <li>体育</li>
        <li>更多</li>
    </ul>

    <table border="1" id="mytable">
        <tr>
            <td>123</td>
            <td>456</td>
        </tr>
        <tr>
            <td>567</td>
            <td>678</td>
        </tr>
        <tr>
            <td>789</td>
            <td>890</td>
        </tr>
    </table>
    <script src="js/jQuery-2.2.2-min.js"></script>
    <script>
        /*获取到id*/
        var op1 = $("#p1");
        console.info(op1);

        var jsop = document.getElementById("p1");
        console.info(jsop);

        /*根据class获取到元素*/
        var op2 = $(".p1");
        console.info(op2);

        /*通过name属性*/
        var oinp = $("[name=username]");
        console.info(oinp);
        oinp.css("background-color","red");

        /*通过标签名字获取到元素*/
        var odiv = $("div");
        console.info(odiv);

        /*选中元素的子元素*/
        $("#ul1 li:first-child").css("color","red");

        /*选中表格*/
        $("#mytable tr:even").css("background-color","red");
        $("#mytable tr:odd").css("background-color","pink");
    </script>
</body>
</html>

属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .as{
            color: red;
        }
    </style>
</head>
<body>
    <p name="test" title="index-1">this is p</p>
    <span id="span1">span <a href="">点我要死啊</a></span>
    <ul id="ul1">
        <li class="as">首页</li>
        <li>伟业</li>
        <li>下一页</li>
    </ul>

    <input type="text" name="username"/>
    <input type="button" id="btn"/>
    <script src="js/jQuery-2.2.2-min.js"></script>
    <script>
        /*var op = document.getElementsByName("test")[0];
        /!*对象.属性   op["下标"]*!/
        console.info(op.title);
        console.info(op["title"]);*/

        /*attr()一个参数获取属性值，两个参数这是属性值*/
        var value = $("[name=test]").attr("title");
        console.info(value);

        $("[name=test]").attr("title","test1");

        /*移除属性*/
        $("[name=test]").removeAttr("title");

        /*动态添加class属性*/
        /*$("#span1").attr("class","as");*/
        $("#span1").addClass("as");
        /*将class设置为“”，removeAttr()直接移除属性;*/
        $("#span1").removeClass("as");


      /*addClass方法设置class属性，调用方法的时候可以传递一个函数，最后返回一个值*/
        $("#ul1 li").addClass(function(){
            var res = "index"+$(this).index();
            return res;
            });


        /*toggleClass()，反选*/
        $("#ul1 li").toggleClass("as");


        /*var value = document.getElementById("ul1").innerHTML;

        console.info(value);*/
        /*html(),封装了js里面innerHTML属性*/
        console.info($("#ul1").html());

        $("#ul1").html("<li>123</li>");


        /*text();获取到元素内部的文本内容*/
        console.info($("#span1").text());

        /*val()获取到文本框的值，js里面value属性*/
        $("#btn").on("click",function(){
            var value = $("input[name=username]").val();
            console.info(value);
        })

        

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

筛选：

/*不推荐：js和jquery混合使用，混合使用很容易报错*/
console.info($("li")[0]);

console.info($("li").html());

/*获取到集合中指定下标的元素，0是第一个，-1是最后一个*/
console.info($("li").eq(-1));

/*first()*/
console.info($("li").first());

/*last()*/
console.info($("li").last())

/*hasClass()判断当前元素是否有指定class属性,jquery,获取到一个集合，取出集合中的所有内容，默认返回第一个元素的内容*/
var res = $("li").hasClass("li");

/*html();*/
$("li").addClass("as");
console.info(res);

/*each()循环取出内容*/
$("li").each(function(){
    console.info($(this).html());
});

/*filter()从集合中筛选出符合指定条件的元素，返回的是对象*/
var odiv = $("div").filter(".div");
console.info(odiv);

/*has()包含：获取的元素内部的条件是否符合要求*/
//$("div").has(".span").css("background-color","red");

/*find():针对的是子类*/
//链式表达
$("div").find(".span").css("background-color","red");

/*is():用来判断释放满足指定条件*/
var boo =$(".span").parent().is(".box");
console.info(boo);

boo = $(".box").children().is(".span");
console.info(boo);