JQuery笔记2-选择器

最新推荐文章于 2024-05-05 23:49:29 发布

blog12138

最新推荐文章于 2024-05-05 23:49:29 发布

阅读量163

点赞数

分类专栏： JQ 文章标签： JQ jquery

本文链接：https://blog.csdn.net/Zzzpiu/article/details/109612787

版权

JQ 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

JQ中的选择器
JQ中常用的几个方法
JQ中的.css()方法
JQ中的其他主要选择器
其他常用的函数
几个小demo

JQ中的选择器

JQ中的选择器和C3中的选择器非常相似,可以说如果会C3的选择器,那么就会JQ的选择器.例如:JQ中获取元素的方式：通过各种选择器来获取元素

根据id—$(’#id’) ----- 一个元素
根据标签名—$(‘标签名’)----多个元素
根据类样式的名字（类选择器）---- $(’.class’)–多个元素

JQ中常用的几个方法

.html()方法,设置标签中间显示其他标签及内容,类似于innerHTML
.text()方法,设置标签中间显示的文本内容,类似于innerText
.val()方法.设置input标签中value的值,类似于value
.css()方法,.设置元素的样式,类似于style

JQ中的.css()方法

JQ操作样式就要用.css()方法,而操作样式有三种方式:

当里面只写两个参数:$('div').css('backgroundColor','red')
键值对:$('div').css({width:'20px',height:'30px'})
链式编程:$('div').css('width','20px').css('height','30px')

三种方式的区别:只有两个参数这种写方法需要没设置一个样式就需要多些一行代码,键值对的方式和写css中的style就特别像了,链式编程就体现了JQ的特点.

JQ中的其他主要选择器

多条件选择器(同时选择多个元素):$('span, p, li, div')
奇数偶数选择器(选择第奇数个或第偶数个,exen为偶数,odd为奇数,但是是从索引0开始的):$('#uu>li:even'),$('#uu>li:odd')
层级选择器
3.1 后代选择器(所有后代包括子孙):$('#dv p')
3.2 子元素选择器(直接的后代):$('#dv>p')
3.3 获取的是div后面的第一个p标签元素$("#dv+p")
3.4 获取的是div后面所有直接的兄弟元素p标签元素$("#dv~p")
标签+类选择器:$('li.cls')
索引选择器(等于4,大于4,小于4):$('#uu>li:eq(4)'),$('#uu>li:gt(4)'),$('#uu>li:lt(4)')
id选择器:$('#btn')
类选择器:$('.btn')
标签选择器:$('p')

其他常用的函数

获取当前元素的所有兄弟元素:siblings()
获取子元素(一层):children('标签名')
查找当前元素下的元素:find('标签名')
显示隐藏盒子:show(),hide()
显示盒子淡入:fadeIn()
隐藏盒子淡出:fadeOut()

几个小demo

精品展示:
好友面板切换
下拉菜单
手风琴

这里只展示两个:好友面板切换:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #uu li {
            margin-bottom: 10px;
            background-color: Orange;
            font-size: 20px;
            font-weight: bolder;
            cursor: pointer;
        }
        #uu li ul {
            list-style-type: none;
            margin: 0;
            padding: 0;

        }

        #uu li ul li {
            background-color: pink;
        }
    </style>
    <script src="../jquery-1.12.2.js"></script>
    <script>
        $(function () {
            //找到id为ul的下面的li里面的ul里面的li全部隐藏
            $("#uu>li>ul>li").hide();
            //找到id为ul的直接的子元素li,注册点击事件
            $('#uu>li').click(function () {
                //兄弟li中的ul下面的li全部隐藏
                $(this).siblings('li').children('ul').find('li').hide(250);
                //当前点击的li中的ul里面的li全部显示
                $(this).children('ul').find('li').fadeIn(500);
            });
        });
    </script>
</head>
<body>
<!--box-shadow: 0px 0px 4px 3px inset rgba(255, 0, 0, 0.3) 如果不指定inset 默认阴影向外-->
<div style=" width:200px; height:500px; border:1px solid red; box-shadow: 0px 0px 4px 3px rgba(255, 0, 0, 0.3)">
    <ul id="uu" style=" list-style-type:none; margin:0; padding:0; text-align:center;">
        <li>
            幼儿园同学
            <ul>
                <li>鼻涕虫</li>
                <li>爱哭鬼</li>
                <li>张大胆</li>
            </ul>
        </li>
        <li>小学同学
            <ul>
                <li>张三丰</li>
                <li>张无忌</li>
                <li>乔布斯</li>
            </ul>
        </li>
        <li>
            初中同学
            <ul>
                <li>盖茨</li>
                <li>川普</li>
                <li>奥巴马</li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .wrap {
            width: 330px;
            height: 30px;
            margin: 100px auto 0;
            padding-left: 10px;
            background-color: purple;
        }

        .wrap li{
            background-color: yellow;
        }

        .wrap > ul > li {
            float: left;
            margin-right: 10px;
            position: relative;
        }

        .wrap a {
            display: block;
            height: 30px;
            width: 100px;
            text-decoration: none;
            color: #000;
            line-height: 30px;
            text-align: center;
        }

        .wrap li ul {
            background-color: yellow;
            position: absolute;
            top: 30px;
            display: none;
        }

    </style>
    <script src="../../jquery-1.12.2.js"></script>
    <script>
        $(function () {
            //获取.wrap下面的ul中的li,注册鼠标进入和离开的事件
            $('.wrap>ul>li').mouseover(function () {
                //鼠标进入
                $(this).children("ul").show();
                var ul = $(this).children("ul");

                ul.children('li').children('a').click(function () {
                    var x = $(this).text();
                    console.log(x === '乔峰');
                });
            });
            $('.wrap>ul>li').mouseout(function () {
                $(this).children("ul").hide();
            });
        })
    </script>
</head>
<body>
<div class="wrap">
    <ul>
        <li>
            <a href="javascript:void(0);">帅哥系列</a>
            <ul>
                <li><a href="javascript:void(0);">乔峰</a></li>
                <li><a href="javascript:void(0);">张无忌</a></li>
                <li><a href="javascript:void(0);">郭靖</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">美女系列</a>
            <ul>
                <li><a href="javascript:void(0);">柳 岩</a></li>
                <li><a href="javascript:void(0);">杨 幂</a></li>
                <li><a href="javascript:void(0);">萝 拉</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">渣男妇腐女</a>
            <ul>
                <li><a href="javascript:void(0);">凤姐</a></li>
                <li><a href="javascript:void(0);">助教</a></li>
                <li><a href="javascript:void(0);">导师</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

blog12138

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery笔记2-选择器

文章目录JQ中的选择器JQ中常用的几个方法JQ中的.css()方法JQ中的其他主要选择器其他常用的函数几个小demoJQ中的选择器JQ中的选择器和C3中的选择器非常相似,可以说如果会C3的选择器,那么就会JQ的选择器.例如:JQ中获取元素的方式：通过各种选择器来获取元素根据id—$(’#id’) ----- 一个元素根据标签名—$(‘标签名’)----多个元素根据类样式的名字（类选择器）---- $(’.class’)–多个元素JQ中常用的几个方法 .html()方法,设置标签中
复制链接

扫一扫