第一篇博客，现在原生安卓需求不大了。招聘的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. Eclipse之JSON导包

    1.选中要导包的工程-–>2.右击选择创建文件夹--->3.将要导的包复制到该文件夹下--–>4.右击要导入的包-->5.选择Build path->Add to Bui ...

  2. 关于Myeclipse不能加载已有项目的问题

    如果缺少.project文件,你可以新建一个同名项目,把Use default location 去掉,选择要加载的项目,完成

  3. require 增量更新与版本管理

    使用require.js 加载JS文件时,当JS文件有更新,可以通过更改全局版本号( urlArgs : 'v=1'),告诉浏览器加载新的文件. 但该方法虽然使用方便,但美中不足的是有些不需要更新的文 ...

  4. HTTPS协议入门

    目录什么是https?https的利与弊?https的原理和流程?什么是证书/CA证书?什么是单向SSL认证与双向SSL认证?网站如何实现https?网站实现https的一些补充说明参考网页 一.什么 ...

  5. ZooKeeper数据结构

    Time in ZooKeeper ZooKeeper跟踪时间的多种方式 1)Zxid:每个ZooKeeper状态变化将会接收到一个zxid(ZooKeeper Transaction Id)的时间戳 ...

  6. python制作pdf电子书

    python制作pdf电子书 准备 制作电子书使用的是python的pdfkit这个库,pdfkit是 wkhtmltopdf 的Python封装包,因此在安装这个之前要安装wkhtmltopdf 安 ...

  7. PHP中递归最详解释.

    说到递归函数想必会有很多同学感到晕晕的,很难绕,容易绕错,那下面就让我来为大家详解一下. 首先,什么是递归函数呢? 1.所谓递归:指的是在函数内部,调用函数自身的操作.2.递归分两布:递(从最外层函数 ...

  8. 记一次linux主机名莫名其妙变成了bogon

    起因:公司网络接口做了接口认证,虚拟机桥接至物理网卡无法完成认证进行网络访问,无奈之下只能讲虚拟机网络模式更改为NAT模式,更改完成之后进行ssh登录,发现主机名发生了变化. 更改NAT模式之前 [r ...

  9. RecycleView和CardView

    一.RecycleView <android.support.v7.widget.RecyclerView android:id="@+id/my_recycler_view" ...

  10. mongodb入门级的视频教程-简易客户管理系统制作

    本套教程作为mongodb入门级的视频教程,首先讲解了mongodb的下载.安装,环境变量的设置.启动mongodb和将mongodb安装成为windows服务.然后进一步讲解了mongodb里面集合 ...