jquery学习之-普通选择器

最新推荐文章于 2024-08-14 08:51:08 发布

克念

最新推荐文章于 2024-08-14 08:51:08 发布

阅读量374

点赞数

分类专栏： javascript 前端 jquery 页面文章标签： javascript jquery 选择器

本文链接：https://blog.csdn.net/shikenian520/article/details/46659543

版权

前端同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

jquery

8 篇文章 0 订阅

订阅专栏

javascript

7 篇文章 0 订阅

订阅专栏

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="点击我" οnclick="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

收藏

觉得还不错? 一键收藏
0
评论
jquery学习之-普通选择器

jquery选择器使用场景选择HTML标签选择段落（P）标签，并且往其中加入hello world #id选择器 Hello world! var i = 0; function test() { $("p").html
复制链接

扫一扫

专栏目录