jQuery笔记总结篇|博客系列

首先，来了解一下jQuery学习的整体思路

• XMind源文件提供参考下载

# 第一节 jQuery初步认知

# jQuery概述

• JQuery概念

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

• jQuery是什么:

  • 是一个javascript代码仓库，我们称之为javascript框架。
  • 是一个快速的简洁的javascript框架，可以简化查询DOM对象、处理事件、制作动画、处理Ajax交互过程。
  • 它可以帮我们做什么(有什么优势)
  • 轻量级、体积小，使用灵巧(只需引入一个js文件)
  • 强大的选择器
  • 出色的DOM操作的封装
  • 出色的浏览器兼容性
  • 可靠的事件处理机制
  • 完善的Ajax
  • 链式操作、隐式迭代
  • 方便的选择页面元素(模仿CSS选择器更精确、灵活)
  • 动态更改页面样式/页面内容(操作DOM，动态添加、移除样式)
  • 控制响应事件(动态添加响应事件)
  • 提供基本网页特效(提供已封装的网页特效方法)
  • 快速实现通信(ajax)
  • 易扩展、插件丰富

• 如何引入JQuery包

  • 引入本地的JQuery

  • 引入Google在线提供的库文件（稳定可靠高速）

  • 使用Google提供的API导入 <script type=“text/javascript” src=“jquery.js”></script>

  • 写第一个JQUery案例

    • 解释:在JQuery库中，$是JQuery的别名，$()等效于就jQuery()

<script type=“text/javascript” src=“”></script>
<script type=“text/javascript”>
   $(function(){
   	alert(“jQuery 你好!”);
   });
</script>

• 讲解$(function(){});

  • $是jQuery别名。如$()也可jQuery()这样写,相当于页面初始化函数，当页面加载完毕，会执行jQuery()。

  • 希望在做所有事情之前，JQuery操作DOM文档。必须确保在DOM载入完毕后开始执行，应该用ready事件做处理HTML文档的开始

  • $(document).ready(function(){});

    • 类似于js的window.onload事件函数，但是ready事件要先于onload事件执行
    • window.onload = function(){};

  • 为方便开发，jQuery简化这样的方法，直接用$()表示

  • JQuery的ready事件不等于Js的load：

    • 执行时机不同：load需要等外部图片和视频等全部加载才执行。ready是DOM绘制完毕后执行，先与外部文件
    • 用法不同：load只可写一次，ready可以多次
• window.onload与$(document).ready()对比

• jQuery有哪些功能(API)：

  • 选择器
  • 过滤器
  • 事件
  • 效果
  • ajax

• 简单的JQuery选择器：

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

# 初步了解JQuery

• JQuery是什么
  • javascript用来干什么的：
    • 操作DOM对象
    • 动态操作样式css
    • 数据访问
    • 控制响应事件等
  • jQuery作用一样，只是更加快速简洁
• 如何引用JQuery

<script type="text/javascript"></script>
写第一个JQUery案例
<script type=“text/javascript” src=“”></script>
<script type=“text/javascript”>
	$(function(){
		alert(“jQuery 你好!”);
	});
</script>

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

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

• $()和document是相等的吗

<div id="a" class="aa"></div>
<div id="b" class="aa"></div>
<div id="c" class="aa"></div>
alert(document.getElementById("id") == $("#aa"));//返回结果为false
alert(document.getElementById("id") == $("#aa").get(0));//返回true

• 代理对象$()

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

• 对象转换($(element))

  • 原生dom对象和jquery代理对象的相互转换

$(传入的原生对象);
//原生对象转化成jQuery对象
var nav = document.getElementById("nav");
var $nav = $(nav);
alert($nav.get(0) == nav);//true

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

  • 总结：三种写法对比：

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

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

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

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

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

      • var $nav = $("#nav").css();
      • $("li",$nav).css(); $nav 限制了搜索范围 速度快

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

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

• 代理模式以及代理内存结构

# 第二节 选择器

• 来回顾一下CSS常用的选择器

• 选择器引擎规则($('字符串'))

  • css选择器的规则

    • 标签选择器
    • id选择器
    • 类选择器
    • 混合选择器

  • css3的选择器规则

  • 状态和伪类（:even :odd :first :last :eq(index)）

  • 属性（[attr=value]）

• 层级选择器:通过DOM的嵌套关系匹配元素

  • jQuery层级选择器----包含选择器、子选择器、相邻选择器、兄弟选择器4种
  • a.包含选择器：$("a b")在给定的祖先元素下匹配所有后代元素。(不受层级限制)
  • b.子选择器：$("parent > child") 在给定的父元素下匹配所有子元素。
  • c.相邻选择器：$("prev + next") 匹配所有紧接在prev元素后的next元素。
  • d.兄弟选择器：$("prev ~ siblings") 匹配prev元素之后的所有sibling元素。

# 过滤选择器

• 基本过滤选择

• 内容过滤选择器

• 可见过滤选择器

• 属性过滤选择器

• 子元素过滤选择器