01-jQuery概述

第一节：jQuery概述

JQuery概念

javascript概念：基于Js语言的API和语法组织逻辑，通过内置window和document对象，来操作内存中的DOM元素
JQuery概念：基于javascript的，同上，提高了代码的效率

JQuery是什么：

是一个js代码仓库，我们称之为js框架；
是一个快速简洁的js框架，可以简化查询DOM对象、处理事件、制作动画、处理ajax交互过程。

JQuery有什么优势：

1、轻量级、体积小、使用灵巧 ；
2、强大的选择器；
3、出色的DOM操作的封装；
4、可靠的事件处理机制
5、完善的ajax
6、链式操作、隐式迭代
7、方便选择页面元素
8、动态更改页面样式/页面内容
9、控制响应事件（动态添加响应事件）
10、提供基本网页特效
11、快速实现通讯（ajax）
12、易扩展、插件丰富

讲解$(function(){})

1、$是jQuery别名。如$()也可jQuery()这样写,相当于页面初始化函数，当页面加载完毕，会执行jQuery()。
2、希望在做所有事情之前，JQuery操作DOM文档。必须确保在DOM载入完毕后开始执行，应该用ready事件做处理HTML文档的开始
3、$(document).ready(function(){});类似于js的window.onload`事件函数，但是ready事件要先于onload事件执行 window.onload = function(){};
4、为方便开发，jQuery简化这样的方法，直接用$()表示
5、JQuery的ready事件不等于Js的load：执行时机不同：load需要等外部图片和视频等全部加载才执行。ready是DOM绘制完毕后执行，先与外部文件用法不同：load只可写一次，ready可以多次

JQuery有哪些功能（API）

1、JQuery基本选择器（ID选择器，标签选择器，类选择器，通配选择器和组选择器5种）
ID选择器：document.getElementById(id)与$("#id")对比(改变文字大小)—id唯一，返回单个元素
标签选择器：document.getElementsByTagName(tagName)与$("tagname")对比—多个标签，返回数组
类选择器:$(“.className”)–多个classname（改变背景图片）
通配选择器：document.getElementsByTagName("*")与$("*")对比—指范围内的所有标签元素
组选择器：$("seletor1,seletor2,seletor3")—-无数量限制，用逗号分割
2、过滤器：
3、事件
4、效果
5、ajax

JQuery是什么：

1、操作DOM对象 2、动态操作样式CSS 3、数据访问 4、控制响应事件

$()讲解

1、$在JQuery库中，$是JQuery的别名，$()等效于就jQuery().
2、$()是JQuery方法,赞可看作是JQuery的选择器，与css选择器相似（可做对比）
3、var jQuery==$=function(){}$()本质就是一个函数也就是 jQuery的核心函数
4、只要是jQuery的对象都这样变量加上一个符号$ 方便识别：var $div = $("#")

function　$(id){
return document.getElementById(id);
}

代理对象$()

1、jQuery中返回的是代理对象本身
2、jQuery的核心原理是通过选择器找到对应的代理对象
3、jQuery全都是通过方法操作
4、样式选择器$(“.className”) $(".aa").css("color","green");
5、 id选择器(“”)$("#a").css("background-color","#ff0066");
6、标签选择器 $("p").css("color","#cc3366");
7、组选择器$("#b ul li").size();

对象转换($(element))

原生dom对象和jquery代理对象的相互转换
$(传入的原生对象);
//原生对象转化成jQuery对象

var nav = document.getElementById("nav");
var $nav = $(nav);
alert($nav.get(0) == nav);//true

检索范围的限制（$(‘字符串’,element)）

总结1：三种写法对比：

方式一：不推荐 搜索速度最慢

$("#nav").css();
$("#nav li").css();

方式二：搜索速度最快 链式操作

$("#nav").css().children().css();

方式三：也常用 速度第二快

var $nav = $("#nav").css();
$("li",$nav).css(); 

$nav 限制了搜索范围 速度快

总结2： $() jquery核心方法的作用和使用场景

1、如果是一个字符串参数并且没有标签对（选择器） $(ul.nav")
2、如果是一个字符串参数并且有标签对（创建html标签）$("<img>") –最终加到DOM树中 $xx.append("<img>");
3、如果是传入一个element dom对象，直接包装为proxy对象返回 $(DOM对象)
4、如果第一个参数是字符串，第二个是element dom对象的话，那么就是在element这个dom对象里面寻找选择器对应的元素并且代理 DOM对象。