jQuery学习笔记

  • A+
所属分类：Web前端
摘要

jQuery 是 JavaScript 的一个框架，是对 JS 的一种封装，使得 JS 使用方便，简单易学
便宜好用的国外VPS推荐

一. 什么 jQuery？

jQuery 是 JavaScript 的一个框架，是对 JS 的一种封装，使得 JS 使用方便，简单易学

优点

  1. 不用考虑兼容性问题

  2. jQuery 拥有强大的选择器，简化了 JS 代码

  3. jQuery 封装了很多系统函数，直接调用，非常方便

  4. 完善的异常处理机制

  5. 出色的浏览器兼容性

  6. 提高开发效率

二. 怎么使用 jQuery？

  1. 下载 jQuery 的核心 JS 放入项目中 jquery-1.xx.xx.js

  2. 在页面上使用 <script src="js/jquery-1.xx.xx.js"></script>

三. 初始化函数

  • JS 初始化函数 window.onload = function() {}

  • jQuery 初始化函数

    1. jQuery(function() {});

    2. $(function() {});

    3. jQuery().ready(function(){});

    4. $().ready(function(){});

注：

jQuery 与 $是全等
jQuery() 与 $()是jQuery的核心函数

四. window.onload 与 jQuery() 初始化的区别（☆）

  • window.onload 页面加载完网页元素后被执行

  • jQuery() 页面读完代码后被执行

五. 选择器（☆）

  • $("*") 通配符

  • $("div") 标签

  • $(".divcla") 类

  • $("#zwb") id

  • $("#king > p") 子代

  • $("table td") 后代

  • $("div + p") 同层目录第一个标签

  • $("div ~ p") 同层目录所有标签

  • $("table td:first") 获取第一个元素的伪类

  • $("table td:last") 获取最后一个元素的伪类

  • $("table tr:odd") 奇数伪类

  • $("table tr:even") 偶数伪类

  • $("input[name=username]") 属性选择

通配符 < 标签 < 类 < ID

六. jQuery 属性操作

  1. attr 获取标签的属性值或者给属性赋值 <input type="checkbox"/> $("input").attr("checked")

  2. prop 获取标签的属性值或者给属性赋值 <input type="checkbox"/> $("input").attr("checked")

  3. addClass 给标签加上类名 <div class="test"></div>

  4. toggleClass 若标签有该样式，则移除掉；若没有，则添加

  5. HTML 功能与 innerHTML 功能一样

  6. text 获取的是纯文本内容

  7. val 获取“input输入框”的值

七. 文档处理

  1. append：A.append(B) 把B元素添加到A中的末尾处

  2. appendTo：B.appendTo(A) 把B元素添加到A中的末尾处

  3. remove 移除某一个元素

  4. empty 清除某一个元素中的所有的内容

八. jQuery 效果

  1. show() 显示

  2. hide() 隐藏

  3. slideDown() 向下滑动

  4. slideUp() 向上滑动

  5. fadeIn() 淡入

  6. fadeOut() 淡出

  7. animate() 动画效果

  8. stop() 停止动画效果

  9. delay 延迟

九. jQuery 遍历

each 循环

便宜好用的国外VPS推荐