jQuery的概述总结

一.jQuery概念
jQuery是一个开源的轻量级JavaScript库
jQuery的理念是：write less,do more(以最少的代码，敢最多的事)
jQuery的思想：通过选择器查找对应的jQuery节点对象，通过调用jQuery对象属性或方法
来实现对节点的操作
jQuery优势：
出色的浏览器兼容性
强大的选择器
出色的DOM操作封装
完善的Ajax支持
链式操作方式
隐式迭代
丰富的插件支持


二.jQuery环境配置
获取jQuery文件
进入jQuery的官方网站http://jquery.com/，下载最新的jQuery库文件
jquery.js（开发版）完整无压缩版本，主要用于测试、学习和开发
jquery.min.js（生产版）经过压缩的版本，主要应用于产品和项目
 jQuery 分 2 个系列版本 1.x 与 2.x，主要的区别 在于 2.x 不再兼容 IE6、7、8 为移动端而优化


在页面中引入jQuery文件
<script src=“jquery.js” type=“text/javascript”></script>


三.jQuery的写法
1.$符号是jQuery的一个简写形式
$()就是jQuery中的函数，它的功能是获得（）中指定的标签元素
$()方法等价于jQuery()方法
2.JS与jQuery的区别
//DOM结构加载完成后立即执行,可重复使用多次
$(document).ready(function() {
     $("#div1").html("Hello world!");
});


//页面内容完全加载完成后才会执行,只能使用一次
window.onload=function(){
    document.getElementById("div1").innerHTML="hello world";
}


四.jQuery对象与DOM对象
jQuery对象是通过jQuery方法包装后的对象,可以使用jQuery中的属性和方法
DOM对象是DOM节点对象,可以使用DOM下的属性和方法
jQuery对象和DOM对象的属性和方法不可以混合使用
jQuery对象和DOM对象可以相互转换


1.jQuery对象转为DOM对象
jQuery对象是一个类似数组，可以通过[index]的方法得到相应的DOM对象
另一种方法是jQuery本身提供的，通过get(index)方法得到相应的DOM对象


var div1=$('#div1')                          //jQuery对象
var div2=$('div')[0]                         //DOM对象
var div3=$('div').get(0)                 //DOM对象


2.DOM对象转为jQuery对象


对于一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了
jQuery对象=$(DOM对象)


var div1=document.getElementById('div1')    //DOM对象
var div2=$(div1)                            //jQuery对象


3.jQuery选择器
格式:
$("选择器内容")
类型:
基本选择器
层级选择器
匹配选择器


