初学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的写法 } |