如鹏网学习笔记（十一）JQuery，鹏网学习笔记jquery_H5之家

如鹏网学习笔记（十一）JQuery，鹏网学习笔记jquery

一、jQuery简介

　　jQuery是一个JavaScript库，特性丰富，包含若干对象和很多函数，可以替代传统DOM编程的操作方式和操作风格

　　jQuery通过对DOM API、DOM事件的封装，提供了一套全新的API，更简单和灵活

　　jQuery宗旨：write less，do more。

　　jQuery解决了不同浏览器之间的兼容性问题，不用考虑兼容性

　　示例代码：

　　　　<script type="text/javascript" src="引入的jQuery库的地址"></script> //引入要使用的jQuery文件
　　　　<script type="text/javascript">
　　　　//使用document对象的ready函数
　　　　　　$(document).ready(function(){
　　　　　　　　$("div").css("backgroundColor","lightgray");//使用div对象的css函数
　　　　　　});
　　　　</script>

二、$对象、jQuery对象

　　和DOM编程的入口是document对象一样，jQuery编程的入口是$对象，它是jQuery的核心对象

　　$对象也是一个函数对象，可以使用$()的形式调用它，传递给$()不同的参数可以做不同的操作

　　$函数可以把若干个DOM对象包装进一个对象，这个对象称为jQuery对象

　　变量命名规则：$对象在变量前面加上$！！！！

　　$对象：
　　　　1，$函数可以直接把DOM对象包装成jQuery对象，或者通过选择器
　　　　　　示例代码：
　　　　　　var divs = document.getElementsByTagName("div");
　　　　　　alert(divs);//打印出的是divs对象
　　　　2，DOM对象支持属性操作和方法操作，jQuery对象一般只进行方法操作

　　　　3，jQuery对象不能再调用DOM对象的方法，DOM对象也不能调用jQuery对象的方法

　　jQuery对象：
　　　　1，jQuery对象本质上是数组对象，把DOM对象作为数组元素

　　　　2，jQuery对象的很多方法具有隐式迭代特性，即方法内部会迭代遍历所有元素，把方法的效果应用到每一个元素上

三、文档加载完成事件

　　第一种全写形式：

　　　　$(document).ready(function(){ });

　　　　示例代码：
　　　　　　//第一种写法：
　　　　　　//1，将document对象传递给$()函数
　　　　　　//2，调用$(document)对象的ready()函数，并传入一个事件处理函数function(){}
　　　　　　$(document).ready(function(){
　　　　　　　　alert("");
　　　　　　});

　　第二种写法：
　　　　示例代码：
　　　　　　//将事件处理函数function(){}直接传递给$()函数，是第一种方式的简写，效果一样
　　　　　　$(function(){
　　　　　　　　alert("");
　　　　　　});

四、jQuery选择器

　　1，jQuery的编程思路和DOM一样：
　　　　先获得要操作的元素，然后再操作该元素

　　2，为了方便获取元素，jQuery直接复制了CSS选择器语法。另外除了伪类选择器外大部分和CSS选择器相同

　　3，jQuery选择器有：
　　　　标签选择器、id选择器、类选择器、属性选择器、伪类选择器、复合选择器

　　4，属性选择器：通过元素的属性进行选择
　　　　[元素属性] 选择有该属性的元素

　　　　[属性名=属性值] 　　选择对应属性值的元素

　　　　[属性名^=部分属性值] 　　选择以部分属性名开头的元素

　　　　[属性名$=部分属性值] 　　选择以部分属性名结尾的元素

　　　　[属性名*=部分属性名] 　　选择包含部分属性名的元素

　　　　[attr]　　选择有attr属性的元素
　　　　[attr=val]　　选择以attr属性值为val的元素
　　　　[attr^=val]　　选择以attr属性值以val开头的元素
　　　　[attr$=val]　　选择以attr属性值以val结尾的元素
　　　　[attr*=val]　　选择以attr属性值中包含val的元素

　　5，伪类选择器：与属性选择器配合，筛选其中的元素

　　　　:first 第一个元素
　　　　:last 最后一个元素
　　　　:even 第偶数个元素
　　　　:odd 第奇数个元素
　　　　重点：
　　　　　　:eq(index) 第index个元素
　　　　　　:gt(index) 第index之后的元素
　　　　　　:lt(index) 第index之前的元素
　　　　　　:not(选择器名称) 对括号里的选择器取反的元素
　　　　　　:first-child 第一个子元素
　　　　　　:last-child 最后一个子元素
　　　　　　:nth-child(n) 第n个子元素

　　　　示例代码：
　　　　<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
　　　　<script type="text/javascript">
　　　　　　$(document).ready(function () {
　　　　　　//标签选择器
　　　　　　$("div").css("backgroundColor","lightgreen");

　　　　　　//id选择器

　　　　　　$("#div02").css("backgroundColor","red");

　　　　　　//类选择器
　　　　　　$(".c03").css("backgroundColor","blue");

　　　　　　//属性选择器
　　　　　　$([id])

　　　　　　});
　　　　</script>

　　　　语法：
　　　　　　$("选择器名称")
　　　　　　$("选择器名称","")

　　6，复合选择器：选择器可以进行多种形式的组合

　　　　selector1空格selector2 在1选中的元素中，使用2筛选其后代元素(2不要使用伪类选择器)

　　　　selector1>selector2 在1选中的元素中，使用2筛选其子元素

　　　　selector1~selector2 在1选中的元素中，使用2筛选其后续兄弟元素

　　　　selector1+selector2 在1选中的元素中，使用2筛选其后续紧邻的兄弟元素

　　　　selector1,selector2 各个选择器的并集

　　　　selector1(没有空格)selector2 各个选择器的交集（复合后可识别才可以这样使用）

五、隐式迭代和显式迭代