jQuery笔记总结

（一）学习jQuery，要知道jQuery是什么？

jQuery 是 JavaScript 和查询（Query） 是一个轻量级的“写的少，做的多”的JavaScript库。

jQuery库包含以下功能：

HTML    元素选取

HTML    元素操作

CSS      操作

HTML    事件函数

JavaScript  特效和动画

HTML DOM遍历和修改

AJAX

Utilities

除此之外，JQuery还提供了大量的插件

• 如何使用jQuery

 jQuery是一个JavaScript脚本库，不需要特别的安装，只需要我们在页面标签内中，通过<script>标签引入jQuery库即可

jQuery下载地址：https://jQuery.com/download/

• jQuery的语法

jQuery语法是通过选取HTML元素，并对选取的元素执行某些操作

基础语法：$(selector).action();

-$美元符号定义jQuery

-selector 选择符需要查找的元素   支持css1~css3中的主流选择器

-action（）执行对元素的操作

例如：

$(“p”).hide();//隐藏所有<p>元素

（四）jQuery选择器

1.基本选择器

#ID    选择器：根据id查找标签对象

.Class 选择器：根据class查找标签对象

Element  选择器：根据标签名查找标签对象

*       选择器：表示任意的，所有的元素

Selector1，selector2 组合选择器：合并选择器1，选择器2的结果并返回

2.层级选择器

Ancestor desendant 后代选择器：在给定的祖先元素下匹配所有的后代元素

Parent>child  子元素选择器：在给定的父元素下匹配所有的子元素

Prev+next  相邻元素选择器：匹配所有紧接在prev元素后的next元素

Prev~sibings   之后的兄弟选择器：匹配prev元素之后的所有siblings元素

3.基本过滤选择器

：first          获取第一个元素

：last          获取最后一个元素

：not(selector)   去除所有与给定选择器匹配的元素

：even           匹配所有索引值为偶数的元素，从0开始计数

：odd           匹配所有索引值为奇数的元素，从0开始

：eq(index)       匹配一个给定索引值的元素

：gt             匹配所有大于给定索引值的元素

：lt(index)        匹配所有小于给定索引值的元素

：header         匹配如h1,h2,h3之类的标题元素

：animated       匹配所有正在执行动画效果的元素

• jQuery对象与JavaScript中的DOM对象

1. JavaScript中的DOM对象

 通过getElementById()查询出来的标签对象是DOM对象

通过getElementsByName()查询出来的标签对象是DOM对象

通过getElementsByTagName()查询出来的标签对象是DOM对象

通过createElement()方法创建出来的标签对象是DOM对象

1. jQuery对象

在jQuery库中，可以通过本身自带的方法获取页面元素的对象叫做jQuery对象

$(“.box”);//jQuery对象

1. DOM对象与jQuery对象的区别

 DOM对象是通过原生的JS获取的对象，DOM对象只能使用JS中的方法和属性

jQuery对象是通过jQuery包装DOM对象后产生的对象，它是jQuery独有的。

jQuery可以使用jQuery库里面的方法，但是不能使用JS中的方法

JS对象只能调用JS中提供的方法和属性，不能使用jQuery中的方法和属性

1. DOM对象与jQuery对象之间的转换

DOM转jQuery：

var box = document.getElementById(“box”);

$(box);

 jQuery转DOM：

var $divs=$(“div”);

var div=$divs[0];//div为DOM对象

使用jQuery中的get（）方法进行转换，只需要提供一个索引就可以了

var div=$divs.get(0);//将$divs对象中索引为0的元素转换为DOM对象

 

（六）jQuery效果

$(“div”).hide();//隐藏

$(“div”).show();//显示

$(“div”).toggle();//切换

$(“div”).slideUp();上卷

$(“div”).slideDown();//下拉

$(“div”).slideToggle();//上卷下拉

$(“div”).fadeIn();//淡入效果，内容显示，opacity是0到1

$(“div”).fadeOut();//淡出效果，内容隐藏，opacity是1到0

$(“div”).fadeToggle();//淡入淡出

animate语法及参数

properties:修改的属性

duration:执行的时间

Easing:执行的函数

Complete:完成后执行的函数