什么是JQuery

为了简化JavaScript的开发,一些JavsScript库诞生了.JavaScript库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互的 Web2.0特性的富客户端页面,并且兼容各大浏览器
JQuery就是封装了好多对象和函数的JavaScript库
当前流行的JavaScript库有:

JQuery便是其中之一

JQuery有什么优势

轻量级
强大的选择器
出色的DOM操作的封装可靠的事件处理机制
完善的Ajax
出色的浏览器兼容性链式操作方式

简而言之就是：写得少，做得多

如何使用JQuery？

网上下载jQuery的依赖包
将包导入到我们项目webapp下创建的一个新的文件夹叫js中
按照下面格式将jQuery包导入到网页中

- <script type="text/javascript" src="js/jquery.js"></script>
- <script language='javascript' type='text/javascript'>
- //这地方 便可以书写JQuery语句
- </script>

jQuery对象和DOM (Document Object Model)对象

jQuery对象就是通过 jQuery($())包装DOM对象后产生的对象
jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它就可以使用jQuery里的方法jQuery对象无法使用DOM对象的任何方法,同样DOM对象也不能使用jQuery里的任何方法
如何区别获取的是哪个对象:如果获取的是jQuery对象,那么要在变量名前面加上$符号.

var $variable = jQuery对象
var variable = DOM对象

JQuery选择器

基本选择器

1．标签选择器(元素选择器)
语法:$("html标签名")获得所有匹配标签名称的元素
2．id选择器
语法:$("#id的属性值")获得与指定id属性值匹配的元素
3．类选择器
语法:$(".class的属性值")获得与指定的class属性值匹配的元素
4．并集选择器:
语法:S("选择器1,选择器2....")获取多个选择器选中的所有元素

层级选择器

1.后代选择器
$("A B"):选择A元素内部的所有B元素
2.子选择器
$("A>B"):选择A元素内部的所有B子元紊

属性选择器

1.属性名称选择器
$("A[属性名]"):包含指定属性的选择器
2.属性选择器
$("A[属性名='值']"):包含指定属性等于指定值得选择器
3.复合属性选择器
$("A[属性名][属性名='值']..."):包含多个属性条件的选择器

过滤选择器

1.首元素选择器
:first获得选择的元素中第一个元素
2.尾元素选择器
:last获得选择的元素中最后一个元素
3.非元素选择器
:not(selector)不包括指定内容的元素
4.偶数选择器
: even偶数,从0开始计数
5.奇数选择器
:odd奇数,从0开始计数
6.等于索引选择器
:eq(index)等于指定索引元素
7.大于索引选择器
:gt(index)大于指定索引元素
8.小于索引选择器
: lt(index)小于指定索引元素
9.标题选择器
: header(h1~h6)选择所有的标题(h1-h6)元素,固定写法

表单过滤选择器

1.可用元素选择器
: enabled获得可用元素
2.不可用元素选择器
:disable获得不可用元素
3.单选/复选框选中选择器
:checked获得单选/复选框中的元素
4.下拉框选中选择器
: selected获得下拉框选中的元素

DOM操作

内容操作

.htm1():获取/设置元素的标签体内容\
.text():获取/设置元素的标签体纯文本内容
.val():获取/设置元素的value属性值

属性操作

通用属性操作

.attr():获取/设置元素的属性值
.removeattr():删除属性
.prop():获取/设置元素的属性值
.removeprop():删除属性

区别:如果操作得是元素的固有属性,建议用prop()如果操作的是自定义属性,建议使用attr()

对class属性操作/样式操作

.addclass():添加class属性
.removeclass():删除class属性
.toggleclass():切换class属性
toggleclass("one""):判断如果元素对象上存在class=one,则删除改属性,不存在则添加该属性
.css():设置样式

CRUD操作

.append():父元素将子元素添加到末尾
对象1.append(对象2)将对象2添加到对象1内部,并且在末尾
.prepend():父元素将子元素添加到开头
对象1.prepend(对象2)将对象2添加到对象1内部,并且在开头
.appendTo()
对象1.appendTo(对象2)将对象1添加到对象2内部,并且在末尾
.prependTo()
对象1.prependTo(对象2)将对象1添加到对象2内部,并且在开头
.after():添加元素到对应元素的后面
对象1.after(对象2)将对象2添加到对象1后面.对象1和对象2是兄弟
.before():添加元素到对应元素的前面]
对象1.before(对象2):将对象2添加到对象1的前面,对象1和对象2是兄弟
.insertAfter()
对象1.insertAfter(对象2):将对象1添加到对象2后面,对象1和对象2是兄弟
.insertBefore(）
对象1.insertAfter(对象2):将对象1添加到对象2前面,对象1和对象2是兄弟
.remove():移除元紊
对象, remove():将对象删除
. empty():清空元素所有后代元紊
对象.empty():将对象后代元素全部清空,但保留前对象以及其属性节点

基础案例

隔行换色

$(function({
/获取奇数行的tr,设置背景色pink
$("tr:gt(1):odd").css(backgroundcolor" , "pink"");
//获取偶数行的tr。设置背景色为ye1low
$("tr:gt(1) : even").css(backgroundcolor" , "ye11ow"");

全选/全部选

function selectA11(obj) {
/获取下面的复选框
$(".itemselect").prop("checked",obj.checked);
}

动画

三种方式显示和隐藏元素
1.默认显示和隐藏方式

show([speed] , [easing] ,[fn])显示

参数:

1.speed:动画的速度.三个预定义的值(“slow” , “normal” , "fast"或表示动画时长的毫秒数值(如:1000))1
2.easing:用来指定切换效果,默认是"swing",可用参数"linear"
– swing:动画执行时效果先慢,中间快,最后慢
– liner:匀速执行
3.fn:在动画完成时执行的函数,每个元素执行一次

-- hide([speed] , [easing],[fn])隐藏
--toggle([speedJ,[easing],[fn])切换

2.滑动显示和隐藏方式

--  slideDown([speed] , [easing] ,[fn])
--  slideup([speed ,[easing],[fn])
--  slideToggle([speed] ,[easing],[fn])

3.浅入浅出显示和隐藏方式

--  fadein([speed] ,[easing],[fn])
--  fadeout([speed] ,[easing],[fn])
--  fadeToggle([speed] , [easing],[fn])

遍历

js遍历方式for(初始化值;循环结束条件;步长)
jq遍历方式
1.jq对象.each(callback)
语法:
jquery对象.each(function(index , element){});
index:元素在集合中的索引
element:集合中的每一个元素对象回调函数返国值:
true:如果当前function返回为false,则结束循环(break)
false:如果当前function返回为true,则结束本次循环,继续下一次循环(continue)
2.$ .each(object,[callback])
3.for…of:jq 3.0版本之后提供的方式 for(元素对象 of容器对象)