JQuery

第1章 JQuery概述

是什么

JQuery 是一个又快又小多功能的JavaScript库

快：碾压式的开发速度和效率

小：100K内

多功能：JQuery极具强大的扩展性

开发的理念等同于IOS APP STORE&安卓的APP商品店

结论：JS能做的，JQ也能做的，JS不能做的，JQ能做到

 

发展简介

JQuery由美国人John与2006年创建的，当时一经发布就引起

了业务的几大关注随后就是JQuery快速发展的十年

 

 它的设计理念，以及和JS的具体关系？

a JQuery极大的简化了javascript编程

它的设计宗旨是 write less ,do more.

写的更少的代码，却能实现更多的功能

 

b 它封装javascript常用函数(方法)

提供一种简便的开发体系(开发模式)

优化HTML文档操作，样式操作，事件处理，动画设计等

 

WHY 为什么要学JQ JS

1 体积小，效率高

2 浏览器的兼容性问题已经得到解决 99%兼容

3 隐形 真正的JQ代码与HTML分离

4 丰富的插件，强大的扩展性-->

5

 

JQuery开发环境

1.下载

压缩版 3.2.1.mini.js，加密和封装产品源码？

非压缩版 3.2.1.js

 

2.引入:与js一致

 

3.第一个案例HELLO WORLD 检测开发环境是否就绪

JQuery实际常用的应用

常用的表单、表单、数据交互等等

 

学习重点：

1、控制页面样式

2、页面事件处理

3、控制DOM节点，控制DOM HTML

 

第2章 JQuery基础

比较js与jq

 

基本语法

$() 

JQ工厂函数，将js对象转换成jq对象

从而使用JQ方法

$(select or js_object)

获取当前页面的标签元素(节点元素)

$(document) js document --> jq document

$("h1")   jq selector

 

action(方法)：

JQuery 事件方法

JQuery 效果方法

文档操作方法

属性操作方法

CSS操作函数

遍历函数，节点函数

案例分析

$(document).ready() = onload()

JQ对象$开头

 

JQ与JS转换基础

Node节点的类型返回参数(强调)

元素节点(标签节点)node_obj.nodeT

ype   ==1

文本节点  3

属性节点  2

 

JS与JQ的区别

不能混用！

 

JS JQ相互转换

JS转JQ：需要使用$()转换 类似于Number(num_str)

语法：$(DOM对象，节点对象，标签元素)

例如：var div=document.getElementById("d1")

var jq_div=$(div_obj);

jq_div.css(xx,xx);

 

JQ转JS

note:JQ转DOM对象。JQ对象是一个类似数组的对象

1.索引方式  $jq_obj[7]得到相应的节点对象DOM对象，通常获取$jq_obj[0]

2.get方法 可以通过get(0) 方法得到节点对象

操作：

在JQ里面写JS

在JS里面写JQ

 

 

 

 

 

 

 

 

 

 

 

第3章 JQuery选择器(重点)

选择器分类，JQ选择器功能十分强大，

种类很多且分明，具体如下：

 

A 类CSS选择器(类似于CSS选择器 99%一致) 1.基本选择器

2.属性选择器

3.层次选择器

解决方案：$(tag[属性!=value])

使用选择器，对于可能出现的大量集合的对象时

可以在[]外增加标签类型，进行限定，从而精确事件范围

 

 

B 过滤选择器(独特过滤)

基本过滤器

可见性过滤器

表单过滤器

高级过滤器-->帮助手册

 

A基本过滤器是JQ独有的选择器

更多快捷方便的获取自定义对象集合

B过滤器通过特定的过滤原则来定位元素

筛选元素

 

语法特点: ":"

案例 $("li:first")当前页面的第一个LI项目

 

 

主要基本过滤器(9个常用的关键的)

：first 第一个

：last最后一个

语法：$("tag:first")

 

demo：建立一个自定义列表dl dtdd

 

：even  列表或者表格当中，索引为偶数的一栏

：odd   列表或者表格当中，索引为奇数的一栏

语法：$("tag：odd")

demo：

 

索引大小：

：eq(index) -->equal 等于

语法案例 $("li:eq(1)") 选择列表中的第二个元素

：gt(index) -->greatthan  $("li:gt(2)") 大于2

：lt(index) --less than  $("li:lt(5)")选择列表索引小于5的元素

索引编号从0开始

 

全局:

:header 选择页面所有标题h1~h6  $("：header")

:contains 包含指定字符串的所有集合  $("tag：contains(xxx)")

 

常用方法：

show(); -->display:block

hide(); --> display:none

 

demo:五个标题H2,两个按钮，切换显示，

要求使用contains :first show() eq...

 

表单过滤器：

：input 获取所有的<input>元素

