jQuery入门

jQuery使用

BOM操作

• 说明：就是将浏览器当做一个对象(window)进行操作，叫BOM操作

• 使用：

  • open：打开新页面

  • close：关闭窗口

  • history：跳转历史记录

    • back：向后跳转一页

    • go：跳转到指定页面，正数表示向前跳，负数表示向后跳

  • location：定位

    • href：指定窗口的url

跳出框架

• a标签：通过target属性指定打开得方式，_ top、_ parent

• window.open：打开新页面，通过第二个参数指定打开方式，同a标签

• 设置网页的url：

  • window.top.location.href = 'url'

  • window.parent.location.href = 'url'

什么是jQuery?

• jQuery是一个快速、简洁的JavaScript框架。

• 它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

• jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。

引入方式

• 远程(CDN)

  • <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>

• 本地(先下载好文件)

  • <script src="jquery-1.11.3.min.js"></script>

• 使用：

  jQuery(document).ready(function(){ alert(123) })
  $(document).ready(function(){ alert(456) })
  $(function(){ alert(789) })

• 说明：

  • 使用jQuery时必须指定版本，可以通过目录或文件名指定都可以。

  • 带min的版本是压缩版本，压缩就是删除了多余的空格及回车等字符以节约空间。

  • 使用cdn时，若jQuery的地址没有指定协议，说明是自适应协议。

  • 使用jQuery时，代码要写在传递的匿名函数中，可以同时绑定多个函数。

使用jQuery

• 选择器：

  • 基本：id、class、标签、*、组合

  • 层级：

    • parent child：parent下的所有child后代元素

    • parent > child：parent下的所有直接子元素child

    • prev + next：紧跟prev后的next元素

    • prev ~ siblings：prev后面的同胞元素

  • 基本：first、last、even、odd、eq、gt、lt

  • 内容：contains、empty、has、parent

  • 可见性：hidden、visible

  • 属性：

  • 子元素：

  • 表单

  • 表单对象属性

• 文档处理

  • 内部插入

  • 外部插入

  • 包裹

  • 替换

  • 删除

  • 复制

• 筛选

  • 过滤

  • 查找

• 事件

  • on/bind：添加事件处理函数

  • off/unbind：移除事件处理函数

  • one：一次性事件

  • deletage：添加事件，可以给已存在和未来的元素

  • undelegate：删除事件

  • hover：光标的移入和移除，可以同时绑定两个事件

  • 单个事件：click、mouseover、。。。

• 效果

  • 基本：show、hide

  • 滑动：slideDown、slideUp、slideToggle

  • 淡入淡出：fadeIn、fadeOut、fadeToggle

• 属性

• CSS

• jQuery与JS对象的转换

  • JS对象转换为jQuery：$(obj)

  • jQuery对象转换为JS对象：$('div')[0]

jQuery实现效果

目录导航的展开关闭效果

点击移动元素

全选/全不选/反选

选项卡

商品展示

轮播图

• 添加自动轮播功能(3s切换一次)，光标移入停止自动轮播，离开继续

• 添加点击小圆点显示对应的图片