jq2.0以上的版本不兼容IE8及已下的版本的浏览器
jq的使用
ready和onload事件的区别
- ready表示页面中dom加载完毕后触发
- onload表示页面中的一切加载完才触发(dom元素,图片...)
特点
- 轻量 开源 免费 兼容性处理
- 强大的选择器
- 便捷的dom操作
- 链式调用
- 可靠的事件机制
- 封装了简单易用的ajax操作
- 丰富的插件
jquery dom对象
- 使用jq选择器获取的不是原生dom对象,称之为jquery dom对象
- jqdom对象本质上是由原生dom对象组成的集合
- 原生dom转jqdom $(原生dom)
- jqdom转原生dom jqdom[0]
全局对象
- jQuery $
- $的参数如果是原生dom对象,把该对象转为jqdom
- $的参数如果是字符串,为jq的选择器
- $的参数如果是字符串,并且以<开头,创建一个新的元素
jq选择器
1.基本选择器
- //id选择器
$('#firstList').css('border','2px solid red'); - //class
$('.item').css('border','1px solid green'); - //标签
$('li') - //全局
$('*') - //组合
$('li.item').css('background-color','yellow'); - //多个选择器
$('li,p').css('width','200px');
2.层级选择器
- 选择器 选择器 后代元素(所有层级)
- 选择器>选择器 后代子元素(第一层级)
- 选择器+选择器 紧邻的兄弟元素(必须是同一个父元素)
- 选择器1~选择器2 匹配选择器 1之后的所有的同辈的选择器2的元素
3.筛选选择器
- :first
- :last
- :eq(index) 指定index
- :gt(index) 大于
- :lt(index) 小于
- :odd 奇数
- :even 偶数
- :not(选择器) 排除
- :lang(语言)
- :header h1-h6的标签
- :focus 获取焦点的元素
- :root 获取根元素(html)
- :target 获取锚点指向的元素(url #元素)
4.内容选择器
- :contains(text) 包含指定的文本的元素
- :has(选择器) 包含满足条件的元素的父元素
- :empty 没有内容没有文本的元素
- :parent 和empty相反
5.可见性选择器
- :hidden 不可见的元素
- :visible 可见的元素
6.属性选择器
- [attrName] 有指定属性的元素
- [attrName=value] 有指定属性值的元素
- [attrName!=value] 有指定属性不等于指定值的元素
- [attrName^=value] 有指定属性以指定值开头的元素
- [attrName$=value] 有指定属性以指定值结尾的元素
- [attrName*=value] 有指定属性包含指定值的元素
- [selector1][selector1][selector1] 符合属性选择器,需要同时满足多个条件
7.子元素选择器
- :first-child 是所有兄弟元素里面的第一个
- :last-child 是所有兄弟元素里面的最后一个
- :nth-child(index) index从1开始 所有兄弟元素的正数第几个
- :nth-last-child(index) index从1开始 所有兄弟元素的倒数第几个
- :only-child 唯一的子元素,没有兄弟元素
- :first-of-type 所有兄弟元素里面同标签的第一个
- :last-of-type 所有兄弟元素里面同标签的最后一个
- :nth-of-type(index) 所有兄弟元素里面同标签的正数第几个
- :nth-last-of-type(index) 所有兄弟元素里面同标签的倒数第几个
- :only-of-type 唯一的子元素(同标签),没有兄弟元素
8.表单选择器
- :input 所有的表单组件(input textarea select radio...)
- :text / :password / :radio / :checkbox / :file /:reset 根据input的type值取
- :submit 所有具有提交功能的按钮 button input:submit
- :button 所有的button元素以及input:button的元素
9.表单对象选择器
- :disabled 选中有disable属性的元素
- :enabled disabled的反义词
- :checked 选中有checked属性的元素
- :selected 选中有selected属性的元素,比如select的option
10.混淆选择器
- ('#'+$.escapeSelector('#item'))
jq属性操作
1.属性
- .attr(attrName) 操作所有的属性(自定义和内置的) 一个参数是获取 两个参数是修改或者新增
- .prop() 操作html内置的属性 一个参数是获取 两个参数是修改或者新增
- .removeAttr(attrName) 可删除所有属性
- .removeProp(attrName) 并不能删除内置属性
- 注意: 若选中的是元素集合,设置可全部都生效,若获取,只能获取到第一个元素.
2.css类
- .addClass() 添加一个class值
- .removeClass() 删除一个class值
- .toggleClass() 切换一个class值
- .hasClass() 判断是否有某个class值 返回true/false
3.html代码/文本/值
- .html() 一个参数获取,两个参数设置.设置或获取 html代码 innerHTML
- .text() 一个参数获取,两个参数设置.设置或获取文本 innerText
- .val() 无参数是获取 一个参数是设置 表单控件的值
jq样式操作
1.css操作
- .css() 获取或者设置css属性 也可以直接传对象
console.log($('#box').css('border'));
$('#box').css('width','500px');
$('#box').css({
'width':'400px',
'height':'100px'
});
2.位置
- .offset 设置/获取 元素在页面中的坐标
console.log($('.box').offset());
$('.box').offset({left:100,top:100})
- .position 元素在第一个定位的祖先元素内坐标(只读)
- .scrollTop 获取/设置 相对滚动条顶部的偏移
- .scrollLeft 获取/设置 相对滚动条左部的偏移
3.尺寸
- .width() height() 获取/设置 元素内容的尺寸
- .innerWidth() innerHeight() 获取/设置 内容尺寸+padding
- .outerWidth() outerHeight() 获取/设置 盒子的尺寸 内容+padding+border+margin
jq筛选操作
1.过滤操作
- .first()
- .last()
- .eq(index|-index) 0,1..-2,-1
- .not(expr|ele|fn) 去除指定元素 expr一个选择器字符串 ele一个dom元素 fn回调函数
- .filter(fn(index){return...}) 只要满足条件的元素
- .slice(index,index) 截取指定索引的元素 index,index-1 从0开始数
- .has() 获取有指定子元素的父元素 $('li').has('ul')含有ul的li
- .hasClass(class)
2.查找
- .children(可选参数selector) 可选参数 获取子元素
- .find(selector) 获取后代元素
- .parent(可选参数selector) 获取父元素
- .parents(可选参数selector) 获取所有的祖先元素
- .parentsUntil(可选参数selector) 查找当前元素的所有父辈元素,直到遇到匹配的元素为止
- .offsetParent() 获取第一个定位的祖先元素
- .next(可选参数selector) 紧邻在后面的兄弟元素
- .nextAll(可选参数selector) 后面所有的兄弟元素
- .nextUntil(可选参数selector) 后面的所有的兄弟元素直到遇到匹配的元素为止
- .prev(可选参数selector) 紧邻在前面的兄弟元素
- .prevAll(可选参数selector) 前面所有的兄弟元素
- .prevUntil(可选参数selector) 前面的所有的兄弟元素直到遇到匹配的元素为止
- .siblings(可选参数selector) 所有的兄弟元素
- .closest(selector) 从所有的祖先元素和自己本身合集中找出第一个满足条件的元素
3.串联
- .add(selector) 将匹配的元素添加到jq对象中,组成新的jq对象
- .addBack() 把调用该方法的元素加入到当前集合中
- .end() 返回最后一次破坏性操作之前的dom
- .contents() 返回所有子节点的集合
4.jq dom对象操作
- .each() 遍历
- .map() 遍历并根据return值返回新的集合
- .length 集合中元素的数量
- .index() 返回某个元素在父元素中的索引
- .get(可选index) 参数一个返回集合中指定索引 参数为空可以把jqdom转化称纯数组
- .is(selector) 判断该jsdom是否满足某个条件 返回布尔值
jq dom操作
1.创建元素
- $('
')
2.内部插入
- .append(内容) 匹配的元素内部追加内容
$("p").append("Hello");
- .appendTo(selector) 把匹配的元素追加到另一个指定的元素集合中
$("p").appendTo("div");
- .prepend(内容) 匹配的元素内部前置内容
- .prependTo(selector) 把匹配的元素前置到另一个指定的元素集合中
3.外部插入
- .after(内容) 在匹配的元素之后插入内容
$("p").after("Hello");
- .before(内容) 在匹配的元素之前插入内容
$("p").before("Hello");
- .insertAfter(selector) 把匹配的元素插入到另一个指定的元素集合的后面
- .insertBefore(selector) 把匹配的元素插入到另一个指定的元素集合的前面
4.包裹
- .wrap() 元素.warp(标签) 用标签包裹元素,为每一个匹配的元素都包裹一次
- .wrapAll() 元素.wrapAll(标签) 所有的元素都被一个标签包裹,将所有的匹配元素用单个标签包裹起来
- .wrapInner() 元素.wrapInner(标签) 用标签包裹元素内部,将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
- .unwrap() 去除包裹
5.替换
- .replaceWith(元素/dom) 将元素替换成指定的html或者dom元素
- .replaceAll(selector) 用匹配的元素替换掉所有selecor匹配到的元素
6.删除
- .empty() 删除匹配的元素集合中所有的子节点
- .remove() 不传参数删除元素本身 传参数删除匹配的元素
- .decath() 于remove的效果一样,但是删除的元素所有绑定的事件和附加数据都会保留下来,remove则不会
7.克隆
- .clone() 克隆元素
jq事件
1.事件绑定
- .event 直接调用事件名
- .on(event,fn) 标准的绑定方式
- .on({event:fn,...}) 同时绑定多个事件
- .one(event,fn) 只绑定一次事件
2.解除事件绑定
- .off(可选参数事件名) 不传则解除全部事件,传参则解除对应的事件
3.事件委派
- .on(event,selector,fn)
4.控制事件触发
- .trigger(参数事件名)
- .triggerHandle(参数事件名)
$('#btn').trigger('click')
区别:
- trigger 返回的jqdom对象,所以可以连贯操作;
- triggerHandler 无法触发元素自带的事件 如focus,blur等
- trigger会触发集合中所有元素的事件,triggerHandler只会触发集合中的第一个元素
5.事件列表
- .ready 页面中dom加载完毕
- .focusin 获取焦点,绑定给父元素
- .focusout 获取焦点,绑定给父元素
- .mouseenter 代替mouseover 鼠标悬停在元素上
- .mouseleave 代替mouseout 鼠标离开元素
- .hover mouseenter和mouseleave的集合
6.事件对象
- event对象
- event.pageX 鼠标箭头的x坐标
- event.pageY 鼠标箭头的y坐标
- event.target 当前触发的元素对象
- event.which 键盘的ascii码
- event.type 事件类型(名称)
- event.preventDefault() 阻止默认操作
- event.stopPropagation() 阻止事件冒泡
jq动画
1.基本效果
- .hide(可选速度参数,可选回调参数) 隐藏
- .show(可选速度参数,可选回调参数) 显示
- .toggle(可选速度参数,可选回调参数) 切换显示和隐藏
- fast/normal/slow/数字 第二个参数是回调事件
- 动画的css属性变化:透明度变化,元素大小相关的样式(padding,border,width,height,margin)
2.滑动效果
- .slideDown() 显示
- .slideUp() 隐藏
- .slideToggle() 切换
- fast/normal/slow/数字 第二个参数是回调事件
- 垂直方向上的变化 height/padding-top/margin-top
3.淡入淡出效果
- .fadeIn() 淡入
- .fadeOut() 淡出
- .fadeToggle() 切换
- .fast/normal/slow/数字 第二个参数是回调事件
- .fadeTo(时间,透明度,回调) 改变透明状态
- 透明度的渐变
4.自定义动画
- .animate({},speed,fn) 自定义动画
$('#box').animate({
width:'200px',
padding: '5px',
'border-radius':'20px'
},3000)
$('#box').animate({
width:'toggle',
padding: 'toggle',
'border-radius':'toggle'
},1000)
- .stop() 使动画暂停
- .finish() 使动画完成
- .delay() 延迟执行动画
5.动画设置
- jQuery.fx.off=true/false 关闭页面上所有的动画
- jQuery.fx.interval = 100; 设置动画的显示帧速
6.动画队列
- 所有的动画操作会加入到队列中,依次执行,其他的不会
7.jq动画于css动画
- 兼容性,css3的动画需要ie9+
- css3的动画必须给元素指定具体的css属性值
jq ajax
1.快速请求方法
- get(url,[data],[callback],[type])
- url:待载入页面的URL地址
- data:待发送 Key/value 参数。
- callback:载入成功时回调函数。
- type:返回内容格式,xml, html, script, json, text, _default。
$.get("test.cgi", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});
- post(url,[data],[callback],[type])
- url:待载入页面的URL地址
- data:待发送 Key/value 参数。
- callback:载入成功时回调函数。
- type:返回内容格式,xml, html, script, json, text, _default。
$.post("test.php", { "func": "getNameAndTime" },
function(data){
alert(data.name); // John
console.log(data.time); // 2pm
}, "json");
2.ajax方法
- ajax()
$.ajax({
type: "get", // 请求方式
url: "js/data.txt", // 请求路径
dataType: "json", // 预期返回一个 json 类型数据
success: function (data) { // data是形参名,代表返回的数据
console.log(data);
}
});
————————————————
$.ajax({
url:"ajaxServlet1111" , // 请求路径
type:"POST" , //请求方式
//data: "username=jack&age=23",//请求数
data:{"username":"jack","age":23},
success:function (data) {
alert(data);
},//响应成功后的回调函数
error:function () {
alert("出错啦...")
},//表示如果请求响应出现错误,会执行的回调函数
dataType:"text"//设置接受到的响应数据的格式
});
————————————————
3.表单方法
- serialize() 把表单中有name属性的表单控件的值拼接成字符串
jq 工具方法
1.数组对象方法
- $.each(Array,fn(index,item)) 用于遍历数组或类数组对象
- $.grep(Array,fn(item,index)) 过滤数组 返回过滤后的数组
- $.map(Array,fn(item,index)) 通过回调函数的return组成新的数组并返回
- $.makeArray(类数组对象) 类数组对象转换成纯数组
- $.inArray(某个元素,Array) 判断一个元素在数组中的位置,不存在返回-1
- $.merge(Array,Array1,...) 合并数组 返回新数组
- toArray(jqdom) jqdom方法,把jqdom转为纯数组
2.函数方法
- $.proxy(fn,newObj) 改变函数的this指向
3.类型判断
- $.type(val) 判断val的类型
- $.isFunction(val) 判读val是否为函数
- $.isEmptyObject({...}) 判断是否是空对象
- $.isPlainObject({...}) 判断是否是纯对象
- $.isWindow(val) 判断是否是window对象
- $.isNumeric(val) 判断是否是数字(NaN为false)
4.字符串
- $.trim(str) 去除两边的空格
- $.param(obj) 把对象序列化成字符串 {a:1,b:2}-->a=1&b=2
5.版本
- $.fn.jquery 返回jq的版本
jq 插件
1.jq插件的网址
- http://plugins.jquery.com/ 官网
- http://www.jq22.com/ jQuery插件库
- http://www.htmleaf.com/ jQuery之家
- http://www.jq-school.com/ jQuery-school
2.经典jq插件
- select2 下拉框搜索插件
- 官网 https://select2.org/
- github https://github.com/select2/select2
- datetimepicker 时间日期插件
- github https://github.com/xdan/datetimepicker
- 文档 https://xdsoft.net/jqplugins/datetimepicker/
- fullpage 全屏滚动插件
- 官网 https://alvarotrigo.com/fullPage/zh/
- github https://github.com/alvarotrigo/fullpage.js/
- lazyload 图片懒加载
- 官网 https://appelsiini.net/projects/lazyload/
- github https://github.com/tuupola/jquery_lazyload/tree/2.x
- layer 弹窗插件
- 官网 http://layer.layui.com/?alone
- github https://github.com/sentsin/layer/
- nice validator 表单验证
- 官网 https://validator.niceue.com/
- github https://github.com/niceue/nice-validator
- jQuery-easing
- 官网 http://gsgd.co.uk/sandbox/jquery/easing/
- github https://github.com/gdsmith/jquery.easing
jq 自定义插件
- jQuery.fn.extend() 给jQueryDom扩展方法
//定义插件
$.fn.scrollList=function(options){...}
//调用插件
$('#wrapList').scrollList({...})
//给jqdom对象扩展方法
$.fn.extend({
changeRed:function(){
$(this).css('color','red');
}
})
- jQuery.extend() 给jQuery 对象本身扩展方法
//给jq对象本身 扩展方法
$.extend({
sayHello:function(name){
console.log('hello; ',name);
}
})
jQuery UI
- 官网 https://jqueryui.com/
jQueryMobile
- 官网 https://jquerymobile.com/
- 教程 http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html
Sizzle
- 官网 https://sizzlejs.com/
Zepto
- 官网 http://zeptojs.com/
- 与jquery区别: https://www.zhihu.com/question/25379207
原理
- jq本质是一个闭包 (立即执行函数)
- 为了避免多个框架的冲突
- jq如何让外部访问内部定义的局部变量
- window.JQuery=window.$=JQuery
- jq为什么要给自己传递window参数
- 为了方便后期压缩代码;为了提升查找的效率
- jq为什么要给自己传递undefined参数
- 为了后期压缩代码
- ie9以下的浏览器undefined可以被修改,为了保证内部使用的und不被修改,所以需要接收一个正确的und
$()
- 传入‘’ null undefined NaN 0 faLse,返回空的jq对象
- 传入字符串:
- 代码片段:会将创建好的dom元素存储到jq对象中返回
- 选择器:会将找到的所有元素存储到jq对象中返回
- 传入数组:会将数组中存储的元素依次存储到jq对象中返回
- 其他:会将传入的数据存储到jq对象中返回
(function(w,undefined){
//工厂
function jQuery(selector,context){
return new jQuery.fn.init(selector,context)
}
//给原型提供一个简写方式
jQuery.fn=jQuery.prototype={
constructor: jQuery,
length:0,
toArray:function(){return slice.call(this)},
each:function(){},
map...
};
//init才是真正的构造函数
var init=jQuery.fn.init=function(selector,context){
...
};
//把构造函数的原型,替换成jq工厂的原型
//这么做是为了实现jq的插件机制,让外界可以通过jq方便的进行扩展
init.prototype=jQuery.fn;
w.jQuery=w.$=jQuery;
})(window)