![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
jquery1.8
chongqingnantian
这个作者很懒,什么都没留下…
展开
-
一、jquery初步
在页面中引入这个js文件<script type="text/javascript" src="jquery-1.8.3.js"></script> $(document).ready(function(){ alert("hello jquery");});等同于window.onload = ready;function ready(){};...原创 2012-07-16 00:21:44 · 64 阅读 · 0 评论 -
十八、mouse
/* * 当时有mouseover的时候,如果从父类移到子类依然也会得到 * 一个父类的mouseout事件,很多时候这种处理是不需要的 * 所以在JQuery中通过mouseenter和mouseleave来替换 */// $("#parent1").on("mouseover mouseout",function(event){ // print(event.type+","+thi...原创 2013-05-08 09:19:37 · 58 阅读 · 0 评论 -
十九、标准动画
// $(".topicList h3").click(function(){ // var uln = $(this).next("ul"); // if(uln.css("display")=="none") { // uln.css("display","block"); // } else { // uln.css("di原创 2013-05-08 09:20:03 · 80 阅读 · 0 评论 -
二十、animate
$("#go").click(function(){ $("#block").css({"font-size":"10em","position":"relative"}).animate({ width:1000, opacity:0.5 }, 'slow' );}); 实现图片的轮换 <style>原创 2013-05-08 09:20:14 · 184 阅读 · 0 评论 -
二十一、$和其他库的冲突问题
$(function() { /* * 在jQuery中$符号仅仅只是一个别名,当使用$引用的时候其实等于使用jQuery引用 * 此时带来的问题就是,其他的很多js框架(prototype之类的框架)都习惯用$来引用 * 自己的关键对象,此时如果多个js库并存的时候,就会发生冲突 * 在JQuery中定义了一个noConfilct()方法来解决冲突,当使...原创 2013-05-08 09:20:24 · 69 阅读 · 0 评论 -
二十二、常用工具
//检查版本是否是IEalert($.browser.msie);if($.browser.msie) { //获取IE的版本号 alert($.browser.version);}var person = {name:"校长",age:29};//不仅可以遍历数组,还可以遍历对象,如果遍历的是数组,只有一个参数//遍历对象有两个参数$.each(person,function(k...原创 2013-05-09 10:12:40 · 57 阅读 · 0 评论 -
二十三、extend
//会用第二个参数来覆盖第一个参数,没有的就不进行覆盖。第二个不会有变化 //合并 settings 和 options,修改并返回 settings。var settings = { validate: false, limit: 5, name: "foo" };var options = { validate: true, name: "bar" };jQuery.extend(sett...原创 2013-05-09 10:12:56 · 62 阅读 · 0 评论 -
二十四、数组工具
/* * grep有两个参数,第一个表示元素值,第二个表示索引 */var as = $.grep([1,2,3,4,5],function(n,i){ return n%2==0;});alert(as); var as = $.grep($("table tr"),function(n,i){ //也可以传入包装集 return $(n).find("td"...原创 2013-05-09 10:13:11 · 51 阅读 · 0 评论 -
二十五、插件的定义
插件命名:使用jquery.命名空间.js$符号的冲突问题:(function($){ $.say = function(hello) { alert("helllo "+hello); }})(jQuery)//传入jQuery作为参数复杂插件的参数问题:(function($){ /** * 如果有一个插件,参数很多,而且很多参数并不是必须的 ...原创 2013-05-10 13:57:56 · 93 阅读 · 0 评论 -
二十六、基于包装集的插件
要定义基于包装集的插件,完全可以使用jQuery.prototype = xx$().xx在jquery不建议使用jQuery.prototype来定义包装集的插件,jquery专门定义了一个jQuery.fn = jQuery.prototype(function($){ /** * 使用$.fn来创建包装集插件 */ $.fn.setColor = function...原创 2013-05-10 14:54:59 · 149 阅读 · 0 评论 -
二十七、ajax处理方式---load
load(url,[data],[callback])$(function(){ //1、创建Ajax的方式,可以直接为包装器创建,这样,ajax之后的内容会自动加载到包装器中 /* 在URL中可以通过空格来插入相应的选择器,以下表示去01.html页面中获取id为c的元素加载进来 */ //$("#content").load("01.html #c"); ...原创 2013-05-10 15:22:59 · 66 阅读 · 0 评论 -
二十八、ajax处理方式---get/post
jQuery.get(url,[data],[callback])通过远程 HTTP GET 请求载入信息。这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。 jQuery.post(url,[data],[callback])通过远程 HTTP POST 请求载入信息。这是一个简单的 POST 请求...原创 2013-05-10 16:01:02 · 67 阅读 · 0 评论 -
二十九、ajax处理方式---ajax
在get和post不满足要求的时候可以使用$.ajax $(function(){ $.ajax("01.html",{ type:"POST", success:function(data,textStatus){ alert(data); alert(textStatus); } });...原创 2013-05-13 10:03:30 · 75 阅读 · 0 评论 -
三十、deferred
JQuery的1.5之后提供了Deferred和Promise两个对象来处理相应的同步请求在1.5之前,当调用了一个ajax之后,会返回xhRequest。在1.5之后就返回promise对象,promise对象可以来获取不同情况的处理方式 //调用ajax之后返回的是一个promise对象。可以通过这个对象来进行成功或者失败之后回调处理//var promise = $.ajax("...原创 2013-05-13 11:05:07 · 72 阅读 · 0 评论 -
三十一、为function创建deferred
function wait() { //setTimeout是异步,如果需要保证可以进行同步操作 //需要通过promise来操作,通过$.Deferred对象的.promise()方法可以获取promised对象 var def = $.Deferred(); setTimeout(function(){ alert("invoke"); //...原创 2013-05-14 09:49:21 · 64 阅读 · 0 评论 -
十七、delegate和on
/* * 由于live事件写法很怪,所以在1.4之后提供了delegate来完成事件委派 * $("#content")表示的是作用域,第一个参数表示的是绑定对象 * 此时live就不再被使用了,在未来的版本live会被取消 * 目前如果要做事件委派可以有多种方法,使得事件的调用选择很多,JQuery在1.8之后 * 就统一使用on和off来替代bind,live和delegate */$("...原创 2013-05-08 09:19:24 · 76 阅读 · 0 评论 -
十六、live和事件委派
$(".ccc").live("click",function(event){ alert($(this).html());});/* * 使用了Live事件之后,就有效解决了新元素无法绑定的问题 * live事件存在的原理是通过事件委托的方式 * 事件委托是通过冒泡机制实现的 */$("#content").append("<div class='ccc'>bbbbb&...原创 2013-05-07 15:49:28 · 94 阅读 · 0 评论 -
二、JQuery对象和DOM的转换
$(function(){ //目前是一个javascript的对象,对于该对象而言,无法使用jquery的方法 var hello = document.getElementById("hello"); //是js的对象,不能使用jquery的方法 // hello.css("color","#f00"); //使用$(x...原创 2013-03-24 16:12:42 · 61 阅读 · 0 评论 -
三、选择器--基本选择器
//取li中的所有a $("li a").css("color","#f00"); //取class为.myList这个标签的下一级标签li的下一级标签为a的节点 // $(".myList>li>a").css("color","#f00");原创 2013-03-24 17:04:53 · 88 阅读 · 0 评论 -
四、选择器--位置选择器
//页面中最先匹配的某个元素 //alert($("li:first").html()); //页面中最后匹配的元素 //$("li:last").css("background","#f00"); //获取满足要求的第一个li //$(".myList...原创 2013-03-24 20:14:46 · 160 阅读 · 0 评论 -
五、选择器--常用选择器
例如原创 2013-03-24 20:38:08 · 82 阅读 · 0 评论 -
六、包装集
JQuery包装集指的是:通过$("exp")会筛选出页面的一组满足表达式的元素,这一组元素就属于JQuery包装集中的元素比较常用的一些方法有:获取包装集中的元素个数(size()),通过某个下标获取包装集中的某个元素(get(index)),某个某个元素在包装集中的位置(index(ele)) size|get|index//获取tr的元素个数//alert($("tr").le...原创 2013-03-27 22:24:11 · 68 阅读 · 0 评论 -
七、has|each|map
/* * 通过map可以有效的将某个包装集中的元素转换为数组 */var ps = $("tbody td:nth-child(1)").map(function(){ var n = $(this).next("td"); var p = {"id":$(this).html(),"name":n.html()}; return p;}).get();for(var i=0;...原创 2013-03-29 10:27:20 · 69 阅读 · 0 评论 -
八、属性操作
$(function() { $("tbody tr").each(function(n){ //使用attr只加入一个参数可以获取属性值 //alert($(this).attr("id")); //通过attr()设置两个参数,可以完成对某个节点的...原创 2013-04-02 22:06:41 · 71 阅读 · 0 评论 -
九、设置样式
addClass,removeClass, toggleClass //添加一个样式,removeClass是移除一个样式,结果为class="addBg bigger",多个样式$("thead tr").addClass("addBg").addClass("bigger").removeClass("addBg");//判读是否存在某个样式alert($("thead tr&quo原创 2013-04-02 23:16:14 · 56 阅读 · 0 评论 -
十、节点操作
html内容html()text()//把d2中的html替换d1中$("#d1").html($("#d2").html()); //text方法仅仅只是获取文本,而不会获取标签信息$("#d1").html($("#d2").text()); 节点处理除了clone之外,所有的节点处理完成之后返回的都是原包装集append,appendTo;prepend,prepe...原创 2013-04-18 10:40:25 · 62 阅读 · 0 评论 -
十一、操作表单
//获取表单的值//alert($("#username").val());//设置表单的值// $("#username").val("我来了");//alert($("input[name='password']").val());//checkbox得到的是一个数组,需要进行遍历// $("input[name='interest']:checked").each(function(n){ ...原创 2013-04-18 16:03:29 · 76 阅读 · 0 评论 -
十二、jquery事件简介
$(function() { $("#child").bind("click",function(event){ //使用JQuery把浏览器之间的问题全部屏蔽了 //所使用的事件模型是DOM2 print(event.target); }); //使用JQuery可以有效的通过第二个参数来传递相应的JSON参数进去 $(...原创 2013-05-07 15:14:16 · 66 阅读 · 0 评论 -
十三、bind
//可以通过空格绑定多个事件$("#child").bind("mouseover.test mouseout.test",function(event){ $(this).toggleClass("bgc");});//取消了mouseout事件//$("#child").unbind("mouseout");//可以为一组事件增加一个命名空间,在事件之后通过.来增加,//在移除事件的时...原创 2013-05-07 15:20:19 · 75 阅读 · 0 评论 -
十四、one
//仅仅只会执行一次$("*").one("click",function(event){ print(event.currentTarget.id+"--"+event.target.id);})function print(txt) { $("#content").append(txt+"<br/>");}原创 2013-05-07 15:21:47 · 73 阅读 · 0 评论 -
十五、trigger和triggerHandler
$("*").bind("click",function(event,a,b){ print(event.currentTarget.id+"--"+event.target.id+":"+(a+b));});$("a[href='ccc']").bind("click",function(event){ /* * 使用trigger带来的好处有两个 * 1、原创 2013-05-07 15:31:26 · 93 阅读 · 0 评论 -
三十二、pipe
/*pipe表示可以返回一个promise对象,这样就可以支持链式编程第一个pipe的返回值会传入到第二个pipe的参数中只要有一个pipe返回了reject之后pipe默认都是返回reject的最后会在fail中处理*/$("#content").promise().pipe(function(data){ //this就是包装集对象 //$(this).html("abc"); ...原创 2013-05-14 09:57:40 · 81 阅读 · 0 评论