第一篇博客，现在原生安卓需求不大了。招聘的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代码

 <body>

     <h1 id="h1">jquery</h1>

     <h1 class="h2">javascript</h1>

     <h1>html</h1>

     <h1>css</h1>

 </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的层级选择器。

JQuery学习笔记——基础选择器的更多相关文章

  1. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

  2. JQuery学习笔记——层级选择器

    JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...

  3. jQuery学习笔记(2)-选择器的使用

    一.选择器是什么 有了jQuery的选择器,我们几乎可以获取页面上任意一个或一组对象 二.Dom对象和jQuery包装集 1.Dom对象 JavaScript中获取Dom对象的方式 <div i ...

  4. JQuery学习笔记之选择器

    JQuery与DOM对象 <div id="test1" class="test2"></div> DOM对象获取方式: var dom ...

  5. jQuery学习笔记（一）——基础选择器、过滤选择器、表单选择器

    $()就是jQuery中的函数,它的功能是获得()中指定的标签元素.如演示样例中$("p")会得到一组P标签元素,当中"p"表示CSS中的标签选择器.$()中的 ...

  6. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  7. jQuery 学习笔记

    jQuery 学习笔记   一.jQuery概述    宗旨: Write Less, Do More.    基础知识:        1.符号$代替document.getElementById( ...

  8. jQuery学习笔记之概念（1）

    jQuery学习笔记之概念(1) ----------------------学习目录-------------------- 1.概念 2.特点 3.选择器 4.DOM操作 5.事件 6.jQuer ...

  9. jQuery学习笔记（一）：入门

      jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...

随机推荐

  1. js添加多个样式属性cssText

    document.getElementById("box").style.cssText += ";color:red;font-size:20px"; 代码分 ...

  2. GPU编程-Thread Hierarchy（3）

    1. 如果处理的数据是二维的或者三维的,应该怎么办呢? 针对的,我们可以按照二维或者三维的方式,组织线程.老规矩,先代码.后解释 // Kernel definition __global__ voi ...

  3. 【JAVAWEB学习笔记】网上商城实战5：后台的功能模块

    今日任务 完成后台的功能模块 1.1      网上商城的后台功能的实现: 1.1.1    后台的功能的需求: 1.1.1.1  分类管理: [查询所有分类] * 在左侧菜单页面中点击分类管理: * ...

  4. Xamarin控件使用之GridView

    [Activity(Label = "MainGridViewActivity", LaunchMode = LaunchMode.SingleTop)]//设置Activity启 ...

  5. Hibernate入门（三）

    一 Hibernate生成器类 Hibernate中,标签id中的generator标签用于生成持久化类对象的唯一标识.所有的生成器类都实现了org.hibernate.id.IdentifierGe ...

  6. AngularJS高级程序设计读书笔记 -- 指令篇 之 内置指令

    1. 内置指令(10-12 章) AngularJS 内置超过 50 个内置指令, 包括 数据绑定,表单验证,模板生成,时间处理 和 HTML 操作. 指令暴露了 AngularJS 的核心功能, 如 ...

  7. android的drawable资源

    1.android中可以通过xml文件配置资源,比如字符串啦,整数拉.浮点数等等,当然也可以配置图片资源和选择器,下面我们就看看几种图片资源的配置. @1矩形方框,带渐变色的配置代码 <?xml ...

  8. ByteBuffer源码分析

    在进行数据传输的时候,往往需要使用到缓冲区,常用的缓冲区就是JDK NIO类库中提供的java.nio.Buffer,实现类如下: 在使用NIO编程时,最常用的是其中的ByteBuffer,本篇分析B ...

  9. jquery（select）下拉框 选取选中的值

    var get_date_type=$("#date_type").find("option:selected").val(); var get_date_ty ...

  10. Chapter 5. MPEG-4 Visual

    本章着重介绍有关MPEG-4 Visual标准的细节. Tool 编码工具集合的子集(比如支持交织等). Object 视频元素(比如一个矩形视频帧,或者一个任意形状的区域,静止的图像). Profi ...