jq是函数式编程,所以获取元素就有如下形式:
$("#id");相当于js中document.getElementById("id");因为jq中不需要=,所以本文之后用=代替"相当于js中"这句话.
$(".class")=document.getElementsByClassName("class");
$("tag")=document.getElementsByTagName("tag");
可以看出,jq作为js库相比后者在写法上大幅度简化了,所以jq比起js要简单得多,相当多.使用jq开发效率高很多,而且不存在浏览器兼容问题.这是因为jq其实是用js写的,jq源码在用js写的过程中实际上就包括了所有浏览器的兼容方案.
接下来继续介绍jq的语法;
$(function(){});=window.onload=function(){}
$($("tag").html());=document.getElementsByTagName("tag").innerHTML("");
$($("tag").find("#id/.class/tag"));=document.getElementsByTagName("tag").document.getElementsByTagName("tag")/document.getElementsByClassName("class")/document.getElementById("id");在节点下查找某元素.
index(),索引 表示在兄弟节点中的位置;
has(),包含 在节点内部查找某元素.
filter(),过滤 例子filter($("tag"));过滤名为tag的元素,即获取tag元素
not(),反过滤 和上面的相反.
next(),下一个兄弟节点
prev(),上一个兄弟节点
attr(),操作元素属性值,例子$("tag").attr("title","哈哈");把tag标签的title属性值改为哈哈.
eq() 下标 相当于数组里的下标
addClass()给节点添加class
removeClass()删除class
append()添加某节点为某节点最后一个子节点.例如$("tag").append("tag1");添加tag1为tag子节点的最后一个.
appendTo()把某节点添加为某节点最后一个子节点,例如$("tag").append("tag1");把tag添加为tag1子节点的最后一个.
注意:这里的append()和appendTo()操作的对象不同,前者操作括号里的节点,后者则相反操作该方法前面的节点.
prepend()和prependTo()同上,意为添加为子节点首位.
insertBefore()和before()也是,意为把某节点插入(剪切)到某节点之前
至于insetAfter()和after()同样,意为把某节点插入(剪切)到某节点之后
jq中对同一节点的一系列操作可以简化节点,直接在第一个节点后追加 例如;
$("tag").click(function(){});
$("tag").mouseover(function(){});
$("tag").mouseout(function(){});
可以简化为$("tag").click(function(){}).mouseover(function(){}).mouseout(function(){});
这个特点称之为jq的链式操作.
remove(),不需要参数,移除节点/变量
on(),添加事件 参数为事件,可多个参数.例如:
$("tag").on("click",function(){}); 第一种 适用于单个事件一切场景
$("tag").on("click mouseover",function(){});第二种 适用于两种事件采用同一函数的场景
$("tag").on({click:function(){},mouseover:function(){}});第三种 适用于多个事件一切场景
off(),移除事件,参数为要移除的事件,不写默认移除所有事件
对事件进行操作,jq中是直接
$("div").click(function(ev){
ev.pageX ev就是事件对象,pageX和js中clientX作用相仿,不过不同的是前者相对于文档,后者相对于可视区域,Y同理
});
ev对象有一些方法:
which:和js中keyCode一样,获取键盘值,不同的是,which连鼠标的值也可以获取
preventDefault(),阻止默认时间,stopPropagation(),阻止冒泡,return false;既阻止默认又阻止冒泡.one()事件只执行一次
scrollTop(),获取节点垂直滚动距离,left为水平距离
$("<div>div</div>")创建节点,相当于js中
document.creatElement("div");
document.getElementsByTagName("div").innerHTML("div");
可以说jq大幅度,简化了js的操作.
offset().left/top 获取元素到浏览器窗口的left值或top值
position() 把当前元素转化为类似定位的形式
offsetParent()获取定位的父级元素
parent()获取父级元素
val()获取元素value值
size()类似于js中的length
each(function(i,value){}),jq中的for循环,i代表下标,value代表每一个元素
hover(function(){},function(){})前一个鼠标移入,后一个鼠标移出
show()和hide(),jq的运动效果,同时改变width和height还有透明度. 显示和隐藏 参数为时间,单位毫秒
fadeIn()和fadeOut(),同上,只改变透明度 分别为淡入,淡出
fadeTo(1000,0.5),具体设置透明度,时间1秒,透明度0.5
slideDown()和slideUp无参数,分别为下拉,上拉 运动效果.
get(),把jq转化为js,例如$("#div1").get(0).innerHTML这样在同一行里就实现js和jq同时存在,需要注意参数为一个集合的下标,如果一个就写0,不写默认选中集合中所有元素.同时有一个简写用[i]可以代替get[i];
remove()和detach(),前者彻底删除节点,包括与事件的绑定关系(彻底删除,粉碎存在痕迹),而后者仅仅删除节点,保留其他东西(相当于回收站,可以恢复如初)
outerWidth获取任意元素的宽度,而js中offsetWidth获取不到隐藏元素的宽度例如display:none其他类似高度height也一样有区别
text(),获取或设置文本,类似html()但仅获取或设置文本
$(function(){});与window.onload=function(){}的区别是,前者仅dom加载完就执行,后者需要全部页面加载完才执行,然而并不需要这样做,所以jq的性能更好,速度更快
parents(),获取元素祖先节点,参数为具体某一个节点,数目不限
closest(),获取最近的指定祖先节点,必须设置参数,因为只能找一个元素
siblings()获取所有兄弟节点,参数也是筛选节点
nextAll()获取下面所有兄弟节点,参数筛选
prevAll()上面兄弟节点,参数筛选
上述方法的All改为utill获取直到某节点停止,参数筛选
clone();在用append()等移动节点的操作时通常是剪切,但$(''#div1").clone().append("#div2")是复制不会改变原div2.如果加参数true,就连事件绑定关系等一切完美复制.
wrap();包装,$("#div1").wrap("#div2")即为在div2外面包一个div1
wrapAll();整体包装,包装一个集合,把all换inner为内部包装,正好相反,
unWrap();删除包装,但body不受此约束.
add(),并集 var oDiv=$("#div1").add("span")同时选定div1和span
slice()和数组用法相似
serialize(),将数组解析为字符串例如:
<input type="texe" name="a" value="1">
<input type="texe" name="b" value="2">
<input type="texe" name="c" value="3">
$('form').serialize(1);
即为a=1&b=2&c=3;
serializeArray()是转化为数组形式即:
[
{name:"a",value:"1"},
{name:"b",value:"2"},
{name:"c",value:"3"}
]
animate()运动,类似js中的startMove,参数用json写 参数有四个:
1.参数用json格式即{width:300px,height:200px}
2.时间,上述例子后面没写时间,所以默认为400毫秒,,这是第二个参数animate({width:300px,height:200px},300)就设置300毫秒
3.运动形式,有两个默认为swing(慢快慢),linear(匀速).当然还有其他的需要进一步学习才能知道
4.回调函数:在运动结束时执行animate({width:300px,height:200px},300,swing,function(){});
stop(),默认阻止当前运动,参数true可以阻止后续运动,立即停止到当前运动指定目标点
finish()立即停止到所有运动指定目标点
delay(1000)延迟一秒钟
delegate(),事件委托 举例:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
如果给上述li节点绑定事件函数,一般的写法为$("li").on("click",fuction(){});利用事件冒泡出现了一个事件委托的方法:$("ul")delegate("li","click",function(){});和前者效果是一样的,但事件绑定在ul上,利于性能优化
阻止事件委托:undelegate();
trigger(),事件 主动/自动 触发
ev.data事件数据 例如$("li").on("click",{name:"hello"},function(){});其中,ev.data可以代表name:"hello"这个数据,而ev.data.name就代表hello.
ev.target获取事件源
ev.type事件类型
直到目前为止,我们学习的仅仅是$()也就是jquery对象下的方法,但是这个库最有用的其实是它的工具插件,先来讲讲工具吧
$其实就是jQuery的简写,$().css()这种只能给jq使用.但是$.xx()不仅能给jq用,甚至原生js也可以使用,所以$.xx()被称为工具方法
$.type()判断数据类型 类似js中的typeof但前者判断的数据类型更多,数据分类更具体,简单地说就是js写法的完美版
$.trim()去掉空格
$.inArray()类似indexof例子:
var arr=["a","b","c"];
$.inArray("a",arr);返回的值是一个数字,就是下标0,如果找一个数组里不存在的元素,那就返回-1.
$.proxy()改变this指向,例如
function show(n1,n2){
$.proxy(show,document,1,2 )(3,4);这里就改变show的this指向为document,并且直接给出参数,也可以在后面跟括号给参数,也可以两者混用.
}
前面提到了$和jquery其实是一回事,但是$并不是jquery的专属简写,实际上很多库都使用了$作为简写.那么如何解决冲突呢?
noConflict()防止冲突,例如
var m=$.noConflict(); 那接下来m就可以替代$得作用了
parseJSON ()将字符串转为json格式
makeArray()将类数组转为真数组,什么是类数组呢?var m=$("div").$("li");这里m实际上就是类数组,因为li很可能有多个,但类数组是不能使用数组的方法的,所以用makeArray()转换为真数组,就可以使用数组的方法.
jquery的插件:
即便jquery已经如此强大,但有时候我们需要的效果jq并没能实现,所以通过插件可以补充jq
jq插件有两种,一种是工具插件,众所周知jq最负盛名的是它工具库的作用,当然插件也是其关键的一方面
$.extend(function(){}),这样设置就可以了
$.fn.extend(function(){})这种是第二种插件形式,即jq对象下的插件,两种插件因为调用的形式不同,一个是$().xx(),一个是$.xx(),所以可以存在同名插件的情况
关于jq的其他东西,直接去看中文文档就可以了 ,道理都是相似的
