jQuery知识结构
* jQuery入门?
* js函数库(DOM/ajax)
* 特点:
* HTML元素选取
* HTML元素操作
* CSS操作
* HTML事件处理
* JS动画效果
* 链式调用
* 浏览器兼容
* Ajax封装
* 易扩展插件
* helloworld
* 引入库
* 引入库文件到项目中
* 在页面中引入
* 使用库
* 使用jQuery核心函数 : $/jQuery
* 使用jQuery核心对象 : 使用调用$()返回的结果
$(function(){
$('#demo').click(function(){
//处理点击响应逻辑
});
});
* 回调函数:
* 你定义的
* 你没有调用
* 但它最终执行了(一定时机/条件)
* jQuery的2把利器
* jQuery核心函数 :
* $/jQuery : jQuery库定义的两个全局函数
* 作为一般函数调用 : $(params)
* callback function : 绑定文档加载完成的回调
* 选择器字符串 : 查找所有匹配的dom元素, 并包装为jQuery对象返回
* 标签字符串 : 生成dom元素对象, 并包装为jQuery对象返回
* dom元素对象: 将指定的dom元素包装为jQuery对象返回 (用得较多的是this)
* 作用对象使用(工具方法)
* $.each(arr/obj, function(index, item){})
* $.trim()
* $.parseJSON()
* $.isArray()
* $.isFunction()
* $.type()
* jQuery核心对象 :
* 调用/执行$()返回的结果: 包含了所有匹配的dom元素对象的伪数组对象
* [index] / get(index)
* length / size()
* each(function(index, domEle){//this}) : 遍历内部包含的所有dom元素
* index() : 得到当前元素在所有兄弟中的索引下标
* 选择器
* 是什么? : 有特定语法结构的字符串, 通过调用$(selector)进行查找
* 分类:
* 基本
* 层次
* 过滤
* 表单
* 基本选择器:
* #id
* .class
* tagName
* *
* selector1,selector2,selector3 : 并集
* selector1selector2selector3 : 交集
* 层次选择器: 查找兄弟/子孙/父元素
* selector1 selector2 : 子孙
* selector1>selector2 : 子
* 过滤选择器: 在左边的选择得到的元素进一步查找过滤
* :first :last :not(seletor) :gt(index) :lt(index)
* :hide
* [attrName] [attrName=value]
* 表单
* :input
* :text :checkbox
* :checked
* 属性: (读写二合一)
* 操作通用属性
* attr() : 设置/读取指定的属性
* 操作class属性
* 操作标签体
* 操作value属性
* CSS
* css() : 读/写指定的样式
* offset() : 读/写原点为页面左上角的坐标对象 : left/top
* position() : 读原点为父元素左上角的坐标对象 : left/top
* height()/innerHeight()/outerHeight(true/false) : content/padding/border/margin
* 文档处理
* 对jQuery对象中包含的dom元素进行增删改的操作
* 添加元素
* 前面 : before()
* 前部 : prepend()
* 后面 : after()
* 后部 : append()
* 删除:
* remove()
* empty()
* 替换:
* replaceWith()
* 筛选
* 过滤 : 查找内部的dom元素本身
* first()
* last()
* eq(index)
* filter(selector)
* not(selector)
* 查找 : 查找内部的dom元素相关的元素(父母兄弟子孙后代)
* children(selector)
* find(selector)
* next()
* nextAll()
* prev()
* prevAll()
* siblings()
* parent()
* 事件处理
* on(eventName, function(){})
* eventName(function(){})
* off(eventName)
*父元素jQuery对象.delegate('子孙元素selector', eventName, function(){}) : 事件委托
* 父元素jQuery对象.undelegate(eventName) : 解除事件委托
* 动画
* 原理 : 在指定的时间不断改变元素的样式(任意)
* API
* show() : 默认没有动画, 只有指定时间才会有动画
* hide()
* toggle()
* slideDown()/slideUp()/slideToggle()
* fadeIn()/fadeOut()/fadeToggle()
* animate({最终状态的样式对象}, time) : 自定义动画
* 方法链调用:
* 描述: 通过点可以不断调用方法
* 好处: 编码简洁
* 原因: 方法会返回this(jQuery对象)
* jQuery的dom操作与原生dom操作的比较
* 查找: jQuery通过强大的选择器能快速简单的找到所需要操作的元素
* 增删改: 对dom操作进行了很好的封装
* 兼容性: jQuery已经解决了
* 事件委托:
* 过程:
1. 将多个子元素(li)的事件监听委托给父辈元素(ul)处理
2. 监听回调是加在了父辈元素上
3. 当操作任何一个子元素(li)时, 事件会冒泡到父辈元素(ul)
4. 父辈元素不会直接处理事件, 而是根据event.target得到发生事件的子元素(li), 通过这个子元素调用事件回调函数
* 好处:
1. 减少事件监听的数量: n--->1
2. 添加新的子元素, 自动有事件响应处理
* 编写jQuery插件
* jQuery插件 : 基于jQuery编写一个js库(文件)
* 扩展核心函数的功能: $.extend({多个方法}) --->内部的方法就会成为$的方法
* 扩展核心对象的功能: $.fn.extend({多个方法}) --->内部的方法就会成为核心对象的方法
* 多库共存
* 问题: 另一个库也定义了$, 与jQuery冲突了
* 解决: jQuery可以释放$的使用权
* API : jQuery.noConflict()
* jQuery的整体结构
(function (window) {
var jquery = function () {
return {
showInfo : function () {
console.log('showInfo()');
return this;
},
sayHello : function () {
console.log('sayHello()');
return this;
}
};
}
window.jquery = window.$$ = jquery;
})(window);
* window.onload与$(document).ready() 区别
1.执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构加载完毕后就执行，不必等到图片加载完毕。
2.编写个数不同
window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
$(document).ready()可以同时编写多个，并且都可以得到执行
3.简化写法
window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){});
* 区别函数内部的this到底是谁?
* 谁调用这个函数, this就是谁
* 事件回调函数中的this? --->发生事件的dom元素对象
* jQuery对象遍历内部元素的回调中的this? --->内部的dom元素对象
* 了解两个jQuery插件
* jquery-ui-1.11.4
* jquery-validation-1.15.0 : 声明式验证
来源：https://www.cnblogs.com/NimoJCC/p/5883425.html