：text 获取所有input type=“text”元素集合

其余参考手册

 

练习：

加至少3个input元素，2个text

自己选两个表单过滤

 

转换

var$checkbox_jq_obj=$(":checkbox");

var checkbox_js_obj =$checkbox_jq_obj[0]

checkbox_js_obj.checked=true;

 

 

 

 

 

 

 

 

 

 

第4章 JQuery的事件(重点)

定义：JQ事件是对JS事件的封装

 

JQ事件分类:

基础事件：鼠标事件、键盘事件、表单事件

复合事件：鼠标连续点击 toggle()

 

鼠标事件

定义：鼠标事件是当用户在标签元素上移动或

点击鼠标时产生的时间

常用的事件:

click  单击

dblclick 双击

mouseenter & mouseover 鼠标移入或者悬浮时

mouseleave &mouseout  鼠标移出

 

用法与语法请参见

 

键盘事件

用户每次按下或者释放键盘上的键时，都会产生事件

关键&常用事件：

keydown():按下任意键时触发绑定的函数

keyup():释放按下的任意键

keypress():以上两个事件的组合，当任意键被按下后触发事件

用法参照鼠标事件

 

JQ 事件和JS大不相同

JQ $(this)表示事件触发标签元素对象

而event_obj是事件发生时，标签元素外部的信息对象

如：键盘信息，按下哪个按钮、

用法：如操作飞机的仪表盘

每个按钮均有功能，每个输入均有功能

 

键盘事件的event对象

语法：$(selector|dom_obj).keypress(function(event){});

case1(event核心属性):按下哪个按钮?

 

event.which or event.keyCode 表示当前按下的按钮键码 

键盘码：回车13 空格32 百度搜键盘码

 

 

 

checkbox input

checkbox_obj.checked=true|false;

 

表单事件

当表单元素获得焦点时，会触发focus事件

失去焦点时，会触发blur事件

主要事件：

1. focus(); 获得焦点触发

2. blur(); 失去焦点触发

语法：$(selector|dom_obj).focus(function(){});

 

复合事件：

关键常用事件

定义：鼠标连续多次点击事件 N次

语法：

$(selector).toggle(funcname|function(){},,,,);

案例：

(1.8版本,才有，最新版本已停用)

$("p").toggle(

function(){},第1次点击

function(){},第2次点击

function(){},第3次点击

...

第5章 JQuery动画

动画有五大分类：

隐藏与显示

自定义动画(重要)

淡入淡出

滑动

插件(高级)

 

隐藏与显示：hide() show()

自定义动画：

animate()创建动画

原理：通过CSS改变元素状态，比如渐变

重点：只有CSS属性值是数字的才可以创造

动画

语法：

$(selector).animate({css_property:css_value}),speed,callback);

css属性可以单个，也可以多个

speed,callback为可选项

css属性部分：必填项，创建动画的重要参数，1个或多个

speed:规定动画的时长，不建议使用可选只"slow"&"fast"

 

demo：DIV块的移动

 

动画是一个属性到另一个属性的渐变过程

所以要确定渐变属性的初始值和变化劫数质

animate(属性值):变化的结束值

需要在动画的元素 style 设立起始值

 

淡入淡出

fadeIn():用于逐渐显示隐藏的标签元素

$(selector).fadeIn(speed.callback);

speed&callback 定义参考自定义动画可选参数

 

画3个DIV小方块

fadeOut()淡出

 

fadeToggle()用于切换淡入淡出效果

 

滑动

slideDown()

slideUp()

slideToggle()

 

第6章  遍历，类似JS NODE编程

关键方法:

创建节点

插入节点

删除节点

 

创建节点：

语法1 通过工厂函数创建节点

var $jq_obj=$("<li>星巴克咖啡</li>");

增加了一个Li的标签节点

 

语法2 通过转换JS的DOM节点

var $jq_obj=$(element-->js_obj);

 

插入节点

关键方法

1.append()

功能：$(selector).append(B)表示将B追加到A中

案例：$("ul:first").append($jq_obj)

2.appendTo()

功能：$(A).appendTo(B);表示把A追加到B中

案例：$jp_ojb.appendTo($("ul"))

3. prepend

功能：$(A).prepend(B);表示将B前置插入到A中

案例：$("ul").prepend($jq_obj);

4.prependTo()

功能：$(A).prependTo(B);表示将A前置插入到B中

 

插入到特定的位置 insertAfter insertBefore

 

删除节点：

 

remove()

删除整个节点

案例：$new_element.remove();

 

empty();

清空节点内容

案例：$new_element.empty();

 

遍历元素：children

 

parent()获取父辈元素

 

第7章 JQuery验证

什么是表单验证？

为什么要表单验证？

参考js

JQ如何验证？