jquery学习之-普通选择器

来源：互联网发布：日本代购眼霜知乎编辑：程序博客网时间：2024/05/29 16:44

jquery选择器使用场景

标签选择器

选择所有的段落（P）标签，并且往其中加入hello world

<pre name="code" class="html"><!DOCTYPE html><html>    <head>        <title>#id选择器</title>        <script src="../jquery-1.11.3.js" type="text/javascript"></script>    </head>        <body>        <div><p>Hello world!</p></div>                <script type="text/javascript">var i = 0;function test(){$("p").html("Hello iMooc!" + (i++)); //填写相应代码}        </script><input type="button" value="点击我" onclick="test()"/>    </body></html>

效果如下：

ID选择器

把id为divtest的DOM中的内容放入到id为default的元素中

<!DOCTYPE html><html>    <head>        <title>#id选择器</title>        <script src="../jquery-1.11.3.js" type="text/javascript"></script>    </head>        <body>        <div id="divtest">div的内容</div>        <div id="default"></div>        <script type="text/javascript">            $("#default").html($("#divtest").html()); //把divtest里面的内容放入到default的内容中        </script>    </body></html>

其中，html方法的作用是，获取节点中的数据（当入参为空的时候），或者往节点中插入数据（当入参有数据的时候），结果如下

*选择器

把form元素下的所有元素都设置为不可用

<!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">           <span style="color:#ff0000;"> $("form *").attr("disabled", "true");</span>        </script>    </body></html>

组合选择器

把之前的很多种选择器组合器来是使用，中间使用逗号隔开。被选择的元素之间是平等的关系

如下，吧 class 是green和red的内容全部变为“hi，我们的样子很美哦！”

<!DOCTYPE html><html>    <head>        <title>sele1,sele2,seleN选择器</title>        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>        <link href="style.css" rel="stylesheet" type="text/css" />    </head>    <body>        <div class="red">选我吧！我是red</div>        <div class="green">选我吧！我是green</div>        <div class="blue">选我吧！我是blue</div>                <script type="text/javascript">            $(".red,.green").html("hi,我们的样子很美哦!");        </script>    </body></html>

0 0