一段时间没用jquery,都生疏了,摘录下面的基础知识点,以备记忆!
$(document).ready(function(){ });
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
jQuery 事件函数:对应$(selector).action()的后半部分。
<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button>Click me</button> </body> </html>
Event 函数 | 绑定函数至 |
---|---|
$(document).ready(function) | 将函数绑定到文档的就绪事件(当文档完成加载时) |
$(selector).click(function) | 触发或将函数绑定到被选元素的点击事件 |
$(selector).dblclick(function) | 触发或将函数绑定到被选元素的双击事件 |
$(selector).focus(function) | 触发或将函数绑定到被选元素的获得焦点事件 |
$(selector).mouseover(function) | 触发或将函数绑定到被选元素的鼠标悬停事件 |
- 把所有 jQuery 代码置于事件处理函数中
- 把所有事件处理函数置于文档就绪事件处理器中
- 把 jQuery 代码置于单独的 .js 文件中
- 如果存在名称冲突,则重命名 jQuery 库
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button#yincang").click(function(){ $("p#id").hide(1000,function(){alert('bye')}); }); }); $(document).ready(function(){ $("button#xian").click(function(){ $("p#id").show(function(){1000,alert('hello')}); }); }); </script> </head> <body> <button type="button" id='xian'>显示</button> <button type="button" id='yincang'>隐藏</button> <p id="id">这是一个段落。</p> <p>这是另一个段落。</p> </body> </html> 可以使用 toggle() 方法来切换 hide() 和 show() 方法。 $(selector).toggle(speed,callback); <!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").toggle(); }); }); </script> </head> <body> <button type="button">切换</button> <p>这是一个段落。</p> <p>这是另一个段落。</p> </body> </html>
jQuery 拥有下面四种 fade 方法:
- fadeIn()
- fadeOut()
- fadeToggle() jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
- fadeTo() fadeTo() 方法允许渐变的最终结果为给定的不透明度(值介于 0 与 1 之间,0为透明,1为不透明)。
jQuery 滑动方法
通过 jQuery,您可以在元素上创建滑动效果。
jQuery 拥有以下滑动方法:
- slideDown()
- slideUp()
- slideToggle()
jQuery 动画 - animate() 方法
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({left:'250px'}); }); }); </script> </head> <body> <button>开始动画</button> <div style="background:#98bf21;height:100px;100px;position:absolute;"> </div> </body> </html>
jQuery 提供针对动画的队列功能, 这意味着如果您在彼此之后编写多个 animate() 调用,jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。
$("button").click(function(){ var div=$("div"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({'100px',opacity:'0.8'},"slow"); });
可以用下面这种格式代替
div.animate({height:'300px',opacity:'0.4'},"slow").animate({'300px',opacity:'0.8'},"slow");
jQuery stop() 方法用于在动画或效果完成前对它们进行停止。
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideDown(5000); }); $("#stop").click(function(){ $("#panel").stop(); }); }); </script> <style type="text/css"> #panel,#flip { padding:5px; text-align:center; background-color:#e5eecc; border:solid 1px #c3c3c3; } #panel { padding:50px; display:none; } </style> </head> <body> <button id="stop">停止滑动</button> <div id="flip">点击这里,向下滑动面板</div> <div id="panel">Hello world!</div> </body> </html>
Callback 函数在当前动画 100% 完成之后执行。
$(selector).hide(speed,callback) $("p").hide(1000,function(){ alert("The paragraph is now hidden"); });
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容(包括 HTML 标记)
- val() - 设置或返回表单字段的值
$("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); }); $("#btn1").click(function(){ alert("Value: " + $("#test").val()); }); $("button").click(function(){ alert($("#w3s").attr("href")); });
设置DOM值:
$("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>"); }); $("#btn3").click(function(){ $("#test3").val("Dolly Duck"); });
text()、html() 以及 val() 的回调函数, 回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数return 的返回内容作为使用的新值。
$("#btn1").click(function(){ $("#test1").text(function(i,origText){ return "Old text: " + origText + " New text: Hello world! (index: " + i + ")"; }); }); $("#btn2").click(function(){ $("#test2").html(function(i,origText){ return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")"; }); }); $("button").click(function(){ $("#w3s").attr("href", function(i,origValue){ return origValue + "/jquery"; }); });
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
$("p").append("Some appended text."); $("p").prepend("Some prepended text."); $("img").after("Some text after"); $("img").before("Some text before");
如需删除元素和内容,一般可使用以下两个 jQuery 方法:
- remove() - 删除被选元素(及其子元素)
- empty() - 从被选元素中删除子元素
$("#div1").remove();
$("#div1").empty();
jQuery remove() 方法也可接受一个参数,允许您对被删元素进行过滤。
<html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").remove(".italic"); }); }); </script> </head> <body> <p>This is a paragraph in the div.</p> <p class="italic"><i>This is another paragraph in the div.</i></p> <p class="italic"><i>This is another paragraph in the div.</i></p> <button>删除 class="italic" 的所有 p 元素</button> </body> </html>
jQuery 操作 CSS
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些:
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("h1,h2,p").addClass("blue"); $("div").addClass("important"); }); }); </script> <style type="text/css"> .important { font-weight:bold; font-size:xx-large; } .blue { color:blue; } </style> </head> <body> <h1>标题 1</h1> <h2>标题 2</h2> <p>这是一个段落。</p> <p>这是另一个段落。</p> <div>这是非常重要的文本!</div> <br> <button>向元素添加类</button> </body> </html>
您也可以在 addClass() 方法中规定多个类:
$("button").click(function(){ $("#div1").addClass("important blue"); });
jQuery css() 方法
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
$("button").click(function(){ var txt=""; txt+="Width: " + $("#div1").width() + "</br>"; txt+="Height: " + $("#div1").height(); $("#div1").html(txt); });
innerWidth() 方法返回元素的宽度(包括内边距)。
outerWidth() 方法返回元素的宽度(包括内边距和边框)。
outerWidth(true) 方法返回元素的宽度(包括内边距、边框和外边距)。
$("button").click(function(){ $("#div1").width(500).height(500); });
向上遍历 DOM 树
这些 jQuery 方法很有用,它们用于向上遍历 DOM 树:
- parent()
- parents()
- parentsUntil()
$("span").parent();
});
您也可以使用可选参数来过滤对祖先元素的搜索。
$("span").parents("ul");
});
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素,不包括开始也不包括结尾。
$("span").parentsUntil("div");
});
向下遍历 DOM 树
下面是两个用于向下遍历 DOM 树的 jQuery 方法:
- children()
- find()
jQuery children() 方法
$("div").find("span");
});
$("div").find("*");
有许多有用的方法让我们在 DOM 树进行水平遍历:
- siblings()
- next()
- nextAll()
- nextUntil()
- prev()
- prevAll()
- prevUntil()
$("h2").siblings("p");
});
$("h2").next();
});
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("div p").first().css("background-color","yellow"); }); </script> </head> <body> <h1>欢迎来到我的主页</h1> <div> <p>这是 div 中的一个段落。</p> <!--只有这个被选取--> </div> <div> <p>这是 div 中的另一个段落。</p> </div> <p>这也是段落。</p> </body> </html>
eq() 方法返回被选元素中带有指定索引号的元素。索引号从 0 开始,因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素(索引号 1):
<html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("p").eq(1).css("background-color","yellow"); }); </script> </head> <body> <h1>欢迎来到我的主页</h1> <p>我是唐老鸭 (index 0)。</p> <p>唐老鸭 (index 1)。</p> <!--这个被选中--> <p>我住在 Duckburg (index 2)。</p> <p>我最好的朋友是米老鼠 (index 3)。</p> </body> </html>
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。
<html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("p").filter(".intro").css("background-color","yellow"); }); </script> </head> <body> <h1>欢迎来到我的主页</h1> <p>我是唐老鸭。</p> <p class="intro">我住在 Duckburg。</p> <p class="intro">我爱 Duckburg。</p> <p>我最好的朋友是 Mickey。</p> </body> </html>
not() 方法返回不匹配标准的所有元素。提示:not() 方法与 filter() 相反。
jquery ajax请求后台 的简单例子
jQuery.ajax(url,[settings])
概述
通过 HTTP 请求加载远程数据。
jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性。
最简单的情况下,$.ajax()可以不带任何参数直接使用。
注意,所有的选项都可以通过$.ajaxSetup()函数来全局设置。
回调函数
如果要处理$.ajax()得到的数据,则需要使用回调函数。beforeSend、error、dataFilter、success、complete。
- beforeSend 在发送请求之前调用,并且传入一个XMLHttpRequest作为参数。
- error 在请求出错时调用。传入XMLHttpRequest对象,描述错误类型的字符串以及一个异常对象(如果有的话)
- dataFilter 在请求成功之后调用。传入返回的数据以及"dataType"参数的值。并且必须返回新的数据(可能是处理过的)传递给success回调函数。
- success 当请求之后调用。传入返回后的数据,以及包含成功代码的字符串。
- complete 当请求完成之后调用这个函数,无论成功或失败。传入XMLHttpRequest对象,以及一个包含成功或错误代码的字符串。
demo如下:
html代码:
<html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type="text/javascript" src="jquery-1.8.2.min.js"></script> <script type="text/javascript"> $(function(){ $("#send").click(function(){ var cont = $("input").serialize(); $.ajax({ url:'ab.php', type:'post', dataType:'json', // data: "para="+para, 此处data可以为 a=1&b=2类型的字符串 或 json数据。 data:cont, success:function(data){ var str = data.username + data.age + data.job; $("#result").html(str); }, error:function (XMLHttpRequest, textStatus, errorThrown) { alert("请求失败!"); } }); }); }); </script> </head> <body> <div id="result">一会看显示结果</div> <form id="my" action="" method="post"> <p><span>姓名:</span><input type="text" name="username" /></p> <p><span>年龄:</span><input type="text" name="age" /></p> <p><span>工作:</span><input type="text" name="job" /></p> </form> <button id="send">提交</button> </body> </html>
php代码:
<?php header("Content-type:text/html;charset=utf-8"); $username = $_POST['username']; $age = $_POST['age']; $job = $_POST['job']; $json_arr = array("username"=>$username,"age"=>$age,"job"=>$job); $json_obj = json_encode($json_arr); echo $json_obj; ?>
简单的对ajax方法的参数进行一些描述
url (必需)规定把请求发送到哪个URL。
data 可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR) 可选。请求成功时执行的回调函数。
dataType (可选)规定预期的服务器响应的数据类型。默认执行智能判断(xml、json、script 或 html)。
ajax注意方式,如下:
1.data主要方式有三种,html拼接的,json数组,form表单经serialize()序列化的;通过dataType指定,不指定智能判断。
2.$.ajax只提交form以文本方式,如果异步提交包含<file>上传是传过不过去,需要使用jquery.form.js的$.ajaxSubmit