第一节：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对象。