JQuery

JQuery

 

 $函数

 $("#box").css("background-color","red");

一定要加引号，只有

1     $(this)

2     $(document)

3     $(window)

 

$("#box")[0].style.backgroundColor = "red";    //$(“#box”)是jQuery对象，而不是JS原生对象。加[0]就能转为原生对象
没有引号。

 

jQuery("#box");   $与JQuery是相同的，为了方便一般使用$

 

jquery选择器与删选器

选择器：Jquery支持CSS2.1，也支持部分CSS3

 

删选器：

$("div:first")    //选择首个项

$("div:last")     //选择最后一个

$("div:eq(0)")    //单独选择一个

$("div:lt(4)")    //小于4的项

$("div:gt(3)")    //大于3的项

$("div:odd")      //所有奇数项

$("div:even")     //所有偶数项

 

CSS()方法

$(“p”).css(“background-color”);          //得到css样式：背景颜色

$(“p”).css(“background-color”,”red”);         //设置css样式：背景颜色

 

$(“p”).css({             //如果想设置多样式就使用json写

       “width”:500           //设置宽度为500,单位可以不写，也可以写

});

 

Animate()方法

        $('.box').animate({'left':500},2000);     //向右移动500px

       

        $('.box').animate({'left':500,'top':500},2000);   //设置向右与向下两个参数，同时运行，向右下角平移500px

       

        $('.box').animate({'left':500},2000,function(){     //向右移动500px，同时设置一个回调函数

            $('.box').animate({'top':500},2000);       //移动结束后，向下移动500px；

        });

 

JQuery事件

jQuery事件不带ON，例如：原生js的onclick事件变成click

 

JQuery常用事件：

鼠标触摸(悬停)：Mouseover(包括子元素) ==> mouseenter(不包括子元素)

点下鼠标：mousedown

释放鼠标；onmouseup

点击完成：click

双击事件：dblclick

鼠标离开：mouseout(包括子元素)==>mouseleave(不包括子元素)

获取鼠标位置：mousemove

 

例：

$('#box').click(function(){             //JQuery方式设置一个点击事件

       //点击发生的事件处理代码

});

 

JQuery-序与迭代

$(‘p’).eq(0)    //单选,与选择器eq相似

 

$(‘p’).index();         //返回在亲兄弟下的排名，不论什么选择器

 

$(‘p’).each( function(i) { });    //表示遍历节点，全部遍历，后面的函数方法表示遍历后运行的事情，此时方法里面$(this)指向遍历的数；

 

$(selector).length   //length 属性包含 jQuery 对象中元素的数目。与size方法相似，推荐使用这个

 

$(selector).size()     //方法返回被 jQuery 选择器匹配的元素的数量。

 

$(selector).get(0)  //获得指定的元素。里面的值可以是index

 

动画相关的方法

$(‘div’).show();       //让一个本身是display：none元素显示

$(‘div’).hide();        //隐藏元素display：none

 

$(‘div’).toggle();     //自动判断，如果可见就隐藏，否则显示。

 

$(‘div’).slideDown();      //下滑展开

 

$(‘div’).slideUp();           //上滑回收

 

$(‘div’).slideToggle();            //滑动切换(与togle方法类似)

 

//以上几个可以传递两个参数，第一个是效果时间，第二个为一个回调函数

 

$(‘div’).fadeIn();      //淡入效果

 

$(‘div’).fadeOut();   //淡出效果

 

$(‘div’).fadeTo();     //淡到那个数

 

$(‘div’).fadeToggle();     //淡出入切换

 

//fadeto拥有三个参数，第一个是动画时间，第二个是要变到的·透明度，第三个为回调函数，fadeTo的起点不一定是display:none

 

$(‘div’).delay(1000).togle();    //延迟一秒再运行

 

$(‘div’).stop();        //停止当前的anmiate动画，但是不清除队列，立即执行后面的animate动画

 

$(‘div’).stop(true);         //停止当前的animate动画，并且清除队列

 

$(‘div’).stop(true);         //瞬间完成当前的animate动画，并且清除队列

 

