jQuery初学（一）——关于如何获取网页中的元素

来源：互联网发布：大智慧软件官方首页编辑：程序博客网时间：2024/05/16 01:16

PS:大部分源码来自慕课网，粘贴到html文件中可直接体验效果

要使用jQuery，只需要在head标签中加入如下一行：

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>

根据id来操作元素：

<!DOCTYPE html><html>    <head>        <title>#id选择器</title>        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>    </head>    <body>        <div id="test1">原来的内容</div>        <script type="text/javascript">            $("#test1").html("改变后的内容");        </script>    </body></html>

通过$("#id")来获取元素，并通过html()函数来改变元素的内容。

根据元素的类型来操作元素

<!DOCTYPE html><html>    <head>        <title>element选择器</title>        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>    </head>    <body>        <button id="btntest">点我</button>        <script type="text/javascript">            $("button").attr("disabled","true");        </script>    </body></html>

通过$("button")来获取元素，然后通过attr()函数来改变元素的属性，使其不可用。

根据元素的.class来操作元素

<!DOCTYPE html><html>    <head>        <title>.class选择器</title>        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>        <style type="text/css">            .red {                color: red;            }            .green {                color: green;            }        </style>    </head>    <body>        <div class="red">立正，向我这边看齐</div>        <div class="green">我先歇歇脚</div>                <script type="text/javascript">            var $redHTML = $(".red").html();            $(".green").html($redHTML);        </script>    </body></html>

可以注意到，虽然class="green"的div内容变成了和red一样，但是css样式并没有改变。

使用*获取所有元素

<!DOCTYPE html><html>    <head>        <title>*选择器</title>        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>    </head>    <body>        <form action="#">        <input id="Button1" type="button" value="button" />        <input id="Text1" type="text" />        <input id="Radio1" type="radio" />        <input id="Checkbox1" type="checkbox" />        </form>        <script type="text/javascript">            $("form *").attr("disabled", "true");            //$("form *").removeAttr("disabled");        </script>    </body></html>

$("form *")表示获取form元素下的所有元素，并将其设为disabled，要取消该属性只需使用removeAttr("disabled")方法。

如果要选择多个元素的话，只需用逗号作为分隔符，例如：$(".red,.green,.blue")

层次选择器和child选择器

<!DOCTYPE html><html>    <head>        <title>parent > child选择器</title>        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>        <style type="text/css">            div, p, label            {                float: left;                border: solid 1px #ccc;                margin: 5px;                padding: 5px;            }            label            {                width: 30px;                height:30px            }        </style>    </head>    <body>        <div>            码农家族            <p>                <label></label>            </p>            <label></label>            <label></label>        </div>        <label></label>                <script type="text/javascript">            $("div > label").css("border", "solid 5px red");            //$("div label").css("border", "solid 5px red");        </script>    </body></html>

$("div label")是选择div下所有的label标签，而$("div > label")是选择div下一级的所有label标签。

用 + 来选择指定元素相邻的下一个元素

<!DOCTYPE html><html>    <head>        <title>prev + next选择器</title>        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>        <style type="text/css">            div, p, label            {                float: left;                border: solid 1px #ccc;                margin: 5px;                padding: 5px;            }            p,label            {                width:230px;                height:30px;            }            p            {                border: solid 1px red;            }        </style>    </head>    <body>        <div>            码农家族            <label></label>            <p></p>            <label></label>            <label></label>        </div>        <label></label>        <script type="text/javascript">            $("p + label").css("background-color","red");        </script>    </body></html>

用$("p + label")来取得p元素的下一个label。

用 ~ 来获取指定元素同级的、后面的元素

<!DOCTYPE html><html>    <head>        <title>prev ~ siblings选择器</title>        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>        <style type="text/css">            div, p, label            {                float: left;                border: solid 1px #ccc;                margin: 5px;                padding: 5px;            }            p,label            {                width:230px;                height:30px;            }            p            {                border: solid 1px red;            }        </style>    </head>    <body>        <div>            码农家族            <label></label>            <p></p>            <label id="label1"></label>            <label id="label2"></label>        </div>        <label id="label3"></label>        <script type="text/javascript">            $("p ~ label").css("border", "solid 1px red");            $("p ~ label").html("我们都是p先生的粉丝");        </script>    </body></html>

可以看到，label1和label2都改变了样式，但label3没有改变。

0 0