第一篇博客，现在原生安卓需求不大了。招聘的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. Redis基本数据结构总结之STRING和LIST

    Redis基本数据结构总结前言 Redis的特点在于其读写速度特别快,因为是存储在内存中的,其非常适合于处理大数据量的情况:还有一个是其不同于其他的关系型数据库,Redis是非关系型数据库,也就是我们 ...

  2. 容器常用操作 - 每天5分钟玩转 Docker 容器技术（25）

    前面讨论了如何运行容器,本节学习容器的其他常用操作. stop/start/restart 容器 通过 docker stop 可以停止运行的容器. 容器在 docker host 中实际上是一个进程 ...

  3. sublime 新手代码提示

    有提示的    你按   table   试试这就是按过的结果   是不是很方便这是按后的效果      是不是很方便 下面是各种简写效果html <html></html> ...

  4. Android React Native 开发环境搭建---windows下

    环境搭建 环境搭建可以参考RN官网,也可以参考中文版本:http://reactnative.cn/docs/0.45/getting-started.html 如果你希望可以看到原版的安装流程,可以 ...

  5. 新增article注意事项

    默认情况下在日志复制中如果新增加Article那么需要产生一个包含所有Article的Snapshot.由于产生Snapshot会加锁,同时会产生IO操作,所以对于大的数据库性能影响是很大的. 可以通 ...

  6. Chapter 9:Noise-Estimation Algorithms

    作者:桂. 时间:2017-06-14  12:08:57 链接:http://www.cnblogs.com/xingshansi/p/6956556.html 主要是<Speech enha ...

  7. Analog/digital converter (ADC)

    1.ADC1 and ADC2 are 10-bit successive approximation Anolog to Digital Converters. 所谓successive appro ...

  8. js的双等号类型转换

    var undefined; undefined == null; // true 1 == true; // true 2 == true; // false 0 == false; // true ...

  9. php中查询mysql如何在IN array中用

    假如有一个数组 $arr = array(1,3,5,7,9)那么我在如何在php中使用mysqlWHERE id IN (1,3,5,7,9.......)$arr_string = join(', ...

  10. strval

    将变量转成字符串类型. 语法: string strval(mixed var); 返回值: 字符串 函数种类: PHP 系统功能   内容说明 本函数可将数组及类之外的变量类型转换成字符串类型.   ...