首页 > 代码库 > jquery介绍
jquery介绍
1、jQuery
(1)jQuery简介
是一个js框架(.js文件)，它的最大特点是，使用选择器(
借鉴了css选择器的语法)查找要操作的节点，并且将这些
节点封装成一个jQuery对象，通过调用jQuery对象提供的
属性或者方法来操作底层的节点。这样做的好处是：
一是不用考虑浏览器兼容性问题，另外一个，
代码会大大简化。
(2)编程的基本步骤 first.html
step1,利用选择器查找节点
step2,调用jQuery对象提供的属性或者方法来完成相应的
操作。
(3)jQuery对象与dom对象的相互的转换
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="js/jquery-1.4.3.js"></script><script type="text/javascript"> function f1(){ //变量之所以用"$"开头，只是一个 //编程习惯，为了强调这是一个jQuery对象。 //var $obj = $(‘#d1‘); //$obj.css(‘color‘,‘red‘).css(‘font-size‘,‘60px‘); //$obj.css({‘color‘:‘red‘,‘font-size‘:‘80px‘}); $(‘#d1‘).css({‘color‘:‘red‘,‘font-size‘:‘80px‘}); } //dom对象 --- 》 jQuery对象 function f2(){ var obj = document.getElementById(‘d1‘); var $obj = $(obj); $obj.html(‘hello java‘); } //jQuery对象 ---》dom对象 function f3(){ var $obj = $(‘#d1‘); //方式一 //var obj = $obj.get(0); //方式二 var obj = $obj.get()[0]; obj.innerHTML = ‘hello java‘; }</script></head><body style="font-size:30px;font-style:italic;"> <div id="d1">hello jQuery</div> <a href="javascript:;" onclick="f3();">Click Me</a></body></html>
1)dom对象 --- 》 jQuery对象
$(dom对象);
2) jQuery对象 ---》dom对象
方式一: $obj.get(0);
#id
.class
element
selector1,selector2..selectorn
*
2)层次选择器 sel
ector/s2.html
select1 select2在给定的祖先元素下匹配所有的后代元素
select1>select2在给定的父元素下匹配所有的子元素
select1+select2匹配所有紧接在 select1元素后的select2元素
select1~select2匹配 select1元素之后的所有select2元素
3)过滤选择器
(1)基本过滤选择器 selector/ s3.html
:first
:last
:not(selector)
:even
:odd
:eq(index)
:gt(index)
:lt(index)
(2)内容过滤选择器 selector/s4.html
:contains(text) 匹配包含给定文本的元素
:empty 匹配所有不包含子元素或者文本的空元素
:has(selector) 匹配含有选择器所匹配的元素的元素
:parent匹配含有子元素或者文本的元素
(3)可见性过滤选择器 selector / s5.html
:hidden 匹配所有不可见元素，
或者type为hidden的元素
:visible 匹配所有的可见元素
(4)属性过滤选择器 selector / s6.html
selector[attribute]
selector[attribute=value]
selector[attribute!=value]
(5)子元素过滤选择器(下标从1开始) selector / s7.html
:nth-child(index/even/odd)
(6)表单对象属性过滤选择器 selector / s8.html
:enabled
:disabled
:checked
:selected
4)表单选择器
:input
:text
:pasword
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden
节点的html内容: html()
节点的text内容:text()
节点的属性值:attr()
节点的值:val()
2)、创建节点 dom /d2.html
$(html)
3)、插入节点 dom / d2.html
append():向每个匹配的元素内部追加内容
prepend():向每个匹配的元素内部前置内容
after():在每个匹配的元素之后插入内容
before():在每个匹配的元素之前插入内容
4)、删除节点 dom / d3.html
remove()
remove(selector)
empty():清空节点
5)、复制节点 dom / d6.html
clone()
clone(true):使复制的节点也具有行为(将事件
处理代码一块复制)
6)、属性操作 参见 dom / d1.html
读取：attr(‘‘);
设置：attr(‘‘,‘‘) 或者一次
设置多个 attr({"":"","":""});
删除：removeAttr(‘‘)
7) 样式操作 dom / d7.html
获取和设置: attr("class","")或者attr("style","");
追加:addClass(‘‘)
移除:removeClass(‘‘)
或者removeClass(‘s1 s2‘)
或者removeClass()//会删除所有样式
切换样式：toggleClass(‘c1‘),有该样式，就删除，没有，
就添加。
是否有某个样式 hasClass(‘‘)
读取css(‘‘)
设置css(‘‘,‘‘)或者
css({‘‘:‘‘,‘‘:‘‘})//设置多个样式
获得元素偏移信息
offset()
只对可见元素有效
8)、遍历节点 dom /d8.html
children()/children(selector)只考虑子元素，不考虑其它后代元素。
next()/next(selector)下一个兄弟
nextAll()
prev()/prev(selector)上一个兄弟
siblings()/siblings(selector)其它兄弟
find(selector):查找满足selector要求的后代
parent():父节点
过滤元素集
bind(type,fn)
2)绑订方式的简写形式
click(function(){
});
3)合成事件 event / e2.html, e3.html
hover(enter,leave) : 模拟光标悬停事件
toggle(fn1,fn2...)：模拟鼠标连续单击事件
4)事件冒泡
(1)什么是事件冒泡?
子节点产生的事件会依次向上抛出给父节点。
(2) 获得事件对象? event / e5.html
click(function(e){
});
(3)停止冒泡 event / e6.html
event.stopPropagation()
(4)停止默认行为 event / e7.html
event.preventDefault()
5)事件对象的属性
event.type 事件类型(是一个字符串，比如 "click")
event.target:返回事件源(是dom对象!!!)
event.pageX/pageY
6)模拟操作 event / e8.html
(1)作用：通过同时修改节点的宽度和高度来实现显示或者
隐藏的效果。
(2)用法:
show(时间,[callback]);
时间: slow,normal,fast 或者指定一个毫秒数
callback:回调函数，动画执行完毕之后，会调用该函数。
2)fadeIn() fadeOut(): animate/ a2.html
(1)作用：通过改变不透明度
(2)用法同上。
3)slideUp() slideDown() : animate / a1.html
1)作用：改变元素的高度
2)用法同show
4)自定义动画 animate(params,speed,[callback]) animate / a4.html
1)用法:
params: 是一个javascript对象，描述动画结束时，
节点的状态。
speed:速度，单位是毫秒。
1)length属性：dom节点的个数。
2)each(fn(i)):循环遍历每一个元素,this代表被迭代的dom对象
，$(this)代表被迭代的jQuery对象。i表示正在被遍历的那个
节点的下标(从0开始)。
3)eq(index)：返回index+1位置处的jQuery对象
4)index(obj)：返回下标，其中obj可以是dom对象
或者jquery对象。
5)get()：返回dom对象组成的数组
6)get(index)：返回index+1处的dom对象。
var objects = $(document).find(‘.move‘);
objects.each(function(){
if($(this).attr(‘load‘)==$(‘#frameMain‘).attr(‘src‘)){
return;
}
jQuery(this).stop().animate(
{‘left‘: ‘-‘ + settings.marginLeft + ‘px‘},
settings.duration,
settings.easing,
function(){
if(typeof settings.closeFinished == ‘function‘){
settings.closeFinished();
}
}
);
$("p").click( function (event, a, b) {
// 一个普通的点击事件时，a和b是undefined类型
// 如果用下面的语句触发，那么a指向"foo",而b指向"bar"
} ).trigger("click", ["foo", "bar"]);
使用cookie保存
$.cookie(‘style‘,"css/black.css",{expires:365});
var favstyle = $.cookie(‘style‘);
锁住页面
$.blockUI();
解锁
$.unblockUI();
<<adv.html.txt>>
jquery介绍