4.jQuery基本选择器
基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它通过元素id、class和标签名等来查找DOM元素
ID选择器:  $(“#id值”)
类选择器:  $(“.类名”)
标签选择器:  $(“标签名”)
全选择器:   $(“*”)
并集选择器:  $(“selector1，selector2，selector3，……”)
在用JQ设置CSS样式的时候要把标签中的'-'去掉然后写成小驼峰的格式


5.jQuery层级选择器
通过DOM元素之间的层次关系来获取特定元素
后代选择器:  $(“selector1  selector2”)
子选择器:  $(“selector1>selector2”)
相邻(下一个)兄弟选择器:  $(“selector1+selector2”)
所有（下面）兄弟选择器： $(“selector1~selector2”)


6.jQuery基本匹配选择器
:first       获取匹配的第一个元素
:last        获取匹配的最后一个元素
:not(selector)       去除所有与给定选择器匹配的元素
:even   匹配所有索引值为偶数的元素，从 0 开始计数
:odd    匹配所有索引值为奇数的元素，从 0 开始计数
:eq(index) 匹配一个给定索引值的元素
:gt(index)  匹配所有大于给定索引值的元素
:lt(index)   匹配所有小于给定索引值的元素
:header     匹配如 h1, h2, h3之类的标题元素
例：
  $("tr:even")
  $("input:not(:checked)")
  $(":header").css("background", "#EEE");


7.jQuery属性匹配选择器
[attribute]  匹配包含给定属性的元素
[attribute=value]  匹配给定的属性是某个特定值的元素
[attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
[attribute^=value] 匹配给定的属性是以某些值开始的元素
[attribute$=value] 匹配给定的属性是以某些值结尾的元素
[attribute*=value] 匹配给定的属性是以包含某些值的元素
[attrSel1][attrSel2][attrSelN]  复合属性选择器，需要同时满足多个条件时使用
例：
$("input[name*='man']")
$("input[id][name$='man']")


8.jQuery子元素匹配选择器
:nth-child  匹配其父元素下的第N个子或奇偶元素
:first-child 匹配第一个子元素
:last-child  匹配最后一个子元素
:only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配
例：
$("ul li:nth-child(2)")    从1开始
$("ul li:nth-child(even)")
$("ul li:nth-child(odd)")
$("ul li:nth-child(2n+1)")


9.jQuery表单匹配选择器
:input  匹配所有 input, textarea, select 和 button 元素
:text   匹配所有的单行文本框
:password 匹配所有密码框
:radio  匹配所有单选按钮
:checkbox 匹配所有复选框
:submit 匹配所有提交按钮
:reset 匹配所有重置按钮
:button 匹配所有按钮
:file 匹配所有文件域
:hidden 匹配所有不可见元素，或者type为hidden的元素
:enabled 匹配所有可用元素
:disabled 匹配所有不可用元素
:checked 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
:selected 匹配所有选中的option元素
例：
$(":file")
$("input:checked")
$("select option:selected")


10.jQuery内容匹配选择器
:contains(text)  匹配包含给定文本的元素
:has(selector)  匹配含有选择器所匹配的元素的元素
:empty 匹配所有不包含子元素或者文本的空元素
:parent 匹配含有子元素或者文本的元素
例：
$("div:contains('John')")
$("div:has(p)")
$("div:parent")


11.jQuery可见性匹配选择器
hidden  匹配所有不可见元素，或者type为hidden的元素
:visible   匹配所有的可见元素
例：
$("div:hidden")
$("input:hidden")
$("div:visible")


12.jQuery对象过滤
eq(index|-index)    获取指定位置元素,这个元素的位置是从0算起。
first()  获取第一个元素
last()  获取最后一个元素
hasClass(class)  检查当前的元素是否含有某个特定的类，如果有，则返回true。
has(expr|ele) 获取包含特定后代的元素
not(expr|ele)获取与指定表达式不匹配的元素
slice(start,[end]) 获取一个匹配的子集
start: 开始选取子集的位置。第一个元素是0.如果是负数，则可以从集合的尾部开始选起。
end:  结束选取自己的位置，如果不指定，则就是本身的结尾
例：
$("p").eq(-2)
$('li').has('span')
$("p").slice(0, 2)


13.jQuery对象查找
children([expr])   取得所有子元素的元素集合
next([expr])   取得紧邻的下一个的同辈元素
nextAll([expr]) 查找当前元素之后所有的同辈元素
prev([expr]) 取得紧邻的上一个同辈元素
prevAll([expr]) 查找当前元素之前所有的同辈元素
siblings([expr]) 取得所有同辈元素的元素集合
parent([expr]) 取得父元素
parents([expr]) 取得祖先元素的元素集合（不包含根元素）
例：
$("p").next()
$("div:last").prevAll()
$("span").parents("p")


14.jQuery数组对象遍历
ecach()
jQuery数组对象.each(function(i){
$(this).......
})
例：
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>JQuery数组遍历对象</title>
    <script src="jquery-1.8.2.js"></script>
    <script>
        $(function(){
            $('img').each(function(i){
                //this.src='imgs/img'+i+'.jpg'; //遍历出来的元素js的DOM对象
                $(this).attr('src','imgs/img'+i+'.jpg')//可以通过 $(this)将DOM对象转为jQuery对象
            })
        })
    </script>
</head>
<body>
<img src="" alt=""/>
<img src="" alt=""/>
<img src="" alt=""/>
</body>
</html>