Jquery3_控制Dom元素1

来源：互联网发布：巢湖安广网络客服电话编辑：程序博客网时间：2024/06/04 23:29

一下为个人笔记，仅供参考：

======实例一==========

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {

            $("#content").text("ID选择器");
            $(".clas").text("类选择器");
            $("div").text("标签选择器");
            $("#top,#diva,#divb").text("复合选择器");
            $("#diva #span1").text("层次选择器");
            $("#diva > #span1").text("直接相邻的元素选择器");

            // 设置样式
            $("#top #content").css("background-color", "red");
            $("#top #content").css("font-size", "28px");

$("#divGrand").html("<a href='#'>hahah</a>"); // 对应JS里的InnerHtml

            $("#divGrand").text("你好"); // 对应JS里的InnerText
            // 获取value值
            var value = $("#test").val();

            // 设置Value值
            $("#test").val("改变按钮");

        })
    </script>
</head>
<body>
   <div id="top"> <span id="content">I'm span</span> </div>

     <div id="divGrand">

     </div>
     <div class="clas"></div>
     <div class="clas"></div>
     <div id="diva">
      <span id="span1"></span>
     </div>
     <div id="divb"></div>
     <input id="test" type="button" value="测试" />
</body>
</html>

======实例二==========

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            // 找和#d4以后紧邻的div标签，所以没找到
            $("#d4").next("div").css("color", "red");

            // 找到#d4以后的所有div标签
            $("#d4").nextAll("div").css("color", "red");

// 找找和#d4之前紧邻的div标签
$("#d4").prev("div").css("color", "red");

//找找和#d4之前所有的div标签
$("#d4").prevAll("div").css("color", "red");

// 查找所有的不是自身的div元素
$("#d4").siblings("div").css("color", "red");

// #d4之后的div标签和自己本身
$("#d4").nextAll("div").andSelf().css("color", "red");

        });
    </script>
</head>
<body>
     <div>111111
        <div>aaaaaaa</div>
     </div>
     <div>222222</div>
     <div>333333</div>
     <div id="d4">444444</div>
     <p>pppppppp</p>
     <div>555555</div>
     <div>666666</div>
     <div>7777777</div>

</body>
</html>

======实例三==========

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            ///**简单的选择器**
            //找第一个input标签
            $("input").first().css("background", "orange");、

            // 找最后一个标签
            $("input").last().css("background", "orange");

// 排除id为#t1的input标签
$("input:not(#t1)").css("background", "orange");

// 排除id为#t1和class为.myClass的input标签
$("input:not(#t1):not(.myClass)").css("background", "orange");

// 找奇数的元素，下标从0开始 (可以实现隔行显示的效果)
$("input:odd").css("background", "orange");

// 找偶数的元素，下标从0开始
$("input:even").css("background", "orange");

// 根据索引去找 (下标从0开始)
$("input:eq(3)").css("background", "orange");

// 查找索引之前的元素 (不包括索引的那一个元素下标从0开始)
$("input:lt(3)").css("background", "orange");

// 查找索引之后的元素 (不包括索引的那一个元素下标从0开始)
$("input:gt(3)").css("background", "orange");

        });
    </script>
</head>
<body>
   <input id="t1" type="text" /><br />
   <input type="text" /><br />
   <input class="myClass" type="text" /><br />
   <input class="myClass" type="text" /><br />
   <input type="text" /><br />
   <input type="text" /><br />
   <input type="text" /><br />
   <input type="text" /><br />
   <input type="text" /><br />
   <input type="text" /><br />
</body>
</html>

======实例四==========

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .my{width:100px;height:80px;background:orange;}

        .setCls{border:1px solid black;}

        .changeClas{background:black;}

        .dark
        {

          filter:gray; /*只有IE支持*/
         }
    </style>
    <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            // *****添加样式***
            $("#btnSetClass").click(function () {
                //                // 用attr()方法设置样式会原来的样式覆盖
                //                $(".my").attr("class", "setCls");

// 所以要追加样式用assClass()方法
$(".my").addClass("setCls");

                // 移除样式
                $(".my").removeClass("my");
            });
        });

        // ****开灯关灯****
        $(function () {
            $("#btnChage").click(function () {
                if ($("#btnChage").attr("value") == "开灯") {
                    $("body").removeClass("changeClas");
                    $("#btnChage").attr("value", "关灯")
                } else {
                    $("body").addClass("changeClas");
                    $("#btnChage").attr("value", "开灯")
                }
            });
        });

        // **切换样式****
        $(function () {
            $("#btnChage").click(function () {
                // toggleClass()切换样式用的，有这个样式就移除，没有就加上
                $("body").toggleClass("dark");  // 里面封装的是hasClass()
            });
        });

    </script>
</head>
<body>
     <div class="my">
       aaaa
     </div>
     <input type="button" id="btnSetClass" value="设置样式" />

======实例五=======

// 找所有文本框并且赋值 (给文本框赋值用val())
$("input[type=text]").val("哈哈");

// 在所有文本框中找id不等于t1的
$("input[type=text][id!=t1]").css("background", "red");

// 找所有文本框并且id中包含t的 (模糊查询)
$("input[type=text][id*=t]").css("background", "red");

// 找被禁用的文本框
$("input[type=text]:disabled").css("background", "red");

                        // 找到radioButton选定的项
                        $("input[value=radio]").click(function () {
                            var checkValue = $("input[name=sex]:checked").val();
                            alert(checkValue);
                        });

// 找到所有的文本框"冒号"后是 type类型的值
$(":text").val("表单选择器");

// 找到checkbox选定的项
$("input[value=check]").click(function () {

                            $("input[type=checkbox]:checked").each(function () {
                                // this为Dom对象
                                alert($(this).val());
                            });

                        });
        });
    </script>
</head>
<body>
   <input type="radio" value="nan" name="sex" />男
   <input type="radio" value="nv" name="sex" />女<br />
   <input type="button" value="radio" />
   <hr />
   <input type="checkbox" value="chifan" />吃饭
   <input type="checkbox" value="shuijiao" />睡觉
   <input type="checkbox" value="dadoudou" />打豆豆
   <input type="button" value="check" />

=======注意：==========

Jquery对象和Dom对象不可以互相调用（JQuery 对象是Dom对象的包装集）