表单选择器，层次选择器

最新推荐文章于 2021-12-02 10:32:14 发布

wao小猪配齐

最新推荐文章于 2021-12-02 10:32:14 发布

阅读量128

点赞数 1

分类专栏：笔记文章标签： jquery js

本文链接：https://blog.csdn.net/qq_43956225/article/details/108793561

版权

笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

jquery第一堂课

Jquery在大二的时候接触过，但是做的那个淡入淡出的效果。
昨天上的第一堂课，老师说，主要包括类选择器，昨天下午听的时候感觉很简单，但是自己要是做起来，就不是那么容易了，一开始写的时候，括号里面，引用class的时候前面要有个“.”，引用id的时候前面要用“#”，后面要有css样式的话要.CSS（“属性”,“数值，或者颜色”)，还有属性选择器attr（" “，”"）。

表单选择器

        $(function () {
            alert($(":input").length);//选取所有<input><textarea><select>和<button>
            alert($(":image").length);//选取所有图像按钮
        });

基本选择器

     <style type="text/css">
        #l1,#l3,#l5
        {
            color:Red;
        }
        .myClass
        {
            color:Blue;
        }
        ol *
        {
            font-size:24px;
            background-color:Silver;
        }
        </style>
        <script type="text/javascript" src="jQuery1.7.2/jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $(function () {
                alert("ID为l1的元素个数：" + $("#l1").length);
                alert("li元素个数：" + $("li").length);
                alert("CSS类为myClass元素个数：" + $(".myClass").length);
                alert("#l1,#l3,#l5元素的个数" + $("#l1,#l3,#l5").length);
                alert("当前页面元素总个数：" + $("*").length);
            });
        </script>
	</head>
	<body>
        <ol>
            <li id="l1">列表 1</li>
            <li>列表 2</li>
            <li id="l3">列表 3</li>
            <li class="myClass">列表 4</li>
            <li id="l5">列表 5</li>
            <li>列表 6</li>
        </ol>
	</body>

层次选择器

  <script type="text/javascript" src="jQuery1.7.2/jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $(function () {
                alert("ol内li元素个数：" + $("ol li").length);
                alert("ol内li元素个数：" + $("ol>li").length);
                $("#l1+li").css("color", "green");
                alert("#l1兄弟节点元素个数：" + $("#l1~li").length);
            });
        </script>
	</head>
	<body>
        <ol>
            <li id="l1">列表 1</li>
            <li>列表 2</li>
            <li id="l3">列表 3</li>
            <li class="myClass">列表 4</li>
            <li id="l5">列表 5</li>
            <li>列表 6</li>
        </ol>
	</body>

基本过滤器

        <script type="text/javascript">
            $(function () {
                $("li:first").css("background-color", "Silver"); //第一个
                $("li:last").css("background-color", "Silver"); //最后一个
                $("li:even").css("color", "red"); //奇数行
                $("li:odd").css("color", "blue"); //偶数行
                $("li:eq(2)").css("color", "green"); //第3行
                $(":header").css("color", "red"); //所有标题元素
            });
        </script>
	</head>
	<body>
        <ol>
            <li>列表 1</li>
            <li>列表 2</li>
            <li>列表 3</li>
            <li>列表 4</li>
            <li>列表 5</li>
            <li>列表 6</li>
        </ol>
        <h1>一级标题</h1>
        <h3>二级标题</h3>
        <h4>四级标题</h4>
	</body>

内容过滤器

   <script type="text/javascript">
            $(function () {
                $("li:contains('new')").css("color", "red");//包含new文本的元素
                $("li:has('h2')").css("color", "green");//包含h1标签的元素
            });
        </script>
	</head>
	<body>
	     <ol>
            <li>列表 1 new</li>
            <li>列表 2</li>
            <li>列表 3 new</li>
            <li>列表 4</li>
            <li>列表 5</li>
            <li>列表 6 new</li>
            <li><h2>列表 7</h2></li>
        </ol>
	</body>

wao小猪配齐

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单选择器，层次选择器

jquery第一堂课Jquery在大二的时候接触过，但是做的那个淡入淡出的效果。昨天上的第一堂课，老师说，主要包括类选择器，昨天下午听的时候感觉很简单，但是自己要是做起来，就不是那么容易了，一开始写的时候，括号里面，引用class的时候前面要有个“.”，引用id的时候前面要用“#”，后面要有css样式的话要.CSS（“属性”,“数值，或者颜色”)，还有属性选择器attr（" “，”"）。...
复制链接

扫一扫

专栏目录