//stop(是否清除队列,是否瞬间完成当前动画) 默认为false

 

$("div").finish();             //瞬间完成所有动画队列

 

$("this").is(‘.t’);        //是否含有t类

 

$("this").is(‘p:let(3)’);             //判断点击这个的p是否小于3

 

//注：is里面可以写筛选器

 

JQuery节点关系

$('.box').children(); //获得所有子元素，屏蔽兼容性问题，不用考虑兼容性问题，可以传递一个参数，对子元素进行筛选

$('p').find();     //查找所有子元素及子元素得后代，先找到的第一个元素排0，以此类推，和children一样可以传递一个参数，进行筛选

$('p').parent();       //查找父元素，任何元素只有一个父元素

$('p').parents();      //查找所有祖先节点

siblings();       //查找所有兄弟元素     可以传递参数(选择器，筛选器)进行筛选

 

prev()、next()、prevAll()、nextAll()

//前一个、后一个兄弟、前所有兄弟、后所有兄弟

总结：JQuery屏蔽所有的不兼容，只选择nodeType=1的元素，不选择文本。注释等等并且不用for循环，一次性得到所有东西

 

JQuery节点操作

$('.box').append('<p>Text5<p>');//添加节点,无需createElement创建节点，相当于使用innerHTML直接添加

$("<p>Text6</p>").appendTo('.box');        //表示被动添加，即与append相反，将子节点添加到父节点

             

$('.box').prepend("<p>Text7</p>");    //将节点添加到第一位

$("<p>Text7</p>").prependTO('.box');      //表示被动，将节点添加到第

             

$('#p').after("<h3>这是H3</h3>");    //插入兄弟节点，插入之后

$('#p').before("<h4>这是H4</h4>"); //插入兄弟节点，插入之前

             

$('<p>Text11</p>').insertBefore($('p')[2]);        //被动，插入兄弟节点，插入之前

$('<p>Text22</p>').insertAfter($('p')[2]);    //被动，插入兄弟节点，插入之后

             

$('a').wrap("<b></b>");使用b标签包裹起来

$('a').wrapAll("<b></b>");    //全部使用b标签包裹起来

             

$('.box').empty();    //删除(清空)所有内容

             

$('p').remove();      //删除页面所有的p标签

             

$('.box').append($('p').eq(0).clone());   //克隆节点，并添加

 

JQuery的AJAX操作

//无参get请求

$btns.eq(0).click(function(){

       $.ajax({

              type:'get',       //定义提交的类型

              url:'AjaxBackend.php',  //提交的url地址

              dataType:"json",    //声明传输数据为json类型

              success:function(res){   //提交成功后，后代返回数据将会运行本函数

                     console.log(res);    //将后台返回的数据打印出来

                     alert(res);

              }

       });

});

 

//有参的get

$btns.eq(1).click(function(){

       $.ajax({

              type:'get',       //定义提交的类型

              url:'AjaxBackend.php?username='+$userNameInput.val()+'&password='+$passWordInput.val(),    //提交的url地址

              dataType:"json",    //声明传输数据为json类型

              //有参的请求说明：只需在url地址后面加“?”后面的多个参数可以使用” & “相加就可以提交

              success:function(res){   //提交成功后，后台返回数据将会运行本函数

                     console.log(res);    //将后台返回的数据打印出来

              }

       });

});

 

 

//提交post参数

$btns.eq(2).click(function(){

       $.ajax({

       type:'post',     //定义提交的方式为post

       url:'AjaxBackend.php',  //提交的url地址

       dataType:'json',     //声明传输数据为json类型

       data:{      //post请求独有的字段，目的是存放post数据的参数，格式为json

              uname:$userNameInput.val(),　　//uname为自定义字段，只要前后台约定好，可以随便写

              upass:$passWordInput.val()

       },

       success:function(res){　　 //提交成功后，后台返回数据将会运行本函数

              console.log(res);

       }

       });

});

 

表单的系列化

$("form").serialize();生成一个字符串,各参数用&符号拼接

$("form").serializeArray();将参数生成一个数组对象