本帖最后由 森111 于 2019-1-4 10:37 编辑
JQueryJQuery基础==- !!!写在前面:jquery中调用this一定要加上$(this)!!!!== 概念 快速入门 目前jQuery有三个大版本:
1.x:兼容ie678,使用最为广泛的,官方只做BUG维护,
功能不再新增。因此一般项目来说,使用1.x版本就可以了,
最终版本:1.12.4 (2016年5月20日)
2.x:不兼容ie678,很少有人使用,官方只做BUG维护,
功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x,
最终版本:2.2.4 (2016年5月20日)
3.x:不兼容ie678,只支持最新的浏览器。除非特殊要求,
一般不会使用3.x版本的,很多老的jQuery插件不支持这个版本。
目前该版本是官方主要更新维护的版本。最新版本:3.2.1(2017年3月20日)
!!!注意:jquery-xxx.js与jquery-xxx.min.js的区别
1.jquery-xxx.js:开发版本,有良好的格式,便于程序员读取源码
2.jquery-xxx.min.js:生产版本,没有缩进和换行,但体积比开发版本小的多,导入时使用min版本 jquery-xxx.min.js==JQuery对象和JS对象的转换== 1. jq --> js:jq对象[索引] 或 jq对象.get(索引)
2. js --> jq:$(js对象)
详解:jq对象是一个Object对象,其本质是一个数组
jq对象可以直接操作数组中的所有对象基本语法 1.JQuery写法(以onclick为例)
$("#b1").click(function(){...})
2.JS写法
document.getElementById().onclick = function(){...})1.JQuery写法
$(function(){..})
2.JS写法
window.onload = function(){..}
3.两者的区别
window.onload只能定义一次,如果定义了多次,下面的代码将覆盖上面的代码
$(function)可以定义多次1.JQuery写法(以改变背景色为例)
CSS写法:$("#div1").css("background-color","red")
DOM写法:$("#div1").css("backgroundColor","pink")
2.JS写法
DOM写法:document.getElementById("div").style.backGroundColor = "pink"==选择器==:筛选具有相似特征的元素(标签) $("html标签名")
获得所有匹配标签名称的元素$("#id")
获得指定id的元素$(".class")
获得指定类名的元素$("元素1,元素2")$("A B")"
选择A元素内部的所有B元素$("A>B")"
选择A元素内部的所有B直接子元素$("A[属性名]")"
选择具有指定属性的A元素$("A[属性名='值']")"/$("A[属性名!='值']")/$("A[属性名^='值']")/$("A[属性名$='值']")/$("A[属性名*='值']")
选择具有指定属性及属性值的A元素/选择不具有指定属性及属性值的A元素/选择以值开始的元素/选择以值结束的元素$("A[属性名A='值A'][属性名B='值B"]...)"
选择具有指定属性及值的A元素:first
获得选择的元素中的第一个元素
例:${"div:first"}:选择第一个div标签:end
获得选择的元素中的最后一个元素:not(selector)
不包括指定内容的元素
例:${"div:not(.one)"}:选择类不为one的div标签:even
选择索引为偶数的元素,从0开始计数:odd
选择索引为奇数的元素,从0开始计数:eq(index)
指定索引元素:gt(index)
大于指定索引元素:lt(index)
小于指定索引元素:header
获得标题(h1~h6)元素,固定写法:enable
获得可用元素:disable
获得不可用元素:checked
获得单选/复选框选中的元素:selected
获得下拉框选中的元素1.html():获取/设置元素的标签体内容
2.text():获取/设置元素的标签体中的纯文本内容
3.val():获取/设置元素的属性值1.通用属性操作
1) attr():获取/设置元素的属性值
2) removeAtte():删除属性
3) prop():获取/设置元素的属性值
4) removeProp():删除属性
attr()和prop()的区别:如果操作的是元素的固有属性,建议用prop();如果操作的是元素的自定义属性,建议使用attr();
2.对class属性操作
1) addClass():添加class属性值
2) removeClass():删除class属性值
3) toggleClass():切换class属性
如果不存在对应值的class属性就添加
如果存在对应值的class属性就删除
3.样式属性操作
css():获取/设置元素的样式1.主对象.xx(新对象) 记这个即可1) append():父元素将子元素追加到末尾 -对象1.append(对象2):将对象2添加到对象1的内部,并在末尾
2) prepend():父元素将子元素追加到开头 -对象1.prepend(对象2):将对象2添加到对象1的内部,并在开头
3) insertAfter():添加元素到对应的元素后边 -对象1.insertAfter(对象2):将对象1插入到元素2的后边
4) insertBefore():添加元素到对应的元素前边 -对象1.insertBefore(对象2):将对象1插入到元素2的前边
2.新对象.xx(主对象)1) appendTo():将子元素添加到父元素的末尾 -对象1.appendTo(对象2):将对象1添加到对象2的内部,并在末尾
2) rependTo():将子元素添加到父元素的开头 -对象1.prependTo(对象2):将对象1添加到对象2的内部,并在开头
3) after():将元素添加到对应元素的后边 -对象1.after(对象2):将对象2添加到对象1的后边
4) before():将元素添加到对应元素的前边 -对象1.before(对象2):将对象2添加到对象1的前边1. remove():移除元素
2. empty():清空对象的所有后代元素,但是保留当前
JQuery高级动画效果 JQuery提供了三种方式显示和隐藏元素 相当于ppt里面换页的动画效果 参数
1.speed:动画的速度. 可以传入三个预定义的值("slow","normal","fast"),或传入毫秒值
2.easing:用来指定切换效果 - swing(默认):动画执行时效果是 先慢,中间快,最后慢 - linear:动画执行的速度是匀速的
3.fn:在动画完成时执行的函数,每个元素执行一次
1.show([speed,[easing],[fn]]) 例: show("slow","swing",functoin(){alert("显示了"})
2.hide([speed,[easing],[fn]]) 例: hide("slow","swing",functoin(){alert("隐藏了"})
3.toggle([speed,[easing],[fn]]) 例:show("slow","swing",functoin(){alert("切换了"})
1.slideDown([speed,[easing],[fn]])
2.slideUp([speed,[easing],[fn]])
3.slideToggle([speed,[easing],[fn]])
1.fadeIn([speed,[easing],[fn]])
2.fadeOut([speed,[easing],[fn]])
3.fadeToggle([speed,[easing],[fn]])
遍历 for(var i=初始值;条件;步长)
jq的遍历方式 1.jq对象.each(callback)
callback:每个元素要执行的函数
例:注意!跳出循环和js写法的区别!!!
$("#city li").each(function(index,element){
if("上海"==$(element).html()){
//如果当前function返回为false,相当于break,跳出循环 //如果当前function返回值为true,相当于continue,结束本次循环
return false; }
alert(index+":"+element.innerHTML);
});
$.each(object,[callback])和jq对象.each(callback)的区别
1.$.each的object可以传js数组对象
3.0版本之后提供的方式for(li of $("#city li"))了解即可
事件绑定 jq对象.事件方法(回调函数);
注意:如果想给一个对象绑定多个事件,可以使用链式编程,但是不建议写很多个
-->jq对象.事件方法(回调函数).事件方法2(回调函数)
1.jq对象.on("事件名称",回调函数)
2.jq对象.off("事件名称") - 如果off()中不传参数,则会解绑jq对象的所有事件
jq对象.toggle(fn1,fn2)- 当单击jq对象会执行fn1,第二次点击会执行fn2
- 注意:1.9版本之后.toggle()方法删除,jQuery Migrate插件可以恢复此功能,在导入jquery之后再引入migrate
插件 作用:增强JQuery的功能 实现方式 1.$.fn.extend(object)
1.含义:
对象级别的插件
增强通过JQuery获取的对象的的功能 如:$("#id")
2.语法:
$.fn.extend({
函数名称:function(参数列表){
函数体;
},函数名称2:function(参数列表){
函数体2;
} })
1.含义:
全局级别的插件
增强JQuery对象自身的功能
如:$
2.语法:
$.extend({
函数名称:function(参数列表){
函数体;
},函数名称2:function(参数列表){
函数体2;
} } )
1.定义JQuery的对象插件//使用JQuery插件,给jq对象添加一个check()选中所有复选框的方法;定义了之后所有的jq对象都可以调用这个方法
$.fn.extend({
check:function(){
//让复选框选中
//this:调用该方法的jq对象
this.prop("checked",true)
}
unckeck:function(){
//让复选框不选中
this.prop("checked",false)
}})
//对全局拓展方法,求2个值的最大/最小值
$.extend({
max:function(a,b){
return: a>=b ? a:b;
},
min:function(a,b){
return: a<=b ? a:b;
}
})
调用:$.max(4,3) 返回值为4
|