zoukankan      html  css  js  c++  java
  • JQuery学习笔记——基础选择器

    第一篇博客,现在原生安卓需求不大了。招聘的Android工程师都需要附带更多的其他技术。这也是开启我学习前端之路的开端。前端时间看了HTML、CSS等,在界面渲染这一块,就不多记录博客了。现在学习着JQuery,JS大概的过了一遍,都说JS是基础,先打好基础,但是JS编写起来语法比较麻烦,JQuery更方便快捷的实现功能,先用起来,有不懂的回头再了解学习。那么,就开始我的JQuery学习之路吧。

    JQuery介绍:

    jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库( 或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。 jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

    JQuery学习大纲:

    我是根据JQuery手册进行学习的,手册上学习的好处有:内容全面,及时更新。手册上进行学习也有不足的地方,就是理论,解析可能不够生动,比较难理解。可根据手册,另行在各大搜索引擎内搜索对应的的知识,加深理解。本人看的手册是http://jquery.cuishifeng.cn/index.html。如下图,更类方法、选择器等比较齐全,学习起来掌握的知识内容也比较全面。同样,只参考手册是纸上谈兵,结合网上各大牛人的解析,理解等,进行学习,实践一下该功能,我想进步会是非常迅速的。

    开始学习:

    选择器:

    1、基本选择器

      1)、#id

      2)、.class

      3)、ele

      4)、*

      5)、#id .class...

    2、层级选择器

    3、基本筛选器

    4、内容选择器

    5、可见性选择器

    6、属性选择器

    7、子元素选择器

    8、表单选择器

    9、表单元素选择器

    10、混淆选择器

    按照手册,先从基本选择器开始:

    先写一段HTML代码

    1 <body>
    2     <h1 id="h1">jquery</h1>
    3     <h1 class="h2">javascript</h1>
    4     <h1>html</h1>
    5     <h1>css</h1>
    6 </body>

    效果如图:

    1、#id(id选择器),选择指定id的元素

     使用id选择器,改变标签样式

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#h1").css({'color': 'red'});
            });
        </script>

    效果如图:

    $("h1"),指定id为h1,并将该元素的颜色设置为红色。

    2、.class(class选择器),选择指定class的元素

     使用class选择器,改变标签样式

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $(".h2").css({'color': 'red'});
            });
        </script>

    效果如图:

    $(".h2"),指定class为h2的元素,并将该元素的颜色设置为红色。

     3、ele(元素选择器),选择指定元素

     使用元素选择器,改变标签样式

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("h1").css({'color': 'red'});
            });
        </script>

    效果如图:

    $("h1"),指定h1的元素,并将该元素的颜色设置为红色。

    4、*,匹配所有元素,多用于结合上下文来搜索。

     使用*,改变标签样式

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("*").css({'color': 'red'});
            });
        </script>

    效果如图:

    $("*"),匹配所有元素,并将匹配元素的颜色设置为红色。

    5、selector1,selector2,selectorN 

    将每一个选择器匹配到的元素合并后一起返回。

    你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内。

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#h1,.h2").css({'color': 'red'});
            });
        </script>

    效果如图:

    $("#h1,.h2"),指定id为h1的元素和class为h2的元素,并将匹配元素的颜色设置为红色。

    以上就是基本选择器的使用方式,比较简单,下一篇学习JQuery的层级选择器。

  • 相关阅读:
    Linux效劳器装机安全快速进阶指南(6)
    VLC 0.8.6b
    Mesk:简洁而朴实的音乐播放器
    OpenOffice.org最先支持微软docx等技俩
    Rawstudio-轻松转换 RAW 图片
    Transmission 0.70
    Openoffice3.0: 微软Office的解散者?
    AcetoneISO:Linux 下的“Daemon Tools”
    OpenOffice3将支撑PDF编纂及ac琐屑
    Linux的主动实行措施cron和crontab(1)
  • 原文地址:https://www.cnblogs.com/Jhon-Mr/p/7217406.html
Copyright © 2011-2022 走看看