JQuery其实早就看过相关的视频了，但是由于当时查的资料太少，理解的不够深刻，所以没有进行总结，这次回过头来又学习了，心里感觉理解了很多，因为BS的其它知识基本学习完了，而且有了一定程度的理解。相互促进学习的都是。

一，简介：JQuery是一个优秀的Javascript框架，是轻量级的js库，兼容了各种浏览器（IE 6.0+, FF 1.5+,Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTMLdocuments,events，实现动画效果，并且方便的为网站提供AJAX交互。核心理念是write less,do more(写得更少,做得更多) jQuery库包含以下特性：HTML元素选取，HTML元素操作，CSS操作，HTML事件函数，JavaScript特效和动画，HTML DOM 遍历和修改，AJAX等。而且大大优于JavaScript的编程。

二，引入：

使用JQuery，首先需要我们到指定网站下载http://jquery.com/download/#Download_jQuery，然后向我们的页面中添加JQuery库：

 [html] view plaincopyprint?在CODE上查看代码片派生到我的代码片

 <span style="font-size:18px;"><head>

 <script type="text/javascript" src="jquery.js"></script>

 </head>

 </span>

然后我们看一个最基础的JQuery实例：

[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片

<span style="font-size:18px;">  <html>

        <head>

            <script type="text/javascript" src="/jquery/jquery.js"></script>

            <script type="text/javascript">

            //当页面加载完毕时要执行的函数

                $(document).ready(function(){

                //单击p标签时要执行的函数

                    $("button").click(function(){

                               //隐藏p标签

                        $("p").hide();

                    });

                });

            </script>

        </head>  

        <body>

            <h2>This is a heading</h2>

            <p>This is a paragraph.</p>

            <p>This is another paragraph.</p>

            <button type="button">Click me</button>

        </body>

    </html>

</span>

三，JQuery语法：

通过 jQuery，您可以选取（查询，query）HTML 元素，并对它们执行“操作”（actions）。这其实也就是对JS进行封装，来实现这些功能。基础语法是：$(selector).action()

  • 美元符号定义 jQuery
  • 选择符（selector）“查询”和“查找” HTML 元素
  • jQuery的 action()执行对元素的操作

例如：

$(this).hide() -隐藏当前元素

$("p").hide() -隐藏所有段落

$(".test").hide() -隐藏所有 class="test"的所有元素

$("#test").hide() -隐藏所有 id="test"的元素

四，JQuery选择器：其实就是找到我们想要操作的内容，有下边几种情况：

1，元素选择器：

$("p")选取 <p>元素。

$("p.intro")选取所有 class="intro"的 <p>元素。

$("p#demo")选取所有 id="demo"的 <p>元素。

2，属性选择器：

$("[href]")选取所有带有 href属性的元素。

$("[href='#']")选取所有带有 href值等于 "#"的元素。

$("[href!='#']")选取所有带有 href值不等于 "#"的元素。

$("[href$='.jpg']")选取所有 href值以 ".jpg"结尾的元素。

3，CSS选择器：这里举一个例子：

 [html] view plaincopyprint?在CODE上查看代码片派生到我的代码片

 <span style="font-size:18px;">  <html>

         <head>

             <script type="text/javascript" src="/jquery/jquery.js"></script>

             <script type="text/javascript">

             $(document).ready(function(){

               $("button").click(function(){

                      //将其CSS改为背景为红色

                 $("p").css("background-color","red");

               });

             });

             </script>

         </head>  

         <body>

             <h2>This is a heading</h2>

             <p>This is a paragraph.</p>

             <p>This is another paragraph.</p>

             <button type="button">Click me</button>

         </body>  

     </html>

 </span>

五，JQuery事件：跟我们JS里边的，c#,java等里边的都特别像，这里看一下几个常用的，来看一下他的形式：

Event函数

绑定函数至

$(document).ready(function)

将函数绑定到文档的就绪事件（当文档完成加载时）

$(selector).click(function)

触发或将函数绑定到被选元素的点击事件

$(selector).dblclick(function)

触发或将函数绑定到被选元素的双击事件

$(selector).focus(function)

触发或将函数绑定到被选元素的获得焦点事件

$(selector).mouseover(function)

触发或将函数绑定到被选元素的鼠标悬停事件

综上为JQuery一些基础的知识总结，更够比JS更加方便的操作HTML中的内容，更为简单。在下边的一些博客会通过一些具体的小例子，来学习一些具体常用的JQuery知识。但是更重要的是需要我们会查JQuery的API文档，上边写的特别全，只要在我们想要用某个方法，属性，事件的时候我们能够很快的查询出来也是可以的。Jquery的学习中！

JQuery(一)——初步总结的更多相关文章

  1. 沉淀，再出发：jQuery的初步了解和入门

    沉淀,再出发:jQuery的初步了解和入门 一.前言     对于后端开发者来说,是不是真的不需要了解前端的开发经过和相关技术,从我个人的角度来说,我觉得如果不了解或者接触很少,极有可能造成开发的时候 ...

  2. day 54 jQuery 的初步基础

    jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交互, ...

  3. jQuery入门第一天-（一个菜鸟的不正经日常）

    jQuery的初步认识 菜鸟Q1:什么是jQuery? jQuery就是一个JavaScript函数库,没什么 特别的. 菜鸟Q2:jQuery能做什么?jQuery是做什么的? jQuery本身就是 ...

  4. Web前端开发实战6：CSS实现导航菜单结合二级下拉式菜单的简单变换

    前面几篇博文都在讲导航菜单和二级下拉式菜单,事实上有非常多方法都能够实现的.详细的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果.因为在学习Ajax和jQuery的初步阶 ...

  5. Javascript高级面试

    原型 异步 一.什么是单线程,和异步有什么关系 单线程:只有一个线程,同一时间只能做一件事原因:避免DOM渲染的冲突解决方案:异步 为什么js只有一个线程:避免DOM渲染冲突 浏览器需要渲染DOM J ...

  6. jQuery验证插件使用初步

    validate是一款优秀的表单验证插件,其初步使用方法如下: (1)前台页面代码: <form id="form1" runat="server"> ...

  7. 第二十篇 jQuery 初步学习2

    jQuery 初步学习2   前言:   老师这里啰嗦一下,因为考虑到一些同学,不太了解WEB前端这门语言.老师就简单的说一下,写前端,需要什么:一台笔记本.一个文本编辑器.就没啦!当然,写这门语言, ...

  8. 第十九篇 jQuery初步学习

    jQuery 初步学习   jQuery可以理解为是一种脚本,需要到网上下载,它是一个文件,后缀当然是js的文件,它里面封装了很多函数方法,我们直接调用即可,就比方说,我们用JS,写一个显示与隐藏,通 ...

  9. 初步学习jquery学习笔记（三）

    jQuery学习笔记三 jquery停止动画 stop函数的初步功能 <!DOCTYPE html> <html lang="en"> <head&g ...

随机推荐

  1. 【Android】使用FrameLayout布局实现霓虹灯效果

    FrameLayout是五大布局中最简单的一个布局. 在这个布局中,整个界面被当成一块空白备用区域,所有的子元素都不能被指定放置的位置. 它们统统放于这块区域的左上角,并且后面的子元素直接覆盖在前面的 ...

  2. ComponentName的意思

    ComponentName是用来打开其它应用程序中的Activity或服务的. 使用方法: Intent i=new Intent(); i.setComponent(new ComponentNam ...

  3. 关于JavaScript 原型的理解

    原型的含义是指:如果构造器有个原型对象A,则由该构造器创建的实例(Object Instance)都必然复制于A.““在JavaScript中,对象实例(Object Instance)并没有原型,而 ...

  4. Oracle官方版Entity Framework

    千呼萬喚始出來! Oracle官方版Entity Framework問市,邁入開發新時代 自從我得了一種"不用LINQ就不會寫資料庫程式"的病,為了滿足工作上要搭配Oracle(雖 ...

  5. 完美实现同时分享图片和文字（Intent.ACTION_SEND）

    private void share(String content, Uri uri){ Intent shareIntent = new Intent(Intent.ACTION_SEND); if ...

  6. 解决升级Xcode后插件不能使用的问题

    从Xcode 5开始,苹果要求加入UUID证书从而保证插件的稳定性.因此Xcode版本更新之后需要在插件的Info.plist文件中添加当前Xcode的UUID. 具体步骤如下: 1.获取Xcode的 ...

  7. Windows Server 2008 R2 IIS重装

    背景描述: 在一个刚睡醒午觉后的下午,忽然收到客户反馈,说昨天开始应用特别卡,各种卡各种不好用,忽然想到上次说要优化服务器IIS配置还一直没弄,然后迷迷糊糊的就开始进行客户现场服务器IIS配置优化,涉 ...

  8. A - 高精度（大数）N次方（第二季水）

    Description Problems involving the computation of exact values of very large magnitude and precision ...

  9. AngularJS：何时应该使用Directive、Controller、Service？【新手必看】

    (这篇文章你们一定要看,尤其初学的人,好吗亲?) 大漠穷秋 译 AngularJS是一款非常强大的前端MVC框架.同时,它也引入了相当多的概念,这些概念我们可能不是太熟悉.(译者注:老外真谦虚,我大天 ...

  10. （七）boost库之单例类

    (七)boost库之单例类 一.boost.serialzation的单件实现 单例模式是一种常用的软件设计模式.在它的核心结构中只包含一个被称为单例类的特殊类.通过单例模式可以保证系统中一个类只有一 ...