# jQuery总结 一 #
----------
**了解jQuery**
*JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）*
**注意:**
*jQuery2.0及后续版本将不再支持IE6/7/8浏览器*
**优势：**
1. 轻量级--可以看一下jquery的文件
2. 强大的选择器，css有的他都有，css没有的他也有 //选择器越多，开发越简单
3. 大量封装好的dom操作，我们不需要再去写麻烦的dom代码，直接调用
4. 可靠的事件处理机制
5. 完善的ajax---对ajax完美支持
6. 出色的浏览器兼容性
7. (个人认为最棒的)链式操作
8. 丰富的插件：东西好了用的人就多，用的人多了别人写好的代码我们可以借用
9. 完善的文档，帮你更快的学习和查询
10. 开源-源代码的可见，任何人可以自由的使用并提出修改
----------
**jquery的使用**
*引入jquery文档*
<script src="jquery-1.7.min.js"></script>
**实验引入成功没**
$(document).ready(function(){
alert("hello world");
})//这个方法相当于之前的window.onload()
--这里插播个非常好玩的东西
window.onload=function(){
alert("hello")
} x2---注意会执行几次？
**区别1：**
window.onload---当网页中所有类容加载完毕之后再执行，包括图片
jquery的方式：网页中dom结构绘制完毕后就开始执行，可能dom元素相关联的东西并没有加载完成
但这么写太麻烦了，我们一般简写
$(function(){
alert("hello world")
})
----------
**jquery对象和dom对象**
*什么是dom对象*
文档对象模型中的dom树，dom树上的每一个元素节点就是一个dom对象
var obj=document.getElementById("id")-----这玩意就是获得dom对象
----------
**jquery对象**
*jquery对象---是指jquery包装dom对象后产生的对象*
$("#message")---获得id为message的对象
**案例：**
$("#message").html("nihao")
//等价于
document.getElementById("message").innerHTML="nihao"
*没必要的话jquery的东西尽量不要和原生态js混搭使用*
----------
**注意从上边可以看出来jquery对象和js对象并不能完全是一个东西的
所以以后我们写代码用这样的风格**
var $temp=$("#temp")//jQuery对象
var temp=document.getElementById("temp")//dom对象
----------
**互相转换**
*jQuery提供了两种方式来转换*
1. jQuery对象是一个数组对象可以通过[index]方式来获得dom对象
var $p=$("#message")
var p=$p[0]
p.innerHTML="hello world"
2. jQuery本身提供的get(index)来获得
var $p=$("#message")
var p=$p.get(0)
p.innerHTML="hello world"
*dom对象转换成为jQuery对象*
这个非常简单实用一个$()包起来就可以了
var p1=document.getElementById("message");
var $p1=$(p1);
$p1.text("hello world2")
----------
**jquery选择器的使用**
*选择器我们已经用了很久了，用处就是通过选择器很快的找到网页上的dom并且操作他们
jQuery在选择器的风格上完全继承了css的那一套东西，并且更加强大，为我们写代码提供了很方便的帮助*
----------
**常用选择器**
1. id选择器----$(‘#ipt‘)
2. class类选择器----$(‘.ipt‘)
3. element元素选择器----$(‘input‘)
4. 群组---集合元素选择器----$(‘input,#bt1,.bt2‘)
5. 后代选择器$(‘div span‘)//选取div里边所有的span
6. 选取直接后代----$(‘parent>child‘)
7. 选取class 为one的下一个<div>兄弟元素----$(‘.one+div‘)
8. 选取id为two的元素后边的<div>元素----$(‘#two~div‘)
----------
**过滤选择器**
1. $(‘div:first‘)----选取所有div元素中的第一个div元素
2. $(‘div:last‘)----选取所有div元素中的最后一个div元素
3. $(‘div:not(.mini)‘)----选取class不为mini的元素
4. $(‘div:even‘)----div索引值为偶数的元素 索引从0开始
5. $(‘div:odd‘)---- div索引值为奇数的元素 索引从0开始
6. $(‘div:eq(2)‘)----指定div索引为2的值 索引从0开始
7. $(‘div:gt(2)‘)----指定大于索引大于2的元素 索引从0开始
8. $(‘div:lt(2)‘)----指定大于索引小于2的元素 索引从0开始
9. $(‘div:contains(dv)‘)----找到类容中有dv的元素--会包含到它的父元素-但不包含子元素
10. $(‘div:empty‘)----类容为空的元素 不影响父元素
11. $(‘div:has(.mini)‘)----div中含有class为mini的元素
12. $(‘div:parent‘)----有子元素或者类容的元素
13. $(‘div:hidden‘)----选取div所有不可见元素
14. $(‘div:visible‘)----选取div所有可见
----------
**属性过滤选择器**
1. $(‘div[title]‘)----div中有title属性的元素
2. $(‘div[title=test]‘)----div中有title属性的元素并且=test的元素
3. $(‘div[title!=test]‘)----div中title属性!=test的元素包括没有title属性的
4. $(‘div[title^=te]‘)----div中title属性以te开头的元素
5. $(‘div[title$=ts]‘)----div中title属性的值以ts结尾的元素
6. $(‘div[title*=es]‘)----div中title属性的值包含es的元素
7. $(‘div[id][title*=es]‘)----div中有id属性并且title属性值包含es的元素
----------
**子元素过滤选择器**---**重要**
1. $(‘div .one:nth-child(2)‘)----选取div中class为one第二个子元素 下表index从1开始
2. $(‘div:nth-child(odd)‘)----选取div中奇数
3. $(‘div.one :first-child‘)----选择class为one的div块中第一个子元素
4. $(‘div.one :last-child‘)----选择class为one的div块中最后一个子元素
5. $(‘div.one :only-child‘)----只有一个子元素
----------
**表单对象属性**
1. :enabled 选取可用元素
2. :disabled选取不可用元素
3. :checked--多选框被选中的
4. :selected --下拉列表中被选中
----------
# 详细的选择器 查看jquery的API #