第一篇博客，现在原生安卓需求不大了。招聘的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. Java web中常见编码乱码问题（一）

    最近在看Java web中中文编码问题,特此记录下. 本文将会介绍常见编码方式和Java web中遇到中文乱码问题的常见解决方法: 一.常见编码方式: 1.ASCII 码 众所周知,这是最简单的编码. ...

  2. 每天一个Linux命令—— WC

    一.首先看一下帮助 Usage: wc [OPTION]... [FILE]...  or:  wc [OPTION]... --files0-from=F Print newline, word, ...

  3. 9.并发包非阻塞队列ConcurrentLinkedQueue

    jdk1.7.0_79  队列是一种非常常用的数据结构,一进一出,先进先出. 在Java并发包中提供了两种类型的队列,非阻塞队列与阻塞队列,当然它们都是线程安全的,无需担心在多线程并发环境所带来的不可 ...

  4. unity3D：游戏分解之角色移动和相机跟随

          游戏中,我们经常会有这样的操作,点击场景中某个位置,角色自动移动到那个位置,同时角色一直是朝向那个位置移动的,而且相机也会一直跟着角色移动.有些游戏,鼠标滑动屏幕,相机就会围绕角色旋转. ...

  5. ReactJS入门基础

    渲染这俩字可能在很多地方都见过.但可能不太理解是啥意思. 那么首先我们来理解一下渲染. 渲染 我觉得这样理解比较通俗. 我们做一个汽车,开始是没有喷漆的(没有css) 只是些框框架架(HTML标签). ...

  6. xfire调用webservice接口的实现方式

    package com.test; import java.net.URL; import org.codehaus.xfire.client.Client; import org.codehaus. ...

  7. JS中函数参数值传递和引用传递

    也许大家对于函数的参数都不会太在意,简单来说,把函数外部的值复制给函数内部的参数,就和把值从一个变量复制到另一个变量一样.深入研究,你会发现其实没那么简单,这个传参是要分俩种情况(其实这是个错误的说法 ...

  8. FullCalendar 日历插件中文说明文档

    FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发,本文将FullCalendar的常用属性和方法.回调函数等整理成中 ...

  9. Java IO学习笔记一

    Java IO学习笔记一 File File是文件和目录路径名的抽象表示形式,总的来说就是java创建删除文件目录的一个类库,但是作用不仅仅于此,详细见官方文档 构造函数 File(File pare ...

  10. PHP获取远程文件的几种方式

    1.fopen() 2.file_get_contents() 3.fsocket() 4.curl()