前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航

jQuery概述(一)

首页
2016-08-07 19:35:08
Front-End
jQuery
  • jQuery是什么:

    • 是一个javascript代码仓库,我们称之为javascript框架。
    • 是一个快速的简洁的javascript框架,可以简化查询DOM对象、处理事件、制作动画、处理Ajax交互过程。
  • jQuery可以帮我们做什么(有什么优势)、

    • 体积小,使用灵巧(只需引入一个js文件)
    • 方便的选择页面元素(模仿CSS选择器更精确、灵活)
    • 动态更改页面样式/页面内容(操作DOM,动态添加、移除样式)
    • 控制响应事件(动态添加响应事件)
    • 提供基本网页特效(提供已封装的网页特效方法)
    • 快速实现通信(ajax)
    • 易扩展、插件丰富
  • javascript用来干什么的:

    • 操作DOM对象
    • 动态操作样式css
    • 数据访问
    • 控制响应事件等
  • 讲解$(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可以多次。
  • $()和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
@前端进阶之旅: 代码已经复制到剪贴板
  • 样式选择器$(".className")

    • $(".aa").css("color","green")
    • id选择器 $("#a").css("background-color","#ff0066")
    • 标签选择器 $("p").css("color","#cc3366")
    • 组选择器 $("#b ul li").size();
  • jQuery有哪些功能(API):

    • a.选择器
    • b.过滤器
    • c.事件
    • d.效果
    • e.ajax
  • 简单的JQuery选择器:

    • JQuery基本选择器(ID选择器,标签选择器,类选择器,通配选择器和组选择器5种)
      • ID选择器:document.getElementById(id)与$("#id")对比(改变文字大小)—id唯一,返回单个元素
      • 标签选择器:document.getElementsByTagName(tagName)与$("tagname")对比—多个标签,返回数组
      • 类选择器:$(".className")–多个classname(改变背景图片)
      • 通配选择器:document.getElementsByTagName("*")与$
fe
  • 附录:

← jQuery选择器及优化(二)javascript 下常用的字符串操作 →