1-js和jq的加载对比 DOM(与jQ)对象的相互切换 jQu

作者: 前端雨 | 来源:发表于2017-12-06 14:44 被阅读0次

jQuery框架使用准备

jQuery框架和JavaScript加载模式对比
- window.onload
  - 执行时机: (css/js/images)都加载完毕后执行包裹代码
  - 执行次数: 方法调用N次只会执行一次, 后面的会覆盖前面
- $(document).ready(function () {} )
  - 执行时机: jQuery框架的ready方法等DOM结构加载完毕后执行包裹代码
  - 执行次数: 方法调用N次会执行N次, 不存在覆盖问题
  - 简写方式
    - $().ready(function () {} )
    - $(function() {} )
jQuery框架解决冲突
- 在实际开发中, 可能用到多个第三方框架, 如果这些框架本身在设计时, 没有命名空间的约束, 那么库与库之间发生冲突将在所难免
- jQuery框架在设计时, 使用闭包的形式将所有的代码都封装到一个立即调用函数中, 对外仅仅提供了$/jquery作为框架的入口
- jQuery当中所有的操作都是使用$/jquery对象进行的
  - 产生冲突: 在使用jQuery之前, 使用了$符号
  - 解决冲突: var jq = $.noConflict();
对象的相互切换
- 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

jQuery操作CSS方法, 语法如下
1. 单个操作: $("div").css("height","200px");
2. 链式法(多个操作): $("selector").css(name1,value).css(name2,value)...;
3. 传递样式键值对的对象作为参数: $("selector").css( { name1 : value , name2 : value})
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一样
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. 表单对象属性筛选选择器
  表单对象属性筛选选择器
表单选择器
表单选择器