jQuery框架使用准备

1. jQuery框架和JavaScript加载模式对比
   • window.onload
     • 执行时机: (css/js/images)都加载完毕后执行包裹代码
     • 执行次数: 方法调用N次只会执行一次, 后面的会覆盖前面
   • $(document).ready(function () {} )
     • 执行时机: jQuery框架的ready方法等DOM结构加载完毕后执行包裹代码
     • 执行次数: 方法调用N次会执行N次, 不存在覆盖问题
     • 简写方式
       • $().ready(function () {} )
       • $(function() {} )
2. jQuery框架解决冲突
   • 在实际开发中, 可能用到多个第三方框架, 如果这些框架本身在设计时, 没有命名空间的约束, 那么库与库之间发生冲突将在所难免
   • jQuery框架在设计时, 使用闭包的形式将所有的代码都封装到一个立即调用函数中, 对外仅仅提供了$/jquery作为框架的入口
   • jQuery当中所有的操作都是使用$/jquery对象进行的
     • 产生冲突: 在使用jQuery之前, 使用了$符号
     • 解决冲突: var jq = $.noConflict();
3. 对象的相互切换
   • DOM对象: 每个HTML页面都有一个DOM对象(Document Object Model, 文本对象模型), 通过传统的JavaScript方法访问页面中的元素, 就是访问DOM对象
   • jQuery对象: 在 jQuery框架中，通过本身自带的方法获取页面元素的对象
     • ps:其实jQuery本身只是个工厂函数，我们通常意义上所说的jQuery实例对象其实是jQuery的原型对象上面的init方法创建出来的实例对象。即 jQuery对象 = new jQuery.prototype.init() , 只是因为init方法和jQuery构造函数共用相同的原型对象，所以我们才会称init构造函数创建出来的对象为jQuery实例对象
   • DOM对象-->jQuery对象
     • $(DOM对象)
   • jQuery对象-->DOM对象
     • jquery对象.get(index) |jquery对象[index]

jQuery操作CSS

1. jQuery操作CSS方法, 语法如下
   1. 单个操作: $("div").css("height","200px");
   2. 链式法(多个操作): $("selector").css(name1,value).css(name2,value)...;
   3. 传递样式键值对的对象作为参数: $("selector").css( { name1 : value , name2 : value})
2. jQuery框架操作Class
   • hasClass：检查选定的标签中是否存在指定的Class
     • $("selector").hasClass("class1");: 只要选中的所有标签中有一个标签存在该Class，就返回true,否则返回false。
   • addClass : 为选中的所有标签批量的添加Class
     • $("selector").addClass("class1");
     • $("selector").addClass("class1").addClass("class2");
     • $("selector").addClass("class1 class2");
   • removeClass：把选定标签中指定的Class删除
     • 语法同添加Class一样
   • toggleClass： 切换Class
     • 语法同添加Class一样
3. jQuery框架操作位置的方法
   • $("selector").width()和$("selector").height()
     • 不传递参数-->获取指定标签的宽度|高度
     • 传递参数-->要设置标签的宽度|高度
   • .offset()和.position()
     • offset获取当前标签距离浏览器窗口的位置
     • position获取当前标签距离父标签的位置

jQuery选择器

• jQuery选择器说明

  • jQuery 最核心组成部分: 选择器引擎
    • 它完全继承了 CSS 的风格,可以对 DOM 元 素的标签名、属性名、状态等进行快速准确的选 择，而且不必担心浏览器的兼容性，写法更加简洁。
  • jQuery 选择器根据获取页面中元素的不同，可以划分为四大类
    1. 基本选择器
    2. 层级选择器
    3. 筛选选择器
    4. 表单选择器

• 基本选择器

  基本选择器

• 层级选择器

  层级选择器
  • next() == 下一个相邻兄弟 || nextAll() == 后面所有兄弟
  • 父子选择器相关方法
    • parent(): 获取当前标签的父节点
    • parents(): 获取当前标签的祖先节点
    • parentsUntil(): 获取当前标签的祖先节点直到选中的祖先元素(不包括选中的祖先元素)
    • children(): 获取当前标签的子节点
    • siblings(): 获取当前标签的兄弟节点

• 筛选选择器

  1. 基本筛选选择器

     基本筛选选择器

  2. 内容筛选选择器

     内容筛选选择器

  3. 属性筛选选择器

     属性筛选选择器

  4. 子元素筛选选择器

     子元素筛选选择器

  5. 可见性筛选选择器

     可见性筛选选择器

  6. 表单对象属性筛选选择器

     表单对象属性筛选选择器

• 表单选择器

  表单选择器