jQuery简介

发布时间:2016-12-10 1:27:44 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"jQuery简介",主要涉及到jQuery简介方面的内容,对于jQuery简介感兴趣的同学可以参考一下。

jQuery 是一个JavaScript函数库。支持HTML元素选取和操作、CSS操作、JS特效与动画、DOM处理、Ajax等。 导入jQuery就像导入一段外部js代码一样简单,可以使用MS或Google的CDN进行加载。 1 jQuery基础 jQuery采用了CSS选择器的语法来选择HTML元素,基础语法为$(selector).action() 示例 $(document).ready(function(){ //当文档加载完毕后执行... }); 选择器使用了CSS的各种选择器,如元素选择器、类选择器、ID选择器、属性选择器。 在选择到元素后设置CSS只需要使用css()方法即可。 jQuery专门为事件处理进行了封装,只需要调用选择器上定义的事件方法即可。示例 ${"#id"}.click(function() {...}) 除此以处,jQuery定义了一系列方法对浏览器进行抽象,对各种常用操作进行封装。 2 jQuery效果 2.1 隐藏与显示 hide(speed,callback)   隐藏一个元素,speed为slow,fast或毫秒 show(speed,callback)   显示一个元素 toggle(speed,callack)  让元素在隐藏与显示之间切换 2.2 淡入淡出 fadeIn(speed,callback)             设置隐藏元素淡入 fadeOut(speed,callback)            设置显示元素淡出 fadeToggle(speed,callback)         设置元素自动切换淡入淡出 fadeTo(speed,opacity,callback)     设置元素渐变为给定的不透明度,值在0-1间 2.3 滑入滑出 slideDown()    slideUp() slideToggle() 2.4 动画 animate({params},speed,callback) 设置动画,参数设置形成动画的CSS属性,其中可以设置多个属性。 jQuery提供针对动画的队列功能,对于编写的多个animate调用,jQuery会创建包含这些方法调用的内容队列,然后逐一执行。 示例1: div.animate({left:'100px'},"slow"); 示例2: $("button").click(function(){       $("div").animate({       height:'+=150px',       width:'+=150px'     }); }); stop(all,toEnd)  用于停止相应的变化。all表示清除动画队列,默认为FALSE,toEnd规定是否完成当前动画,默认为False。 2.5 杂项 如果想在变化完成后执行操作,则应该定义callback函数,而不能在执行动作之后,接着执行那个操作,这种情况下,有可能会先执行变化后的动作,而不是先执行变化。 如果对一个元素要执行多个操作,jQuery支持链式语法,可以节约每都查找元素的开销。示例: $("#p1").css("color","red")         .slideUp(2000)         .slideDown(2000); 3 jQuery操作HTML 3.1 获取与设置元素相关文本与属性 text()      获取或设置选择元素的文本,会将其中的html标签删除,当无参数时为获取,有参数时为设置 html()      获取或设置选择元素的文本,可以包含html标签 val()       获取或设置表单字段的值 attr(key)   获取指定属性的值。可以一次设置多个值。放到一个json对象中即可。 上面4个函数,也可以传递一个函数来进行新值的设定,回调函数有两个参数,选定元素在当前选择集合中的索引下标,以及旧值。新值通过函数返回值返回。示例: $("button").click(function(){   $("#w3s").attr("href", function(i,origValue){     return origValue + "/jquery";   }); }); 3.2 添加 append(str)  在被选中元素结尾插入内容,块内插入。 after(str)   在被选中元素后插入内容,块外插入。 prepend(str) 在被选中元素头前插入内容,块内插入。 before(str)  在被选中元素前插入内容,块外插入。 示例:$("p").append("Some appended text."); 3.3 删除 remove()   删除被选元素及子元素,允许接收一个选择器,进行过滤删除 empty()    删除被选元素的子元素 示例:$("div").remove(".italic"); 3.4 操作类 addClass()     向选中元素添加类,可多个 removeClass()  从选中元素删除类,可多个 toggleClass()  对被中元素进行添加/删除类的切换操作 $("button").click(function(){   $("h1,h2,p").toggleClass("blue"); }); 3.5 css()方法 css(key)         获取选择元素的指定css属性 css(key,value)   设置选择元素指定的css属性,可多个 $("p").css({"background-color":"yellow","font-size":"200%"}); 3.6 尺寸 width()         设置或返回元素的宽度,不包括内边距、边框和外边距 height()         innerHeight()   返回元素的宽度,包含内边距 innerWidth() outerWidth()    返回元素的宽度,包含内边距和边框 outerHeight() outerWidth(true) 方法返回元素的宽度(包括内边距、边框和外边距) outerHeight(true) 方法返回元素的高度(包括内边距、边框和外边距) 4 jQuery遍历DOM 最常用的遍历是利用DOM的树形结构来进行。 parent()          返回元素的直接父元素 parents()         返回元素的所有父辈元素,参数可以指定元素的标签名以过滤 parentsUntil(tag) 返回元素的父辈元素,同时是tag的后辈的元素 示例: $(document).ready(function(){   $("span").parents("ul"); }); children()     返回元素的所有后代元素,参数也可以指定过滤器 find(tag)      查找元素的所有后代元素,参数也可以指定过滤器 示例: $(document).ready(function(){   $("div").children("p.1"); }); siblings()   返回元素的所有兄弟元素,参数可使用过滤器 next()       返回元素的下一个兄弟元素 nextAll()    返回元素的所有后续兄弟元素 nextUntil()   prev()  prevAll() prevUntil()   first()    返回选中元素集中第1个 last()     返回选中元素集中第-1个 eq(n)      返回选中元素中索引位置为n的元素 filter()   对选中元素进行过滤,返回匹配的元素 $(document).ready(function(){   $("p").filter(".intro"); }); not()       filter的反义方法,返回不匹配的元素 5 jQuery for Ajax 5.1 基本ajax var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari   xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() {   if (xmlhttp.readyState==4 && xmlhttp.status==200)   {     document.getElementById("myDiv").innerHTML=xmlhttp.responseText;   } } xmlhttp.open("GET","test1.txt",true); xmlhttp.send(); 准备状态有5个值,分别为 0:请求未初始化,1:服务器已经连接 2:请求已接收 3:请求处理中 4:请求已经完成响应就绪 5.2 使用jQuery的Ajax load(url,data,callback)   用于异步加载数据,可设置回调函数,callback(resp,status,xhr) $.get(url,callback)       用于异步发送get请求,回调函数:callback(data,status) $.post(url,data,callback) 用于异步发送post请求,回调函数:callback(data,status) 示例: $("button").click(function(){   $.post("demo_test_post.asp",   {     name:"Donald Duck",     city:"Duckburg"   },   function(data,status){     alert("Data: " + data + "\nStatus: " + status);   }); }); 6 杂项 $变量表示jQuery对象,如果遇到命名冲突,noConflict()方法用于释放对$符号的占用。 但依然可以使用jQuery全名来使用jQuery库,同时可以创建自己的简写。如var jq = $.noConflict(); 7 jQuery参考手册 http://api.jquery.com/ http://www.w3school.com.cn/jquery/jquery_reference.asp

上一篇:java for循环双层以上嵌套break新方法
下一篇:Mac Intellij 13 自定义live template自动补全简写

相关文章

关键词: jQuery简介

相关评论