第一篇博客，现在原生安卓需求不大了。招聘的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. a标签点击之后有个虚线边框，怎么去掉

    1.行内处理方式1 <a hidefocus="true" href="#"></a> 2.行内处理方式2,让a标签获得焦点就失去焦点, ...

  2. python基础操作_集合_三元运算

    #使用操作文件的时候,可以使用with函数#with open('E:\info.txt','a+') as fr#fr这个值可以是任意值# :#for line in fr:'''with open ...

  3. linux系统必学-部分链接

    vi操作笔记 vim操作笔记 好网站,临时收藏  SEO十万个为什么 9RIA.com天地会--中国最大的专业Flash论坛 ===互联网=============================== ...

  4. iOS工程师常用的命令行命令总结

    感觉有点标题党了. 作为一个iOS工程师,没有做过服务端,主要用的是mac电脑,此篇博文是记录我在工作,学习的过程中用的命令行命令的记录和归纳总结 一. mac命令行 1. cd /Users/xxx ...

  5. NodeJS+Express+MongoDB 简单个人博客系统【Study笔记】

    Blog 个人博客系统 iBlog是在学习NodeJs时候一个练手项目Demo 系统支持用户注册/登录,内容文章查看,评论,后台管理(定制显示的分类版块,进行文章内容添加)超级管理员还可进行用户管理等 ...

  6. 学习总结------Servlet控制器的简单运用

    前言: 今天将简单的模拟 MVC模式 对Servlet控制器运行 若有不好或不对的地方,欢迎各位大神进行指导! 1.MVC模式(图) MVC全名是Model View Controller,是模型(m ...

  7. Linux编程之有限状态机FSM的理解与实现

    有限状态机(finite state machine)简称FSM,表示有限个状态及在这些状态之间的转移和动作等行为的数学模型,在计算机领域有着广泛的应用.FSM是一种逻辑单元内部的一种高效编程方法,在 ...

  8. Jenkins插件开发

    一.环境配置 不赘述,直接看wiki:https://wiki.jenkins.io/display/JENKINS/Extend+Jenkins 二.内容说明 1.插件代码结构 src/main/j ...

  9. 如何退出 Vim

    点击 Esc 键,; Vim 进入命令模式.然后输入: :q  退出(这是 :quit 的缩写) :q! 不保存退出(这是  :quit! 的缩写) :wq 写入文件并退出:(这是 :writequi ...

  10. Swift连接字符串和字符

    字符串和字符的值可以通过加法运算符 (+) 相加在一起并创建一个新的字符串值: let string1 = "hello" let string2 = " there&q ...