jQueryday02笔记.docx
- 文档编号:28384907
- 上传时间:2023-07-10
- 格式:DOCX
- 页数:15
- 大小:431.42KB
jQueryday02笔记.docx
《jQueryday02笔记.docx》由会员分享,可在线阅读,更多相关《jQueryday02笔记.docx(15页珍藏版)》请在冰豆网上搜索。
jQueryday02笔记
1jQuery回顾
●基本:
jQuery(""),$("")
size()/length
●选择器
基本#id、div、.class、*、1,2,3
层次空>+~
基础过滤:
first:
last:
not:
even:
odd
内容:
constains:
empty:
has():
parent
可见:
hidden:
visible
属性:
[属性][属性=值][属性!
=值][属性^=值][属性$=值][属性*=值][属性=值][属性=值]
子元素:
nth-child/first-child/last-child/only-child
表单:
input/:
text:
password:
file:
checkbox:
radio:
button:
reset:
submit:
image
表单属性:
disabledenabled/selectedchecked
总体格式$("xxxx:
xxx")
●属性
attr(key,value){json}
removeAttr(name)
addClass/removeClass/toggleClass
text()/html()/val()
css()name|key,value|{json}
●文档
内部:
append()后,prepend()前
外部:
before()after()
替换:
replaceAll()
删除:
empty()
2筛选
大体格式:
$("xxx").xxx()
2.1过滤
//1.1eq()等于
varv1=$("tr").eq(5).html();
//alert(v1);
//1.2first()第一个
varv2=$("tr").first().html();
//alert(v2);
//1.3last()最后一个
varv3=$("tr").last().html();
//alert(v3);
//1.4hasClass()是否使用样式
//varv4=$("input[name='username']").hasClass("textClass");
varv4=$("input[name='password']").hasClass("textClass");
//alert(v4);
//1.5filter()过滤
varv5=$("tr").filter("[id]").size();
//alert(v5);
//1.6is判断
varv6=$("input[name='hobby'][value='2']").is(":
checked");
//alert(v6);
//1.7has有
varv7=$("tr").has("td").size();
//alert(v7);
//1.8not删除指定的内容
varv8=$("tr").not($("tr[id]")).size();
//alert(v8);
//1.9slice获得范围的内容,类似subString,可以截取数组
varv9=$("tr").slice(1,2).html();
alert(v9);
2.2查询
//1.1children()表示匹配元素的每一个元素的所有子元素
varv1=$("tr").children().size();
//alert(v1);
//1.2closest()从自己开始查询父元素
varv2=$("input[name='username']").closest("tr").html();
//alert(v2);
//1.3parent()所有匹配的唯一父类
varv3=$("input").parent();
//alert(v3);
//1.4parents()
varv4=$("input").parents("table");
//alert(v4);
/*closest和parents的主要区别是:
1,前者从当前元素开始匹配寻找,后者从父元素开始匹配寻找;
2,前者逐级向上查找,直到发现匹配的元素后就停止了,后者一直向上查找直到根元素,然后把这些元素放进一个临时集合中,再用给定的选择器表达式去过滤;
3,前者返回0或1个元素,后者可能包含0个,1个,或者多个元素。
*/
//1.5find在当前元素查询子元素
varv5=$("#tr1").find("input").attr("name");
//alert(v5);
//1.6next下一个兄弟
varv6=$("#tr2").next().html();
//alert(v6);
//1.7next所有兄弟,到最后停止
varv7=$("#tr2").nextAll().size();
//alert(v7);
//1.8nextUntil所有兄弟,到指定位置停止
varv8=$("#tr2").nextUntil("#tr6").size();
//alert(v8);
//1.9offsetParent()获得第一个定位父类
//*position设为relative或者absolute
//1.10parents()
varv10=$("input").parentsUntil("table");
//alert(v10);
//1.11prev()前面的兄弟
varv11=$("#tr2").prev().html();
//alert(v11);
//1.12prevAll()前面所有兄弟
varv12=$("#tr6").prevAll().size();
//alert(v12);
//1.13prevUntil前面所有兄弟,到指定位置停
varv13=$("#tr6").prevUntil("#tr1").size();
//alert(v13);
//1.14siblings所有兄弟
varv14=$("#tr6").siblings().size();
//alert(v14);
2.3串联
//1.1add将多个结果连接一起
varv1=$("#tr1").add("#tr2").size();
//alert(v1);
//1.2andSelf()将自己添加数组
varv2=$("#tr1").find("td").andSelf().size();
alert(v2);
//1.3contents()获得所有的子标签,获得对象
//*text()获得标签体文本内容。
3事件
3.1页面加载
●以后操作,大部分都应该在页面加载正常之后执行。
●ready方法
$(document).ready(function(){.....});
jQuery(document).ready(function(){.....});
●简化版
$(function(){...});
jQuery(function(){....});
jQuery(function($){函数体都可以使用$,不用考虑冲突的问题。
});
3.2常见事件
●JavaScript中的事件为onxxx,例如:
onclick
●在jQuery使用xxx,没有on,例如:
click
3.3事件处理
●on1.7提供新功能,用于取代之后使用功能(.bind(),.delegate(),和.live())
例如:
$("input").on("click",function(){...});
off与on对应,进行事件解绑。
●bind用于事件绑定。
绑定时间长期有效。
unbind解绑
●one给对象绑定一次事件。
●trigger()触发绑定时间
●triggerHandler只触发jQuery绑定,不执行浏览器默认(
事件冒泡:
3.4事件委托
live:
给指定对象添加事件。
如果给div绑定事件,当前页面之后添加所有div都具有该事件。
die:
取消live进行绑定。
delegate给当前对象指定子对象设置事件。
undelegate取消
3.5事件切换
hover:
是两个事件mouseover、mouseout结合。
鼠标移进和移出。
toggle:
在多个函数之间click切换。
4效果
4.1基本(显示/隐藏)
常见用法:
$(...).show()
$(...).hide()
$(...).show(1000,function(){执行完成之后执行})
4.2滑动
slideDown从上往下
slideUp从下往上
slideToggle
4.3淡入淡出
fadeIn淡入(透明--实体)
fadeIn淡入(实体--透明)
fadeTo设置指定透明度
fadeToggle切换
5ajax
5.1介绍
1.$.ajax最底层的方法,需要更多设置,进行更具体使用。
但操作繁琐。
2.提供3完成ajax操作
load()任何jQuery对象都可以发送请求url,可以设置请求参数data,请求完成之后将执行回调fn
注意:
不能设置请求方式。
采用默认设置。
如果有data使用post
如果没有data使用get
回调函数:
data:
返回内容
textStatus:
代表请求状态的,其值可能为:
succuss,error,notmodify,timeout4种)
XMLHttpRequest对象(手动发送核心对象)
$.get()处理get请求
$.post()处理post请求。
url,[data],[callback],[type]
url:
请求路径
data:
请求参数,使用键值对方式,及使用json数据。
例如:
{"username":
"jack","password":
"1234"}
callback:
回调函数,响应完成之后将执行的。
回调函数参数获得响应内容的。
type:
返回内容格式,xml,html,script,json,text,_default。
3.$.getScript()/$.getJSON()使用这两个方式可以对程序优化、获得指定数据等。
$.getScript()通过HTTPGET请求载入并执行一个JavaScript文件。
在程序运行之后,需要特定js时,在进行相应加载。
$.getJSON()通过HTTPGET请求载入JSON数据
5.2跨域操作
请求路径格式:
协议:
//域名:
端口/路径
协议、域名、端口任何一个不一致,表示属于不同的域,默认情况JavaScript不支持跨域操作。
访问方:
数据方:
发送json,指定数据
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- jQueryday02 笔记