jQuery基础入门（一）

jQuery是什么？

jQuery是一个JavaScript常用的工具函数库。jQuery是一个轻量级的"写的少，做的多"的JavaScript库。

jQuery当中包含有以下一些常用功能：

• HTML 元素选取
• HTML 元素操作
• CSS 操作
• HTML 事件函数
• JavaScript 特效和动画
• HTML DOM 遍历和修改
• AJAX
• Utilities

下面的内容当中，我们会逐一的介绍jQuery的常用内容。

学习jQuery的心态

• 以练为主，多看多练
• 以js为基础，更好的理解jQuery
• jQuery只是js的一个函数库，不能忘记js

jQuery的版本问题

目前jQuery有三个大版本，1.xx 、 2.xx 和 3.xx ，三个版本当中，1版本兼容性最高，可以有效的兼容ie浏览器，
6，7，8，9都能得到一个很好的兼容，2版本则最低只能兼容到ie9，而3版本则彻底放弃了ie9以下的浏览器。但是却新增加
了很多的使用的方法，并且代码的安全性也增加很多，例如可以很好的防止xss攻击等。

jQuery的使用

首先，我们可以根据需要下载一个指定版本的jquery文件，当然也可以选择使用cdn文件。

js 官方网址: http://jquery.com/

常用CDN: 
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>  百度CDN中的jQuery
    <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"> </script> 右拍云
    <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script> 新浪

jQuery 中的核心语法

在jQuery当中，jQuery是一个核心方法，用来查找元素从而方便对元素的操作，可以简写为$。

jQuery("#btn").click(function() {
        alert(123);
    });

// 上边的代码也可以改为
$("#btn").click(function(){
    alert(123)
})

基础语法

$(selector).action();

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

文档就绪函数

在js当中，存在一个window.onlaod = function(){} ，函数当中的代码会在整个文档加载完毕之后执行，而在jq当中
也有类似的方法，如下:

$(document).ready(function(){
    // jq 代码
});

// 上述代码也可以简写为:
$(function(){
    // jq 代码
})

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

jQuery 选择器

在jq当中，我们可以通过选择器任意的选取html元素，并且操作html元素。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

三个基础选择器如下:

$("p") 元素选择器
$("#d1") id选择器
$(".class") class选择器

还有一个常用的css选择器 .css(),可以用来帮助我们更改css样式。

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

还有一些其他的选择器:

$("*") 选取所有元素
$(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> 元素

常用选择器可以访问: https://www.w3cschool.cn/jquery/jquery-ref-selectors.html

jQuery事件

在jq当中，基本上所有的js事件都有一个对应的jq事件，下面是jq当中常用的事件。

鼠标事件:

• click
• dblclick
• mouseenter
• mouseleave

键盘事件:

• keypress
• keydown
• keyup

表单事件:

• submit
• change
• focus
• blur

文档/窗口事件:

• load
• resize
• scroll
• unload

键盘事件的差异:

• keydown：在键盘上按下某键时发生，一直按着则会不断触发（opera浏览器除外），它返回的是键盘代码;
• keypress：在键盘上按下一个按键，并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符，所以监听无效，换句话说，只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。
• keyup：用户松开某一个按键时触发，与keydown相对，返回键盘代码.

全部事件方法可以访问：https://www.w3cschool.cn/jquery/jquery-ref-events.html

 (未完待续...)