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

(未完待续...)