jQuery学习基础理论（二）

红太狼 2022-06-08 08:17 247阅读 0赞

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <meta charset="UTF-8">
        <title>JQuery选择器</title>
        <script type="text/javascript" src="scripts/jquery-3.2.1.js"/>
    </head>
    <body>
    <script type="text/javascript">
        
        $('#tt').css("color","red");
        if(document.getElementById("tt")){
            document.getElementById("tt").style.color="red";
        }
        /*$('#tt')获取的是一个对象，检验对象是否存在用下面的方法：*/
        if($('#tt').length > 0){
            //other code
        }
        if($('#tt')[0]){
            //other code
        }
        //获取网页中的所有p元素，并且添加onClick事件
        var items = document.getElementsByTagName("p");
        for(var i=0;i<items.length;i++){
            items[i].onclick = function () {
                //do something
            }
        }
        //使一个特定的表格隔行变色
        var item1 = document.getElementById("id");
        var tbody = item1.getElementsByTagName("tbody")[0];
        var trs = tbody.getElementsByTagName("tr");
        for(var i=0;i<trs.length;i++){
            if(i%2==0){
                trs[i].style.backgroundColor="red";
            }
        }
        //对多选框进行操作，输出选中的多选框的个数
        var btn = document.getElementById("btn");
        btn.onclick = function () {
            var arrays = new Array();
            var item2 = document.getElementsByName("check");
            for(var i=0;i<item2.length;i++){
                if(item2[i].checked){
                    arrays.push(item2[i].value);
                }
            }
            alert("选中的个数是:" + arrays.length);
        }
    
        //获取表单内表单元素的个数
        $('#form :input').length;
        //获取表单内单行文本框的个数
        $('#form :text').length;
    
    
    </script>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzQzMjU_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzQzMjU_size_16_color_FFFFFF_t_70]: /images/20220608/76460798c39a4b1697200e890ee8d410.png