从零开始学习jquery （一）

时间：2022-12-06 21:51:11

http://www.cnblogs.com/liuyuqing/p/4303181.html

从零开始学习jquery （一）

一、jquery是什么

Jquery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。总的来说，就是使用jquery后，我们可以不再萝莉啰嗦的写一大堆JavaScript代码而使用jquery简单代码就能实现其功能了。

二、怎样得到和使用jquery

2.1 如何得到jquery：

2.1.1到官网下载：http://jquery.com/，有两种版本

  • Production version - 用于实际的网站中，已被精简和压缩。
  • Development version - 用于测试和开发（未压缩，是可读的代码）

2.1.2 加载cdn：cdn是指内容分发网络

如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络） 引用它。

百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。

如果你的站点用户是国内的，建议使用百度、又拍云、新浪等国内CDN地址，如果你站点用户是国外的可以使用谷歌和微软。

2.1.3 通过nuget 引用第三方插件(jquery 或者其他的)(什么是nuget？ 自己百度去)，个人认为通过这种方式的体验最好。推荐使用这种方法，特别是对于新手来说。

2.2 如何使用jquery

2.2.1通过nuget引用jquery，先安装nuget，然后右键项目--管理nuget程序包，在左边选择联机 ，输入jquery ，选择后 安装即可以。

从零开始学习jquery （一）

安装完成后 我们发现其有四个文件。尤其注意其中一个vsdoc文件其是jquery的智能感应文件，有了它我们可以方便快速的撸码。如果不是通过nuget得到jquery，你需要自己下载对应的vsdoc文件。

从零开始学习jquery （一）

 

如何使用jquery呢？我们在需要使用jquery的网页 head标签内引用jquery即可。src是指存放的jquery的文件的物理位置。

1 <script type="text/javascript" src="Scripts/jquery-2.1.3.js"></script>

2.2.2 通过cdn加载，国内的话一般使用百度的cdn加载。

1234 <head><script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script></head>

　　

123456 又拍云
CDN: <head><script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script></head>

　　

123456 新浪
CDN: <head><script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script></head>

　　到这里我们基本了解了如何获得和使用jquery了。

EcitGis

从零开始学习jquery （二）

前面我们了解到了如何获取使用jquery，下面我们主要看看jquery的一些语法。基本的语法

 $(selector).action()。

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

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

$("p").hide() - 隐藏所有p标签

$("p .test").hide() - 隐藏所有 class="test" 的p标签

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

我们在使用jquery的时候，通常的会加上这么一句，为什么要加上这么一句呢，这句的意思时，当当前的dom加载完毕后，才会执行函数里面的句子。这样做是为了防止我们一些html dom没有完成加载后，执行JavaScript而产生的一些错误。比如我们要将一个p元素隐藏，但是如果不加上这句的话，在p元素没有加载完成，我们去隐藏它，这样就会产生错误，达不到我们预期的代码效果

$(document).ready(function(){

   // jQuery methods go here...

});

例如，下面的这个例子，运行后p元素是不会隐藏的。但是如果加上前面一句话后，出现的就是一个空白的页面，即p元素被隐藏了。

1234567891011 <head>    <title></title>    <script  type="text/javascript" src="Scripts/jquery-2.1.3.min.js"></script>    <script type="text/javascript">        $( "p" ).hide();          </script></head><body><p>我将要被隐藏了</p></body>

　　

$(document).ready(function(){})可以简写为$(function(){})
jquery选择器
元素选择器
123 在页面中选取所有
<p> 元素: $("p")

　　

12345678 #id
选择器jQuery
#id 选择器通过 HTML 元素的 id 属性选取指定的元素。 页面中元素的
id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。 通过
id 选取元素语法如下： $("#test")

　　

123456 .class
选择器jQuery
类选择器可以通过指定的 class 查找元素。 语法如下： $(".test")

　　

123456789101112 $("*") 
选取所有元素 $(this)
选取当前 HTML 元素   $("p.intro")   
选取 class 为 intro 的 <p> 元素$("p:first")   
选取第一个 <p> 元素 $("ul
li:first")    选取第一个 <ul> 元素的第一个 <li> 元素  $("ul
li:first-child")  选取每个 <ul> 元素的第一个 <li> 元素   $("[href]")
选取带有 href 属性的元素$("a[target='_blank']")
选取所有 target 属性值等于 "_blank" 的 <a> 元素$("a[target!='_blank']")   
选取所有 target 属性值不等于 "_blank" 的 <a> 元素 $(":button")   
选取所有 type="button" 的 <input> 元素 和 <button> 元素  $("tr:even")   
选取偶数位置的 <tr> 元素  $("tr:odd")
选取奇数位置的 <tr> 元素

　　jquery 事件：

什么是事件？

页面对不同访问者的响应叫做事件。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

实例：

  • 在元素上移动鼠标。
  • 选取单选按钮
  • 点击元素

在事件中经常使用术语"触发"（或"激发"）例如： "当您按下按键时触发 keypress 事件"。

常见 DOM 事件：

鼠标事件 键盘事件 表单事件 文档/窗口事件
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave   blur unload

例子：当我们点击p元素时，其会消失

1234567 $(
document ).ready( function ()       {           $( "p" ).click( function ()           {               $( "p" ).hide();           } );       } );

例子：当我们把鼠标移到p元素上时，其背景变为红色，当鼠标离开时背景变为蓝色。

123456789101112 $(
document ).ready( function ()       {           $( "p" ).mouseover( function ()           {               $( "p" ).css( "background-color","Red");           } );            $( "p" ).mouseleave( function ()           {               $( "p" ).css( "background-color","Blue" );           } );       } );

标签：

相关文章