搜索
博主信息
博文 27
粉丝 0
评论 0
访问量 26188
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
jquery介绍和原理1-2019年12月19日
古城老巷丶
原创
928人浏览过

12月19号作业
1、写出课堂上讲解的jquery 的6个选择器,并说明其含义

jQuery的id选择器,

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jquery介绍和原理1</title>
    <!-- 引入jQuery -->
    <script src="static/js/jquery-3.4.1.min.js"></script>
</head>

<body>
    <!-- <form action="" onclick="btn()" method="get"> -->
        <input id="user" type="text" value="">
        <button onclick="btn()">提交</button>
    <!-- </form> -->

</body>
<script>

    // jQueryd 的id选择器
    function btn() { 
        var user =$('#user').val();
        console.log(user);

     }

    // var user = $('#user').val();
    // alert(user);
    // function $(aaa) {
    //     var obj={
    //         val:function(){
    //             return 'xxx';
    //         }
    //     };
    //     return obj;
    // }
    // $('abc');
</script>

</html>

image.png

jQuery的class选择器

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jquery介绍和原理1</title>
    <!-- 引入jQuery -->
    <script src="static/js/jquery-3.4.1.min.js"></script>
</head>

<body>
    <!-- <form action="" onclick="btn()" method="get"> -->
        <input class="user" type="text" value="">
        <button onclick="btn()">提交</button>
    <!-- </form> -->

</body>
<script>

    // jQueryd 的id选择器
    function btn() { 
        var user =$('.user').val();
        console.log(user);

     }


</script>

</html>

image.png

层叠选择器类似后代选择器: 选中id为div_green下的所有是P标签image.png

属性选择器,类似子代选择器:选中id为div_green下的p标签,该P标签只能是子级,可以选中多个子级p标签

image.png

选中该元素下的第一个元素:选中p标签下第一个div

image.png

匹配该元素的所有兄弟级元素:选中div_green兄弟级所有的p标签,

image.png






2、每个选择器至少写一个示例



总结

jQuery的id选择器,$('#name'),和css的id选择器一样,通过#号来选择。后面是控件的id。$(''),这是jQuery的选择器模板。对应js的document.getElementById

jQuery的class选择器,$('.name'),和css的class选择器一样,通过.号来选择。后面是控件的class名。

空格:选中元素下的所有元素

>    :选中元素下的第一个元素

+:选中后面的第一个兄弟,

~:   选中后面所有的兄弟







批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:选择器, 有意思, 与css有相似之处, 但区别也很明显
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学