初学JQuery
学javascript也有好一段时间了，以前习惯性用原生的js，觉得那样的兼容性是最好的，所以就迟迟没有学JQuery的js库。直到回家的几天后，无意中开始玩JQuery，才感觉这东西真的是方便极了，虽然听说貌似存在浏览器兼容问题，不过目前还没遇到。现在花点时间把这几天学到的东西整理一下。
常用的JQuery选择器：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$("#id") //选择对应id的元素 $(".class") //选择对应class的元素 $("#id>Element") //选择对应元素下的子级元素，Element可以是标签元素（ul、li、a……）、id、.class等等，可以多级向下查询。 $(".class>Element:eq(Num)") //功能同上，选择.class下符合要求的元素的第Num个。如果是第一个可以写成$(".class>Element:first")， 若只包含一个则可直接写成$(".class>Element") $(obj).find("Element") //向下选择obj的子级元素Element，Element可以是标签元素（ul、li、a……）、id、.class等等，可以多级向下 查询。 $(obj).parents("Element") //向上选择obj的父级元素，Element为父级标签元素。 |
常用的绑定事件：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
$("#id").click( //鼠标点击事件 function(){ } ); $("#id").hover( function () { //鼠标移上去触发的事件 }, function () { //鼠标移开触发的事件 } ); $("#id").keyup( //键盘按键松开触发事件 function(){ } ); $("#id").keydown( //键盘按键按下触发事件 function(){ } ); |
常用的方法：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
$("")addClass(".class") //加入.class样式 $("")removeClass(".class") //移除.class样式 $("").css("属性","属性值") //更改元素属性值 $("").html(data) //更改元素下的HTML $("").html() //获取元素下的HTML $("").append(data) //在元素后的HTML再加上data $("").offset().top/.left //获取元素相对于页面的顶部和左边距 $("").size() //获取元素的个数 $("").toggle() //元素隐藏和显示 $("").hide() //元素隐藏 $("").show() //元素显示 $(document).ready( //页面加载完后执行 function(){} ); //AJAX请求 $.ajax({ type: " ", //数据提交方法，POST或GET（长度限制） data: " ", //发送请求参数，例如a=1&b=1&c=2 dataType: " ", //此项未写则默认接收数据为文本格式，也可以设置为其他类型如json url: "", //提交到的页面地址 beforeSend: function(XMLHttpRequest){ //发送请求前的操作 }, success: function(data, textStatus){ //请求成功后的回调函数，data是返回的数据, testStatus表示状态码 }, error: function(){ //请求出错后的操作 } }); //取消内外层嵌套事件影响（事件冒泡） function cancleUpEvent(event){ if (event.stopPropagation) event.stopPropagation(); //基于firefox内核 else window.event.cancelBubble=true; //基于ie的写法 } |
