jQuery的笔记

第1章 jQuery简介

1.1 JavaScript库的概念                                                            

JavaScript开发的过程中，处理浏览器的兼容很复杂而且很耗时，于是一些封装了这些操作的库应运而生。这些库还会把一些常用的代码进行封装。

把一些常用到的方法写到一个单独的js文件，使用的时候直接去引用这js文件就可以了。（animate.js、 common.js）

常见的JavaScript 库 - jQuery、Prototype、MooTools。其中jQuery是 常用的一个

jQuery其实就是一个js文件，里面封装了一大堆的方法方便我们的开发，其实就是一个加强版的 common.js，因此我们学习jQuery，其实就是学习jQuery这个js文件中封装的一大堆方法。

1.2 jQuery的优点好处                                                              

jQuery设计的宗旨是'Write Less，Do More'，即倡导写更少的代码，做更多的事情。它封装

JavaScript常用的功能代码，提供一种简便的操作，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择

器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器。

极大地简化了 JavaScript 编程。

1.3入口函数

// 第一种写法
$(document).ready(function() {
});
// 第二种写法
$().ready(function() {
});
// 第三种写法
$(function() {
});

jQuery入口函数与window.onload的对比

JavaScript 的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。

jQuery 的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。

第二章：选择器

jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery 选择器返回的是jQuery对象。

jQuery选择器有很多，基本兼容了CSS所有的选择器，并且jQuery还添加了很多更加复杂的选择器。

（查看jQuery文档）

jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。所以我们平时真正能用到的只是少数的 常用的选择器。

 

2.1 jQuery基本选择器（重点）                                                

名称	用法	描述
ID选择器	$('#id');	获取指定ID的元素
类选择器	$('.class');	获取同一类class的元素
标签选择器	$('div');	获取同一类标签的所有元素
并集选择器	$('div,p,li');	使用逗号分隔，只要符合条件之一就可。
交集选择器	$('div.redClass');	获取class为redClass的div元素

 总结：跟css的选择器用法一模一样。

语法模板： 00-语法模板.html（需要包含jquery.js）

<script type="text/javascript"> 
//常用选择器 
//根据id获取元素 
获取到的结果：类数组对象 
console.log( $('#div0') ); 
console.log( $('#div0')[0] ); 
//根据class获取元素
console.log( $('.div_1') ); 
//根据标签名称来获取元素 
console.log( $('div') ); 
//根据属性获取元素 
console.log( $('input[name=username]') ); 
//根据表单元素属性获取元素 
console.log( $(':checked') ); </script>

2.2 jQuery层级选择器（重点）

后代元素选择器：ancestor descendant

子元素选择器：parent > child

兄弟选择器：prev + next、prev ~ siblings

$("div span")		//选取<div>里的所有<span>元素
$("div >span")		//选取<div>元素下元素名是<span>的子元素
$("#one +div")		//选取id为one的元素的下一个<div>同辈元素    　　　　等同于$("#one").next("div")
$("#one~div")		//选取id为one的元素的元素后面的所有<div>同辈元素    等同于$("#one").nextAll("div")
$("#one").siblings("div")		//获取id为one的元素的所有<div>同辈元素（不管前后）
$("#one").prev("div")		//获取id为one的元素的前面紧邻的同辈<div>元素

所以获取元素范围大小顺序依次为：
$("#one").siblings("div")>$("#one~div")>$("#one +div")  
或是
$("#one").siblings("div")>$("#one").nextAll("div")>$("#one").next("div")

2.3基本过滤选择器

$("div:first")               　	//选取所有<div>元素中第1个<div>元素
$("div:last")                   //选取所有<div>元素中最后一个<div>元素
$("input:not(.myClass)")       //选取class不是myClass的<input>元素 
$("input:even")                 //选取索引是偶数的<input>元素(索引从0开始) 
$("input:odd")                  //选取索引是基数的<input>元素(索引从0开始) 
$("input:eq(2)")                //选取索引等于2的<input>元素 
$("input:gt(4)")                //选取索引大于4的<input>元素
$("input:lt(4)")                //选取索引小于4的<input>元素
$(":header")                    //过滤掉所有标题元素，例如：h1、h2、h3等
$("div:animated")               //选取正在执行动画的<div>元素  
$(":focus")                     //选取当前获取焦点的元素

2.4 属性过滤选择器

$("div[id]")              　　　//选取所有拥有属性id的元素
$("input[name='test']")     　　//选取所有的name属性等于'test'的<input>元素 
$("input[name!='test']")  　　　//选取所有的name属性不等于'test'的<input>元素 
$("input[name^='news']")        //选取所有的name属性以'news'开头的<input>元素 
$("input[name$='news']")        //选取所有的name属性以'news'结尾的<input>元素 
$("input[name*='news']")        //选取所有的name属性包含'news'的<input>元素 
$("div[title|='en']")           //选取属性title等于'en'或以'en'为前缀(该字符串后跟一个连字符'-')的<div>元素
$("div[title~='en']")           //选取属性title用空格分隔的值中包含字符en的<div>元素
$("div[id][title$='test']")     //选取拥有属性id,并且属性title以'test'结束的<div>元素

2.5表单选择器

$(":input")                      //选取所有<input>,<textarea>,<select> 和 <button>元素 
$(":text")                    　　//选取所有的单行文本框
$(":password")                   //选取所有的密码框 
$(":radio")                      //选取所有单的选框 
$(":checkbox")                   //选取所有的多选框 
$(":submit")                    //选取所有的提交按钮
$(":image")                      //选取所有的图像按钮 
$(":reset")                      //选取所有的重置按钮
$(":button")                     //选取所有的按钮 
$(":file")                       //选取所有的上传域
$(":hidden")                     //选取所有不可见元素